Every website has the potential to deliver ever-better results. The trick? Continuous evolution. Your digital presence should be a living thing that’s always adjusting to stay relevant and valuable. 

I like to think of a website as a houseplant. Give it some tender love and care and you’ll be rewarded with freshness and growth. But neglect it or add the wrong things and you’ve got a mess on your hands. 

This article explains how to nurture your digital platform, with a focus on Drupal sites. You’ll also learn how to avoid common pitfalls that weaken the user experience. Here’s what we’ll cover:

• Preparing your team to update your site
• Creating a strategic plan for new pages 
• Structuring new pages with web components
• Creating compelling content
• Using WYSIWYG for unique content needs

Preparing Your Team

Make sure your whole team is on the same page and following the same ground rules. This will help you save time and money, ensure consistency and quality, and ultimately set you up for success. 

Here are some tips to get your team ready:

• On-board: Familiarize team members with your style guide and branding guidelines, as well as your site’s design, structure and web components.

• Train: Ensure web editors and developers understand how Drupal works and give them time to practice. Consider building your in-house expertise with Drupal training. 

• Manage: Create clear processes for approval and quality control. Ensure team members have the appropriate permissions in Drupal. 

Creating a Strategic Plan

Before you create a new page (or update an existing one) you need to figure out its overall goal. What value does it offer to users? Where are they going next? What business objectives are you hoping to achieve?

Ensure new pages have a purposeful place in your site architecture, your brand story and the user journey. Pin down the key messages and calls to action you need to convey. 

Don’t be tempted to skip or rush this stage. It’s all too easy for websites to get bogged down with pages that do little to enhance the user experience – or worse, impair it. 

If you’re lacking the internal capabilities to plan new pages, consider adding a digital strategist to your team, investing in content strategy training or hiring an agency for your digital strategy needs

Structuring the Page Using Web Components

Once you know why you need a new page, you can start structuring and visualizing it. Create mockups and wireframes using a tool such as Miro or Figma. It’s important to leverage the brand elements and web components that are available to you. 

Brand elements are tangible representations of your brand identity and character. They can include your logo, typography, colour palette, and shapes. Featuring them will create a recognizable look and feel and help you build brand equity. 

Web components are powerful tools for creating balanced and visually striking pages. They allow for variation and creativity while helping you maintain consistency across your platform. 

Here are some tips to make the most of your web components:

• Tell a story. Choose components that enhance the message you want to convey. Structure them in a way that creates a clear narrative on the page. 

• Use variety. If you need to use the same component twice, try a different background colour or image alignment (left / right) to create contrast.

• Hire a digital strategist or UX designer. It’s worth getting help from an expert to translate your strategy into a meaningful user experience. 

Creating Compelling Content

Consider developing the content and wireframes in parallel and incrementally to ensure they work together. At the very least you should have an idea of the key messages you want to convey in each section when you structure the page.

The quality of your content has a huge impact on the success of a new page. Here are some tips to ensure your message makes its mark: 

• Write for components. Think about how the content will fit. Check character count specifications and avoid forcing components to adapt to your copy.

• Use a consistent style. For example, if you use title case for headings then make sure this is applied to all of them. Give content creators clear style guidelines to prevent inconsistencies that may take a lot of time to fix.

• Avoid ‘orphans’. These are single words on their own line. It’s possible to add non-breaking spaces in the front-end but this isn’t best practice. 

• Make it easy to read. Follow best practices for writing for the web such as using the active voice and keeping paragraphs short. It’s worth hiring a copywriter if you don’t have one in-house. 

• Consider the translation. If your website is bilingual, think about how the content will look when it’s translated. For example, a French version is usually longer than an English version.

• Select images carefully. Ensure images are high-quality and aligned with your organization’s offering and personality. Prepare them to fit the component specifications. 

• Finalize content outside Drupal. Ensure copy and images are approved before you populate the new page with them.

Using WYSIWYG for Unique Content Needs

WYSIWYG stands for “what you see is what you get.” The WYSIWYG Editor can give you more creative freedom than web components. But this brings a higher risk of breaking the design or creating accessibility issues. Try not to use WYSIWYG unless absolutely necessary, such as for content-heavy pages and unique content needs. Include web components on WYSIWYG pages wherever possible. 

Here are some tips to help you use the WYSIWYG Editor successfully:

• Test the page on all devices. Ensure the content looks good across desktop, tablet and mobile. Look at each breakpoint carefully before publishing a page.

• Add images to make the content more engaging. Try to use large images or videos that fill the container for a bolder and more balanced composition. 

• Prepare images carefully. Remember that the WYSIWYG Editor doesn’t necessarily adapt images to specific sizes. Use a consistent ratio and size.

• Follow your style and branding guidelines. Pay attention to things like typography, heading and link styles, colour palettes, and buttons.

• Optimize web accessibility. For example, use headings (H1-H5) in chronological order so you don’t cause issues for screenreaders.

• See if you need new components. If you find you often have to use WYSIWYG to meet your content needs, consider getting new web components created instead.

Need More Guidance?

This article gives you a strong starting point for maintaining and growing your digital platform.

Need specific advice?

The way companies are developing their products is changing. That’s because more people are accessing websites in more ways than ever before. To create and innovate at a faster pace, developers are leveraging reusable components. Pattern Lab is one such front-end framework that uses atomic design architecture to execute the component-based design. Reusability and portability of components are the prime reasons for its fast-gaining popularity. 

In this blog, we’ll cover what Pattern Lab is, and how developers can use it with Drupal to create their own frontend library and accelerate their product development. 

What is Pattern Lab?

Pattern Lab is based on Brad Frost’s Atomic Design concept. Pattern Lab proves to be one of the best dynamic prototyping and organization tools for professionals. It is easily available for download on GitHub and can be used as part of existing or new projects. 

It helps in transforming pattern templates, authored by developers, into a full-featured, static site. Easy to learn, it can be used in different types of projects. In fact, it can also be used as a front-end style guide, a rapid prototyping tool, and the actual templates powering one or more live sites. It uses atomic design for accelerating the process of creating modular designs.

Now, let’s break down the above visual building blocks:

• Atoms: They are the basic building blocks of design. For example, UI elements such as buttons, search fields, form elements, and labels.
   
• Molecules: These are groups of atoms that work together for performing a particular action. For example, search navigation involves a combination of atoms such as a search button, a search field, and a label.
   
• Organisms: These are molecules and atoms grouped together to define sections of the application. They’re more complex and also have more interactions. For example, a footer a header, or a related blog post section.
   
• Templates: Groups of organisms form Templates. They are placeholders for organisms. For example, a login page template, a blog page template, or a shopping cart page template.
   
• Pages: When we combine a template with real content, we get a page.

Pattern Lab with Drupal

Pattern Lab has become popular in the Drupal community, since the release of Drupal 8 with Twig. The combination of Pattern Lab and Drupal leads to better performance of Drupal websites that are complex in nature. Pattern Lab ensures that its Twig templates and CSS can be consumed like a service by Drupal.

Contributed theme such as Emulsify Drupal that comes with inbuilt the Pattern Lab architecture. Emulsify is basically a component-driven prototyping tool that uses atomic design principles and modern frontend practices in order to build a living style guide. It can be executed easily into any CMS for rendering twig files since it adopts the methodology where the smallest components are atoms, which are assembled into organisms, molecules, templates, and pages.

Emulsify authorizes us to manage and assemble components in a way that improves the workflow by integrating Pattern Lab. So, the Emulsify-based project works with custom template names that are very particular to the project, clients, and developers. This helps in segregating the category-wise patterns (modules) and also increases the expertise of the process.

When the templates are ready for production, Emulsify then connects them to Drupal in a non-complex way as a Twig function (include, extend, or embed) and connects the Drupal templates to the component files.

Emulsify prioritizes a "living style guide" approach where the style guide components are basically the same ones in use on the live websites. And we do not need to worry about the components becoming outdated or more unusual than the normal style guide.

Why should we use Pattern Lab?

Let’s now look at why should we use Pattern Lab.

1. Dynamic Data: Patterns are supposed to be authored to work with dynamic data. Example data files are easily customizable, included, and available to templates. Also, we will find a global set of data and the capability to customize per component, and variant. This will further encourage writing templates in such a manner that they can also be used outside of the pattern lab, with real data.
    
2. Organization and Presentation: A high-level structure, or groups, based on "Atomic Design" principles is offered in Pattern Lab. We can choose to work within that structure or change the terminology to whatever fits our wants by directly renaming file system directories. These groups happen to turn into dropdown menus, that expands in order to show all the pattern templates in that group and also allow navigating to them. This indeed makes it very simple for the team members to browse and discover what patterns actually exist.
    
3. Proper documentation: Documentation can be easily added at group and component levels, as wished, by simply adding a markdown file, with the same name. This documentation happens to be exposed in the static site, along with the source code of the template.
    
4. Variants: It’s very common to have several variants of a pattern. For instance, in a typical "Hero" pattern we might just have a "light" and "dark" version. So, basically, Pattern Lab supports variants, which it calls "Pseudo Patterns" and displays them very clearly in the static build. 

Conclusion

By implementing Pattern Lab, teams can quickly prototype and iterate without multiple rounds of expensive redesigns with the help of traditional design flats. It enables us to be more efficient when it comes to multi-device testing and cross-browser and also makes the job of a front-end developer a lot easier and more fun. 

Pattern Lab supports keeping designers, developers, and stakeholders on track in regard to visual decisions. So, if we prioritize brand consistency, and value design, and wish to have a website that works in a very effective way both on the front-end and the back-end then Pattern Lab is the right choice.
 

• 

  The new features and improvements in Drupal 10

• 

  The state of Drupal Community Health in 2022

Since Drupal 8, upgrades to the subsequent versions are meant to be way easier than in the past. And by all accounts, that’s been accomplished! Even though Drupal 8 to Drupal 9 is a major release and upgrade, it almost feels like a minor release upgrade. There’s no rebuild that needs to be done when updating from Drupal 8.9 to Drupal 9.0 because they are almost the same. Only deprecated code should be removed and dependency libraries (Symfony, PHP, etc.) should be upgraded to the latest version.

If you’re looking for a quick, no-frills checklist article to guide you through your Drupal 8 to Drupal 9 upgrade, you have arrived just at the right place. Take a look!

Tools you will need for an effective upgrade

• Upgrade Status: Install tools like Upgrade Status will give you a list of modules and themes that need to be worked on or are up-to-date.
• Drupal-Check: This one’s a very useful analysis tool that checks for the correctness of classes and reports errors found in deprecated core or contributed modules.
• Upgrade Rector: Install the Upgrade Rector modules as it helps in fixing deprecation errors for the modules installed. It provides code fix suggestions and makes it easy to generate patches for them.

A Compatible Hosting Environment

Now here’s what you need for a compatible hosting environment to welcome your brand new Drupal 9 site:

• Apache version must be 2.4.7
• Php version should be 7.4 or 8
• MySQL version should be 5.7.8+

Using the Upgrade Status Module

Using the Upgrade status module, you can find out what changes you need to make to make your website compatible with Drupal 9.

Go to Admin -> Reports -> Upgrade status. Now select the modules/themes and click on the Scan selected button.

Checklist for a Quick Drupal 8 to 9 Upgrade

1. Make sure the current core version of your website is updated. It should be 8.8.x or 8.9.x.
2. Document the libraries and themes installed on the website. List all the contributed and custom themes that are installed on the website. 
3. Document contributed and custom modules installed on the website. The Upgrade Status module can assist in identifying the modules. This module inspects the website, gives information about the modules compatible with Drupal 9, and suggests updating them to the latest version if any of them have been released. Upgrade Status also suggests removing modules that have been disabled.
4. Identify deprecated code. The Drupal-check module can be used to identify the deprecations for modules and themes.
5. Update the contributed modules. Update contributed modules to the latest compatible version of Drupal 9.
6. Update the custom modules. You will need to manually update the code to make custom modules compatible with Drupal 9. Add the core version requirement key in info.yml file.
7. Update the contributed themes. Update contributed themes to the latest compatible version of Drupal 9.
8. Update the custom themes. To make custom themes compatible with Drupal 9, any deprecation code needs to be removed/updated. Add the core version requirement key in info.yml file.
9. Make sure that the libraries are compatible with Drupal 9. For example, if your website is using the jquery timepicker library then it should be upgraded to the latest version which is 1.14.0 in the composer.json file.
10. Make sure that the unused modules are uninstalled. Remove unused modules using composer.
11. Update the core codebase to Drupal 9. Once all the modules, themes and libraries are compatible with Drupal 9, add drupal/core-composer-scaffold, drupal/core-recommended specifying the Drupal version in composer.json and run the composer update.

Final Thoughts

And that’s it! You have successfully upgraded your Drupal 8 website to Drupal 9. Wasn’t that easy? If you’re looking for further assistance with your Drupal site, talk to our Drupal experts today.

Author: Chaitanya R Dessai

Meet Chaitanya R Dessai, a Drupal Developer who is a Cricket fanatic and dreams about traveling to Switzerland and North America. And if he sees a cool car drive by, nothing can stop him from turning his head for a second look!

Leave us a Comment

Recent Blogs

Things you need for a Drupal 8 to Drupal 9 Upgrade - A Checklist

Getting Started with Layout Builder in Drupal 9 - A Complete Guide

Why You Should Consider Being on Social Media Beyond Your Doubts?

Featured Success Stories

Upgrading and consolidating multiple web properties to offer a coherent digital experience for Physicians Insurance

Upgrading the web presence of IEEE Information Theory Society, the most trusted voice for advanced technology

Great Southern Homes, one of the fastest growing home builders in the United States, sees greater results with Drupal 9

Today we are talking about Being a Creative Director with Randy Oest.

For show notes visit: www.talkingDrupal.com/375

• What is a Creative Director?
• How is being a CD at a technical company different?
• Do Drupal CD’s need additional skills?
• Sometimes things get lost in translation between design and development how do you bridge that gap?
• How do you mentor?
• How do you interview for creative positions?
• Do you hire developers too?
• Optimal makeup for a team.
• Guiding the Four Kitchen’s team
• Inpiration

• NEDCamp Videos
• Bits and Mortar
• WTI Yale
• Sanity
• PenPot
• Quant-Ux
• Four Kitchens

Nic Laflin - www.nLighteneddevelopment.com @nicxvan John Picozzi - www.epam.com @johnpicozzi Randy Oest - randyoest.com @amazingrando

Martin Anderson-Clutz - @mandclu ECA ECA is a powerful, versatile, and user-friendly rules engine for Drupal 9+. The core module is a processor that validates and executes event-condition-action plugins. Integrated with graphical user interfaces like BPMN.iO, Camunda, ECA Core Modeller or other possible future modellers, ECA is a robust system for building conditionally triggered action sets.

I have been using the Drupal dependency injection system for a while now, even giving talks and writing articles on the subject. As the release of Drupal 10 is just around the corner I have been thinking more about how to override dependencies to plugin classes.

I wanted to share a trick to overriding dependency injection that will make your life easier. The Drupal codebase itself does not use this trick, but it seems that many contributed modules have started to use this trick to create plugin classes.

In this article I will go through how to add dependency injection to Drupal classes in two different patterns.

The first pattern will create problems and will require quite a bit more typing and repeating of code. The second pattern is much easier to use and will make life easier going forward.

An Example Block

The following block of code shows a very basic Drupal Block class that doesn't do anything. This will be the basis of the rest of this article.

What I am going to do with this block is inject a service to perform route matching. In Drupal there are a couple of services to do this, but I will be using the current_route_match service to look for the service.

Read more.

This post is for JavaScript developers working on a decoupled site using Drupal CMS’s JSON-API. I as the maintainer of the drupal-jsonapi-params (DJAP2 for short) want to demonstrate how the library solves code readability issues and vastly improves developer experience.