May 14 2019
May 14

Long awaited and much needed in the pipeline, the Layout Builder was finally launched in May 2019. With an ambition to create a content tool that can provide more power and flexibility than comparable systems, the Drupal community had been working on a super progressive visual tool for more than a year. Earlier, the digital marketers had restricted templates to work with and were not satisfied with clunky design experiences. However, in the recent launch of Drupal 8.7.0, Dries Buytaert stated that the new layout builder will be able to manipulate different types of content and unleash unique and trend setting features. The feature of layouts for templated and customised content is crucial for websites with large amounts of content. 

For websites with heavy content, the Layout Builder has enhanced Drupal’s ability to handle “structured content” now. 

A man climbing a ladder in the sky


Originally introduced as an experimental module in Drupal 8.5, the primary focus of the layout builder was to develop a drag and drop WYSIWYG tool. Relying on a third-party software was getting painstaking for many and Drupal became one of the first CMS to take this risk. This layout builder offers full compatibility with revisions, workflows, and in-context previews. It is a single, powerful and visual design tool that creates layout templates that can speed up the development process for the site builders. The accessible, mobile-friendly page building tool allows content authors to easily customise individual pages with unique layouts too.

With 123 individuals and 68 organisations contributing, the Drupal 8.7 comes with this promising layout builder.

Advantages of Layout Builder

The shifting focus in the website development has lead to Layout Builder emerging as the most exciting CMS visual design tool. Let’s explore its reasons: 

  • You can create layout templates for a specific content type, such as blog posts, products pages, landing pages, etc. 
  • Layout builder empowers to customise the template layouts and override them on a case-by-case basis. 
  • It enables you to create custom landing pages that are not tied to a content type or structured content. 
  • The tool passes Drupal’s accessibility gate(Level AA conformance with WCAG and ATAG) with a stable state for production. 
  • The updated version in Drupal 8.7 allows streamlining mass-production while supporting unique creation.
  • The drag-and-drop management of your content blocks is now possible with the new layout builder 
  • Additionally, it supports keyboard controls and toggling the content preview on and off to give the content editor complete control of their experience while building their layouts.

With 123 individuals and 68 organisations contributing, the Drupal 8.7 comes with this promising layout builder. Moreover, 40 above individual contributors volunteered for the success of this release. 

Improved Layout Builder in Drupal 8.7

Translation Support

As the layout builder has improved features for translation, there are two approaches that can be taken here:

  • Synchronised approach translation: For multilingual sites that have the same layout, all the content and fields are automated. In other words, any text entered with layout builder is translated automatically for you. 
  • Independent approach translation: On the other hand, if you want different layouts for two different languages or take a localisation approach to the site, you can have independent and individual translations for them too.

Usability 

From Drupal 8.6 to Drupal 8.7, the usability has drastically improved:

  • You can now narrow down the list of block available and add several tweaks to it. 
  • Contextual links are used to add shortcuts. The Drupal community is re-evaluating the usage as it is essential from the UI point of view. 
  • Except for minor alterations, the layout builder now gives real-time updates based on changes made in sidebar.

Accessibility 

The usability is always inter-connected with accessibility. If it isn’t accessible, it is not usable for obvious reasons. The revamped version has features like:  

  • Improved usage of Drupal announce and ARIA attributes.
  • Now you can easily access the keyboard to action commands like save, discard, or revert from anywhere on the page. 
  • The tabledrag can get confusing for many. You can create a tabledrag-based UI to make all changes at once in the layout builder with Drupal 8.7. 

New Media Library

A new, stylish and with a handy user interface, Drupal 8.7 introduces us with numerous improvements in the Media Library:

  • The highlighted design and accessibility of the user interface makes way for inline media creation in the library itself. 
  • The process of searching the media items in the library, from bulk uploading them to the selection of media items and embedding them into the content is also a smooth run with the new version.
  • The Media module also allows reuse of images, documents, efficiently managed drag-and-drop function and provides a more flexible grid and table views. 
  • The media module in sync and stable with this media library and will further improve with the upcoming Drupal 8.8 release.
Screenshot of how to add new media in Layout Builder

Revisions in Custom menu links & Taxonomy

The following revisions in the 8.7.0 release aim to enhance the overall performance of the Layout Builder:

  • It allows the Custom menu links and taxonomy terms to fully participate in the editorial workflows. 
  • They have been revised for improved integration and core support for the Workspaces module with a new Update API for help in conversion of further entity types. 
  • The schema of any content entity type can now be converted between non-revisionable or non-translatable and revisionable or translatable. 

Automatic Entity 

Among many additions, there has been few subtractions as well: 

  • The support for automatic entity updates was removed due to data integrity issues and its conflicts. 
  • The drush entity:updates (drush entup) command stands nullified and the entity changes will now be performed using standard update procedures.

Internet Explorer 9 and 10

The workaround that still existed in D8.5 and D8.6 also gets removed as the *.7.0 release says goodbye to Internet Explorer 9 and 10. The workaround used to allow the inclusion of 32+ stylesheets. 

Check out Buytaert’s demo video showing the Layout Builder in action with Drupal 8.7.0.  

[embedded content]

On the way to Drupal 9

The major release of Drupal 9 planned for June 2020 will open new doors for the layout builder. It will update dependencies primarily on Symfony as the optional support for Symfony 4 is expected to complete by 8.8 version. Further, a better feedback on the compatibility can be obtained as we testing Drupal with updated third-party dependencies in this version. Drupal 8.7.0 also includes an optional support for Twig 2 (for sites that can patch their Composer configuration). 

Conclusion

New improvements in terms of keyboard navigation accessibility, precise permissions, layout overrides, and column width selection has given a stable outlook to the Layout Builder and it is ready to work on live sites. The process of constructing pages “brick by brick” with a combination of elements, configuration of blocks, and drag-and-dropping feature is an easy and enjoyable one. 

Check out the new Drupal 8.7.0 version and share your views with us in the comments! We’d also like to hear from you at [email protected].

 

Mar 03 2019
Mar 03

Consistency is a key element in two things, success and web development and both go hand in hand when working on developing a website, either from scratch or revamping an existing one. What aids this consistency is the ability to recognise a pattern that is often repeated in the process and then followed for achieving a common result.

Raindrops on a patterned fence


Ensuring a consistent and easy to maintain website is one of the biggest headaches faced by large organisations. This is the exact gap where the suggestion of creating a pattern library as the solution can come into the picture.

But what are pattern libraries? And how can they be put to use? Let’s find out! 

Pattern libraries aid in using easy elements and styles in a project in order to document the visual language of a site, promote consistency, provide user control and reduce cognitive load.

What is a Pattern Library?

The primary attraction of a pattern library is that the time taking process of building new features and pages is reduced to a minimum

The importance of Pattern libraries gained attention in the tech space when developers started understanding the benefits of having readymade components for projects. In this era of wanting quick and easy fixes, the primary attraction of a pattern library is that the time taking process of building new features and pages is reduced to a minimum. Thus, the main purpose is to help create consistent websites that are easy to maintain and become a solid part of the design and development process. A pattern library works in a way that it documents all ‘patterns’ (also known as modules) to defines what they look like and how they behave and code.

Style Guides, Pattern Libraries, Design Systems

Style guides, pattern libraries and design systems may hold similar implication for designers and developers, but they exist as individual entities. Also, style guides and pattern libraries( also known as component libraries) may co-exist together to form complete and coherent design systems for a product. Let’s explore the difference between them in detail. 

Typically encompassing a company’s branding guidelines, including components like logo usage, designated color palettes, and editorial tone, a Style Guide is a collection of pre-designed elements to be followed to ensure consistency and a cohesive experience at the end. It is often wrapped as a whole by the company as a deliverable to work with vendors in partnerships. They can directly influence the look and feel of a Pattern Library with the basic difference being that Style Guides can have a standing without data, while Pattern Libraries do rely on some data to function.

On the other side, a Pattern Library often confine static UI elements, being a storage for your components  like articles, headers, galleries, dropdown menu, accordion, and even common web page layouts, like grids. Though style guides do not always worry about context and relationships with data, UI elements and their application in the overall user experience depend largely on context and the interplay with content. Thus, Pattern Libraries focus on interface design, and would not include rules that apply globally to print or other mediums.

This brings us to the Design system joining the dots between a style guide and a pattern library to define the principles relating to the way in which components should exert together. It defines how a layout should work being a form of product documentation which contains everything that helps with delivering the outcome.
 
Often influenced by a style guide, a pattern library usually includes HTML snippets or living documentation for website components which are well-documented and responsive. For instance, pattern libraries can include –

  • Buttons
  • Images
  • Hero 
  • Elements
  • Sliders
  • Galleries
  • Navigation
  • Articles

Why do you need a pattern library?

We have reached an understanding that pattern libraries escalate productivity, but how and in what ways it makes it possible on the ground level? Following are the three-fold benefits of pattern libraries:

Consistency

Development of big sites happens over a prolonged period by a group of developers working on it and requires to be revised regularly. This leads to a fragmented user interface unless everything is in place to ensure consistency.

From Navigation shifts position to form elements, everything has a different format and approach. A pattern library offers a straightforward way to duplicate existing design and functionality on any page of the site for a steady user interface in a fixed frame.

Reusability

If multiple web teams work on multiple sites of different departments in a company, they might end up reinventing the same styles at a considerable cost.

In such cases, a central pattern library can be formulated for reuse functionality and design. A pattern for a particular requirement in the area of responsibility can then be shared with the whole group and also be available for future projects.

This makes a new site or subsection becomes a mere matter of combining these patterns, in much the same way you build something out of Lego bricks.

Easy Maintenance

Having a consistent pattern library that everybody pools from makes the maintenance work easier as seeing all of the pieces in one place makes the task effortless. 

Having coded elements in the same way from the very beginning makes it much elementary for a developer to work on somebody else’s code. Also, for a new developer, work efficiency can speed up by looking at the existing pattern library in use and build the site based primarily on it.

Who is it For?

End User:

From the user’s perspective, websites and products that are familiar and consistent provide a smooth experience along with reducing cognitive load on the user.

Development Team:

For teams to focus on the bigger picture without worrying about pushing pixels, pattern libraries help ship products faster to ensure greater efficiency in internal processes and allowing engineers to re-use existing codes.

Organization:

Providing longevity to big sites which are developed by different people over a prolonged period and revised regularly, Pattern Libraries proves to increase the productivity of the organisation at large.

One of the more popular Pattern Libraries, a static site generator called Pattern Lab, is based on Brad Frost’s Atomic Design concept. There are many others to choose from, but this blog will focus on Pattern Lab being a dynamic prototyping and organization tool.

Pattern Lab is available for download on GitHub and can be used as part of your existing or new projects.

Pattern Lab + Drupal 8 = Emulsify

Logo of Pattern Lab and Drupal = ‘Emulsify’ on a blue background


Emulsify is a component-driven prototyping tool that uses atomic design principle and modern frontend practice to develop a living style guide. It can be easily implemented into any CMS to render twig files as it adopts the methodology where the smallest components are atoms, which are assembled into molecules, organisms, templates, and finally pages.

With the shift for templating in Drupal 8 to Twig, a whole new range of tools are now available for theming.

Emulsify authorises you to assemble and manage components in a way that enhance your workflow by integrating Pattern Lab. The Emulsify based project works with custom template names that are specific to the project, developers, and clients. This segregates category-wise patterns(modules) and increases the proficiency of the process.

Emulsify authorises you to assemble and manage components in a way that enhance your workflow by integrating Pattern Lab

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

Emulsify swears by a "living style guide" approach where the style guide components are the same ones in use on the live site. One doesn’t have to worry about the components becoming obsolete or looking unusual than the style guide.

Also, the components constructed with Emulsify are used on any project, with or without Drupal. In simpler terms, it can be used with any CMS that renders content with Twig, including WordPress. This provides an opportunity to work with any frontend expert in a development team as they will be only working with familiar technologies. However, if your project doesn't use Twig, Emulsify can still be used by designers and front-end developers to build a style guide and then be carried forward by backend developers.

In Conclusion

Though building a pattern library demands a lot of work, but once set, it eases the process for all future projects. You can always take baby steps and start small, with just a lightweight overview of the main patterns and modules, without any detailed documentation. Later, you can always progressively refactor and upgrade the pattern library over time by adding features according to the team need.

Aiming for a full-proof pattern library that solves all problems at once might take a year-long project’s time without immediate, tangible benefits to extract from. 

We at OpenSense Labs provide best of Drupal services in enhancing your development in respect to industry standards. Mail us at [email protected] to connect and know more.

Feb 28 2019
Feb 28

Change is the only constant. That’s the lesson we need to adopt when it comes to embracing Drupal 8 and migrating from Drupal 7. Since the launch of Drupal 8 in 2015, many new challenges have emerged among developers and one of them includes forking Drupal.

Three forks and their shadows falling on a green background


Quoting Dries' opinion on embracing change:

“The reason Drupal has been successful is because we always made big, forward-looking changes. It’s a cliché, but change has always been the only constant in Drupal. The result is that Drupal has stayed relevant, unlike nearly every other Open Source CMS over the years. The biggest risk for our project is that we don't embrace change.”

What is Backdrop CMS?

Backdrop CMS logo with the word ‘backdrop’ written on left and black and white coloured square on right

Backdrop is a Content Management System (CMS) which can be put to use when designing a wide variety of websites from a single administrator's personal blog site to an intricate, multi-role business e-commerce site. It is the perfect fit for comprehensive non-profit, educational, corporate, or government websites.

Being a tool for structuring websites, the core Backdrop CMS package aims to include many useful features, but only those that are necessary for the majority of sites using it. Backdrop can be extended with the addition of modules, themes, and layouts which are easy in nature.

In a way, it allows non-technical users to manage a wide variety of content. It is feature-compatible with Drupal 8 (containing things like Configuration Management Initiative(CMI), WYSIWYG & Views in core), but is built on APIs more similar to those found in Drupal 7.

Evolution of Backdrop CMS

Backdrop CMS started its existence as an offshoot of Drupal. Although Backdrop originates from a common codebase with Drupal, its philosophy and organisation are distinct. Backdrop follows a policy of concentrated releases that account feedback from the community. 

Essentially, for the small to medium sized businesses, non-profits, educational institutions, or any other organisations, who are in need of a comprehensive website on a budget, Backdrop CMS is easy to build and extend. 

Advantages of Backdrop CMS

Both, Backdrop and Drupal projects have different end goals, but emerging from the same original code base, there are areas in which collaboration can benefit both projects. 

  • Along with easier updates, Backdrop is backwards compatible. Backdrop attempts to keep API change to a minimum in order for contributed code to be maintained easily, and for existing sites to be updated affordably.
  • Being simple in its structure, backdrop lets you write code for the majority. It aims to be easy to learn and build upon, even for those with a minimal amount of technical knowledge. Direct implementations are chosen over abstraction, and how things work can be immediately clear and easily documentable.
  • The focus is to include features for the majority. Backdrop core only includes features and tools that benefit the majority of sites that are running it. Also, Backdrop aims to include opinions from individuals who attend trainings, meetups, and camps as well as real-world engagements with consumers.
  • Backdrop can be extended. Backdrop aims to provide a powerful core that can be readily extended through custom or publicly available contributed modules. These additional modules provide desired features that are not incorporated in core due to their complexity or use cases that are too specific.
  • Rendering great performance, Backdrop has low system requirements. Backdrop runs on affordable hosting with very basic requirements. This means not chasing popular trends in technology, but instead adopting common, proven, and learnable systems.
  • Backdrop lets you plan and schedule releases. Each release contains a planned set of features, and is released on time. If a feature is not ready in time for a specific release, the feature gets postponed, but the release is delivered on time. 
  • It gives the freedom to remain free and open source. All codes included with Backdrop are under an Open Source license that allows anyone to use it for free, regardless of their beliefs or intentions.

Why fork Drupal?

There are lots of reasons why Drupal was forked to create Backdrop. These are the most notable ones:

Technical Gap

Though many features in Drupal 8 are identical to those in Drupal 7, the code underneath has little to share resemblance with the Drupal of yesteryear. Developers value maintaining the code that has a proven success rate rather than drifting from the track record of the success.

Coding Principles

The Backdrop community may vary from the Drupal community on some issues that they regard higher, and vice versa. As the principles diverge, so does the code. This justifies the existence of Backdrop.

Niche Audience

Backdrop CMS is dedicatedly targeted at small to medium-sized businesses, non-profits, and education. It best serves the kinds of organisations that need complex functionality, but on a budget.

Graphical representation with blue and green coloured regions to show Drupal evolution from Drupal 6 to Drupal 8 and emergence of Backdrop after Drupal 8Source: Quora

Case Studies

The NorCal Hunter Jumper Association is a not-for-profit recreational sports organization that was looking for a better viewing website experience for the membership, mainly on tablets and mobile devices. The new site also needed to be easy for the board and administrators to update and manage. Further, they planned to move board membership nominations, voting, general surveys, and other forms onto the website in the future, including forms that may need credit card processing. Thus, Backdrop was chosen as the medium to integrate all these requirements and following were the results:

  • A finer viewing experience for the members on tablets and mobile devices.
  • Easier updates and management for the board and administrators.
  • Flexible in adding features as the needs of the organization grows.
  • Easy to integrate with other web services.
  • Affordable maintenance and long-term development costs.
A picture of a woman sitting on a horse in the middle of a group of people with tabs on the top of the homepage of NorCal Hunter’s website


BGP Site Solutions is a group of business sites showcasing web publishing experience.

Founded in 2003, BGP Site Solutions has managed nearly 100 web properties with vast experience in performance-based online marketing (Cost per Lead, Cost per Acquisition, Cost per Click), white-hat organic search engine optimization, and web publishing in the marketing verticals of post-secondary education, home services, insurance (auto/health), wine, diet/weight loss/health, financial services, dating, and eldercare/senior services. 

On the other hand, formed in 2011, Authority Media is a leading publisher of career training web properties. The AM goal was to be the most authoritative source of information in each post-secondary education category in which they operate.  

These sites were formerly separate WordPress sites and were hacked multiple times. Thus, security of the website was the need of the hour. 

Since these are both fairly small sites, combining them into a single codebase site offered savings in terms of hosting and maintenance costs. And the multi-site feature offered by Backdrop CMS seemed like the perfect fit.

Two types of services described in two columns below the three hands picking the red coloured screw fittings on the BGP Site Solutions’ website’s homepage


Final Thoughts

Drupal 8 is a huge departure from anything the Drupal community has released in the past and it’s a move towards the enterprise.

Backdrop is not about users but about developers facing challenges in adapting and investing their time to further improve the Drupal platform. That’s where Backdrop aims to fill the gap left and attempting to maintain connectivity and cohesiveness with the larger Drupal community.

Thus, both Drupal 8 and Backdrop are trying to address the problem, in fundamentally different ways.

Still confused? OpenSense Labs provides steadfast solutions and services to empower digital innovation for all enterprises.
Ping us at [email protected] and let us know how we can help you achieve your digital goals.

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