Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough
Dec 15 2020
Dec 15

Every aesthetically pleasing website has a common ground - a good theme. An attractive theme can bring the website’s visuals to life and facilitate you to create a powerful brand identity. But that’s just one part of the story!

The website theme, beyond being beautiful, should cater to great user experiences also. 

And that’s how you prepare a robust yet enticing website - maintaining design & the best usability practices hand-in-hand are the key to increase conversion rates.

The launch of Drupal 9 in June encouraged the community to make it high up on their agenda to revamp its user experience and ensure friendliness for every stakeholder - designers, editors, marketers, and developers, of course. 

With an emphasis on Olivero, a modern front-end theme designed to exhibit the CMS in its best light; front-end developers can expect plenty of benefits from it. 

It will empower them to bring that magical touch to the websites by utilizing their creativity along with modern tools and frameworks to define layout, styles, typography, buttons, color schemes, and many more, to drive the visuals and engagements of the website/ application.

This blog walks you through Drupal's soon-to-be default theme - Olivero and how front-end developers can leverage it for designing a great website.

Olivero and its Benefits

Olivero is going to be a new default front-end theme that is expected to be rolled out in Drupal 9.2. It is designed to give Drupal a flamboyant look and feel. Olivero is also going to be compatible with the Drupal 8 website as a contributed theme.

Currently, Bartik, a ten-year-old theme, initially created for D7, is being used. It is certainly mobile-responsive and had some outstanding features to meet D8’s mobile-first requirements. However, the development has outdated the design. 

Thus, the need for a new front-end theme emerged to showcase Drupal’s strength appropriately.

Drupal Trivia

Olivero is named after a female programmer, Rachel Olivero, an outstanding supporter/ programmer of website accessibility. Sadly, she passed away in 2019. To honor her, the Drupal community kept her name alive with this beautiful theme. The idea is to showcase patience, generosity, and inclusiveness - the qualities of Rachel that the theme should also epitomize.

 

Benefits of Olivero Theme in Drupal 9

The Olivero theme is intended to give Drupal websites an eye-pleasing view apart from ensuring,

  • Simplicity- declutters by eliminating the colors, effects, and visual elements that make the theme look and feel too heavy.
  • Professional look - encompass all the design elements, for instance, negative space and high contrast, to grab users’ attention.
  • Accessibility- designed with WCAG AA conformity in mind, from functionality to layout, to colors, all components will be accessible for everyone. 

Drupal Trivia

The blind federation conducted an accessibility test to evaluate the Olivero theme for visually impaired users. They were happy and satisfied with its design and high responsiveness.

  • Flexibility- facilitates Drupal front-end developers with multiple options to choose from - be it button styles, headers, or logo styles to text titles, and many more.
  • Compatibility - supports modern browsers’ features & various engagement modes. The creators have ensured that the theme supports recent Drupal updates and features for websites such as Layout builder, media embeds, second-level navigation, and many more.

Get the Hang Of Olivero’s Exciting Features

Here are the features of Olivero that you can leverage for designing your next Drupal website-

A. Bright color palette

Websites leveraging Olivero’s color scheme will look beautiful with a base color of bright blue. Besides being attractive, it would boost Drupal’s brand recognition. Several permutations and combinations of darker and lighter colors and shades would provide website improved accessibility.

Screen Shot 2020-12-15 at 11.23.46 AM

A bright color palette in Olivero theme

B. Simple and elegant forms & buttons

The forms and buttons added in the new theme are user-friendly, distinguishable, and accessible. Forms comprise a left color bar, and their labels are placed above the fields to abide by the website accessibility requirements and guidelines. 

The buttons inform users about clickable action. The theme also has a filled primary button style and a secondary button style which is an outlined version of the button.

The buttons’ different modes are present default in Olivero, unlike other themes where you need to define these modes. 

The four modes are- Default, Hover, Focus, and Active

8 rectangles in white background

Button modes in the new theme

C. Typography

Typography provides scale to maintain uniform sizing, line height, and spacing throughout the design. The base font used for body copy is 18px. The size can be tweaked for smaller screen sizes.

Consistency, throughout line height and spacing, has been a key objective when setting the scale for typography.

D. Flexible header and navigation options

Navigation options can cater to any website’s needs. The header can fold into a hamburger button menu when scrolling, allowing the user to access the menu easily on long pages. 

The secondary dropdown menus are also supported by Olivero, thus saving coding efforts of developers unlike Bartik where they need to reinvent the wheel time & again.

E. Vertical Rhythm

Vertical rhythm ensures the correct spacing arrangement of the text. It calculates line-height, font size, and margin or padding to maintain equal space throughout the website. 

F. UI Patterns

The header is designed flexibly so that it can accommodate the text titles and or logos of varied width and height. 

On scroll down, the header will fall into a hamburger-button menu, to let the user access the menu or longer pages.

G. Site branding variations

You can tweak the theme settings to change the background color and width of the site-branding to incorporate different types of logos and long text.

white background with text and boxes

Flexible site-branding options in Olivero

H. Forms

These simple yet modern forms consist of elements that enhance the design, while still being recognizable, usable, and accessible. 

The left color bar highlights the form element and labels are added above the form field to avoid confusion. Form fields have a consistent look to indicate to users that they are a form element. States such as focus, disabled, and errors have also been accounted for.

3 field boxes

Highlighting error state in the form

I. Tables

Table divider lines are designed such that it improves readability. Olivero's theme will also support the responsive table features of Drupal. 

J. Sidebar

Only one sidebar is implemented to stop competition for space on the screen. It improves readability and allows content to look more rich and prominent on the screen. Editors can showcase related posts and other types of utility blocks too. 

The sidebar also offers good support and space.

Text written in white background

One sidebar aimed at improving readability

K. RTL Support

Olivero theme supports right-to-left languages as required by Drupal core. It also supports better display and multilingual functionality. For example, Arabic, Hebrew, Persian, and Urdu support RTL writing and so does Drupal.

text written from right to left in white background

RTL support in Olivero

L. Messages

Messages intent to inform users for they need to consume important information or provide feedback on an action already taken. 

Messages are visible as they are designed with bright colors to highlight the message and yet don’t mess up with the readability of the message itself. 

Text written in white background

Displaying messages per their type (error, alert, and success message)

M. Breadcrumbs

Breadcrumbs in Olivero are placed near the top of the page above the page title to help users keep track of documents or websites. 

A visual cue informs users about more breadcrumbs which they can access later by swiping left to right or right to left. This feature is not part of MVP. 

Text written in white background

Breadcrumbs to keep track of pages

N. Color module

This feature is not part of the initial release. However, this or similar functionality might be included later. 

Challenges That Olivero is Going To solve for front-end developers

Olivero is a modern theme with a magnificent look and feel. It can help front-end developers in simplifying their work. See how-

1. Lighter theme with up-to-date design elements

Unlike Bartik which used outdated graphical elements such as drop shadow and gradient, it uses a layout builder, grid system, hamburger menu, to name a few, to ensure that the site remains lightweight and responsive.

2. Low code

There is little or no coding required in CSS to determine the presentation of a web document and for adding content blocks anywhere. 

There are few other scenarios that simplifies the work of front-end developers -

  • Bartik doesn’t offer a secondary menu while Olivero does. This saves the coding efforts of front-end developers 
  • If any other theme is used, the hamburger menu is not available. Olivero theme is mobile-friendly. It encapsulates the menu automatically via the hamburger menu feature. No coding is required for it.

3. Scalability

Even on enlarging page size, it won’t break. Instead, it would give you a clear view as always. This makes Olivero more responsive.

4. Compatibility with other browsers

Bartik is not compatible with other browsers like Internet Explorer 11 while Olivero is. Front-end developers need not write code separately to ensure the support to all the functionality and features of the browsers. 

5. Code compilation/ testing

Olivero has CSS Grid Layout that can handle both columns and rows. It is a powerful layout system that helps developers write code hassle-free. They can write code in a nested structure to make it compact, easy to understand and increase readability. 

6. Extensibility with PostCSS Standalone technology

PostCSS is an accessible tool that empowers front-end developers to easily contribute to in the form of custom plugins. 

It simplifies the writing of CSS stylesheets by keeping code simple and facilitating understanding of dependent selectors and media queries within the stylesheet. 

During the development of the Olivero theme, there were several PostCSS plugins that were leveraged to make the CSS more readable and reduce the probability of breaking the page.

Conclusion

Olivero is a modern theme that is going to be the new default theme for Drupal from version 9.2. Front-end developers can use this flexible and scalable framework to improve work efficiency and create exquisite websites. 

Figure out how your enterprise can leverage Olivero’s constructive features to empower your front-end developers. Meanwhile, let’s wait for this beautiful theme!

Jun 26 2020
Jun 26

Drupal 9 was launched on June 3, 2020. Given this, it would be necessary for enterprises to upgrade to it later or sooner to acquire complete functionality and retain the ability to receive security updates within the bi-yearly cycles.

In the past, migrating from one version to another has been similar to moving from another CMS to Drupal, bringing in more time and fatigue.

However, the upgrade from D7/8 to D9 is much easier and painless. Let’s dive into more details and understand as to why moving on to Drupal 9 would be a better choice.

Why Should You Upgrade?

With the end of life approaching for Drupal 7 and 8 soon, operating the website on them securely and with complete functionality won’t be a feasible option.

At the same time, it might also be overwhelming for Drupal 7/8 site owners to know that their website will need the upgrade, especially when their site is running absolutely fine; thereby, resulting in confusion among them.

Here are 3 reasons why you should consider upgrading your site to Drupal 9:

  1. The Drupal security team will soon no longer provide support or security advisories, wavering your website’s and its users’ cybersecurity
  2. D7 and 8 releases’ on all project pages will be flagged as ‘not supported’. D7/ 8 may be flagged as insecure in 3rd party scans making the integration with other third-party tools and systems challenging
  3. Leading hosting services providers like Acquia and Pantheon will also soon withdraw their support from D7 leaving you without many options but to assume hosting responsibility for maintaining your application and server level configurations

The good news for Drupal 7/8 site owners is that even when it goes out of official support in November 2022, remaining Drupal 7/8 sites won't stop working at that point.

Should an Existing Drupal 7 Site Be Upgraded to Drupal 8 or 9?

One of the major reasons that more than seven hundred thousand Drupal 7 sites still haven’t migrated to Drupal 8, is due to the known challenges in the migration process. And with the majority of people on Drupal 7, it is quite likely that most of them did not want to upgrade their CMS twice in the span of one year.

A safe bet seems to be migrating from Drupal 7 to Drupal 9. But will the site be secure? Let’s get to know a few facts.

Since D8 and D9 are similar except for deprecated codes removed and third-party updates in D9, it would be a feasible option for enterprises to migrate to D9 instead of D8 - to save them from constantly going through the same process and investing time, money, and efforts unnecessarily.

What’s New in Drupal 9?

There are innumerable capabilities added in Drupal 9 which further will be consistently updated biannually to help enterprises stay up-to-date.

Now once you upgrade your system to D9, you won’t require to make major changes the next time you plan to update it to a newer version. 

Here are some of the new capabilities that are added to D9-

  1. Backward compatible

    Drupal 9 is backward compatible, i.e., it is compatible with its predecessor, Drupal 8. That being said, D9 will be able to use modules, configurations, and data created on D8 of the same software, unlike the case with D7 and D8.
    Additionally, preserving this functionality won’t burden Drupal with historical baggage and so the performance of the system will remain unaffected. The Drupal community has also focused on breaking code and not the data.
    This way, Drupal will remain fast, clutter-free, and yet an up-to-date technology.

  2. Faster and Better Performance

    Drupal 9 has taken it further to extend its support for responsive images, wherein mobiles can display the best-sized images and hence, consume fewer amounts of data.
    In a recent webinar by Dries, he mentioned that Drupal 9.1 onwards versions/updates will witness the innovation and pave the way for faster and better performances of the websites. Drupal 9.1 update is just six months post the release of Drupal 9. Meanwhile, here are some of the features of D9 that you can leverage for efficient workflows-

        A.  BigPipe increasing page view performance and supporting faster initial page loading

        B.  Content Workflow allowing you to define multiple workflows

        C.  Multilingual capabilities

        D.  Structure Content- Drupal 9 comes in with an array of available fields, encompassing phone, email,       data, and time.

  3. Cleaner code base

    Drupal 9 has removed the support for deprecated codes in D8. This implementation will ensure that the code marked as deprecated will no longer be supported and used in the Drupal ecosystem. 
    The motive behind this is to make D9 a cleaner version so that whenever the modules in D8 want to become compatible with D9, they need to first eliminate the deprecated code. 
    Thus, the end result is clear- to make the code more nimble and improve the website’s performance.

  4. Newer Major Versions of Symfony and Twig

    Symfony 3 will be replaced with Symfony 4 or 5 after November 2021. Also, the Drupal community can introduce an upgrade to Twig 2.0. These upgrades will only result in enhanced performance, improved developer experience, and enhanced security.

  5. Panelizer will be removed and replaced 

    What’s new in Drupal 9? Well, the panelizer will be replaced with the Layout Builder, the “star” module of the moment.

  6. Headless CMS

    Drupal 8 and 9 both come with an API-first approach. Dries also mentioned in the webinar that the Drupal community is vigorously capitalizing on Headless CMS so that it can enhance users’ experience with the powerful front-end of the website with Javascript framework like React or Angular. 

The essential features of Drupal Headless CMS are-

  • Front-End Freedom
  • Create Once, Publish Anywhere
  • API-First Approach
  • Easier Resourcing

Drupal 9 is more usable, accessible, inclusive, flexible and scalable than previous versions, with the following updated features-

  • It will be significantly easier for marketers to use D9
  • Simple than ever to maintain and upgrade for developers
  • D9 is experimenting with its headless or decoupled capabilities

Additionally, you can also learn from our previous blog where we have explained how to find and fix the deprecated code - Site Owner’s Guide to a Smooth Drupal 9 Upgrade Experience.

Why Remove Deprecated Code in Drupal 9?

To ensure that the D8 modules remain compatible with D9, it’s typically essential to remove deprecated codes- 

  1. The all-new Drupal 9 ready code gets deployed on Drupal 8 sites and issues can be tested.
  2. It is a continuation of the fully-tested and stable codebase of Drupal 8

With time, the effort is being made to make Drupal better. There are functions that have been around for a long time but will not be a good fit in the latest release. Most were deprecated in Drupal 8.7.0, which will be removed in Drupal 9.

To sum it all, the key to achieving this smooth transition to Drupal 9 is to rollout your migration plan within deadlines and save yourself from any unnecessary hassle later on.

Srijan is working with leading enterprises to help them migrate their digital web properties to Drupal 9 for better user experience. 

If you are also looking for a smooth upgrade/migration process for your enterprise’s system, we are all ears and excited to assist you. Contact Us!

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web