Umami Demo�The Drupal Out of the Box Initiative
This session will cover:
First impressions are incredibly important. �We want to deliver a first impression of Drupal that looks great and showcases Drupal ‘in action’ in a meaningful and inspiring way.
What is Umami and the Out of the Box Initiative?
Umami is an installation profile, sample content and theme that creates a great-looking example website based on a fictional food magazine. Umami is aimed at evaluators and those wanting to learn more about Drupal. Based entirely on Drupal core, Umami demonstrates what Drupal can do ‘out of the box’.
Umami
A demo describing Drupal for:
Evaluators
Technical evaluators and IT teams
Developers and site builders
(and… Drupal features)
The Out of the Box initiative
How did we get here?
The initiative team
There has been a large number of people who have helped make this happen
Some background:
Our issue is 10 years old! #79582�Add sample content to Drupal core
DC Dublin: Angie Byron’s session�How our competitors are kicking Drupal's ass �(and what we can do about it)
DC Dublin: Lauri Eskola’s session�Create new user-facing core theme initiative
Weekly usability meetings since DC Dublin
Sketch by Roy Scholten
Two initiatives merge early 2017 to achieve the simpler, more achievable common goal of delivering a demo for Drupal core:�New theme for Drupal core Initiative�The Farmer’s market tutorial Initiative
The goals for the core demo were to:
A demo that evaluators may easily relate to
A scenario that is suitable for growing with Drupal
A demo that improves the perception of Drupal’s capabilities
Improve the understanding of Drupal core’s flexibility and capability to evaluators and beginners by providing an on-boarding experience
We took the time to plan:
Find a designer by advertising the role�kjay selected for leading the design work March 2017
Design process February 2017 to August 2017
Styleguide September 2017 onwards
Implementation September 2017 to February 2018. Drupal 8.5
The design process:
User stories were created for the various evaluator roles
Content model for MVP was created (Articles, Recipes) #2818741
Wireframing against the content model, weekly discussions
Design of the Umami brand and visuals for community review #2900720
The front page
A design full of sample content to provide an instant, first-time user experience of Drupal. A layout that highlights Drupal’s flexibility and introduces key features of core through a food magazine content model.
Umami�as a
scenario�brand
Magazine style content provides the design impact, leaving the theme light.
And the content provides great flexibility.
What core features are we demonstrating?
Content promotion�Content types & fields�Views�Image styles & responsive images
Menus and search
Blocks and custom blocks
View modes
Menu blocks
Treatment of static vs dynamic content
Recipes are categorised and tagged
Field-based meta information set for recipes and used for linking and filtering
Blocks and custom blocks
Related content to be either by reference, category or term
Another good example of Views and view modes
Lead image used for cards
Ingredients are currently a simple repeating text field. This could be something more advanced in �the future
The recipe content type has been themed in an opinionated way in order to achieve this design. But this breaks when users move fields around, highlighting the need for a stable layout builder in �Drupal core.��The Umami theme is going to be reworked in support of the flexibility layout builder �will provide.
We’re creating our own content
We have created articles, recipes and associated imagery to avoid licensing issues.
Future content ideas include supporting core Media to add audio and video for example.
Drupal’s licensing has been updated...
Umami has helped to get license changes to Drupal core in place so that we can now take advantage of compatible, open source licenses. That means our demo can include web fonts, stock images and more.
Building the demo
Development: The profile
The profile consists of:
Development: Challenges
We could not:
To resolve, we had to:
[theme explanation]
Elliot, do you want to remove this part that Mark would have done?
Accessibility
Accessibility: A11y Design & theme alterations
Accessibility has been an essential part of this project.
This led to design & theme alterations such as:
Accessibility issues are considered a stable blocker.
Getting into Core
Getting into core
To get the profile into core, we had to have approval from:
Our patches had to go through several rounds of review & feedback, plus we had to present a demo to the product managers.
The demo was committed to 8.6.x in January, and to 8.5.x in February as a hidden profile.
Why are things in the designs missing from the theme?
To ease the process of getting Umami into core, we have currently built an MVP of the demo.
We can now look at expanding upon this initial version to include the additional features that were planned.
Future plans
Tour module has been discussed as an important next step. To add descriptions in order to make discovery of features and Drupal concepts effortless.
Original sketch showing concept of inline narrative when the magazine had the working title of Salver
Umami demo: The future
We aim to continue to improve the demo to integrate the new features of core as they become stable, such as:
To add new features to the demo, we raise a drupal.org issue to discuss if it should be included, how it should be used and get feedback from people testing it.
How to get involved
Getting involved: First time contributors
This project had several first-time contributors involved. It was easy to get involved because there was a wide range of skills needed such as designers, content creators and site builders.
navneet0693 has recently been granted scholarship to Nashville due to his work on Umami - congratulations!
Getting involved: Where to look
Drupal.org issue queue:
Component: Umami demo
Tags:
Slack: #out-of-the-box on the Drupal Slack channel
We aim to have weekly Google Hangouts on Monday at 4pm UTC - join us on Slack for more info.
Getting involved: Where we need help
Cross browser testers and fixers
Chefs and writers to provide more content
Developers. eg: downloading images during install - #2936841
Demo the demo
Questions?
Thanks for listening!