May 21 2019
May 21

This is the first of a two part series discussing a couple of different platforms that we at Acro Media endorse for our clients. First up, I’ll talk about Drupal, a popular open-source content management system, and how it’s excellent content capabilities can be extended using an ecommerce component of your choice. For companies that require experience-led commerce architecture solutions, Drupal as an integration friendly content engine is an ideal open source choice.

A quick introduction

People who follow our blog will already know about open source technology and Drupal because we talked about them a lot. For those of you who don’t know, here’s a quick introduction.

Open Source

Wikipedia sums up open source software well.

Open-source software is a type of computer software in which source code is released under a license in which the copyright holder grants users the rights to study, change, and distribute the software to anyone and for any purpose. Open-source software may be developed in a collaborative public manner. Open-source software is a prominent example of open collaboration.

Open-source software development can bring in diverse perspectives beyond those of a single company. A 2008 report by the Standish Group stated that adoption of open-source software models have resulted in savings of about $60 billion (£48 billion) per year for consumers.

While that describes open source software as a whole, there are many advantages of open source specifically for content creation and ecommerce. No licensing fees brings the total cost of ownership down, businesses are fully in control of their data, and integrations with virtually any other system can be created. If you like, you can read more about the advantages of open source for ecommerce via this ebook.

Drupal

Drupal is a leading open source content management system that is known for being extremely customizable and ideal for creating rich content experiences. In a CMS world dominated by WordPress, Drupal is often overlooked because of its complexity and somewhat steep learning curve. Don’t let that stop you from considering it, however, as this complexity is actually one of Drupal’s greatest strengths and the learning curve is continuously improving through admin-focused UX initiatives.

The platform can literally be made to do anything and it shines when very specialized or unique functionality is required. It has a rich ecosystem of extensions and is very developer friendly, boasting a massive development community ensuring that businesses using Drupal always have support.

On top of this, Drupal has various strategic initiatives that will keep it modern and relevant now and into the future. One of the initiatives is for the platform to be fully API-first, meaning that a primary focus of Drupal is to be integration friendly. Developers can integrate Drupal with any other software that has an API available.

Drupal for experience-led commerce

Drupal is suited for any of the three main architectures (discover your ideal architecture here), but experience-led commerce is where it’s most capable. Experience-led is for businesses who keep the customer experience top of mind. These businesses want more than to just sell products, they want to also tell their story and foster a community around their brand and their customers. They want their customer experiences to be personalized and content rich. It’s these experiences that set them apart from their competitors, and they want the freedom to innovate in whatever way is best for their business.

Click to discover your ideal architecture with our analysis.More often than not, SaaS ecommerce platforms alone just don’t cut it here. This is simply because they’re built for ecommerce, not as an engine for other content. Although there are a lot of benefits to SaaS for ecommerce, businesses using SaaS must conform to the limitations set by the platform and its extensions. Robust content is just not typically possible. Sure, a business may be able to maintain a blog through their SaaS ecommerce platform, but that’s about it.

Drupal, on the other hand, is a content engine first. It was built for content, whatever that content may be. If you can dream it, Drupal can do. On top of this, Drupal, being integration friendly through its API-first initiative, allows businesses the freedom to integrate any compatible SaaS or open source ecommerce platform. At this point, a complete content & commerce solution has been created and the only limitation is your imagination and available resources to implement it. Implementation can be done in-house with an internal IT team or outsourced to one of the many service providers within the Drupal marketplace, Acro Media being one of them.

Let’s look at three widely different examples of Drupal based experience-led commerce.

TELUS Mobility

Website: www.telus.com

TELUS Mobility is one of Canada’s largest telecommunications companies. Imagine the missed opportunities when a customer’s online billing isn’t connected to your latest promotions and customer service can’t quickly or easily get this information in front of them. This was a problem that they faced and business restrictions, one being that they need to own all of their code and data, required that they look outside of the SaaS marketplace for a solution. Drupal, combined with a Drupal-native Drupal Commerce extension, was the solution that they needed. The open source code base of both Drupal and the Commerce extension meant that TELUS Mobility had the control and ownership that they needed. The result was huge, many important customers and customer service UX improvements were made which enabled TELUS Mobility to outperform their competitors.

You can read the full TELUS Mobility case study here.

Bug Out Bag Builder

Website: www.bugoutbagbuilder.com

Bug Out Bag Builder (BOBB) is a content-rich resource centered around preparedness. They generate a lot of different types of content and needed a way to do it that is easy and reusable. They also had a very unique commerce element that needed to tie in seamlessly. Here’s how we did it.

First is the content aspect. BOBB is full of content! They maintain an active blog, continuously write lengthy product reviews and provide their readers with various guides and tutorials. They’re a one-stop-shop for anything preparedness and have a ton of information to share. As you can see, a simple blog wouldn’t be sufficient enough for this business. They needed a way to create various types of content that can be shared and reused in multiple places. The Drupal CMS was easily able to accommodate. All of the content has a specific home within the site, but each article is categorized and searchable. Content can be featured on the homepage with the click of a button. Various blocks throughout the site show visitors the most recent content. Reviews can be attached to products within their online custom bug out bag builder application (more on this below). All of this is great, but what makes Drupal a fantastic content engine is that if BOBB ever needs to use this content in another way, all of the saved data can be reused and repurposed without needing to recreate the content. Just a little configuration and theming work would need to be done.

Second is the commerce aspect. BOBB is not a standard ecommerce store. At their core, they’re actually an Amazon Associate. They’ve developed a trust with their readers by providing fair and honest reviews of preparedness products that are listed on the Amazon marketplace. If a reader then goes and buys the product, BOBB gets a cut since they helped make the sale.

That’s all pretty normal, but what makes BOBB unique is that they also have a web-based Custom Bag Builder application. This tool has a number of pre-built “BOBB recommended” bag configurations for certain situations. Customers can select these bags (or start from scratch), view/add/remove any of the products, and finally complete the purchase. Since BOBB doesn’t need the full capabilities of ecommerce, it didn’t make sense for them to be paying monthly licensing fees. Drupal Commerce was selected for this purpose. It’s used as a catalog for holding the product information and creating a cart. Then, an integration between Drupal Commerce and Amazon transfers the cart information to Amazon where the customer ultimately goes through checkout. Amazon then handles all of the fulfillment and BOBB gets the commission.

BikeHike Adventures

Website: www.bikehike.com

BikeHike Adventures was founded as a way of bringing like-minded adventurers together through the unique style of world travel that they promote – activity, culture and experience. They provide curated travel packages that customers enquire about through the BikeHike Adventure website. Travel is all about experience and they needed to share this experience through their website. They also needed more than just a standard article page to do it since there is a ton of information to share about each package. Furthermore, they wanted to give customers a way to reserve a trip for pre-selected dates or through a custom trip planner. Again, Drupal was a perfect fit.

When you visit the site, you’re immediately thrown into the world of active travel through a rich video banner followed by a series of travel packages, a travel blog and more. There is a lot of exciting locations and vibrant imagery throughout.

Clicking into a package, you’re again hit with spectacular photography and all of the information you would need to make a decision. You can read about the trip, view the itinerary and locations marked on a map, learn about what’s included and where you’ll be staying, read interesting and useful facts about the country and location, see a breakdown of day-to-day activities, read previous traveler review, and more. When a customer is ready to book, they can submit an enquiry which is then handed off to the BikeHike Adventures travel agents.

A commerce component isn’t actually being used in this site, but it’s just a great example of content and customer experience that is used to facilitate a booking with a travel agent. If BikeHike Adventures wanted to in the future, they are free to integrate the booking and payment platforms of their choice to automate some, if not all, of that aspect of this process. By utilizing the open source Drupal CMS, this is an option that they can exercise at any point in time.

Who is Drupal best suited for?

Drupal could be used for any business, but it’s typically best suited for ecommerce businesses:

  • Who want to differentiate their brand through personalized shopping experiences
  • Who want to showcase products outside of a standard product page
  • Who want the power to develop a content-rich experience AND have an industry standard checkout process
  • Who want to sell across multiple channels and third-party marketplaces
  • Who need to develop and execute cohesive and synchronized marketing campaigns across multiple channels
  • Who want the freedom to integrate and connect their CMS and commerce platform with other components within their overall architecture
  • Who want to limit platform fees and instead invest in their own commerce infrastructure

In closing, there’s a reason why the ecommerce market is open to open source more than ever. Businesses are increasingly seeing that open source provides a quality foundation for which to build and integrate the solutions they need for today's new-age ecommerce. Customer experience is now seen as a competitive advantage and there are a handful of options that can provide this experience, Drupal being one of them. If you’re looking experience-led ecommerce solutions, consider Drupal. It might just be what you need.

Additional resources

If you liked this article, check out these related resources.

Click to discover your ideal architecture with our analysis.

May 21 2019
May 21

To keep up with consumer demand, businesses need to tactically rethink and reform the way they produce and manage content. 

What you need is a way to stand out in the consistent content chaos. To make that happen, you need a strategy that can help:

  • push out content intuitively
  • transform disorganized assets into a comprehensive manner
  • manage real-time collaboration effectively

And that’s where the role of a CMS is important.

Here’s a comprehensive guide to building the right content strategy with Drupal, focusing primarily on the technological aspect, which will help you build and establish the right notes with your audience.

You Need to Have a Content Strategy. But Why?

With an increase in the number of content dissemination channels, it is easy to lose consistency and easier to lose track of the larger goal.

“Pushing out content without being focused on the goal, its relevance, distribution, or the target audience is a waste of time and money – even if your content is amazing!”

The 2018 Demand Gen Report revealed that buyers are becoming more discerning and selective in the content they decide to consume. 88% agree that content producers need to focus less on product specifics and more on the value that can be brought to their business.

Infographic with three hexagons and text on it on a blue background

These key findings from the audience can be harnessed only with a well-designed content strategy. Which means by doing as little as creating a persona you get ahead of 58% of your competition (2018, CMI Report).

According to the same study, a whopping 97% of top performing B2B marketers have a content marketing strategy, while 32% of (overall) B2B marketers do not have a documented plan. In most cases, this means that they really have no clue what they’re doing.

Some of the benefits of a digital content strategy are:

  • Aligns your team with the organization’s mission/goals
  • Helps you figure out which types of content to develop and which will work
  • Keeps your team focused on priorities
  • Helps you allocate resources for better results
  • Clarifies your target audience/s

Building Content Strategy With Drupal

Traditionally, the content strategy involves planning, creation, and governance of content. However, with an explosion of channels and proliferation of new devices, content strategy can not be limited to just website content.

One of the challenges is to remain engaging yet relevant on different channels.

This can be solved by bringing uniformity and consistency across the various touch points from which a user can access information and engage with the content.

“The goal of the content strategy must be to strategically fit the reader into the marketing funnel”

Drupal’s dynamic features at the core make it a perfect fit to cater to the needs of creating great digital experiences. Here’s how:

Unifying the Content Strategy Across Channels with Drupal

Content Governance

Often neglected, content governance is a detailed framework of content delivery and management which ensures consistent brand storytelling across all media.

Implementing a content governance framework requires different users (from the same or different teams) to collaborate with a distinct workflow and audit trail effectively. In the face of exponential growth in the variety and volume of content,  Drupal helps manage, organize, and secure the content with Workflow and Staging. 

Since editing the content on live site can also result in accidental publishing, Drupal’s Workflow module provides a separate staging environment . Drupal has an easy staging and preview of content in different environments anchoring full content staging capabilities.

You can define multiple workspaces such as "staging" and "live" which are copies of your site, to create content (or modify) and the changes are visible only within that workspace. Once the changes have been verified, you can "deploy" the content to another workspace.

User, roles, and permission: Security is important and that is why not every user can have permission to access the system of the website. Drupal offers a number of security modules which help manage and secure backend access. 

With User Access Control, site administrators on Drupal can work to provide unique user experiences and different access rights to writers, editors, marketers, and site visitors.

The Workflow module helps in creating arbitrary workflows and assigning them to entities. That's  important from a security perspective too. Workflow with the states like Draft, Review and Published can be assigned to Story node type.

Thus, only the users with ‘Editor’ permissions can set stories to the published state.

Some of the other Drupal modules which can be used are:

  • Workbench Access module: helps in creating editorial access control. Admin can grant access to the users and their content which can be found at My Workbench on Homepage. It harnesses content-focused features in one unified user interface.
  • Domain Access module: allows you to share users, content, and configurations across a group of sites.

Enterprise-wide password control systems

Password security is even more crucial and needs the right kind of strategic perspective with strong policies.Default password management could be considered good, but of course, it can be improved. Here’re some of the Drupal security modules that can be used to provide additional controls for password management:

  1. Password Strength: provides realistic password strength measurement and server-side enforcement for Drupal sites using pattern-matching and entropy calculation.
  2. Password Policy: provides a way to enforce constraints which must be met before a user password change will be accepted.
  3. Restrict Password Change: Adds a new permission 'change other users password'. When the user_profile_form is loaded it checks to see if the current user has the proper permission or if they are editing their own account, otherwise, it removes the password change option.
  4. Login Security: Login Security module improves the security options in the login operation of a Drupal site. By default, Drupal introduces only basic access control denying IP access to the full content of the site.
  5. Shibboleth Authentication: Provides user authentication as well as some authorisation features.
  6. Flood Control: Add an administration interface for hidden flood control variables in Drupal 7, like the login attempt limiters and future hidden variables.
  7. Secure Login: Ensures that the user login and other forms are submitted securely via HTTPS, thus preventing passwords and other private user data from being transmitted in the clear.

Digital Asset Management System: An important part of the governance is business workflow and common identity, which is significant for the smooth functioning of marketing. The CMS needs to provide the ability as a solid repository while also able to modify uploaded digital assets.

It should give editors the ability to make iterative changes to assets to enable promotion of products and brand across channels and devices. Digital Asset Management (DAM) smartly strategizes the way enterprises handle their digital assets.

The Acquia DAM Connector can sync your digital assets with your Drupal website, allowing editors to seamlessly use content from within all the websites you maintain. In order to ensure that the site is using the latest version of an asset stored, it periodically syncs assets from Acquia DAM via a cron job.

It also empowers editors to select Acquia DAM assets directly through a media field or through the WYSIWYG integration. Further, it enables the user to view asset metadata directly in the entity browser without importing the asset and provides a usage report of assets within Drupal.

“In the digital landscape, the creation of digital assets in large numbers is almost inevitable.”

Backup: Writing content is an intensive exercise. And so you need to have a backup to save yourself in case the website system crashes or is hacked.

Backup and Migrate: Back up and restore your Drupal MySQL database, code, and files or migrate a site between environments. Backup and Migrate supports gzip, bzip and zip compression as well as automatic scheduled backups.

Content Modelling with Drupal

Before you start building the site it is important to consider your content as a whole and work out a model that will guide you and the user to smoothly navigate through the website.

It entails detailed definitions of each content type’s elements and their relationships to each other. It also helps to identify the organization’s requirements, develop relevant taxonomy that meets those requirements, and consider where the content blocks and fields should be allowed or required. 

Content modelling is a critical starting point for website content.

Drupal is an incredible CMS for building a content-rich website. Built on its entity system and the variety of field types, Drupal can support a wide range of content models.

At core, it is built on View which can help sort out the default taxonomy/term view however you want. Let’s you want a way to display a block with the X most recent posts of some particular type.

It can be used for anything that handles the display of views, and the core Views UI module permits you to create and edit them in the administrative interface. When you define views, you are interested in taking data from your website and displaying it to the user.

Breaking content types into fields, it allows you to build structured content as well.

Modules like Paragraphs and Stacks let you build rich and dynamic content.

Layout Builder, a stabilized module, in Drupal 8.7, empowers you to build layouts with ready-to-use multi-column layouts and Drupal blocks without the intervention of a developer.

It is unique since it can support multiple and different use cases from templated layouts applied to dozens of pieces of structured content, to designing custom one-off pages with unstructured content.

Here’s how it can be used in three different use cases:

  1. Layouts for templated content: The creation of ‘layout templates’ can be used for a specific content type. Example, blog posts.
  2. Customizations to templated layouts: Can customize the layout templates on a case-by-case basis. Example, to override the layout of a standardized product page.
  3. Custom pages: The creation of custom landing pages which are not in sync to any particular content type or structured content. Example, a single ‘About us’ page.

The Layout Builder is more powerful when used with Drupal's other out-of-the-box features such as revisioning, content moderation, and translations.

Omnichannel Content Strategy with Drupal

Users are always at the centre. Therefore, the content strategy needs to be as dynamic as your user experiences across different channels, if it is to succeed. Omnichannel content strategy is a way to unify the experience across all the channels and touchpoints.

Irrespective of how and where the content/ products are being first consumed at, complete consistency and unified experience is expected.

API First Publishing with Drupal

Drupal 8 is API-first which means, it can power ambitious applications of all kinds, from behind-the-scenes systems written in languages like Python, Java or Go to rendered experiences using the latest frontend frameworks, like React, Vue and Ember.

Content touchpoints are proliferating at a fast clip. You now have conversational UI, digital signage, medical and healthcare devices, and it lets you integrate with other systems, use your content anywhere, display it as you please. API-First Drupal is well positioned for entire digital ecosystems.

[embedded content]

The JSON:API module, which is also now in core with Drupal 8.7, is meant for creating high-performance APIs to expose Drupal data in JSON. It works by creating API endpoints and requires no configuration and the module instantly accesses all Drupal entities.

It not only provides a great authoring experience but also a powerful, standards-compliant, web service API to pull that content into JavaScript applications, digital kiosks, chatbots, voice assistants and more.

This makes it easier for Drupal’s core ecosystem, of web services responsible for third-party content and application, to integrate.

Mobile-first and Out of the Box Responsive

Accessibility via any device needs to be useable too. Drupal 8 has been designed with a mobile-first strategy. The responsive design ensures that content and layout are scaled based on the viewport size available.

With  Breakpoint and Responsive Image, out-of-the-box Drupal 8 ships with two modules that ensure mobile-first behaviour .

Responsive content needs to be modular and readable so readers can easily consume it.

Drupal for mobile lets you easily define different pieces of content for different devices. Each field in the backend can be uniquely styled and prioritized according to its content type.

Personalization with Drupal

No matter how good your content is, no one will bother to read it if it doesn’t talk to them, in their own language. Every content piece needs to communicate with your audience and increase the relevance of product proposition, by addressing their unique fears, needs and desires.

This orchestrates customer experience and drive engagement.

Personalization brings familiarity, which brings strength to customer loyalty to your brand, helps track demographics and behavioural patterns and convert an anonymous user into a potential customer.

Acquia Lift solves the challenges for digital teams, by bringing together content and user profile data from any source to personalize the customer journey in ways not previously possible. More than a headline swap or banner choice, Lift presents wholly targeted experiences based on broadly observed visitor behaviors as well as specific user preferences and interactions in real time with the very first engagement across any device or channel.

“And 81% of B2B Marketers (2018, CMI Report) believe that building a content strategy makes it easier to determine which types of content to develop.”

Drupal in Other Marketing Technology

New technologies like artificial intelligence (AI), machine learning, Augmented Reality (AR), Virtual Reality (VR) among others are reshaping how users consume content. It’s a big opportunity for companies to produce and recycle the same content through different channels and mediums. All the while keeping people engaged.

Virtual Reality

Immersive experiences created by virtual reality is the “Next Big Thing” happening. Virtual reality has seen a surge lately, with constantly emerging in Gartner Hype Cycle. While it is rapidly approaching a much more mature stage, in the enterprise sector, virtual reality has already lots of scenarios where it gets employed with success.

For instance, educational purposes. VR can enable a lot of more experiences that in reality are not possible or too dangerous.

Here’s a demo video of a high school student, Jordan who explores Massachusetts State University (a fictional university, built on Drupal) from the comfort of his couch. Jordan is able to take a virtual tour directly from the university's website.

[embedded content]

 
Augmented Reality

Another part of the futuristic technology, AR can be used to superimpose useful information in a shopping experience.

[embedded content]


The demonstration shown in this video displayed a shopper interacting with the AR application. The mobile application of Freshland Market (a fictional grocery store), built on Drupal 8, guided the shopper through her shopping list.

Wrapping Up

Often, it can be a virtual nightmare for content producers and marketers trying to find the right piece at the right time. Even so, if the content is all in one place, time-consuming complicated systems can mess up really bad.

Drupal 8 provides a perfect foundation for the incorporation of technologies to enable a smart strategy for your brand, content, and digital marketing needs. Your organization might be at infancy or already up with your content strategy, you can always reach out to our experts who can help you deliver quality results with personalized experiences.

May 16 2019
May 16

“..an inclusive community, we are committed to making sure that Drupal is an accessible tool for building websites that can also be accessed by people with disabilities.”

Calling accessibility as one of Drupal's core values and principles, the Drupal community has always stood to comply with web accessibility standards. Although with an absence of hard and fast rules to adhere to, the community has faced backlash in recent times.

First, with adopting Gutenberg (editor) and second with the release of Layout Builder, there have been some important questions and concerns about accessibility in the community.

This Global Accessibility Awareness Day, an awareness day to focus on digital access and inclusion for the more than one billion people with disabilities and impairments, let's take a look at how close is Drupal to its commitment towards web accessibility.

The Accessibility Controversy

a black and white design with G written in centreIn 2018, with WordPress 5.0 prepared to be released, the Gutenberg editor, a decoupled React based editing experience, was out for testing. Among other concerns like inconsistent user interface behaviour, difficulties with keyboard navigation through blocks ( far too heavily reliant on hover-based functionality), complexity to use it, the assessors were quick to call it inaccessible.

Drupal’s adoption of Gutenberg, got it in the fallout.

In another instance, when Drupal 8.5 released Layout Builder, the lack of accessibility in the feature brought the community into the topic of debate - how strongly does Drupal commit to accessibility?

How Does Drupal Ensure Web Accessibility?

Accessibility is about promoting inclusion than benefitting a small set of people with disabilities. It is about ensuring equal and inclusive access to the web resources, for the widest possible audience, without any bias.

And this has been reiterated in the Web Content Accessibility Guidelines (WCAG), that explains how web content can be made more accessible to people.

Drupal, in its Values and Principles, effectively lays down their commitment towards creating software which conforms to the accessibility guidelines. It conforms to the World Wide Web Consortium (W3C) guidelines which address:

  • Authoring tools, as part of the Authoring Tool Accessibility Guidelines (ATAG 2.0)
  • Web content, as part of the Web Content Accessibility Guidelines (WCAG 2.0)

As a result, it can be used both by developers as well as the site visitors.

Drupal has its own accessibility team, which helps identify the barriers occurring at the code level and the awareness level, and also resolves them. A number of such issues in the core have been identified and resolved, while also creating awareness within the community.

Some of these improvements included: Search engine form and presentation, drag and drop, color contrast, image handling, form labelling and so on.

Accessibility for developers is another added feature in Drupal, and through D7AX, it is an easy job to find contributed modules and themes which also support the development of accessible websites.

Let’s take a deeper dive into the key modules and features of Drupal that help overcome web compatibility issues, and ensure easier web accessibility:

Key Modules

Automatic Alt text It automatically generates an alternative text for images when no alt text has been provided by the user.  Block ARIA Landmark Roles  It adds additional elements to the block configuration forms that allow users to assign an ARIA landmark role to a block.  CKEditor Abbreviation  It adds a button to CKEditor which helps in inserting and editing abbreviations in a given text.  CKEditor Accessibility Checker  It enables the Accessibility Checker plugin in your WYSIWYG editor, which then helps inspect the content accessibility level; and solve them.  High Contrast  It allows the user to quickly switch between the active theme and a high contrast version of it.  htmLawed  It utilizes the htmLawed PHP library to limit and filter HTML for consistency with site administrator policy and standards and for security.  Style Switcher  Themers can provide a theme with alternate stylesheets. Allowing special styling for some part of the site, the module presents all those styles as a block with links. So any site user is able to choose the style of the site he/she prefers.  Text Resize  It provides the end-users with a block for changing the font size of text on your Drupal site.  Accessibility  It gives a list of available Accessibility tests, aligned to guidelines like WCAG 2.0 or Section 508.


Key Features:

  1. Semantics in the Core

Drupal has been built to encourage and support the proper use of semantic markup. Thus composing semantically correct HTML informs the browser and the assistive technology about the type of content it is managing with, and how this relates to other content.

This helps the assistive technologies carry out its activity effortlessly since they now have a structure to work with.

 2. Aural Alerts

Drupal provides a method called “Drupal.announce()” which helps make page updates obvious, in a non-visual manner. This method creates an aria-live element on the page.

 3. Controlled Tab Order

Drupal’s TabbingManager is an awesome medium to direct both non-visual and non-mouse users on the page, to access the prime elements in a logical order. And thus permits more control while exploring complex UIs.

 4. Accessible Inline Form Errors

Drupal forms are now more open to the expansion of available inline form errors. So now, it is easier for everyone to identify what errors made while filling in a web form.

 5. Fieldsets

Fieldset labels are utilized as systems for gathering related segments of forms. When effectively implemented, these labels give visual diagrams around the shape field gathering.

Presently, Drupal uses fieldsets for radios & checkboxes in the Form API. This helps towards additionally upgrading forms in Drupal.

What was the Outcome of the Controversy?

As always, the community has stood by accessibility as one of the core tenets. In a blog, Drupal's commitment to accessibility, Dries Buytaert - Drupal Founder - writes on the issue and how seriously the community takes the commitment to accessibility.

With that said, he announced that the Layout Builder functionality would be in a "stable" state for production use after ensuring that it passes the accessibility gate (Level AA conformance with WCAG and ATAG). This holds for both the authoring tool itself, as well as the markup that it generates.

With accessibility maintaining team, it has been jointly agreed that:

  • The first priority is WCAG 2.0 AA conformance. This means that in order to be released as a stable system, the Layout Builder must reach Level AA conformance with WCAG. Without WCAG 2.0 AA conformance, a stable version of Layout Builder won’t be released. This happened with a stable release of Layout Builder in 8.7.
  • The next priority is WCAG 2.1 AA conformance. Because these guidelines are still new (formally approved in June 2018), the stable version of Layout Builder won’t be held on them but are committed to implementing them as quickly as possible, even if some of the items are after the initial release.
  • While WCAG AAA conformance is not something currently being pursued, there are aspects of AAA that we are discussing adopting in the future. For example, the new 2.1 AAA "Animations from Interactions", which can be framed as an achievable design constraint: anywhere an animation is used, it will be ensured that the designs are understandable/operable for those who cannot or choose not to use animations.

The commitment to this ideal, by the leadership at Drupal and by the larger community, has remained steadfast despite challenges. The announcement and commitment to conform to AA level has reinstated the faith in the community towards its values.  

Ready to build digital experiences that are truly great for your customers - frictionless, accessible, and inclusive? Drop us a line, and our Drupal experts will be in touch.

May 07 2019
May 07

Looking for a Drupal 8 rating module that should be:
 

  • easy to install
  • easy to configure
  • easy to use
  • conveniently flexible
  • and user-friendly?
     

And maybe you “crave” for some nice-to-have features, as well:
 

  • enabling users to add a short review
  • multiple ratings: enabling users to vote on several aspects of your product/service, such as price, quality, ease of use?
     

What are your options? What working (and stable) modules for rating and reviewing are there in Drupal 8? 

We've done the research for you, evaluated all the modules for rating in Drupal 8 and come up with a list of 6 best... rated ones:
 

Keep in mind that this Drupal 8 rating module doesn't provide a voting mechanism, packed with all the key voting features. Instead, it structures the voting data for other rating modules to leverage.

What it does provide you with is a standardized API and voting data storing schema. Therefore, it streamlines the whole process of retrieving and organizing the voting results for various pieces of content on your Drupal 8 website.

Top features:
 

  • multi-criteria voting
  • caching the voting results (and it does that in a highly efficient manner, with no need to recalculate them...)
  • enables users to rate any type of content on your Drupal site (users, comments, nodes)
  • automatic tabulating of the voting results
     

Note: keep in mind that, for now, we only have a pre-release version of the module for Drupal 8...
 

2. Flag Rating, A Highly Popular Drupal 8 Rating Module 

An extension of the Flag module, that allows you to either:
 

  • use the default SVG icon 
  • upload your own icon (jpg, SVG or PNG) for each flag
     

Drupal 8 Rating Modules- Flag Rating

Furthermore, you even get 2 templates to override to your liking:
 

  • flag-rating.html.twig
  • flag-rating-icon.html.twig
     

A Drupal 8 rating module that you can use to turn the “select tag” option of the Star Rating module into a more user-friendly, clickable icon.

Drupal 8 Rating Modules: Star Rating Form Display

To “unlock” its functionality just:
 

  • navigate to Structure > Content type
  • select the “Manage form display” option
  • scroll down to your star rating field
  • click “Star rating clickable”
  • in the Settings screen, configure the custom display to perfectly fit your needs

If you're looking to integrate a voting functionality exclusively for the authors of the articles submitted on your website (hence, not for the end users), Flag Rating is the module you're looking for.

Drupal 8 Rating Modules: Star Rating

Take it as a simple, yet useful module that provides you with a display formatter and a star rating field. In short: with the “bare necessities” for the authors to be able to rate the uploaded articles.

Say you have a review website — a hotel review website — and you want to add multiple star ratings to a node:
 

  • customer service
  • en suite and private facilities
  • food, etc.
     

... with a different icon for each node. Then, you just need to use the star rating field that this module provides...

Top features:
 

  • built-in support for the Views module
  • it doesn't require other modules (e.g. the voting API module) to work
  • it allows you to add a different icon type per field and per view mode
     

The Drupal 8 rating module that simplifies the entire voting process: it encourages users to express their votes through an intuitive thumb illustration.

Drupal 8 Rating Modules: Vote Up/Down

Top features:
 

  • code voting support for your pre-defined products/services
  • interchangeable themes for your voting widget
  • the possibility to set up your own custom widgets using ctools plugins
     

The END!

These are your 5 best options when it comes to working Drupal 8 rating modules that should be both easy to configure and easy to use. 

Have you discovered another way of integrating a reviews feature to your Drupal 8 website?

Image by mohamed Hassan from Pixabay  

Apr 30 2019
Apr 30

Drupal is to release its latest version, Drupal 8.7, on the 1st May 2019. Review the entire Drupal product roadmap here.

Drupal 8.7 is a significant update for Marketers, Copywriters, Site Managers, and Creatives. It brings a new Media Library and Layout Builder, Drupal’s first drag-and-drop content manager, recently revealed at DrupalCon Seattle 2019

[embedded content]

 DrupalCon Seattle 2019

This update sees Drupal 8 retain its relevance in an emerging world of instant site builders, like Squarespace and Wix. Where Drupal has always stood out for its back-end capabilities and flexibility with API integrations, the new Layout Builder empowers Content Managers and Marketers. The user-friendly system allows Content Editors to maintain control over their content, throughout its journey to the end user. It also provides enhanced reactivity to the customer experience, as Site Managers can make edits without the assistance of a developer.

Of course, this isn’t just a standard drag-and-drop editor. Drupal 8.7 comes with a whole host of features you won’t find on low-end editors. These include instant multi-page management and the flexibility of powerful editorial workflows.


What is the Drupal Layout Builder?

The Drupal Layout Builder is a drag-and-drop content management tool. It allows non-technical individuals to design layouts in a structured way that adheres to the standard across the site. The new Layout Builder encourages users to take control, introducing blocks which help them to achieve designs and functionalities previously only editable in the developer's domain.

Key features include:

  • Modular template builder
  • Drag-and-drop paragraph editor
  • Permissions workflows
  • World-Class Accessibility 

[embedded content]

 Drupal 8.7 Layout Builder Recording

 

Simple, Reactive Page Management

Using the layout builder, Site Managers and Marketers can create new pages from templates. To build on these templates, users can insert new blocks from the pop-out sidebar that do not exist elsewhere on the site. Once the Site Manager has added a block, they can preview it instantly. At this point, if the editor isn’t happy, they can swap out blocks or replace images, text, buttons and more!

Users have recognised that it can be challenging to move huge, pre-built blocks and paragraphs in full preview. Using the preview toggle, users can now switch out of the full ‘Content Preview’ mode to a slicker block view. This simplified interface makes reordering blocks quick and easy. This differs from alternative drag-and-drop editors as the collapsed block editor sits within the same page. Therefore, editors can drag blocks across columns, as well as up and down.


Accessibility

The Drupal project has a long-standing commitment to accessibility and has been a leader in accessibility for many years. In 2018 Drupal Founder, Dries Buytaert, reaffirmed this commitment by stating that the forthcoming Layout Builder must be fully accessible.

The full 8.7 system is navigable by keyboard, in order to conform to Web Content Accessibility Guidelines, as recommended by the World Wide Web Consortium. This means that the drag-and-drop editor was designed with consideration for Site Managers, Marketers and Developers amongst us with specific accessibility requirements. Ultimately, the latest Drupal update will make agency life and in-house marketing that much more accessible to everyone.

[embedded content]

 Navigating Layout Builder by Keyboard

Workflows

The Layout Builder supports essential activities such as adding, saving and previewing content, or publishing data. The latest update also supports more complex features, such as content staging or approval workflows, using granular controls and notifications for the governance of each layout. This is a great win for marketing teams, as it de-centralises the content management process. Site managers can submit site updates safely, with version controls and final permission escalation.

For more complex updates, Drupal 8.7 supports workflows which push pages through multiple teams. For example, an initial submission which is then passed via testing teams, SEO managers, translation and localisation experts for international audiences, and final senior sign off.


Templates

The Layout Builder also includes a templating feature, useful for sites with large quantities of content. For enterprise sites, Content Managers can edit collections of pages all at once using the Layout Template Editor. Not only can they be edited in unison, they can also be rearranged while retaining their unique content. The ability to re-structure multiple pages at once saves a huge amount of time when one block needs to be changed across multiple locations.

Layout-Builder-template-modeThe Layout Builder in template editing mode

The Drupal Layout Builder was built entirely on Open Source contributions made by 123 contributors and 68 worldwide organisations.

Drupal 8.7 Layout Builder Contributors

The 123 contributors (DrupalCon Seattle 2019: Driesnote)

 

Media Library

Drupal 8.7 included the release of a Media Library, to make asset management faster for Site Managers, particularly within the drag-and-drop format.

[embedded content]

 The Media Library in action

 

The Media Library is a pop-out window from which images and video can be inserted into the webpage. The library pulls content from the organisation’s existing bank of images, hosted within Drupal. Or, users can upload media directly from their cloud or hard drive.

The addition of the Media Library allows Site Managers to insert or change images or video more efficiently than ever. The user selects the area where the image will be added and opens the Media Library. They can then select from existing images or upload multiple new assets at once. Once uploaded, users can remove or reorder any images ready for import. Once happy with the images, the user can add metadata and any extra information (like links), or change the format to video.

The Media Library was made possible by Open Source contributions from 310 individuals and 122 organisations.

Drupal 8.7 Media Library Contributors

The 123 contributors (DrupalCon Seattle 2019: Driesnote)

 

Technical updates

There have also been a host of additional updates and tweaks to Drupal, improving its speed and background functionality. Such updates include adding JSON:API as a core module and providing a consistent way of displaying JavaScript Messages. For the full list of technical updates, visit the Drupal website here.

What’s Next?

Administration UI - Drupal 8.8 or 8.9

The administrative side of Drupal, where site managers navigate the back end and manage content, has been close to untouched for the past 10 years.

The User Interface (UI) is currently being redeveloped to be aligned and reflect the software behind Drupal, giving it a modern look and feel. This includes better use of space (and white space) and more contrasting features. The additional space also means its more accessible, and will receive a WYSIWYG integration.

Drupal 8.8 UI

Proposed UI for Drupal 8.8

 

Sign up to email alerts to find out more or talk to our Drupal Web Development Experts about upgrading your Drupal Platform.

 

Get in touch
Apr 26 2019
Apr 26

April's been unexpectedly generous with us. It has spoiled us with plenty of high-quality content on Drupal. From “enlightening” tutorials to articles raising awareness of certain limitations, to useful tips and actionable advice, to blog posts announcing life-saving module releases... reading our way through the pile of Drupal blog posts this month has been a true dare.

Then, trimming down our bulky list to just 5 posts has been an even bigger challenge...

Nevertheless, we did manage to make our selection. Here's what we kept:
 

The WishDesk team share their experience with leveraging the Drupal 8 Views contextul filters via a well-structured, easy to follow tutorial.

That we're highly grateful for...

Why has it drawn our attention? 
 

  • because we had already been excited about the unmatched flexbility that the contextual filters in Drupal 8 offer
  • it clearly outlines the main differences between regular and contextual filters
  • it presents a specific use of these filters: setting up a task tracker in Drupal 8 using Views 
     

With Views already providing us with an UI for putting together data collections based on certain criteria, now having contextual filters, as well, to fine-tune the results come as an... unexpected “present”.

Their key benefit and advantage over the “standard” filters? They accept dynamic values...

Another one of our top favorite Drupal blog posts this month has been this piece of content raising awareness of the Layout Builder's limitation:

The code generating the image element markup doesn't “store” information about the specific sizes of the column that the image will be placed in.

In other words: there's no way for Drupal site builders to enter an accurate value for the “sizes” attribute when using the Layout Builder...

And the author, Brian K Osborne, draws attention on this issue after first highligthing the main “dilemma” of using responsive image styles:

Providing just one high resolution, high-quality, oversized image vs providing a suitably sized image for efery screen resolution...
 

We couldn't leave out Dries' blog post on the due preparations for upgrading to Drupal 9.

The reassuring aspect that he reveals is that all these preparations revolve around one common best practice: detecting and removing deprecated code from our Drupal 8 websites.

He goes on giving straight answers to all those legitimate questions that we might ask ourselves in relation to these preparations for Drupal 9:
 

  • What is deprecated code?
  • How do we identify it on our websites?
  • How challenging and time-consuming is it to remove it/update it?
     

This has been, by far, one of the best rated Drupal blog posts in April here, at OPTASY.

We can no longer imagine our (work) lives without the Paragraphs module in our toolbox. So, upon hearing about the Paragraphs Editor Enhancements module we dropped evewrytging and looked for this blog post.

Which comes as an inventory of both:
 

  • users' (content editors) main improvement suggestions for the Paragraphs module
  • undpaul team's solutions to editors' complaints/suggestions, turned into enhancements for this module
     

From the:
 

  • well-known “dread” of having to drag the content elements to their right positions after you've added them
  • to the need to be enabled to add those content elements preferiantially (since most editors add pretty much the same elements, over and over again)
  • to the overwhelmingly high number of buttons and the overcrowded dialogs
     

 
… the Paragraphs Editor Enhancements ships with a solution to each one of these drawbacks.

We can't but predict that it will hugely influence the editorial experience in Drupal...

We could never thank enough the OSTraining team for their clear, concise and most useful tutorials. 

One of their April's Drupal blog posts has been this step-by-step guide on how to add webforms to content types. And the scenarios where you'd might find this kind of knowldge “life saving” vary from:
 

  • having to add a contact form to a “business” content type on your Drupal website
  • to having to add a contact form to your “Events” content type
     

Easy to follow, clearly explained, uncluttered, filled with relevant screenshots, their tutorial has been truly “enlightening” for us.

Especially since adding various types of forms is one of those recurring tasks in our Drupal projects...


The END! 

These have been our favorite Drupal blog posts this month. How does your own top 5 look like?

Photo by Bernard Hermant on Unsplash 

Apr 25 2019
Apr 25

Do you need to set up a custom image carousel? Or maybe one slider with a teaser, displaying content from your website? What are the best Drupal 8 slideshow modules to consider for implementing and maintaining your slideshow?

And out of the box options are... out of question, right? Your requirements are too specific for that.
Maybe you need:
 

  • a certain number of slider items
  • different arrow designs
  • to display the image slideshow on other pages, too, not just on your homepage
     

With such flexibility and customization requirements in mind, we started digging into the “pile” of Drupal 8 image slider modules.

And here are the 4 ones that we've selected, those with the best reviews in the Drupal community:
 

If it's a fully customized slideshow that you want to implement, Views Slideshow's the module you need.

It'll “spoil” you with tons of add-ons to select from and give your unmatched flexibility. From:
 

  • titles
  • to images
  • to teasers of the last X blog posts on your website
     

… you get to include any type of items in your carousel.

Furthermore, it's jQuery-powered and it allows you to configure different settings for each one of the views that you'll create.

Note: oh, yes, you'll need to be pretty comfortable using Views in order to leverage this module at its full capacity.

Some of its key features:
 

  • your slider can include and display the latest products added to your eCommerce website 
  • you can set up a news item slideshow (the latest X news articles published on your Drupal 8 website)
  • from the latest X blog entries to the latest videos, testimonials, forum posts etc., you're free to include any type of content in your slider...
     

Now, here's a very brief step-by-step on how you can set it up and use it to create your slideshow:
 

1.1. Install and enable the module

Once you've downloaded it from Drupal.org, installed and enabled it, make sure to download its corresponding ZIP folder on Github, as well.

Give your folder a new name  — /jquery.cycle/ — then start uploading all its files to the 
/libraries/ folder in the root of your Drupal website.
 

1.2. Set up your view

Time to create your slideshow now. For this, just go to Structure> Views>Add new view 
 

1.3. Publish your slideshow block

For this, go to Structure>Block layout and select the region on your website that you want your slider to get displayed on.
 

1.4. Create a new image style

As you can see, the images included in your slideshow are currently of different sizes. Therefore, they're not perfectly adjusted to fit the block region that you've chosen for your slider.

To solve this inconvenience, just go to Configuration>Image styles>Add Image style. 

There, you can create a new style, that will be shared by all the images included in your slideshow.
 

2. Slick Slider, One of the Most Popular Drupal 8 Slideshow Modules

Another one of Drupal's modules for creating custom image slideshows, that ships with a heavy load of options. Powerful and flexible... what more could you ask for from your slider solution?

Capitalizing on Ken Wheeler's Slick carousel, working perfectly with Views and fields, the Slick Slider module:
 

  • enables you to set up a slider including multiple views, value fields and paragraph types
  • comes with image, audio and video support
  • supports complex layouts, as well
     

Some of its key features:
 

  • you're free to enable/disable the swipe functionality
  • it's responsive (scales along with its container)
  • some of its layouts are CSS-built
  • it's designed to work with Field collection, Media, Views, Image (and also to work perfectly fine with none of these modules)|
  • it allows you to configure your own “slide selecting” dots, the arrow keys and your slider's navigation, as well
  • it provides modular and extensible skins
  • you get to choose how you want your slideshow to be scrolled: swipe, desktop mouse dragging, auto scroll, mouse wheel scroll...
     

Another one of those Drupal 8 slideshow modules that gets the best reviews.

Here's why:
 

  • it leverages the Owl Carousel slider built by OwlFonk.   
  • it, too, empowers you to customize your image slideshow; in this respect, it ships with a myriad of customization settings
  • it's responsive
  • it capitalizes on a small ecosystem of submodules: Administration UI, Views Style, Field Formatter
     

Some of its key features:
 

  • from customizing your events to styling your controls, it allows you to tailor your image slider to suit all your needs
  • it supports multiple sliders
  • touch events
     

A simple module to consider each time you need to display a group of images in a compact way on your website. It even allows you to set the number of items to be included in your carousel...

Speaking of which, you should know that jCarousel, as its name says it, allows you to leverage the jCarousel jQuery plugin.

For this, it ships with a developer API for other modules to access. Furthermore, it integrates with Views, so you can easily turn any list of images (or other type of content) into a slideshow...

Some of its key features:
 

  • jCarousel field formater
  • out-of-the-box Views support
  • API for using jCarousel without Views
  • a collection of modern skins to choose from
  • Carousel pager that enable users to jump between multiple sliders
     

The END!

These are the first Drupal 8 slideshow modules to consider when looking for the best method for setting up your custom image/content slider.

Packed with tons of customization options, feature-rich and powerful, these 4 solutions for creating image carousels in Drupal 8 should be on your short list when you start looking beyond the out-of-the-box options for putting together a slider...

Apr 24 2019
Apr 24

Simple or custom-made? Is it a quick-to-assemble, rather “prototypical” form that you need for your website? Or a more complex, custom-made one? In a Drupal 8 Contact Forms vs Webform “debate”, which Drupal form builder best suits your data collection requirements?

On one hand, you have the convenience of creating your web forms in no time: simple, straightforward, “conventional” web forms. On the other hand, you get to scan through a never-ending list of advanced options and come up with a complex, fully custom-made web form.

That, of course, if you don't mind the time you need to invest in going through all those different form elements and available features and the risk of getting... overwhelmed by tons of field customization options.

Ease of use vs unlimited capabilities...

The convenience of getting your forms up and ready to collect user data in no time vs the chance to tailor some more advanced forms, ideally customized, carrying lots of different field values.

Decisions, decision...

Now, to help you decide here's a more detailed Drupal 8 Contact Forms vs Webform comparison. Weigh each one of the 2 form modules' benefits and drawbacks, set them against your own needs and... make the choice:


1. The Contact Forms Module 

Being part of Drupal core, there's no need to download and install the module.

Just go to Structure>Contact forms. Next, choose either to opt for the default form or to set up a new one: click the “Add contact form” button.

Drupal 8 Contact Forms vs Webform: Add Contact Form


Once in the form creation screen, enter your form's values in the predefined fields that you have there:
 

  • give the form a name in the “Label” field
  • enter the email address where all the form submission will be sent to (most probably your site admin address) in the “Recipients” field
  • enter your “Thank you” text in the “Message” field there; this will be the “thank you” text line your users will see once they hit the “submit/send” button 
  • in the “Redirect path”, enter the URL to the page that you want them to get forwarded to after they've submitted the forms (that if you don't want them to be redirected back to the homepage, by default)
  • click “Save” and there you have it: a simple form, with all the basic, must-have field values, built in no time
     

Of course, that doesn't mean that you can't further explore the given features and maybe add a few more fields and even styling options.

For instance, you could “Edit” your newly created form. Just select it in the “Contact Forms” screen and, scrolling down the options in the drop-down menu opening up, click the “Manage fields” option.

Click “Add field”, then “select a field type” – Text(plain), let's say – enter the “Label” and configure its settings.

Furthermore, if you want to style your form a bit, hit the “Manage form display” tab and... opt for a placeholder, for example. Next, explore the options available in the “Manage display” screen. For instance, you get to decide if you want your field label to be hidden, inline or visually hidden...

In short: in a Drupal 8 Contact Forms vs Webform comparison, the first form builder will always outshine the latter when it comes to ease of use.

It empowers you to set up a simple form quick and easy...
 

2. The Webform Module

Now, if Contact Forms is a rather minimalist form builder, the Webform module is a feature-rich, powerful one.

The customization features that it ships with go from email notifications to fine-grained access, from statistic collection of data to delivering results in a CSV format. From exporting data in various formats to... conditional sorting and filtering.

In other words, with Webform sky is the limit when it comes to the contact form that you can create.

It can go from a basic one to a highly complex, multi-page form. One made of lots of elements, advanced options for the user to select from, settings and features for you to leverage in the back-end...

But, let's keep in mind that it's contributed module so you'll first need to download it from Drupal.org.

Next, go to “Structure” and hit the “Webforms” tab. Then, click the “Add webform” button and, in the next screen popping up, give your new form a name (enter it in the “Title” field).

You'll be automatically forwarded to the “Build” tab, which is where all the “magic happens”. Once you click the “Add element” button, you'll get to “swim through” a sea of lots and lots... and lots of form elements (known as “fields” in Contact forms) to choose from. Ranging from basic to really advanced ones...

Webform: Select an Element Screen


Let's assume that you'll want to add a “Text field” element. Click the “Add Element” button corresponding it, then scan through all the new customization options listed up in the “Add Text field element” screen opening up next...

Feel free to add other elements to your webform: a “text area” maybe, an “email” element, as well... 

Note: do keep in mind that, once you've settled for the final fields/elements to be included in your web form, you can always change the order to get them displayed in. Just drag and drop them till they fit that predefined order in your mind...

Also, you can check/mark them as “Required” and turn them into “must fill in" fields, as opposed to optional form fields.

Note: feel free to edit that “Thank you” page that your webform will automatically forward users to. How? By clicking “Back to form”>"Settings”>"Confirmation” and selecting from the different options that you have there:
 

  • enter your own Confirmation title (e.g. “Thank you!”)
  • customize your Confirmation message
     

3. Drupal 8 Contact Forms vs Webform: Key Differences

Now that we've run our spotlight over each one of these 2 form building tools, let's make an inventory of the differences that we've identified:
 

  • first of all, it's obvious that the Webform module gives you more control over your web forms' design
     
  • also, unlike Contact Forms, it supports conditional emails; you get to send an email to a specific user in your list based on conditions associated with the value of certain elements in your form
     
  • Webform enables you to add basic logic to your web forms
     
  • … it comes packed with tons of advanced options, ranging from JS effects to conditional logic, to submission handling, etc.
     
  • Contact Forms, on the other hand, allows you to set up a simple contact form in the blink of an eye; you skip the tedious process of scanning through lots and lots of options, settings, and complex features
     
  • Webform allows you to create your forms either in a YAML file or in its the admin-friendly UI
     
  • also, Webform comes as a “cluster” of submodules – Webform REST, Honeypot, Webform Views, SMTP, Webform Encrypt, etc. – which are “responsible for” its multiple capabilities
     

4. In Conclusion...

The conclusion of this Drupal 8 Contact Forms vs Webform “debate” is quite simple: 

If you need a basic form on your website and you need it built fast, go with Contact Forms. Being included in Drupal 8 adds convenience...

But if you want to customize your form (and you have the time), to style it to your liking and “turbocharge” with advanced features and options, then go with Webform.
 

It's a much more powerful and feature-rich form builder, perfectly suited for your complex requirements...


Image by Tumisu from Pixabay

Apr 22 2019
Apr 22

Another amazing DrupalCon has passed, and Kanopi had a great time collaborating with the community. Kanopians gave three talks, hosted one summit, participated in two others, led first-time contributor workshops, hosted three BOFs, and two of our engineers (Sean and Jim) passed their Acquia certifications. Our boss Anne even made her first commit.

If you missed our talks, fear not. The recordings are below:

Deep Cleaning: Creating Franchise Model Efficiencies with Drupal 8 

Presenters: Anne Stefanyk and Katherine White

COIT offers cleaning services and 24/7 emergency restoration services and their 100+ locations serve more than 12 million homes & businesses across the United States and Canada. But their own website was a huge mess. In this case study we will cover the more technical parts of this Drupal 8 implementation.

[embedded content]

How to Work Remotely and Foster a Happy, Balanced Life

Presenters: Anne Stefanyk

In this session, we talk about how to be the best remote employee, and provide strategies and ideas if you are a leader of a remote team. We talk about key tactics to keep you (and all other staff) inspired, creative, productive and most importantly, happy!

[embedded content]
Apr 19 2019
Apr 19

What we learned from our fellow Drupalists

Go to the profile of Lisa Mirabile

On April 7th, our team packed up our bags and headed off to Seattle for one of the bigger can’t miss learning events of the year, DrupalCon.

“Whether you’re C-level, a developer, a content strategist, or a marketer — there’s something for you at DrupalCon.” -https://events.drupal.org/

As you may have read in one of our more recent posts, we had a lot of sessions that we couldn’t wait to attend! We were very excited to find new ideas that we could bring back to improve our services for constituents or the agencies we work with to make digital interactions with government fast, easy, and wicked awesome. DrupalCon surpassed our already high expectations.

GovSummit

At the Government Summit, we were excited to speak with other state employees who are interested in sharing knowledge, including collaborating on open-source projects. We wanted to see how other states are working on problems we’ve tried to solve and to learn from their solutions to improve constituents’ digital interactions with government.

One of the best outcomes of the Government Summit was an amazing “birds of a feather” (BOF) talk later in the week. North Carolina’s Digital Services Director Billy Hylton led the charge for digital teams across state governments to choose a concrete next step toward collaboration. At the BOF, more than a dozen Massachusetts, North Carolina, Georgia, Texas, and Arizona digital team members discussed, debated, and chose a content type (“event”) to explore. Even better, we left with a meeting date to discuss specific next steps on what collaborating together could do for our constituents.

Session Highlights

The learning experience did not stop at the GovSummit. Together, our team members attended dozens of sessions. For example, I attended a session called “Stanford and FFW — Defaulting to Open” since we are starting to explore what open-sourcing will look like for Mass.gov. The Stanford team’s main takeaway was the tremendous value they’ve found in building with and contributing to Drupal. Quirky fact: their team discovered during user testing among high-school students that “FAQ” is completely mysterious to younger people: they expect the much more straightforward “Questions” or “Help.”

Another session I really enjoyed was called “Pattern Lab: The Definitive How-to.” It was exciting to hear that Pattern Lab, a tool for creating design systems, has officially merged its two separate cores into a single one that supports all existing rendering engines. This means simplifying the technical foundation to allow more focus on extending Pattern Lab in new and useful ways (and less just keeping it up and running). We used Pattern Lab to build Mayflower, the design system created for the Commonwealth of Massachusetts and implemented first on Mass.gov. We are now looking at the best ways to offer the benefits of Mayflower — user-centeredness, accessibility, and consistent look and feel — to more Commonwealth digital properties. Some team members had a chance to talk later to Evan Lovely, the speaker and one of the maintainers of Pattern Lab, and were excited by the possibility of further collaboration to implement Mayflower in more places.

There were a variety of other informative topics. Here are some that my peers and I enjoyed, just to name a few:

A Day in the Exhibit Hall

Our exhibit hall booth at DrupalCon 2019 Talking to fellow Drupalists at our booth

On Thursday we started bright and early to unfurl our Massachusetts Digital Service banner and prepare to greet fellow Drupalists at our booth! We couldn’t have done it without our designer, who put all of our signs together for our first time exhibiting at DrupalCon (Thanks Eva!)

It was remarkable to be able to talk with so many bright minds in one day. Our one-on-one conversations took us on several deep dives into the work other organizations are doing to improve their digital assets. Meeting so many brilliant Drupalists made us all the more excited to share some opportunities we currently have to work with them, such as the ITS74 contract to work with us as a vendor, or our job opening for a technical architect.

We left our table briefly to attend Mass.gov: A Guide to Data-Informed Content Optimization, where team members Julia Gutierrez and Nathan James shared how government agencies in Massachusetts are now making data-driven content decisions. Watch their presentation to learn:

  1. How we define wicked awesome content
  2. How we translate indicators into actionable metrics
  3. The technology stack we use to empower content authors

The Splash Awards

To cap it off, Mass.gov, with partners Last Call Media and Mediacurrent, won Best Theme for our custom admin theme at the first-ever Global Splash awards (established to “recognize the best Drupal projects on the web”)! An admin theme is the look and feel that users see when they log in. The success of Mass.gov rests in the hands of all of its 600+ authors and editors. We’ve known from the start of the project that making it easy and efficient to add or edit content in Mass.gov was key to the ultimate goal: a site that serves constituents as well as possible. To accomplish this, we decided to create a custom admin theme, launched in May 2018.

A before-and-after view of our admin theme

Our goal was not just a nicer looker and feel (though it is that!), but a more usable experience. For example, we wanted authors to see help text before filling out a field, so we brought it up above the input box. And we wanted to help them keep their place when navigating complicated page types with multiple levels of nested information, so we added vertical lines to tie together items at each level.

Last Call Media founder Kelly Albrecht crosses the stage to accept the Splash award for Best Theme on behalf of the Mass.gov Team. All the Splash award winners!

It was a truly enriching experience to attend DrupalCon and learn from the work of other great minds. Our team has already started brainstorming how we can improve our products and services for our partner agencies and constituents. Come back to our blog weekly to check out updates on how we are putting our DrupalCon lessons to use for the Commonwealth of Massachusetts!

Interested in a career in civic tech? Find job openings at Digital Service.
Follow us on Twitter | Collaborate with us on GitHub | Visit our site

Apr 18 2019
Apr 18
We have some pretty heavy sites on Pantheon, with big tables to manage our circulation, etc, with sizes over 1Gb and close to 2 million records. When we clone the environment for CI or dev purposes, it can take a while (15-30 minutes). So we have created a reference environment called master-lite, which mimics the content, but the huge tables are truncated. This exponentially reduces the backup size and time to clone.

We've set up some CI to test new branches we push up (hattip to Steve Persch, who helped us better understand CI and DevOps) and it will create a CI environment based on the master-lite, which doesn't take as long. Then one of the things it will do is perform a visual regression test between the CI environment (based on my dev branch) and the master-lite environment (which is based on the master branch).

All that sounds great, but unless I keep master-lite up-to-date, it can get stale pretty quickly, so I have created this Bash script to run several terminus commands to build the master-lite environment from our production environment:

Along with this script, I have separate .sql files named after the sites which have site-specific SQL commands to trim away the fat, so to speak. This script also has an if branch to exclude "site3" since that site hasn't grown to the point that I need to do any trimming.

Then I set this up as a cronjob to run every day at 3am from a separate server and now my master-lite environment is kept up-to-date automatically and it's much faster/easier to clone for CI/Dev purposes.

Apr 17 2019
Apr 17

What makes Drupal a great choice from a UX standpoint? What features are responsible for the enhanced end-user experience in Drupal 8? Those features that enable you to easily create an intuitive and enjoyable visitor experience on your own Drupal-based website/application.

And to constantly improve it...

Is it all those performance enhancements that it ships with? Or maybe its “responsive out-of-the-box” nature? Or rather its multilingual capabilities?
 

1. But First: 7 Evergreen Ways to Improve Your Website's UX

It goes without saying that, in order to create an enjoyable, rich user experience on your Drupal 8 website, you'll need to:
 

  • put together a solid UX strategy
  • run extensive user research and map the user's journey
  • come up with an effective, well-planned UX design, paying attention to all the latest design trends (and now decoupled Drupal empowers you to tap into a whole range of new possibilities...)
     

And while carrying out all these phases of the UX design process, make sure to apply the following evergreen techniques for enhancing the visitor's experience:
 

1.1. Optimize the page loading time

For speed will always be the factor with the biggest influence on the user's experience on your Drupal site.

In this respect, there are tons of performance enhancements that you can implement, ranging from aggregating your JS and CSS files to properly configuring your cache to opting for a CDN, to...
 

2.2. Use bullets to structure your text

Bulleted lists are the “holy grail” of neatly structured, easy to read content.

For, in vain you invest time and effort in providing content that delivers real value to your website's visitors if you display it as an... “impenetrable” block of text.

In this respect, bullets help you break down the information. The result: users will see the key product or service benefits/will go through all of the presented features a lot quicker.
 

2.3. Use white space strategically

Speaking of easy to read content: there's no better way to enhance readability and to draw attention to specific elements on a page than... by using the white space itself.

It will automatically direct their attention to the text/image emphasized by all the white space surrounding it.
 

2.4. UX design is consistent Design

From color palette to button styles, from the size of the headings in your text to the chosen font, from the used photos to various design elements... keep consistency across all the pages on your Drupal website.

Otherwise, you risk to confuse and eventually... tire its visitors.
 

2.5. Go for visible, attractive CTAs

Always use action words for your calls to action and make sure they're easily recognizable. CTAs play a crucial role in setting up an intuitive, efficient navigation structure on your website...
 

2.6. Use images wisely

As images are always well-deserved “breaks” for the eye, especially when it's a long text that it's challenged to go through.

And yet, if you fail in using the relevant images, those that perfectly team up with your text... the user experience that you'll deliver will be anything but compelling...
 

2.7. Make your headings a high priority 

Remember to write your headings around some of the main keywords.

Also, strategically design them so that they're highly visible and help users to quickly scan through the content.
 

2. 4 Features Responsible for the Superior End-User Experience in Drupal 8

Gluing together all the design best practices that make a great user experience does call for a flexible and dynamic web platform.

Drupal 8 is that platform. It comes packed with some powerful features that make it easy for you to create the best visitor experience on your website.

Here are the ones with a huge influence on your website's UX:
 

2.1. Drupal 8 is responsive right out-of-the-box

And responsiveness, along with top page loading speed, still is one of those factors with a great influence on visitors' experience with your Drupal website.

With:
 

  • all the available base themes now being responsive
  • the convenience of adapting your images to various screen sizes right from their display properties
     

… creating a compelling end-user experience in Drupal 8 is dead-simple.


2.2. Enhanced performance

From a performance standpoint, Dries Buytaert's post on Drupal 8's performance optimizations is still one of the most relevant sources.

If Drupal was already built to “inject” enterprise-level performance into static pages, Drupal 8, with all its caching enhancements, is designed to speed up dynamic web pages, as well...


2.3. Multilingual capabilities

Remember the user experience's main facets, ranging from useful to findable, to valuable, to credible to... accessible?

Well, Drupal 8 provides you with multilingual capabilities right out of the box. You get to translate your website's UI, content, configuration, etc.

Meaning that, with this multilingual system at hand, you can easily create an accessible user experience on your website.


2.4. Content personalization (by segment, login time, device, language...)

In this respect, the Aqua Lift Connector module is your most reliable tool.

What it does is bring together customer data and content, so that you can deliver targeted content experiences across multiple channels and devices.
 

The END!

And these are those robust features that stand behind the superior end-user experience in Drupal 8. The very reasons why this platform, and particularly this version of Drupal, makes your best ally in creating the most compelling UX on your website.

Photo by Lucian Novosel on Unsplash

Apr 11 2019
Apr 11

With the Twig templates replacing the old PHP templates, Drupal has been brought to a whole new “era”. We can now leverage the advantages of a component-based development in Drupal 8. But what does that mean, more precisely?

How does this (not so) new approach in software development benefit you? Your own team of developers...

And everyone's talking about tones of flexibility being unlocked and about the Twig templates' extensibility. About how front-end developers, even those with little knowledge of Drupal, specialized in various languages, can now... “come right on board”. Since they're already familiar with the Twig engine...

Also, we can't ignore all the hype around the advantage of the streamlined development cycles in Drupal and of the consistent user experience across a whole portfolio of Drupal apps/websites.

But let's take all these tempting advantages of component-based UI development in Drupal 8 and point out how they benefit your team precisely.
 

1. But First: What Is a Component?

It's a standalone piece of software that can appear in multiple places across your Drupal website/application.

One of the most relevant examples is that of a content hub. One displaying teasers of the latest blog posts, events... You could set up a component that would determine how each item in that content hub should look like.

In short:
 

  • one single component can be used by several types of content
  • any update to its template/style would automatically reflect on all those content types, as well
     

Accessible via an API, this independent piece of software explicitly defines all its application dependencies.|

Your team could then easily architect a new interface by just scanning through and selecting from the library of components.
 

2. What Is Component-Driven Development? What Problems Does It Solve?

A succinct definition of component-based software engineering would be:

A software development technique where you'd select off-the-shelf, reusable components and put them together according to a pre-defined software architecture.

“And what challenges does it address?”

It streamlines and lowers the level of complexity of otherwise intricate, time-consuming development and design processes. As the author of given components, your role is to get it implemented.

No need to worry about how they'll get “assembled”; this is what the well-defined external structure is there for.

Word of caution: mind you don't get too... engrossed in putting together the right components, in architecting the best component-based structure for you then risk investing too little time in... building them properly.
 

3. Component-Based Development in Drupal 8

Now, if we are to focus our attention on the component-based UI approach in relation to Drupal 8 software development, here are the key aspects worth outlining:

  • with the Twig engine in Drupal 8, you're free to “joggle with” extensible templates; once you've defined a Twig template in one place, we get to reuse it across the whole Drupal website/app
     
  • the Component Libraries module allows you to set up template files (storing all their needed JS and CS), assign a namespace for them and place them pretty much anywhere on your Drupal filespace (not just in your themes' “templates” directory)
     
  • you then get to use the KSS Node library and define a living style guide; it's where you'll store all the component templates built for your Drupal website (styles, markup, JS behaviors, etc.)

By filling in your toolboxes with all these tools — the results of a joint effort of the Drupal and the front-end communities  —  you're empowered to design themes that are more modular. And, therefore, more efficient...


4. The Top 6 Benefits of the Component-Based UI Approach
 

4.1. It Ensures UX Consistency Across All Your Drupal 8 Websites

Take your library of components as the “headquarters” for all the teams involved in your Drupal project: QA, business, development, design teams...

It's there that they can find the pre-defined standards they need to keep the consistency of the features they implement or of other tasks they carry out across multiple projects.

A consistency that will bubble up to the user experience itself, across your whole portfolio of Drupal 8 websites/applications...
 

4.2. It Accelerates the Process of Turning Your Visual Design into a UI 

Embracing the component-based development in Drupal 8 you'd avoid those unwanted, yet so frequent scenarios where the front-end developer gets tangled up in the wireframe he receives and:
 

  • he/she translates parts of it the... wrong way
  • he digs up all types of “surprise” issues  
     

By using a component-driven UI approach translating a visual design into a user interface gets much more... event-less. 

With:
 

  • a pre-defined component architecture to rely on
  • well-established standards to follow
  • a whole library of component templates at hand
     

… there are fewer chances of discrepancies between the UX defined in the visual design and the one delivered via the resulting user interface.

Not to mention the reduced delivery timelines...
 

4.3. It Streamlines the Whole Development Process 

“Sustainability” is the best word to define this approach to Drupal software development.

Just think about it:

  • whether it's a particular grid, navigation or layout that your front-end developer needs when working on a new project, he/she can pull it right from the component library at hand
     
  • … and “inject” it into the app/website he's working on
     
  • in case that element needs further updating, the developer will already have the baseline to start with
     
  • … there's no need for new components to be designed, from the ground up, with every single project: the already existing ones can always get further extended

And that can only translate into significant savings of both time and money.
 

4.4. It Reduces the Time Spent on Setting Up the Functionality & Defining the UX

And this is one of the key benefits of using component-based development in Drupal 8. Your various teams would no longer need to define the UX requirements and the functionality every single time during the design process.

With an easily accessible library of components, they can always pull a component standing for a specific requirement (display of complex data, filtering, pagination in grids, etc.) and just define its extensions. And the business logic, as well.
 

4.5. It Enables You to Systematically Reuse Your Components

And “reusability” goes hand in hand with “sustainability”. I would even say that it's a synonym for “future-proofing”, as well...

Just think about it: having a Drupal 8 website in a component-based format you can always rearrange components as technologies grow outdated and new ones emerge...

In short, embracing a component-based development in Drupal 8 enables you to remove the need of rebuilding your website every time its underlying technologies “grow out of fashion”.

With your component library at hand, you'll be able to swap your guidelines, design patterns and various content templates in and out, keeping your Drupal app or website up to date.
 

4.6. It Integrates Seamlessly into the Development Process 

By leveraging a component-based development in Drupal 8, you'd also gain better control over the whole development cycle. The update process here included...

Since you'd then build your components and manage your production quality user interface code in a repository like GitHub, every update that you'd make will be displayed in there. And be easily accessible to everyone in your team.

In short, your developers get to pull pieces of code from the repository to further extend them, then re-submit them to GitHub (or to another source code repository) for review.

With the ability to version your component library, your team can keep a close track of all your Drupal applications with their corresponding versions of the approved UX.
 

The END!

This how the component-based development in Drupal 8 would benefit you and your team. Have we left out other key advantages of using this approach?

Image by Arek Socha from Pixabay

Apr 08 2019
Apr 08
Acro Media teams up with BigCommerce


Acro Media has teamed up with BigCommerce, a leading SaaS ecommerce platform, to create the BigCommerce for Drupal module, a headless commerce module integrating both platforms together.

What does this mean? It means that companies can now utilize the quick-to-market and feature-rich backend benefits of BigCommerce SaaS while enjoying the content-rich and extensible frontend experience of Drupal, the open-source CMS. It’s a melding of systems that results in a best-of-both-worlds solution for today's digital experience driven ecommerce needs.

Discover BigCommerce for Drupal

Read the full press release below.

April 8, 2019 11:00 am EDT

BigCommerce for Drupal Brings Customized Shopping Experiences to Drupal Community

SEATTLE – April 8, 2019 – BigCommerce, the leading SaaS ecommerce platform for fast-growing and established brands, today announced BigCommerce for Drupal, a headless commerce module built specifically for the open-source content management system (CMS), at DrupalCon Seattle. Developed in partnership with Acro Media, a world-renowned digital commerce agency, BigCommerce for Drupal gives brands the ability to embed flexible, enterprise-level ecommerce functionality into revolutionary customer experiences created within Drupal’s highly-extensible and secure CMS.

Available now in the Drupal module library, BigCommerce for Drupal facilitates an agile headless commerce architecture for merchants by decoupling Drupal’s powerful front-end CMS and BigCommerce’s scalable commerce engine. Knitted together by fast, open-source APIs, the module allows the two platforms to operate simultaneously and more efficiently within a single interface. Additionally, BigCommerce for Drupal is built directly into Drupal Commerce, making it compatible with the many existing themes and modules available within Drupal Commerce.

“Shopping experiences should not be limited by any single content management or ecommerce platform’s native capabilities, and BigCommerce for Drupal embodies that philosophy. We want pioneering brands to continue driving retail innovation forward and help redefine how customers buy products, whether it be through augmented reality, social selling or any disruptive technology that lies ahead,” said Russell Klein, chief development officer at BigCommerce. “Furthermore, announcing BigCommerce’s headless implementation at DrupalCon, an event that brings together one of the strongest and most engaged online communities, signals the value we place on open-source technology that can be made better through collaboration.”

Key features of BigCommerce for Drupal include:

  • Drupal Commerce Core: BigCommerce for Drupal is built atop the Drupal Commerce module, developed in part by Acro Media, tapping into years of iterative improvements and enhancements.
  • Data Sync: With BigCommerce for Drupal, retailers can synchronize product and metadata directly from BigCommerce into Drupal, and then augment and manage data directly within the Drupal CMS.
  • Cached Commerce: The connected BigCommerce store will sync at merchant-determined intervals, saving a cached version of the catalog inside Drupal rather than pinging BigCommerce APIs for information.

“As two open, API-driven platforms, there is a natural alignment between BigCommerce and Drupal, and this module bridges the gap to unify their respective functionalities into one intuitive interface,” said Shae Inglis, chief executive officer at Acro Media. “The future of ecommerce is open architecture, and headless integrations lets even enterprise-level brands be nimble and capitalize on the explosion of new, innovative consumer touchpoints.”

To learn more about BigCommerce for Drupal visit www.bigcommerce.com/drupal. To download the BigCommerce for Drupal Module visit www.drupal.org/project/bigcommerce. DrupalCon attendees can also get more information by visiting the Acro Media booth (#802).

Is BigCommerce and Drupal right for you?

Quickly find out using Acro Media's Ideal Commerce Architecture Analysis.

Complete Your Ideal Architecture Analysis

Apr 08 2019
Apr 08
Go to the profile of Deirdre Habershaw

Oct 19, 2018

Today, more than 80% of people’s interactions with government take place online. Whether it’s starting a business or filing for unemployment, too many of these experiences are slow, confusing, or frustrating. That’s why, one year ago, the Commonwealth of Massachusetts created Digital Services in the Executive Office of Technology and Security Services. Digital Services is at the forefront of the state’s digital transformation. Its mission is to leverage the best technology and information available to make people’s interactions with state government fast, easy, and wicked awesome. There’s a lot of work to do, but we’re making quick progress.

In 2017, Digital Services launched the new Mass.gov. In 2018, the team rolled out the first-ever statewide web analytics platform to use data and verbatim user feedback to guide ongoing product development. Now our researchers and designers are hard at work creating a modern design system that can be reused across the state’s websites and conducting the end-to-end research projects to create user journey maps to improve service design.

If you want to work in a fast-paced agile environment, with a good work life balance, solving hard problems, working with cutting-edge technology, and making a difference in people’s lives, you should join Massachusetts Digital Services.

Check out some of our current postings here:

Creative Director (posting coming soon, submit your resume here)

Director of Technology (posting coming soon, submit your resume here)

Senior Drupal Developer (posting coming soon, submit your resume here)

Didn’t see a good fit for you? Check out more about hiring at the Executive Office of Technology and Security Services and submit your resume in order to be informed on roles as they become available.

Apr 08 2019
Apr 08

For the longest time, web content had one purpose - to get pushed on a web page. But everyone today wants content to be available across the board - on mobile devices, native apps, digital signage, and show up on third-party sites and social networks - if it is to garner the right audience.

However, making this happen is easier said than done. Some of the persistent challenges faced by large editorial teams involve:

  • Coordinating and approving content that’s ready to go live

  • Ensuring authors and contributors can access a central system to create/submit content

  • Publishing a number of content pieces on different websites/subdomains.

Introducing Content Staging, Synchronization, and Syndication

Between 2010 and 2016, the media consumption grew at a 2% rate. It makes one thing clear that people love to consume content and they will in the future as well.

This, in turn, puts a lot of pressure on content creators and marketers to create and push new pieces of content.

Here’s how you can ensure quality and quantity production:

Staging

Creating quality content involves a lot of work, checks, and approval. Big publishing websites might come across several challenges in the process, such as:

  • Publishing a number of articles at the same time, and doing it across different websites/ sub-domains

  • Getting approval in a centralized system

Intricate publishing workflow is a critical part of the content strategy for any organization that employs distributed management.  Editing the content on the live site can result in accidental publishing. To avoid that, a separate staging environment is needed in a robust workflow.

Staging and publishing without requiring the editor to log into the target site is what content staging would help with.

Synchronization

Once the content is approved on the different environments, it must be automatically updated for other website environments. Synchronization helps you keep your environments in perfect sync by automating the secure provisioning of content, code, templates and digital assets between them.

Source: content Sync

Administrators can create and schedule multiple synchronization tasks to automatically occur in the future. It will target different destination servers and websites, or manually execute synchronization tasks through the user interface.

Developers can leverage the API and event handlers to automatically synchronize any type of staging tasks according to custom requirements.

Syndication

The web is big and noisy. So much so that even though you are targeting a niche audience, chances of them landing on your blog depletes with each day. Syndication gets your content in front of a different audience who might not be aware of your website otherwise.

“Syndication is important because it generates brand awareness and more traffic.”

content_syndication_staging_and_sychronization_with_drupal_srijan technologies                                          Drupal websites often syndicate content from Drupal planet

In simple terms, content syndication is republishing the content on a third-party website. Syndication works great for national and international media and publishing websites. There is no restriction on the kind of content that can be syndicated. The list can include blog posts, articles, infographics, videos and more.

It is a low-cost strategy which media and publishing websites like Huffington Post, CNN,  and NYTimes often use to garner a new audience. Syndication brings free exposure, backlinks, and greater organic traffic.

the_syndicate_image_srijan technologies

However, syndicated content is ultimately duplicate content. And duplicate content can create havoc with your SEO because Google loves unique content.  

While ranking the content it will only index the version that is original and larger, high-traffic website. You can make your syndicated content SEO-friendly by ensuring it is indexed correctly, on your site and on your syndication partner’s site.

Drupal Solutions for Content Staging, Synchronization, and Syndication

Drupal’s digital experience platform knows that your content must reach more than just websites. So yes, of course, it has modules for staging, syncing and syndication.

1. Workflow

Workflow, as the name suggests creates arbitrary workflows. Creating different workflows for the content saved as ‘draft’, ‘review’ and ‘published’, it can be assigned to the story node type.

  • Only users with role 'chief editor' can set stories to the published state. It also allows to set up workflow to alter states from form, page, comment, a special block, and a special workflow tab.

This module is available for Drupal 8.

2. Deploy

The Deploy module lets users to easily stage and preview content. It can manage the dependencies between different entities, like node references, automatically.

Designed to have a rich API which can be easily extended in a variety of content staging situations, Deploy can be used for both single and cross-site staging.

It should be noted that the Deploy module doesn't provide any settings or configuration pages, and the user must ensure that the target workspaces and/or remotes are configured correctly (workspaces configuration pages are provided by Workspace module).

For UI, Deploy provides just a link to run a deployment between current active workspace and its target.

This module is available for Drupal 8.

3. CMS Content Sync

CMS Content Sync provides content synchronization features between Drupal sites using a Node.js based Sync Core. It is built to support the synchronization of a huge amount of data, including content and media assets between many Drupal sites that can't be handled by Drupal itself.

Source: DrupalEurope

The three use cases for the CMS content sync are:

Content Staging: Content Sync allows you to test code updates with your content and publish code and content simultaneously. It further allows editorial review processes to ensure consistent quality of content.

Content Syndication:  For distributed teams, it allows the content to be updated and deleted centrally. It pushes content and media items at any of your sites to publish them on any targeted remote site automatically.

Content Pool: This feature lets you update and delete these items from the source site or allows you to completely customize it on the remote site. Further, you can connect the remote sites. Each content item comes with a preview and link to the source site that makes it easy to identify and select.

If your enterprise manages a large volume of content over a multi-site architecture, staging, syndication, and sync are crucial. Srijan’s expert teams can help you optimize these processes and follow industry best practices. Just drop us a line and our team will be in touch.

Apr 05 2019
Apr 05

In this project we had built a collection of components using a combination of Paragraphs and referenced block entities. While the system we built was incredibly flexible, there were a number of variations we wanted to be able to apply to each component. We also wanted the system to be easily extensible by the client team going forward. To this end, we came up with a system of configuration entities that would allow us to provide references to classes and thematically name these styles. We built upon this by extending the EntityReferenceSelections plugin, allowing us to customize the list of styles available to a component by defining where those styles could be used.

The use of configuration entities allows the client team to develop and test new style variations in the standard development workflow and deploy them out to forward environments, giving an opportunity to test the new styles in QA prior to deployment to Production.

The Styles configuration entity

This configuration entity is at the heart of the system. It allows the client team to come in through the UI and create the new style. Each style is comprised of one or more classes that will later be applied to the container of the component the style is used on. The Style entity also contains configuration allowing the team to identify where this style can be used. This will be used later in the process to allow the team to limit the list of available styles to just those components that can actually make use of them.

The resulting configuration for the Style entity is then able to be exported to yml, versioned in the project repository and pushed forward through our development pipeline. Here’s an example of a Style entity after export to the configuration sync directory.

uuid: 7d112e4e-0c0f-486e-ae36-b608f55bf4e4
langcode: en
status: true
dependencies: {  }
id: featured_blue
label: 'Featured - Blue'
classes:
  - comp__featured-blue
uses:
  rte: rte
  cta: cta
  rail: '0'
  layout: '0'
  content: '0'
  oneboxlisting: '0'
  twoboxlisting: '0'
  table: '0'

Uses

For “Uses” we went with a simple configuration form. The result of this is form is stored in the key value store for Drupal 8. We can then access that configuration from our Styles entity and from our other plugins in order to retrieve and decode the values. Because the definition of each use was a simple key and label, we didn’t need anything more complex for storage.

Assigning context through a custom Selection Plugin

By extending the core EntityReferenceSelection plugin, we’re able to combine our list of Uses with the uses defined in each style component. To add Styles to a component, the developer would first add a entity reference field to the the Styles config entity to the component in question. In the field configuration for that entity reference field, we can chose our custom Selection Plugin. This exposes our list of defined uses. We can then select the appropriate use for this component. The end result of this is that only the applicable styles will be presented to the content team when they create components of this type.

<?php

/**
 * Plugin implementation of the 'selection' entity_reference.
 *
 * @EntityReferenceSelection(
 *   id = "uses",
 *   label = @Translation("Uses: Filter by where the referenced entity will be used."),
 *   group = "uses",
 *   weight = 0
 * )
 */
class UsesSelection extends SelectionPluginBase implements ContainerFactoryPluginInterface {

  use SelectionTrait;

  /**
   * {@inheritdoc}
   */
  public function buildConfigurationForm(array $form, FormStateInterface $form_state) {
    $form = parent::buildConfigurationForm($form, $form_state);

    $options = Styles::getUses();
    $uses = $this->getConfiguration()['uses'];

    if ($options) {
      $form['uses'] = [
        '#type' => 'checkboxes',
        '#title' => $this->t('Uses'),
        '#options' => $options,
        '#default_value' => $uses,
      ];
    }
    return $form;
  }

  /**
   * {@inheritdoc}
   */
  public function getReferenceableEntities($match = NULL, $match_operator = 'CONTAINS', $limit = 0) {
    $uses_config = $this->getConfiguration()['uses'];

    $uses = [];
    foreach ($uses_config as $key => $value) {
      if (!empty($value)) {
        $uses[] = $key;
      }
    }

    $styles = \Drupal::entityTypeManager()
      ->getStorage('styles')
      ->loadMultiple();

    $return = [];
    foreach ($styles as $style) {
      foreach ($style->get('uses') as $key => $value) {
        if (!empty($value)) {
          if (in_array($key, $uses)) {
            $return[$style->bundle()][$style->id()] = $style->label();
          }
        }
      }
    }
    return $return;
  }

}

In practice, this selection plugin presents a list of our defined uses in the configuration for the field. The person creating the component can then select the appropriate use definitions, limiting the scope of styles that will be made available to the component.

Components, with style.

The final piece of the puzzle is how we add the selected styles to the components during content creation. Once someone on the content team adds a component to the page and selects a style, we then need to apply the style to the component. This is handled by preprocess functions for each type of component we’re working with. In this case, Paragraphs and Blocks.

In both of the examples below we check to see if the entity being rendered has our ‘field_styles’. If the field exists, we load its values and the default class attributes already applied to the entity. We then iterate over any styles applied to the component and add any classes those styles define to an array. Those classes are merged with the default classes for the paragraph or block entity. This allows the classes defined to be applied to the container for the component without a need for modifying any templates.

/**
 * Implements hook_preprocess_HOOK().
 */
function bcbsmn_styles_preprocess_paragraph(&$variables) {
  /** @var Drupal\paragraphs\Entity\Paragraph $paragraph */
  $paragraph = $variables['paragraph'];
  if ($paragraph->hasField('field_styles')) {
    $styles = $paragraph->get('field_styles')->getValue();
    $classes = isset($variables['attributes']['class']) ? $variables['attributes']['class'] : [];
    foreach ($styles as $value) {
      /** @var \Drupal\bcbsmn_styles\Entity\Styles $style */
      $style = Styles::load($value['target_id']);
      if ($style instanceof Styles) {
        $style_classes = $style->get('classes');
        foreach ($style_classes as $class) {
          $classes[] = $class;
        }
      }
    }
    $variables['attributes']['class'] = $classes;
  }
}

/**
 * Implements hook_preprocess_HOOK().
 */
function bcbsmn_styles_preprocess_block(&$variables) {
  if ($variables['base_plugin_id'] == 'block_content') {
    $block = $variables['content']['#block_content'];
    if ($block->hasField('field_styles')) {
      $styles = $block->get('field_styles')->getValue();
      $classes = isset($variables['attributes']['class']) ? $variables['attributes']['class'] : [];
      foreach ($styles as $value) {
        /** @var \Drupal\bcbsmn_styles\Entity\Styles $style */
        $style = Styles::load($value['target_id']);
        if ($style instanceof Styles) {
          $style_classes = $style->get('classes');
          foreach ($style_classes as $class) {
            $classes[] = $class;
          }
        }
      }
      $variables['attributes']['class'] = $classes;
    }
  }
}

Try it out

We’ve contributed the initial version of this module to Drupal.org as the Style Entity project. We’ll continue to refine this as we use it on future projects and with the input of people like you. Download Style Entity and give it a spin, then let us know what you think in the issue queue.

Apr 04 2019
Apr 04
Go to the profile of Julia Gutierrez

DrupalCon2019 is heading to Seattle this year and there’s no shortage of exciting sessions and great networking events on this year’s schedule. We can’t wait to hear from some of the experts out in the Drupalverse next week, and we wanted to share with you a few of the sessions we’re most excited about.

Adam is looking forward to:

Government Summit on Monday, April 8th

“I’m looking forward to hearing what other digital offices are doing to improve constituents’ interactions with government so that we can bring some of their insights to the work our agencies are doing. I’m also excited to present on some of the civic tech projects we have been doing at MassGovDigital so that we can get feedback and new ideas from our peers.”

Bryan is looking forward to:

1. Introduction to Decoupled Drupal with Gatsby and React

Time: Wednesday, April 10th from 1:45 pm to 2:15 pm

Room: 6B | Level 6

“We’re using Gatsby and React today on to power Search.mass.gov and the state’s budget website, and Drupal for Mass.gov. Can’t wait to learn about Decoupled Drupal with Gatsby. I wonder if this could be the right recipe to help us make the leap!”

2. Why Will JSON API go into Core?

Time: Wednesday, April 10th from 2:30 pm to 3:00 pm

Room: 612 | Level 6

“Making data available in machine-readable formats via web services is critical to open data and to publish-once / single-source-of-truth editorial workflows. I’m grateful to Wim Leers and Mateu Aguilo Bosch for their important thought leadership and contributions in this space, and eager to learn how Mass.gov can best maximize our use of JSON API moving forward.”

I (Julia) am looking forward to:

1. Personalizing the Teach for America applicant journey

Time: Wednesday, April 10th from 1:00 pm to 1:30 pm

Room: 607 | Level 6

“I am really interested in learning from Teach for America on how they implemented personalization and integrated across applications to bring applicants a consistent look, feel, and experience when applying for a Teach for America position. We have created Mayflower, Massachusetts government’s design system, and we want to learn what a single sign-on for different government services might look like and how we might use personalization to improve the experience constituents have when interacting with Massachusetts government digitally. ”

2. Devsigners and Unicorns

Time: Wednesday, April 10th from 4:00 pm to 4:30 pm

Room: 612 | Level 6

“I’m hoping to hear if Chris Strahl has any ‘best-practices’ and ways for project managers to leverage the unique multi-skill abilities that Devsigners and unicorns possess while continuing to encourage a balanced workload for their team. This balancing act could lead towards better development and design products for Massachusetts constituents and I’d love to make that happen with his advice!”

Melissa is looking forward to:

1. DevOps: Why, How, and What

Time: Wednesday, April 10th from 1:45 pm to 2:15 pm

Room: 602–604 | Level 6

“Rob Bayliss and Kelly Albrecht will use a survey they released as well as some other important approaches to elaborate on why DevOps is so crucial to technological strategy. I took the survey back in November of 2018, and I want to see what those results from the survey. This presentation will help me identify if any changes should be made in our process to better serve constituents from these results.”

2. Advanced Automated Visual Testing

Time: Thursday, April 11th from 2:30 pm to 3:00 pm

Room: 608 | Level 6

“In this session Shweta Sharma will speak to what visual testings tools are currently out there and a comparison of the tools. I am excited to gain more insight into the automated visual testing in faster and quicker releases so we can identify any gotchas and improve our releases for Mass.gov users.

P.S. Watch a presentation I gave at this year’s NerdSummit in Boston, and stay tuned for a blog post on some automation tools we used at MassGovDigital coming out soon!”

Lastly, we really hope to see you at our presentations:

We hope to see old friends and make new ones at DrupalCon2019, so be sure to say hi to Bryan, Adam, Melissa, Lisa, Moshe, or me when you see us. We will be at booth 321 (across from the VIP lounge) on Thursday giving interviews and chatting about technology in Massachusetts, we hope you’ll stop by!

Apr 03 2019
Apr 03

Why would you still want to opt for a Drupal multisite setup? What strong reasons are there for using this Drupal 8 feature?

I mean when there are so many other tempting options, as well:
 

  • you could use Git, for instance, and still have full control of all your different websites, via a single codebase
  • you could go with a Composer workflow for managing your different websites
     

One one hand, everyone's talking about the savings you'd make — of both time and money — for keeping your “cluster” of websites properly updated. And yet, this convenience comes bundled with certain security risks that are far from negligible.

Just think single point of failure...

Now, to lend you a hand with solving your dilemma, let's go over the key Drupal multisite pros and cons. So that, depending on your:
 

  • developers' skill level
  • current infrastructure 
  • project budget
  • hierarchy of priorities
  • host capabilities
  • multi-site infrastructure's specific needs
     

… you can decide for yourself whether a Drupal multisite setup does suit your situation or you'd better off with one of its valid alternatives.

And whether you agree that it should eventually get removed from Drupal 9.x or not.
 

1. Drawbacks for Using the Multisite Feature/Arguments for Removing It

Now, let us expose this built-in Drupal feature's main limitations. Those that might just make you think twice before using it:

  • there's no way to update the core of just one Drupal website from your setup; you're constrained to update them all at once, every single time
     
  • it becomes quite challenging to assign a team with working on one (or some) of your websites only
     
  • it's not as richly documented as other built-in features (especially if we consider its “age”)
     
  • it exposes your Drupal multisite setup to security vulnerabilities; it's enough for one website from the “cluster” to get corrupted (accidentally or intentionally) for all the other ones to get infected
     
  • reviewing code becomes a major challenge: you can't “get away with” writing code for one website only; instead, you'll need to rewrite code on all your websites included in the setup, to test it against all breakpoints and so on...
     
  • putting together test and state environments gets a bit more cumbersome
     
  • in order to efficiently manage such an infrastructure of websites strong technical skills are required; are there any command-line experts in your team?
     
  • having a single codebase for all your Drupal websites works fine if and only if they all use the same settings, same modules; if not, things get a bit... chaotic when, for instance, there's a security issue with one module, used on all your websites, that affects your entire ecosystem
     
  • also, since your hypothetical shared database is made of a wide range of tables when you need to migrate one site only, you'll have... “the time of your life” trying to identify those tables that belong to some websites and those that they all share

2. Top 3 Reasons to Go With a Drupal Multisite Setup

Now that we've taken stock of the main drawbacks for leveraging this Drupal feature, let's try to identify the main reasons for still using it:
 

  1. A heavy-weighing reason is given by the time and money you'd save on updating your “cluster” of sites. With the right experience in using the command-line you can run the due updates in just one codebase and have them run across all your websites simultaneously
     
  2. It's an approach that becomes particularly convenient if you need self-hosting for your setup (e.g. take the case of a university hosting all its different websites or a Drupal distribution provider...)
     
  3. You'd be using less memory for OpCache and this benefit becomes particularly tempting if you're dealing with RAM constraints on your servers
     

3. In Conclusion...

There still are solid reasons to opt for a Drupal multisite setup. Reasons that could easily turn into strong arguments for not having it removed in Drupal 9.x...

But there are also equally strong reasons for getting discouraged by the idea of leveraging this age-old feature. Where do you add that from Docker to Composer and GIT, you're not running out of options for managing your “cluster” of websites.

In the end, the decision depends on your situation, that's made of specific factors like budget, hosting capabilities, whether your websites are using the same modules, etc.

The answer to your “Are there any valid reasons for using the Drupal multisite feature?” cannot be but:
 

“Yes there are, but counterbalanced by certain disadvantages to consider.”

Image by Arek Socha from Pixabay

Apr 01 2019
Apr 01

Helping content creators make data-driven decisions with custom data dashboards

Go to the profile of Greg Desrosiers

Aug 20, 2018

Our analytics dashboards help Mass.gov content authors make data-driven decisions to improve their content. All content has a purpose, and these tools help make sure each page on Mass.gov fulfills its purpose.

Before the dashboards were developed, performance data was scattered among multiple tools and databases, including Google Analytics, Siteimprove, and Superset. These required additional logins, permissions, and advanced understanding of how to interpret what you were seeing. Our dashboards take all of this data and compile it into something that’s focused and easy to understand.

We made the decision to embed dashboards directly into our content management system (CMS), so authors can simply click a tab when they’re editing content.

GIF showing how a content author navigates to the analytics dashboard in the Mass.gov CMS.

How we got here

The content performance team spent more than 8 months diving into web data and analytics to develop and test data-driven indicators. Over the testing period, we looked at a dozen different indicators, from pageviews and exit rates to scroll-depth and reading grade levels. We tested as many potential indicators as we could to see what was most useful. Fortunately, our data team helped us content folks through the process and provided valuable insight.

Love data? Check out our 2017 data and machine learning recap.

We chose a sample set of more than 100 of the most visited pages on Mass.gov. We made predictions about what certain indicators said about performance, and then made content changes to see how it impacted data related to each indicator.

We reached out to 5 partner agencies to help us validate the indicators we thought would be effective. These partners worked to implement our suggestions and we monitored how these changes affected the indicators. This led us to discover the nuances of creating a custom, yet scalable, scoring system.

Line chart showing test results validating user feedback data as a performance indicator.

For example, we learned that a number of indicators we were testing behaved differently depending on the type of page we were analyzing. It’s easy to tell if somebody completed the desired action on a transactional page by tracking their click to an off-site application. It’s much more difficult to know if a user got the information they were looking for when there’s no action to take. This is why we’re planning to continually explore, iterate on, and test indicators until we find the right recipe.

How the dashboards work

Using the strategies developed with our partners, we watched, and over time, saw the metrics move. At that point, we knew we had a formula that would work.

We rolled indicators up into 4 simple categories:

  • Findability — Is it easy for users to find a page?
  • Outcomes — If the page is transactional, are users taking the intended action? If the page is focused on directing users to other pages, are they following the right links?
  • Content quality — Does the page have any broken links? Is the content written at an appropriate reading level?
  • User satisfaction — How many people didn’t find what they were looking for?
Screenshot of dashboard results as they appear in the Mass.gov CMS.

Each category receives a score on a scale of 0–4. These scores are then averaged to produce an overall score. Scoring a 4 means a page is checking all the boxes and performing as expected, while a 0 means there are some improvements to be made to increase the page’s overall performance.

All dashboards include general recommendations on how authors can improve pages by category. If these suggestions aren’t enough to produce the boost they were looking for, authors can meet with a content strategist from Digital Services to dive deeper into their content and create a more nuanced strategy.

GIF showing how a user navigates to the “Improve Your Content” tab in a Mass.gov analytics dashboard.

Looking ahead

We realize we can’t totally measure everything through quantitative data, so these scores aren’t the be-all, end-all when it comes to measuring content performance. We’re a long way off from automating the work a good editor or content strategist can do.

Also, it’s important to note these dashboards are still in the beta phase. We’re fortunate to work with partner organizations who understand the bumps in the proverbial development road. There are bugs to work out and usability enhancements to make. As we learn more, we’ll continue to refine them. We plan to add dashboards to more content types each quarter, eventually offering a dashboard and specific recommendations for the 20+ content types in our CMS.

Apr 01 2019
Apr 01

Vienna, VA March 19, 2019—Mobomo,

Mobomo, LLC is pleased to announce our award as a prime contractor on the $25M Department of Interior (DOI) Drupal Developer Support Services BPA . Mobomo brings an experienced and extensive Drupal Federal practice team to DOI.  Our team has launched a large number of award winning federal websites in both Drupal 7 and Drupal 8, to include www.nasa.gov, www.usgs.gov, and www.fisheries.noaa.gov.,These sites have won industry recognition and awards including the 2014, 2016, 2017 and 2018 Webby Award; two 2017 Innovate IT awards; and the 2018 MUSE Creative Award and the Acquia 2018 Public Sector Engage award.

DOI has been shifting its websites from an array of Content Management System (CMS) and non-CMS-based solutions to a set of single-architecture, cloud-hosted Drupal solutions. In doing so, DOI requires Drupal support for hundreds of websites that are viewed by hundreds of thousands of visitors each year, including its parent website, www.doi.gov, managed by the Office of the Secretary. Other properties include websites and resources provided by its bureaus  (Bureau of Indian Affairs, Bureau of Land Management, Bureau of Ocean Energy Management, Bureau of Reclamation, Bureau of Safety and Environmental Enforcement, National Park Service, Office of Surface Mining Reclamation and Enforcement, U.S. Fish and Wildlife Service, U.S. Geological Survey) and many field offices.

This BPA provides that support. The period of performance for this BPA is five years and it’s available agency-wide and to all bureaus as a vehicle for obtaining Drupal development, migration, information architecture, digital strategy, and support services. Work under this BPA will be hosted in DOI’s OpenCloud infrastructure, which was designed for supporting the Drupal platform.

Mar 29 2019
Mar 29

DrupalCon Seattle is next week! We’re excited to get together with the community for learning and collaborations.

But first, we have to travel to Seattle. We’re so excited about it that we made a Spotify playlist made up of all Seattle bands.

So much great music has come from Seattle, you’re bound to find something you like.

We’re busy at DrupalCon with summits, sessions, community work, and more. Come visit us at booth #306, or check out where we will be below. Either way, come say hello.

Summits

  • Monday April 8, 8:30 am – 12:30 pm: Anne Stefanyk is joining Pantheon at Selling to the Marketing Buyer.
  • Tuesday, April 9, 9:00 am – 4:30 pm:  Anne will be leading an afternoon breakout session at the Nonprofit Summit,
  • Tuesday, April 9, 10:00 am – 4:30 pm: AmyJune Hineline will be leading the Community Summit.

Community

Our community liaison AmyJune will be staffing the at the Core Mentoring booth on Wednesday and Thursday. She’ll also be doing two workshops:

Sessions

Kanopians are speaking at three sessions:

Birds of a Feather (BOFs)

BOFs are a great way to have intimate discussions on topics, and collaborating with peers is one of our favorite things.

  • Wednesday 11:00 am: AmyJune Hineline is hosting one on SimplyTest.me.
  • Wednesday 4:45 pm: Sean Dietrich is hosting one on Docksal.
  • Thursday 2:30 pm:, Jim Birch is hosting the Drupal and SEO BOF.

Collaborations

Each Kanopian will be collaborating all week long while at DrupalCon! Keep a look out for Jim, Jason, Cindy, Kat, AmyJune, and Sean as they join other Drupalers to help push the Drupal project forward.

Looking forward to seeing you there!

Mar 29 2019
Mar 29

DrupalCon Seattle is next week! We’re excited to get together with the community for learning and collaborations.

But first, we have to travel to Seattle. We’re so excited about it that we made a Spotify playlist made up of all Seattle bands.

So much great music has come from Seattle, you’re bound to find something you like.

We’re busy at DrupalCon with summits, sessions, community work, and more. Come visit us at booth #306, or check out where we will be below. Either way, come say hello.

Summits

  • Monday April 8, 8:30 am – 12:30 pm: Anne Stefanyk is joining Pantheon at Selling to the Marketing Buyer.
  • Tuesday, April 9, 9:00 am – 4:30 pm:  Anne will be leading an afternoon breakout session at the Nonprofit Summit,
  • Tuesday, April 9, 10:00 am – 4:30 pm: AmyJune Hineline will be leading the Community Summit.

Community

Our community liaison AmyJune will be staffing the at the Core Mentoring booth on Wednesday and Thursday. She’ll also be doing two workshops:

Sessions

Kanopians are speaking at three sessions:

Birds of a Feather (BOFs)

BOFs are a great way to have intimate discussions on topics, and collaborating with peers is one of our favorite things.

  • Wednesday 11:00 am: AmyJune Hineline is hosting one on SimplyTest.me.
  • Wednesday 4:45 pm: Sean Dietrich is hosting one on Docksal.
  • Thursday 2:30 pm:, Jim Birch is hosting the Drupal and SEO BOF.

Collaborations

Each Kanopian will be collaborating all week long while at DrupalCon! Keep a look out for Jim, Jason, Cindy, Kat, AmyJune, and Sean as they join other Drupalers to help push the Drupal project forward.

Looking forward to seeing you there!

Presentation Videos


Deep Cleaning: Creating Franchise Model Efficiencies with Drupal 8

Presenters: Anne Stefanyk and Katherine White

COIT offers cleaning services and 24/7 emergency restoration services and their 100+ locations serve more than 12 million homes & businesses across the United States and Canada. But their own website was a huge mess. In this case study we will cover the more technical parts of this Drupal 8 implementation.

[embedded content]


How to Work Remotely and Foster a Happy, Balanced Life

Presenters: Anne Stefanyk

In this session, we will talk about how to be the best remote employee, and will also provide strategies and ideas if you are a leader of a remote team. We will talk about key tactics to keep you (and all other staff) inspired, creative, productive and most importantly, happy!

[embedded content]
Mar 27 2019
Mar 27

A handful of “life-saving” module releases, enlightening tutorials, well-curated  Drupal theme selections... This month has “spoiled” us with lots of valuable Drupal blog posts. Therefore, coming up with a shortlist of 5 Drupal blog posts has been quite a challenge for us here, at OPTASY.

But, in the end, we did manage to trim our bulky lists of favorites. To focus on our common preferences and keep only the following truly valuable pieces of content on Drupal in our final selection:
 

Since keeping consistency across the websites that we develop is an ever-present challenge and priority for us, this post on building pattern libraries in Drupal came in handy...

While reading it we were already:
 

  • counting just how much time we would save for creating new functionalities and setting up new pages
  • anticipating how easy it would be to maintain our future Drupal websites once we've integrated pattern libraries that anyone could tap into and streamline the creation of new features
  • imagining how convenient it would be to just reuse design elements and functionality stored in those libraries
     

Overall: we couldn't stop thinking how streamlined the whole Drupal development process would be, for all our future projects. And to what extent the end user's experience would get improved by means of... consistency.

The solution the OpsenSense Labs presents there is an effective formula: Pattern Lab + Drupal 8= Emulsify.

Then, they get into details on:
 

  • what Emulsify is: a prototyping tool leveraging atomic design that you could rely on for setting up a living style guide
  • how Emulsify works: by integrating Pattern Lab it enables you to easily put together and manage components and thus streamline your entire development process in Drupal 8
     

The team from InternetDevels have surprised us with a present in the form of a new module that has the potential to become the newest tool in our Drupal development “essential toolkit”.

One including other valuable performance optimization Drupal modules...

It's called Quicklink and here's what makes it so... “tempting”: it uses link prefetching to boost up page loading time on Drupal 8 websites.

Take this example take from their blog post: a visitor lands on a specific page on your website with the intention of accessing other links as well. Once the used browser goes idle, the module tracks down his/her viewports and caches the content corresponding to the links in that viewport.

Once he/she clicks on any of those links, the content will have already been safely stored in the cache and thus it gets displayed much quicker. That is what link prefetching is all about...

Next, the blog post's author goes on delivering details on the underlying library, the API and method this module uses for link detection and respectively waiting for the browser to go idle. Then, it gets into specific details on how to install and configure the module.
 

Why have we included Vardot's piece of content on our favorite Drupal blog posts list: March edition? 

Because versatility has been one of their key criteria when selecting those specific 7 themes. They anticipated website owners' and development teams' requirements in terms of customization and flexibility — not just look & style — when picking their Drupal themes.

In this respect, their collection included Drupal themes ranging from Progressive to Winnex, from OWL to... Edmix.
 

Dries' post is a long-time awaited news: Drupal now ships with JSON:API support.

According to his predictions, in just a few months all Drupal 8 websites will get support for this module.

What does this mean?
 

  • it means that the once far-to-reach future where Drupal would be API-first is now... closer than ever 
  • Drupal teams get empowered to create content models with no coding required, straight in the Drupal UI
  • we're being provided with a web service API that pulls that content into JS apps, voice assistants, chatbots...
     

Just imagine: with this module in core, all your comments, blog posts, tags, and other Drupal entities will get easily accessed via JSON:API web service API. This way, you can serve your content across an entire ecosystem of platforms and devices...
 

We ran over this article the other day and we know just had to add it to our top 5 favorite Drupal blog posts of the month.

It presents a solution to a too frequent challenge: handling those scenarios where you're not 100% happy with the search results provided by Search API Solr and you need to... tweak them. 

To tailor them to your specific needs, so that they're fully relevant for your end users...

Now you have the option to trigger the Drupal module Search Overrides' power. It's designed to enable website admins to override the generated search results. Manually...

Say you're one of these Drupal site admins: you choose the nodes to be placed at the top of the search results generated when entering specific search terms and remove those nodes that shouldn't get displayed. As easy as that! The module will provide you with a method to leverage whenever you need to override search results on a Drupal website.

Note: the Echidna team's now working on integrating functionality that would allow for search result overrides to be... role-specific. For instance, a Drupal back-end team would get different results compared to the end users, for the very same search term.


The END!

These pieces of content have been our top favorite Drupal blog posts this month. How about yours?

Photo by Franck V. on Unsplash

Mar 16 2019
Mar 16

Planning to build a social network with Drupal? A business community maybe? A team or department collaborating on an intranet or portal? Or a network grouping multiple registered users that should be able to create and edit their own content and share their knowledge? What are those key Drupal 8 modules that would help you get started?

That would help you lay the groundwork...

And there are lots of social networking apps in Drupal core and powerful third-party modules that you could leverage, but first you need to set up your essential kit.

To give you a hand with that, we've selected:

5 modules in Drupal 8, plus a Drupal distribution, that you'll need to start a perfectly functional social networking website, with all the must-have content management features and knowledge sharing tools.
 

Before You Get Started: A Few Things to Take Care Of

First of all, let me guess the features on your must-have list:
 

  • articles
  • groups
  • photos
  • user profiles
  • groups
  • forums
     

It should feature pages with dynamic content leveraging a fine-grained access system and social media hubs, right?

Well, now that we've agreed on this, here are the preliminary steps to take before you get actually started, installing your key modules and so on:
 

  • configure your “Taxonomy” categories after you've installed the Forum module
  • set up a custom content type for Blog posts 
  • set up your thumbnail settings for the Article nodes
  • create your key user roles (admin, content author, paid subscriptions)
  • use the PathAuto module to define your URL path structure
  • define your Article nodes' thumbnail settings and remember to upload an anchor image, as well
     

Panels and Views make a “power team” to rely on for setting up pages with dynamic content for your social networking site.

What makes it a must-have module to add to your essential kit when you build a social network with Drupal? 

It enables you to create custom layouts for multiple uses.

You get to use it to set up your website's homepage, one featuring multiple Views blocks with dynamic content retrieved from forums, articles, blogs...

Feel free to add a top slideshow image, to go for multiple-tiled stacked layout, including views from forum, blog and article posts...

In short: the Panels module empowers you to get as creative as possible when setting up fine-tuned layouts for your landing pages displaying dynamic content.
 

Not only that it enables you to present content to your social network's registered users in pretty much any form you might think of — tables, lists, blocks, forum posts, galleries, reports, graphs — but it also:
 

  • enables you to display related content (e.g. display a list of the community members along with their pieces of content)
  • enables you to use contextual filters
     

It'll turn out to be one of the handiest Drupal 8 modules in your toolbox when you need to create and display dynamic content from:
 

  • forums
  • blocks
  • blogs
     

Yet, maybe one of the most common use cases for the Views module on a social networking website is that of:

Setting up a (Views) page listing all the article posts.
 

Another module you'll most certainly want to add to your social networking website as it:
 

  • enables both single and multi-user blogs
  • empowers authorized site members to maintain it
     

Speaking of which, blog entries can be either public or private for a specific user, depending on the role he/she's assigned with.

And it's precisely that system of user roles and corresponding permissions set up on your website that will determine whether a member can:
 

  • access the “Create Content” link or not
  • access a “My Blog” section or... not
     

You can further leverage this Blog module to add a “Recent blog posts” block to your webpages, in addition to the “Blogs” navigation link on your main navigation menu.
 

4. Profile, a Must-Have Module to Build a Social Network with Drupal

You just imagine that you could build a social network with Drupal without a module enabling you to create registration page fields, now can you?

Well, here it is: the Profile module.

And here are its “superpowers”:
 

  • it enables configurable user profiles
  • it enables expanded fields on the user registration page
  • it provides social network members with two different links, one for their account settings, one for their user profiles
  • it provides private profile fields (that only the admin and that specific user can access)
  • it enables you to set up different profile types for different user roles with... different permissions granted 
     

The sky is the limit in terms of what the Group module enables you to do when you build a social network with Drupal:
 

  • it powers pretty much any scenario you can think of, from subgroups to specific per-group behavior, to access permissions...
  • it enables you to put together content collections on your website and grant access to it based on your user roles and permissions policy
  • it enables you to easily add relevant metadata to define the group & content relationships on your site
  • it enables you to control all your settings via a user-friendly admin UI; no need to write custom code to determine what each group is allowed and not allowed to do on your social network
     

I just couldn't help it...

Even though this was supposed to be a roundup of those essential modules you'll need to build a social network with Drupal, I had to add this Drupal distribution, as well.

Open Social is that out-of-the-box solution that you can leverage to get your online user community up and running in no time.

An open source software with all the needed features and functionality already pre-built, so that you can enable members on your network to:
 

  • work together
  • share knowledge
  • organize events
     

Convenience at its best when you want to start a social networking website without worrying much about:
 

  • installing a whole collection of modules
  • doing custom work in the “backstage”. 
     

The END!

This is the minimal kit you'll need to build your online community website with Drupal.

Would you have added other essential modules to the list?

Mar 15 2019
Mar 15

A lot of effort goes into engaging your visitors to ‘Sign-up’ or ‘Contact’ you. You send them a warm and fuzzy invitation to complete the form, tell them all the great reasons why they should complete the form… but who likes to complete a form?  Guarantee a smooth sign-up process and increase the completion rate of your webforms with these six tips. 

#1 Make it Flow

Before you begin designing that web form, it is always good to create a User Flowchart. Working to establish the form completion process from start to finish, a flowchart will help you: 

  • Determine what information is needed (and when)
  • Decide what actions and interactions are appropriate
  • Determine the order of actions
  • Make considerations for new patterns to aid the completion process
     

A User Flowchart can begin with a simple Flow Outline, which can then be placed in a flowchart diagram and later illustrated using low fidelity paper prototypes to find the most natural set of actions. When creating the outline consider the following:

The Business Objective

  • What is the main objective of the website for achieving successful completion of the form? (ie, we want to gather as many email addresses as possible.)
  • What is the required information needed from the person completing the form? (ie, we need their name and email, and since our site is only for adults we also need their birth date.)

The User Persona

  • Take advantage of the information gained from the User Personas to focus on the user’s various needs and considerations. What problem do they want to solve and how can this form help them?

  • What devices do they access most frequently to complete webforms? It’s good to know in advance if most of the users complete forms on their mobile phones and/or if they have inferior internet connectivity.

The Entry Point

When designing a User Flowchart, keep in mind the point of entry. Perhaps they arrive after clicking the Call to Action on the homepage. Often webforms are a part of an email or social media campaign, or the user arrives at the form after an organic search. The users should be treated differently based on where they come from, and may need extra context to reiterate the goal of the form to help them get orientated when they arrive. Consider all possibilities.

#2 Keep it Short and Sweet

Don’t ask for information that’s not needed. Your subscription or contact form — or any form that gathers basic information — should only ask for the bare necessities needed in order to accomplish that goal. People will usually stick around long enough to enter their name, email address and password. Anything more than that should be the absolute minimum amount of information needed, with further data obtained in follow-up communications or by implementing a multi-step form (see tip #3). No one enjoys completing a form, so keep it as simple as possible! Neil Patel found that three form fields was the optimal number.  Pegasystems, a Mediacurrent client, leveraged third-party integrations on their Drupal 8 site to pre-fill form fields with data and improved the user experience for returning visitors. 

Reducing the number of form fields can increase conversion rates by 26 percent. 

Email Address

  • Forward thinking email form fields provide suggestions for fixes when the email address has been entered incorrectly. … Did you mean @gmail.com?
  • If you include an auto fix for mistyped email addresses you won’t need to require the user to enter it twice. Otherwise, it’s is a good approach to provide the extra guarantee that they’ve got it right.
  • When the form is for creating an account or signing up for a newsletter, a current practice is to use the email address for the account instead of providing a separate username. This will cause less frustration with creating one that is not already in use, as well as remembering it every time they login.

Name

The person’s name is really only needed in instances where account personalization or custom communication is used. A frequent approach is to provide one field for their full name. This is a bonus since some users may have more than two words that make up their full name, and one field takes less time to complete (especially on mobile devices). Check first to see if the system requires the first name to be isolated for marketing purposes.

Password

  • Enough with the 'confirm password' already! They will lower your conversion rates. Give the user the option to actually SEE the password they’re entering with a ‘show password’ toggle, and they won’t have to enter it twice.
  • Include a Password Strength Indicator. You can get creative with messaging to encourage users to try harder when creating a more secure password like Geeklist does: “Crack Time: 5 minutes”
  • Depending on the level of site security, another time-saving feature is the ability to never have to enter their password again with the ‘Remember Me’ feature.

#3 Multi-step Forms

Single step forms are the most common type of form found on a website. Sometimes, however, using the minimum amount of fields will not accomplish the goal of capturing essential user data. Instead of simply adding more fields to your one-page form you should be aware of an important point: 

Multi-step forms have been found to increase conversions by as much as 300% (without increasing website traffic). 

Multi-step forms convert well for several reasons:

Simplicity

Through the use of progressive disclosure design techniques, we can improve usability when only the minimum data required for a task is presented to the user. Multi-step forms provide the ability to break up a longer form into manageable steps so the user is not visually overwhelmed with requirements at the beginning or during the process. By including only one or two questions per step with a manageable number of steps overall will improve the user experience and significantly increase the chance they will complete it. 

Reduced Psychological Friction

Multi-steps with a simplified interface allow opportunity to use low-friction language in order to reduce psychological friction. In order to encourage the user to become immersed with an energized focus on the activity, we must always seek to minimize disruptions and use language that puts them in a positive state of mind. 

Orientation

Progress bars encourage form completion. The most common use of visual progress trackers are when conducting an online purchase since those are often broken into a multiple step process. It answers the questions the user may have during completion:

  •  How long will the form take?
  • What comes next?
  • Is anything happening?
     

Displaying the steps required to complete the form along with where the user currently is at in the process will help manage their expectations and keep them oriented throughout.

Investment

By using the approach of requesting general information at the beginning of the form and moving towards more sensitive information requests towards the end of the form, the user feels more invested and is therefore more likely to complete.

Conditional Logic

Longer forms will sometimes benefit by using conditional logic in order to personalize the experience. The user is provided with specific questions based on certain responses therefore eliminating irrelevant information retrieval while simultaneously obtaining more targeted data. Save them valuable time and customize their experience, and they will likely reward you by clicking the submit button.

#4 Make it Easy to Read

Including the labels and inputs, consider the context being used for all text on the page and work to ensure your font sizes are large enough to be legible on all devices. The amount of content on the page should be considered while also using best practices for accessibility. 

  • Recent trends are a 14px font size at minimum.
  • When specifying a 16px font size for mobile devices, iOS will not zoom in when the user taps the field, because it’s not needed. This approach can be less distracting especially when there are multiple form fields on the page.
  • Consider the maximum amount of characters that will be needed in all cases to ensure enough room is provided to complete each field. For example, some zip codes in other countries use a varying number of digits.

#5 Inform Everything

Label All Things

The label of the form field you want the user to complete should ALWAYS remain visible. The labels can be placed outside of the field near the top, right, or left — or even better — use the Infield Top Aligned Label. This popular approach has been found to be the quickest to scan, has the best flow, and takes up less real estate. The labels are placed inside of the field, jumping to the top left corner as the user begins typing. Either way, at no point should the user lose sight of the information that’s needed inside of the field.

Inline Form Validation

  • Inform the user as they progress if anything has been entered incorrectly or if a field is missing information. Don’t make them click the ‘Submit’ button at the end of the form only to receive a bunch of red text telling them what they have to re-do.
  • Micro interactions such as a simple green check or a red ‘X’ along with a brief message as the user completes the form will improve the workflow.
  • Tell them if their CAPS LOCK IS ON.

Required or Optional?

Inform the user which fields are required and which are optional for the form to be accepted. An asterisk is often used to designate required information, but they are ignored by screen readers so make sure the required fields include the HTML5 ‘required’ attribute or the aria-required set to true.

Field Details

Explaining the information needed for each field is another great approach. If your Registration Sign-up Form will require a password with at least 6 unique characters with 2 of them numbers, tell them! Does the phone number field require a +, or a country code, or an area code? Tell them or show them.

Progress Bar

  • A form that’s broken into logical steps is easier to complete. If there are multiple steps that require multiple screens to complete, add a progress bar so the user knows where they are in the process.
  • If possible, add a link to the completed steps in the progress bar so the user can go back if needed.

Safety

  • Make your users feel safe during sign-up by informing them about your terms, policies, or rules.
  • Ensure them you will not share their information or spam their email.
  • Provide an easy way to cancel or opt out at any time, without much effort.

#6 Must be Mobile

While optimizing your site for mobile devices, any forms on your site should also be carefully considered. Not only are the screens smaller, but often the connections are slower, and entering text can be a bit tricky, so reducing the number of required fields is especially important. Luckily, recent innovation for mobile forms have provided modern solutions and compression techniques that could actually encourage sign-up on a mobile device:

Predefined DropDowns

  • Whenever possible, avoid open input fields and provide a dropdown list instead for easier completion.
  • Dropdown selections should be written as they would normally display (ie, Credit Card expiry date: 01/20).

Collapsible Menus

This really helps when multiple offerings are available with details for each.

Predictive Search Fields

As the user begins typing the keyword, a list of possible results is provided. 

Calendar Tools

Choose a calendar that is easy to use, with big targets that help to avoid user input errors

Combine Inputs When Possible

Providing only one field for a ‘Full Name’ instead of one for ‘First Name’ and one for ‘Last Name’ will speed up the form completion process and reduce user frustration. 

Automatic Advance

The system should recognize when a date or email has been entered and take the user to the next field automatically, whenever possible.

Buttons That Engage

  • The ‘submit’ button should use a strong command verb that provokes emotion or enthusiasm, such as ‘Sign-Up Now!’
  • Use bright, engaging (and accessible) color combinations. Color changes on tap add even more visual information about the progress.
  • Ensure the tap target is large enough for users with big fingers or who have difficulty being accurate. Apple's iPhone Human Interface Guidelines recommends a minimum target size of 44 pixels wide 44 pixels tall.

Final Word

Achieving a smart form design isn't always easy, but it's well worth the effort. 

What are some great examples of forms you've seen? 

Editor’s note: This post was originally published on November 14, 2016, and has been updated for accuracy and comprehensiveness.

Mar 11 2019
Mar 11
Photo by Bureau of Reclamation https://www.flickr.com/photos/usbr/12442269434

You’ve decided to use Acquia DAM for managing your digital assets, and now you need to get those assets into Drupal where they can be put to use. Acquia has you covered for most use cases with the Media: Acquia DAM module. This module provides a suite of tools to allow you to browse the DAM for assets and associate them to Media entities. It goes a step farther by then ensuring that those assets and their metadata stay in synch when updates are made in the DAM.

This handles the key use case of being able to reference assets to an existing entity in Drupal, but what if your digital assets are meant to live stand-alone in the Drupal instance? This was the outlying use case we ran into on a recent project.

The Challenge

The customer site had the requirement of building several filterable views of PDF resources. It didn’t make sense to associate each PDF to a node or other entity, as all of the metadata required to build the experience could be contained within the Media entity itself. The challenge now was to get all of those assets out of the DAM and into media entities on the Drupal site without manually referencing them from some other Drupal entity.

The Solution

By leveraging the API underlying the Media: Acquia DAM module we were able to create our own module to manage mass importing entire folders of assets from Acquia DAM into a specified Media bundle in Drupal. This takes advantage of the same configuration and access credentials used by Media: Acquia DAM and also leverages that module for maintaining updates to metadata for the assets post-import.

The Acquia DAM Asset Importer module allows the site administrator to specify one or more folders from Acquia DAM to import assets from. Once configured, the module runs as a scheduled task through Drupal’s cron. On each cron run, the module will first check to see if there are any remaining import tasks to complete. If not, it will use the Acquia DAM API to retrieve a list of asset IDs for the specified folders. It compares that to the list of already imported assets. If new assets exist in the folders in Acquia DAM, they’re then added to the module’s Queue implementation to be imported in the background.

The QueueWorker implementation that exists as part of the Acquia DAM Asset Importer will then process it’s queue on subsequent cron runs, generating a new Media entity of the specified bundle, adding the asset_id from Acquia DAM and executing save() on the entity. At this point the code in Media: Acquia DAM takes over, pulling in metadata about the asset and synching it and the associated file to Drupal. Once the asset has been imported into Drupal as a Media entity, the Media: Acquia DAM module keeps the metadata for that Media Entity in synch with Acquia DAM using its own QueueWorker and Cron implementations to periodically pull data from DAM and update the Media entity.

Try it out

Are you housing assets in Acquia DAM and need to import them into your Drupal site? We’ve contributed the Acquia DAM Asset Importer module on Drupal.org. Download it here and try it out.

Mar 06 2019
Mar 06

Using Paragraphs to define components in Drupal 8 is a common approach to providing a flexible page building experience for your content creators. With the addition of Acquia Lift and Content Hub, you can now not only build intricate pages – you can personalize the content experience for site visitors.

Personalization with Acquia Lift and Content Hub

Acquia Lift is a personalization tool optimized for use with Drupal. The combination of Acquia Lift and Content Hub allows for entities created in Drupal to be published out to Content Hub and be made available through Lift to create a personalized experience for site visitors. In many instances, the personalized content used in Lift is created by adding new Blocks containing the personalized content, but not all Drupal sites utilize Blocks for content creation and page layout.

Personalizing paragraph components

To personalize a Paragraph component on a page, we’ll need to create a new derivative of that component with the personalized content for export to Content Hub. That means creating duplicate content somewhere within the Drupal site. This could be on a different content type specifically meant for personalization.

To make this process easier on our content creators we developed a different approach. We added an additional Paragraphs reference to the content types we wanted to enable personalization on. This “Personalized Components” field can be used to add derivatives of components for each segment in Acquia Lift. The field is hidden from display on the resulting page, but the personalized Paragraph entities are published to Content Hub and available for use in Lift. This allows the content team to create and edit these derivatives in the same context as the content they’re personalizing. In addition, because Paragraphs do not have a title of their own, we can derive a title for them from combination of the title of their parent page and the type of component being added. This makes it easy for the personalization team to find the relevant content in Acquia Lift’s Experience Builder.

In addition to all of this, we also added a “Personalization” tab. If a page has personalized components, this tab will appear for the content team allowing them to review the personalized components for that page.

Keeping the personalized experience in the context of the original page makes it easier for the entire team to build and maintain personalized content.

The technical bits

There were a few hurdles in getting this all working. As mentioned above, Paragraph entities do not have a title property of their own. This means that when their data is exported to Content Hub, they all appear as “Untitled”. Clearly this doesn’t make for a very good user experience. To get around this limitation we leveraged one of the API hooks in the Acquia Content Hub module.

<?php
/**
 * Implements hook_acquia_contenthub_cdf_from_drupal_alter().
 */
function mymodule_acquia_contenthub_cdf_from_drupal_alter(ContentHubEntity $cdf) {
  $paragraph = \Drupal::service('entity.repository')->loadEntityByUuid($cdf->getType(), $cdf->getUuid());

  /** @var \Drupal\node\Entity\Node $node */
  $node = _get_parent_node($paragraph);
  $node_title = $node->label();

  $paragraph_bundle = $paragraph->bundle();
  $paragraph_id = $paragraph->id();

  $personalization_title = $node_title . ' - ' . $paragraph_bundle . ':' . $paragraph_id;

  if ($cdf->getAttribute('title') == FALSE) {
    $cdf->setAttributeValue('title', $personalization_title, 'en');
  }
}

/**
 * Helper function for components to identify the current node/entity.
 */
function _get_parent_node($entity) {
  // Recursively look for a non-paragraph parent.
  $parent = $entity->getParentEntity();
  if ($parent instanceof Node) {
    return $parent;
  }
  else {
    return _get_parent_node($parent);
  }
}

This allows us to generate a title for use in Content Hub based on the title of the page we’re personalizing the component on and the type of Paragraph being created.

In addition to this, we also added a local task and NodeViewController to allow for viewing the personalized components. The local task is created by adding a mymodule.links.task.yml and mymodule.routing.yml to your custom module.

*.links.task.yml:

personalization.content:
  route_name: personalization.content
  title: 'Personalization'
  base_route: entity.node.canonical
  weight: 100


*.routing.yml:

personalization.content:
  path: '/node/{node}/personalization'
  defaults:
    _controller: '\Drupal\mymodule\Controller\PersonalizationController::view'
    _title: 'Personalized components'
  requirements:
    _custom_access: '\Drupal\mymodule\Controller\PersonalizationController::access'
    node: \d+

The route is attached to our custom NodeViewController. This controller loads the latest revision of the current Node entity for the route and builds rendered output of a view mode which shows any personalized components.

<?php

namespace Drupal\mymodule\Controller;

use Drupal\Core\Access\AccessResult;
use Drupal\Core\Entity\EntityInterface;
use Drupal\node\Controller\NodeViewController;
use Drupal\Core\Session\AccountInterface;

/**
 * Defines a controller to render a single node.
 */
class PersonalizationController extends NodeViewController {

  /**
   * {@inheritdoc}
   */
  public function view(EntityInterface $node, $view_mode = 'personalization', $langcode = NULL) {
    // Make sure we're working from the latest revision.
    $revision_ids = $this->entityManager->getStorage('node')
      ->revisionIds($node);
    $last_revision_id = end($revision_ids);
    if ($node->getLoadedRevisionId() <> $last_revision_id) {
      $node = $this->entityManager->getStorage('node')
        ->loadRevision($last_revision_id);
    }
    $build = parent::view($node, $view_mode, $langcode);
    return $build;
  }

  /**
   * Custom access controller for personalized content.
   */
  public function access(AccountInterface $account, EntityInterface $node) {
    /** @var \Drupal\node\Entity\Node $node */
    $personalized = FALSE;
    if ($account->hasPermission('access content overview')) {
      if ($node->hasField('field_personalized_components')) {
        $revision_ids = $this->entityManager->getStorage('node')
          ->revisionIds($node);
        $last_revision_id = end($revision_ids);
        if ($node->getLoadedRevisionId() <> $last_revision_id) {
          $node = $this->entityManager->getStorage('node')
            ->loadRevision($last_revision_id);
        }
        if (!empty($node->get('field_personalized_components')->getValue())) {
          $personalized = TRUE;
        }
      }
    }
    return AccessResult::allowedIf($personalized);
  }
}

The controller both provides the rendered output of our “Personalization” view mode, it also uses the access check to ensure that we have personalized components. If no components have been added, the “Personalization” tab will not be shown on the page.

Mar 06 2019
Mar 06

“Should I stay or should I go?” Should you stick to an all-too-familiar traditional CMS and “reap” the benefit of getting loads of much-needed functionality out-of-the-box? Or should you bid on flexibility, top speed, and versatility instead? In a headless CMS vs traditional CMS “debate”, which system best suits your specific needs?

Now, let me try and “guess” some of the CMS requirements on your wishlist:
 

  • to have all the needed functionality “under the same hood” (a predefined theme, robust database, a user-friendly admin dashboard...)
  • to be developer friendly
  • to integrate easily and seamlessly with any modern JS front-end of your choice
  • to “fuel” your website/app with high speed
     

Needless to add that:

You can't have them all in one CMS, either traditional or headless.

What you can actually do is:
 

  • set up a hierarchy with all your feature needs and requirements
  • set it against each of these two types of CMSs' advantages and limitations 
     

Just see which one of them “checks off” the most requirements on your list.

Then, you'd have yourself a “winner”.

So, let's do precisely that:

A headless CMS vs traditional CMS comparison to help you determine which one's... a better fit for you.
 

1. Traditional CMS: Benefits and Challenges

Everything in one place...

That would be a concise, yet fully comprehensive definition for the traditional CMS.

Just imagine a content management system that provides you with all the critical features and functionality, all the needed elements straight from the box:
 

  • a generic theme
  • a dashboard for easily managing your own content
  • a predefined database
  • PHP code for retrieving the requested content from your database and serving it to the theme layout
     

The back-end and front-end, meaning the code, database, and the layout/design, are “under the same hood”, strongly coupled. 

It's all there, pre-built, at hand... “Convenience” must be another word for “traditional CMS”.
 

Security & Performance: A Few Challenges to Consider 

Getting all that critical functionality out-of-the-box does translate into... code. Lots and lots of code, lots and lots of files.

Which also means lots and lots of potential vulnerabilities to be exploited.

There could be an error in any of the files in that heavy load of files that you get. Or a query string parameter that could be turned into “free access” into your database...

Therefore, the convenience of built-in functionality does come with its own security risks. 

Also, whenever you make a “headless CMS vs traditional CMS” comparison, always be mindful of the maintenance aspect:

Of the upgrading that you'll need to perform with every new security patch that gets released.

Now, as regards the performance “pumped” into your traditional CMS-based website/application, just think: compiling files.

That's right! Consider all those custom files, in addition to the pre-defined ones that you'll be provided with, that you'll pile up for... customizing your website. 

All these files, all the new libraries that you'll want to integrate, will need to get compiled. Which can only mean:
 

  • more stress put on your server memory 
  • copying code of functionalities that you might not even use
  • a poor page loading time, with an impact on the user experience provided on your website
     

2. A Traditional CMS Is the Best Choice for You If...

Now, you must be asking yourself: “How do I know if a traditional CMS is the best fit for my own use case?”

My answer is:

You go through the here listed “scenarios” and see if any of them matches your own.
 

  • you already have a team of PHP experts with hands-on experience working with a particular CMS (Drupal, WordPress...)
  • it's a stand-alone website that you need; no other applications and tech stack that might depend on a CMS's provided functionality
  • you're not opinionated on the technology that your website will get built on
     

3. Headless CMS: What Is an API-Based Website, More Precisely?

“It's a CMS that gives you the flexibility and freedom to build your own front-end — Angular, Rails, Node.js-based, you name it — and integrate it with content management tools via an API."

In short: your headless CMS can then serve raw content —  images, text values —  via an API, to a whole “ecosystem” of internet-connected devices: wearables, websites, mobile apps. 

And it'll be those content-consuming devices' responsibility to provide the layout and design of the content delivered to the end-users.

What's in it for you?
 

  • it dramatically streamlines the development cycle of your API-based website; you can get a new project up and running in no time
  • there's no need to pile up lots and lots of files and the code of out-of-the-box functionalities that you might not even need
  • if there's a particular service that you need — store form submissions or a weather forecast —  there's always a specific service with an API that you could integrate to have that particular content served on your website
     

A headless approach gives you the freedom to integrate exclusively the functionalities that you need into your website.

Moreover, you still get a dashboard for easily managing your content. Your headless CMS will have got you covered on this.

With no code being “forced” into your website/mobile app or need to perform a performance “routine” for this. You get it by default.
 

Security and Performance: Main Considerations

In terms of security, a short sentence could sum all the advantages that you can “reap” from having an API-based website:

There's no database...

Therefore, there are no database vulnerabilities, no unknown gateway that a hacker could exploit. 

Furthermore, in a “headless CMS vs traditional CMS” debate, it's important to outline that the first one doesn't call for an administration service. 

Meaning that you get to configure all those components delivering content to your website as you're building it. Except for that, the rest of the dynamic content gets safely stored and managed in your headless CMS.

“But can't anyone just query the service endpoints delivering content on my API-based website?”

True. And yet, there are ways that you can secure those channels:
 

  • use double-authentication for sensitive content 
  • be extra cautious when handling sensitive data; be mindful of the fact that anyone can query the JS implementation 
     

Now, when it comes to performance, keep in mind that:

It's just assets that your web server will provide. As for the content coming from all those third-party services that your headless CMS is connected with, it will get delivered... asynchronously.

Now, considering that:
 

  • most of those endpoints are hosted in the cloud and highly flexible 
  • the first response — the first static HTML file that gets served  — is instant
  • you could go with a headless CMS that leverages a CDN for delivery
  • in a traditional CMS scenario the website visitor has to wait until the server has finished ALL the transactions (so, there is a bit of waiting involved in there)
     

… you can't but conclude that in a “headless CMS vs traditional CMS” debate, the first one's way faster.
 

4. Use a Headless Approach If...
 

  • you already have your existing website built on a specific modern tech stack (Django, React, Node.js, Ruby on Rails) and you need to integrate it with a content management system, quick and easy
  • you don't your team to spend too much time “force-fitting” your existing tech stack into the traditional CMS's technology (React with... WordPress, for instance)
  • you need your content to load quickly, but you don't want a heavy codebase, specific to traditional CMSs, as well
  • you want full control over where and how your content gets displayed across the whole ecosystem of devices (tablets, phones, any device connected to the IoT...)
  • you don't want to handle all the hassle that traditional CMS-based websites involve: scaling, hosting, continuous maintenance 
     

5. Headless CMS vs Traditional CMS: Final Countdown

Now, if we are to sum it up, the two types of CMSs' pros and cons, here's what we'd get:
 

Traditional CMS

It comes with a repository for your content, as well as a UI for editing it and a theme/app for displaying it to your website visitors.

While being more resource-demanding than a headless CMS, it provides you with more built-in functionality.
 

Headless CMS

It, too, provides you with a way to store content and an admin dashboard for managing it, but no front-end. No presentation layer for displaying it to the end user.

Its main “luring” points?
 

  • it's faster
  • it's more secure
  • more cost-effective (no hosting costs)
  • it helps you deliver a better user experience (you get to choose whatever modern JS framework you want for your website's/app's “storefront”)
     

It's true, though, that you don't get all that functionality, right out-of-the-box, as you do when you opt for a traditional CMS and that you still need to invest in building your front-end.

In the end, in a “headless CMS vs traditional CMS” debate, it's:
 

  • your own functionality/feature needs
  • your versatility requirements 
  • the level of control that you wish to have over your CMS
  • your development's team familiarity with particular technologies
     

… that will influence your final choice.

Photo by rawpixel on Unsplash

Mar 05 2019
Mar 05

Running a business is demanding. To be successful requires leadership be equipped with a broad range of skills from financial astuteness to empathy for staff. Whilst developers have ample resources from which to draw reference on best practice, for managers and business leaders knowledge gained is often be deemed competitive advantage and so kept secret or is accessed only through expensive training or courses.

Working in open source brings many benefits including the fostering of knowledge transfer that transcends merely code. It is to the benefit of all that business leaders in Drupal share this openness and are willing to reveal lessons learnt or formulae of success, that in other industries would remain behind closed doors. A fine example of this mindset is DrupalCamp London CXO, this years incarnation was no exception.

Prof. Costas Andriopoulos, Cass Business School, spoke about leadership and innovation in scaling enterprises. He explained that it’s far wiser to sort out your business early, when you are small and well ahead of scaling because what kills businesses is success, age and size.

Prof. Costas Andriopoulos

 

Success: breeds complacency, overstretching, even arrogance. All of these can be the downfall of your business.

Age: of leadership and team leads to them becoming slower, more stuck in your ways. Andriopoulos stated that curiosity drops with age — a child asks over 400 questions per day. By adulthood and towards later life this drops dramatically.

Size: brings bureaucracy, slowing the pace at which information disseminates. Layers of management become more risk averse. Humans are natural hoarders, it’s normal he says for people add but we hold on to things too long. This slows businesses down.

To maintain momentum in decision making he recommended all meetings and team sizes should be manageable — 4 or five, the best team is 2. There’s nowhere to hide here. You have to participate. In large meetings people repeat one another often or may say nothing at all.

Andriopoulos recommended when facing challenging projects do a pre-mortem. Split the team in two, half of them imagine the plans has been put in motion and failed terribly. Then write a story of what happened. The other half imagine that it succeeded and write their story of how that happened. Doing so equips you with a variety of scenarios to consider before the work beings.

Rasmus Lerdorf founder of the programming language PHP

 

Rasmus Lerdorf, founder of the programming language PHP, gave a potted history of how the language came to be and prospered. What struck me was how innovation and breaking free of the norm were key drivers. In the early days where hardware and networks were far slower than we know today, Rasmus questioned the merit of querying databases without the ability to reduce verbosity of responses. He introduced the “LIMIT” clause, something we all take for granted now, to introduce efficiency gains in early internet applications.

Upgrading to PHP 7 across the web would remove 7.5 BN Kg carbon dioxide emissions

Rasmus Lerdorf

 

This ethos remains today. Lerdorf stressed the importance of upgrading to PHP 7 or above as the dramatic performance improvements significantly reduce the physical hardware required to support PHP applications. Since PHP powers >70% internet sites, our efforts combined will contribute to he estimates a 15B KWH energy savings and 7.5 BN Kg less carbon dioxide emissions.

Michel Van Velde, founder of One Shoe agency

 

Michel Van Velde, founder of One Shoe agency, spoke openly of the challenges his business faced in 2017 and how a combination of reading and hiring a personal coach helped him evolve his approach to leadership, behaviour and in doing so the actions of his staff.

His presentation was a shining example of how business leaders in open source act differently. Whilst on the face of it counterintuitive, by sharing how he overcame adversity in his life with his potential competitors, what Michel was actually doing was helping his peers to avoid these pains meaning we all rise. Doing so he is contributing to a virtuous circle.

Van Velde put his success in 2018 down to a combination of three factors, rooted in knowledge of three leadership models and an appreciation of how to apply them to his circumstances.

The Drama Triangle: defines any conflictual situation to have victim, rescuer, persecutor. An oversimplification is to say a victim typically takes the “poor me!” stance, Rescuers are those who might choose to say “Let me help you!”, Persecutor adopts the “It’s all your fault!” stance.

Radical Candor: is the ability to Challenge Directly and show you Care Personally at the same time. “Radical Candor really just means saying what you think while also giving a damn about the person you’re saying it to”

Transactional Analysis: considers that we each have internal models of parents, children and also adults, and we play these roles with one another in our relationships. If we grow an appreciation in our daily conversations, meetings and conflicts what state we and others are in (parents, children, adults) we can begin to realise how to avoid or deal with conflict.

Van Velde explained that by rewiring how he dealt with his staff not meeting expectation, dealing with situations in such a way to offer his team the opportunity to realise their shortcomings themselves, providing opportunities to address their behaviour he was creating a positive environment in which his staff could grow.

Melissa Van Der Hecht’s presenting on “Why we need to be more open about diversity in tech”

 

Melissa Van Der Hecht’s presentation on “Why we need to be more open about diversity in tech” was a breath of fresh. I can never hear enough on this topic. I found her angle refreshing.

Rather than specifying diversity through gender, race, religion she saw diversity as that which makes us stand out, what makes us special. She talked about the fact that as a female in tech you have to work harder, a lot harder, to convince men you are worthy of respect and have your ideas recognised as having merit. Van Der Hecht said this is unrelenting. At best exhausting and worst leads to burnout, reporting those from minority groups suffer double burnout rates over those in the majority.

Van Der Hecht went on to explain that unconscious bias really hard to adjust. She spoke of the “Surgeon’s dilemma”, a test for unconscious bias and admitted she fell for this riddle. I compel you to take the test, how did you fare?

Watch this short video, as a further example used in the presentation illustrating the point. For me, rather than despair, it actually gave hope that generations soon entering the workplace could bring a tidal wave of impressive minds.

[embedded content]

 

Van Der Hecht highlighted that diverse teams are more productive, more innovative and creative. There is a strong correlation between diversity and increased innovation.

According to Forbes.com companies with more diverse teams reported 19% higher revenue due to innovation

 

I always remember Erynn Petersen, Executive Director of Outercurve an OSS foundation, speaking at DrupalCon Austin. She cited data showing that diversity leads to better performance in business. It’s hard to ignore these facts, unwise not to act upon the evidence.

I couldn’t help but notice while Melissa was speaking to an audience of ~100 people, only 3 were female, few of mixed race. True they were from across Europe, but the male dominance alone was striking. The Drupal is committed to diversity, during the weekend event it was striking to me how more diverse the attendee mix was. There is clearly a way to go in terms of fostering diversity in management, agency leadership. We should all consider how in our businesses we create cultures which foster diversity. We all have a lot to benefit from that.

I’ve strived in our business to create a culture which embraces all. It takes time and we are constantly learning, listening and evolving. These things don’t happen overnight and take commitment and a willingness to change.

We are fortunate in Drupal to have a vast community with many inspiring contributors from diverse backgrounds. Next time you are on Slack, at a meetup, DrupalCamp or Con why not take time out to open a conversation with someone quite different to you. It’s quite possible you’ll begin to realise being different is what makes them special. Thanks Melissa!

 

Mar 04 2019
Mar 04

It’s been a lot of hard work and the time has finally come to launch your new website. Congratulations! But before you push that launch button, take a minute to think; are you REALLY ready to launch your website?

  • Multiple rounds of quality assurance testing? CHECK!
  • Cross browser and responsive testing? CHECK!

But is there something else you might have missed?

The items above are some of the more obvious steps a team may go through when preparing a site to launch, but there are some lesser known or sometimes forgotten steps that are just as important to take when launching a new website. So what are they?

  • Set up redirects
  • Check links: Absolute vs Relative
  • Accessibility checks
  • Decide what to do with your old site
  • Decide who will maintain your new site

Set up redirects

Over the years you may have amassed a great deal of content on your old website, and  chances are that in the course of creating your new website you’ve changed how that content is organized. This can lead to content revisions during the process of migrating  that content to the new system. Any team that has gone through this process can tell you that it is a massive effort; even if you’re automating the migration of content in someway. During this flurry of activity in moving content from point A to point B, it’s easy to forget one simple matter: How will users find the same or similar content on the new website?

Creating Redirects ensures that users who arrive at the site via an outdated URL, say from a bookmark or external site, are automatically sent to the appropriate content. Setting up redirects is incredibly important to creating a solid User Experience and it’s good for SEO. Just about every URL on your old site should have a redirect if the URL has changed. This may seem like a herculean effort, but it actually pairs well with the process of moving content from the old to new website.

Check links: Absolute v. Relative

First off a brief explanation of Absolute versus Relative URLs. An Absolutely URL encompasses a URL in its entirety. ie: https://www.kanopistudios.com/about-us. A Relative URL is just the portion of the URL that occurs after the “.com” in the example above. ie. /about-us. In the course of preparing a new website by loading copy and uploading images, you most likely are working from a temporary Development URL. When the time comes to launch the new website, the Development URL will change. When the URL is changed, any links that are pointing to the Absolute Development URL will break. This is a common mistake, and one that can have disastrous results once your new website goes live.

As a general rule of thumb try to avoid Absolute URLs when loading content to any environment. This ensure that if the core URL ever changes, your links won’t break. Leading up to launch, try to work with your Developer to identify and rectify any Absolute URLs.   

Accessibility checks

Accessibility was not exactly a top priority of early website development; as technology catches up, supporting users with impairments is becoming an ever increasing need for any modern website. Accessibility starts early on in a project’s planning, and should be discussed early and often. From Designs to Development there are many touch points where a project team can ensure that the site is compliant with standards.

But what if your site is about to go live and you haven’t considered this? Luckily there are tools like Site Improve that allow you to run automated tests to see where your site may need remediation before it can be compliant. Not only is it good for SEO, but making your site is accessible to the widest range of users ensures you reach a wider audience and that they have the best user experience possible.   

Decide what to do with your old site

In the activity leading up to the launch of your new website, it’s easy to overlook this question. Regardless of how confident you are in the new website, it’s important to have a plan in place for what to do with your old website. Here are some important questions to consider when considering the fate of your old website:

Will you need to reference your old site at any point in the future? Perhaps you weren’t able to move all the content to the new site before launch or maybe there is old content that won’t be migrated, but you still need to reference it in the future. Whatever the reason may be if the answer to this question is yes, you’ll want to keep your site up in some capacity.

Can you afford to host two websites at the same time? This one is a little less straightforward; depending on the size, state, and makeup of your old website, you have options. From a budgetary standpoint, paying for a website that no one will really visit is probably not going to look all that great to accounting. The good news is that with no traffic visiting the old website you probably don’t need all that expensive infrastructure; many enterprise level hosting providers have a free tier that is great for storing a legacy site on.    

Regardless of your situation, you can always find options. What’s most important is that you have a plan.

Decide who will maintain your new site

Building a website is a process; one that requires regular upkeep and ongoing maintenance. Understand that your website is a tool, and built right it should be designed to grow and adapt to the changing needs of your business. This is the philosophy we at Kanopi believe in, and try to instil in our projects. So with that in mind, it’s important to consider who will be responsible for ongoing improvements, maintenance, updates, and bug fixes when the times arise.

While not uncommon for teams to try to take this on internally, it’s important to consider if you have the right skill sets, let alone bandwidth for this to be a viable option. Another solution is to work with an agency like Kanopi to provide ongoing support for your site. An agency will have access to a wider range of expertise and ensures maximum flexibility for the future growth of your site.

Check these off your list, and you’re good to launch!

These items may seem like big additions to your plate leading up to launch, but they pale in comparison to the what could occur if you leave them out. Plan for these early on, and it will ensure your launch goes off with one less hitch.

Mar 04 2019
Mar 04


Bitbucket Pipelines is a CI/CD service, built into Bitbucket and offers an easy solution for building and deploying to Acquia Cloud for project’s whose repositories live in Bitbucket and who opt out of using Acquia’s own Pipelines service. Configuration of Bitbucket Pipelines begins with the creation of a bitbucket-pipelines.yml file and adding that file to the root of your repository. This configuration file details how Bitbucket Pipelines will construct the CI/CD environment and what tasks it will perform given a state change in your repository.

Let’s walk through an example of this configuration file built for one of our clients.

bitbucket-pipelines.yml

image: geerlingguy/drupal-vm:4.8.1
clone:
  depth: full
pipelines:
  branches:
    develop:
      - step:
         script:
           - scripts/ci/build.sh
           - scripts/ci/test.sh
           - scripts/ci/deploy.sh
         services:
           - docker
           - mysql
         caches:
           - docker
           - node
           - composer
    test/*:
      - step:
         script:
           - scripts/ci/build.sh
           - scripts/ci/test.sh
         services:
           - docker
           - mysql
         caches:
           - docker
           - node
           - composer
  tags:
    release-*:
      - step:
          name: "Release deployment"
          script:
            - scripts/ci/build.sh
            - scripts/ci/test.sh
            - scripts/ci/deploy.sh
          services:
            - docker
            - mysql
          caches:
            - docker
            - node
            - composer
definitions:
  services:
    mysql:
      image: mysql:5.7
      environment:
        MYSQL_DATABASE: 'drupal'
        MYSQL_USER: 'drupal'
        MYSQL_ROOT_PASSWORD: 'root'
        MYSQL_PASSWORD: 'drupal'

The top section of bitbucket-pipelines.yml outlines the basic configuration for the CI/CD environment. Bitbucket Pipelines uses Docker at its foundation, so each pipeline will be built up from a Docker image and then your defined scripts will be executed in order, in that container.

image: geerlingguy/drupal-vm:4.8.1
clone:
  depth: full

This documents the image we’ll use to build the container. Here we’re using the Docker version of  Drupal VM. We use the original Vagrant version of Drupal VM in Acquia BLT for local development. Having the clone depth set to full ensures we pull the entire history of the repository. This was found to be necessary during the initial implementation.

The “pipelines” section of the configuration defines all of the pipelines configured to run for your repository. Pipelines can be set to run on updates to branches, tags or pull-requests. For our purposes we’ve created three pipelines definitions.

pipelines:
  branches:
    develop:
      - step:
         script:
           - scripts/ci/build.sh
           - scripts/ci/test.sh
           - scripts/ci/deploy.sh
         services:
           - docker
           - mysql
         caches:
           - docker
           - node
           - composer
    test/*:
      - step:
         script:
           - scripts/ci/build.sh
           - scripts/ci/test.sh
         services:
           - docker
           - mysql
         caches:
           - docker
           - node
           - composer

Under branches we have two pipelines defined. The first, “develop”, defines the pipeline configuration for updates to the develop branch of the repository. This pipeline is executed whenever a pull-request is merged into the develop branch. At the end of execution, the deploy.sh script builds an artifact and deploys that to the Acquia Cloud repository. That artifact is automatically deployed and integrated into the Dev instance on Acquia Cloud.

The second definition, “test/*”, provides a pipeline definition that can be used for testing updates to the repository. This pipeline is run whenever a branch named ‘test/*’ is pushed to the repository. This allows you to create local feature branches prefixed with “test/” and push them forward to verify how they will build in the CI environment. The ‘test/*’ definition will only execute the build.sh and test.sh scripts and will not deploy code to Acquia Cloud. This just gives us a handy way of doing additional testing for larger updates to ensure that they will build cleanly.

The next section of the pipelines definition is set to execute when commits in the repository are tagged.

tags:
  release-*:
    - step:
        name: "Release deployment"
        script:
          - scripts/ci/build.sh
          - scripts/ci/test.sh
          - scripts/ci/deploy.sh
        services:
          - docker
          - mysql
        caches:
          - docker
          - node
          - composer

This pipeline is configured to be executed whenever a commit is tagged with the name pattern of “release-*”. Tagging a commit for release will run the CI/CD process and push the tag out to the Acquia Cloud repository. That tag can then be selected for deployment to the Stage or Production environments.

The final section of the pipelines configuration defines services built and added to the docker environment during execution.

definitions:
  services:
    mysql:
      image: mysql:5.7
      environment:
        MYSQL_DATABASE: 'drupal'
        MYSQL_USER: 'drupal'
        MYSQL_ROOT_PASSWORD: 'root'
        MYSQL_PASSWORD: 'drupal'

This section allows us to add a Mysql instance to Docker, allowing our test scripts to do a complete build and installation of the Drupal environment, as defined by the repository.

Additional resources on Bitbucket Pipelines and bitbucket-pipelines.yml:

Scripts

The bitbucket-pipelines.yml file defines the pipelines that can be run, and in each definition it outlines scripts to run during the pipeline’s execution. In our implementation we’ve split these scripts up into three parts:

  1. build.sh – Sets up the environment and prepares us for the rest of the pipeline execution.
  2. test.sh – Runs processes to test the codebase.
  3. deploy.sh – Contains the code that builds the deployment artifact and pushes it to Acquia Cloud.

Let’s review each of these scripts in more detail.

build.sh

#!/bin/bash
apt-get update && apt-get install -o Dpkg::Options::="--force-confold" -y php7.1-bz2 curl && apt-get autoremove
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
apt-get install -y nodejs
apt-get install -y npm
cd hive
npm install
npm install -g gulp
cd ..
composer install
mysql -u root -proot -h 127.0.0.1 -e "CREATE DATABASE IF NOT EXISTS drupal"
export PIPELINES_ENV=PIPELINES_ENV

This script takes our base container, built from our prescribed image, and starts to expand upon it. Here we make sure the container is up-to-date, install dependencies such as nodejs and npm, run npm in our frontend library to build our node_modules dependencies, and instantiate an empty database that will be used later when we perform a test install from our codebase.

test.sh

#!/bin/bash
vendor/acquia/blt/bin/blt validate:phpcs --no-interaction --ansi --define environment=ci
vendor/acquia/blt/bin/blt setup --yes  --define environment=ci --no-interaction --ansi -vvv

The test.sh file contains two simple commands. The first runs a PHP code sniffer to validate our custom code follows prescribed standards. This command also runs as a pre-commit hook during any code commit in our local environments, but we execute it again here as an additional safeguard. If code makes it into the repository that doesn’t follow the prescribed standards, a failure will be generated and the pipeline will halt execution. The second command takes our codebase and does a complete Drupal installation from it, instantiating a copy of Drupal 8 and importing the configuration contained in our repository. If invalid or conflicting configuration makes it into the repository, it will be picked up here and the pipeline will exit with a failure. This script is also where additional testing could be added, such as running Behat or other test suites to verify our evolving codebase doesn’t produce regressions.

deploy.sh

#!/bin/bash
set -x
set -e

if [ -n "${BITBUCKET_REPO_SLUG}" ] ; then

    git config user.email "[email protected]"
    git config user.name "Bitbucket Pipelines"

    git remote add deploy $DEPLOY_URL;

    # If the module is -dev, a .git file comes down.
    find docroot -name .git -print0 | xargs -0 rm -rf
    find vendor -name .git -print0 | xargs -0 rm -rf
    find vendor -name .gitignore -print0 | xargs -0 rm -rf

    SHA=$(git rev-parse HEAD)
    GIT_MESSAGE="Deploying ${SHA}: $(git log -1 --pretty=%B)"

    git add --force --all

    # Exclusions:
    git status
    git commit -qm "${GIT_MESSAGE}" --no-verify

    if [ $BITBUCKET_TAG ];
      then
        git tag --force -m "Deploying tag: ${BITBUCKET_TAG}" ${BITBUCKET_TAG}
        git push deploy refs/tags/${BITBUCKET_TAG}
    fi;

    if [ $BITBUCKET_BRANCH ];
      then
        git push deploy -v --force refs/heads/$BITBUCKET_BRANCH;
    fi;

    git reset --mixed $SHA;
fi;

The deploy.sh script takes the product of our repository and creates an artifact in the form of a separate, fully-merged Git repository. That temporary repository then adds the Acquia Cloud repository as a deploy origin and pushes the artifact to the appropriate branch or tag in Acquia Cloud. The use of environment variables allows us to use this script both to deploy the Develop branch to the Acquia Cloud repository as well as deploying any tags created on the Master branch so that those tags appear in our Acquia Cloud console for use in the final deployment to our live environments. For those using BLT for local development, this script could be re-worked to use BLT’s internal artifact generation and deployment commands.

Configuring the cloud environments

The final piece of the puzzle is ensuring that everything is in-place for the pipelines to process successfully and deploy code. This includes ensuring that environment variables used by the deploy.sh script exist in Bitbucket and that a user with appropriate permissions and SSH keys exists in your Acquia Cloud environment, allowing the pipelines process to deploy the code artifact to Acquia Cloud.

Bitbucket configuration

DEPLOY_URL environment variable

Configure the DEPLOY_URL environment variable. This is the URL to your Acquia Cloud repository.

  1. Log in to your Bitbucket repository.
  2. In the left-hand menu, locate and click on “Settings.”
  3. In your repository settings, locate the “Pipelines section” and click on “Repository variables.”
  4. Add a Repository variable:
    1. Name: DEPLOY_URL
    2. Value: The URL to your Acquia Cloud repository. You’ll find the correct value in your Acquia Cloud Dashboard.

SSH keys

Deploying to Acquia Cloud will also require giving your Bitbucket Pipelines processes access to your Acquia Cloud repository. This is done in the form of an SSH key. To configure an SSH key for the Pipelines process:

  1. In the “Pipelines” section of your repository settings we navigated to in steps 1-3 above, locate the “SSH keys” option and click through.
  2. On the SSH keys page click the “Generate keys” button.
  3. The generated “public key” will be used to provide access to Bitbucket in the next section.

Acquia Cloud configuration

For deployment to work, your Bitbucket Pipelines process will need to be able to push to your Acquia Cloud Git repository. This means creating a user account in Acquia Cloud and adding the key generated in Bitbucket above. You can create a new user or use an existing user. You can find more information on adding SSH keys to your Acquia Cloud accounts here: Adding a public key to an Acquia profile.

To finish the configuration, log back into your Bitbucket repository and retrieve the Known hosts fingerprint.

Mar 01 2019
Mar 01

Which of those Drupal modules that are crucial for almost any project make you want to... pull your hair out? 

For, let's face it, with all the “improving the developer experience” initiatives in Drupal 8:
 

  • BigPipe enabled by default
  • the Layout Builder
  • Public Media API
  • and so on
     

… there still are modules of the “can't-live-without-type” that are well-known among Drupal 8 developers for the headaches that they cause.

And their drawbacks, with a negative impact on the developer experience, go from:
 

  • lack of/poor interface
  • to a bad UI for configuration
  • to hard-to-read-code
  • too much boilerplate code, verbosity
  • to a discouragingly high learning curve for just one-time operations
     

Now, we've conducted our research and come up with 4 of the commonly used Drupal modules that developers have a... love/hate relationship with:
 

1. Paragraphs, One of the Heavily Used Drupal Modules 

It's one of the “rock star” modules in Drupal 8, a dream come true for content editors, yet, there are 2 issues that affect developer experience:
 

Developers are dreaming of a... better translation support for the Paragraphs module. And of that day when the deleted pieces of content with paragraphs data don't remain visible in their databases.
 

2. Views

Here's another module with its own star on Drupal modules' “hall of fame” that...  well... is still causing developers a bit of frustration:

You might want to write a query yourself, to provide a custom report. In short, to go beyond the simple Views lists or joins. It's then that the module starts to show its limitations.

And things to get a bit more challenging than expected. 

It all depends on how “sophisticated” your solution for setting up/modifying your custom query is and on the very structure of the Drupal data.

Luckily, there's hope.

One of the scheduled sessions for the DrupalCon Seattle 2019 promises to tackle precisely this issue: how to create big, custom reports in Drupal without getting your MySQL to... freeze.
 

3. Migrate 

There are plenty of Drupal developers who find this module perfectly fit for small, simple website migration projects. And yet, they would also tell you that it's not so developer friendly when it comes to migrating heavier, more complex websites.

Would you agree on this or not quite?


4. Rules 

Another popular Drupal module, highly appreciated for its flexibility and robustness, yet some developers still have a thing or two against it:

It doesn't enable them to add their own documentation: comments, naming etc.

And the list could go on since there are plenty of developers frustrated with the core or with the Commerce Drupal module...

The END!

What do you think of this list of Drupal modules that give developers the most headaches? Would you have added other ones, as well?

What modules do you find critical for your projects, yet... far from perfect to work with?

Feb 27 2019
Feb 27

If you’ve spent time looking for a website support partner, you’ll quickly realize that while there are a lot of options out there, they’re not all created equal. Keeping your goals in mind will help you find an agency with an approach that best meets your needs.

If you’re simply looking for software updates and security patches, there are a lot of options out there. But if you’re looking for a strategic partner to support your site, the search for the right fit can be a bit more challenging.

At Kanopi Studios, we cover the basics, but that’s just the beginning. Our support team focuses on continuous improvement and growth-driven design, ensuring long-term growth for your website. We can jump in at any stage of your site’s lifecycle to make sure you’re meeting your goals and getting the most out of your investment. And when it’s finally time for an upgrade, we can help with that too!

Here are a few details that set Kanopi’s support services apart:

Customer service is our #1 priority.

Our team goes the extra mile to provide stellar customer service. We’re here to make your life easier, regardless of the size of your account.  

Added value and strategic guidance

As part of your monthly support budget, you’ll gain access to experienced designers, user experience strategists, developers and more. When it’s time to go beyond bug fixes, you’ll have experts in your corner to help your site respond to changes in the market or shifts in your business priorities.

You’ll work with real humans!

Our full-time support team manages every detail of your account. We analyze incoming requests, make sure we have the details needed to get the job done right, and respond within an hour, all without a single bot in sight.  

A dedicated, senior-level team

Our support team focuses on support. We know that it takes a different set of skills, energy, and dedication to handle rapidly changing priorities and keep the issue queue clear. Our experienced team has identified and resolved nearly every issue imaginable. We encourage you to check out their bios so you can see their qualifications for yourself!

A partner you can trust

Kanopi Studios supports more than 135 active websites. Due to the great relationships we’ve built, we’re still working with some of the very first clients that signed on for our services. In fact, most of our work comes through referrals from happy customers. We welcome you to check out our five-star reviews and get in touch to learn more about ensuring long-term growth for your website.

Feb 26 2019
Feb 26

Kind of stuck here? One one hand, you have all these software development technologies that are gaining momentum these days —  API, serverless computing, microservices — while on the other hand, you have a bulky "wishlist" of functionalities and expectations from your future CMS.  So, what are those types of content management systems that are and will be relevant many years to come and that cover all your feature requirements?

And your list of expectations for this "ideal" enterprise-ready content infrastructure sure isn't a short one:
 

  • to enable you to build content-centric apps quick and easy
  • multi-languages support
  • user role management
  • a whole ecosystem of plugins
  • inline content editing
  • to be both user and developer friendly
  • personalization based on visitors' search history
  • to support business agility
  • search functions in site
     

... and so on.

Now, we've done our research.

We've weighed their pros and cons, their loads of pre-built features and plugins ecosystems, we've set them against their “rivaling” technologies and selected the 3 content management systems worth your attention in 2019:
 

But What Is a Content Management System (CMS)? A Brief Overview

To put it simply:

Everything that goes into your website's content —  from text to graphics — gets stored in a single system. This way, you get to manage your content — both written and graphical — from a single source.

With no need for you to write code or to create new pages. Convenience at its best.
 

1. Traditional CMS, One of the Popular Types of Content Management Systems

Take it as a... monolith. One containing and connecting the front-end and back-end of your website: both the database needed for your content and your website's presentation layer.

Now, just turn back the hands of time and try to remember the before-the-CMSs “era”. Then, you would update your HTML pages manually, then upload them on the website via FTP and so on...

Those were the “dark ages” of web development for any developer...

By comparison, the very reason why content management systems — like Drupal, WordPress, Joomla — have grown so popular so quickly is precisely this empowerment that they've “tempted” us with:

To have both the CMS and the website's design in one place; easy to manage, quick to update.
 

Main benefits:
 

  • your whole website database and front-end is served from a single storage system
  • they provide you with whole collections of themes and templates to craft your own presentation layer
  • quick and easy to manage all your content
  • there are large, active communities backing you up
     

Main drawbacks:
 

  • they do call for developers with hands-on experienced working with that a specific CMS
  • except for Drupal, with its heavy ecosystem modules, content management systems scale don't scale well
  • they require more resources —  both time and budget — for further maintenance and enhancement
     

A traditional CMS solution would fit:
 

  • a small business' website
  • a website that you build... for yourself
  • an enterprise-level website
     

… if and only if you do not need it to share content with other digital devices and platforms.

You get to set up your website and have it running in no time, then manage every aspect of it from a single storage system.

Note: although more often than not a traditional CMS is used to power a single website, many of these content infrastructures come with their own plugins that fit into multi-site scenarios or API access for sharing content with external apps.
 

2. Headless CMS (or API-First Pattern)

The headless CMS “movement” has empowered non-developers to create and edit content without having to get tangled up in the build's complexities, as well. Or worrying about the content presentation layer: how it's going to get displayed and what external system will be “consuming” it.

A brief definition would be:

A headless CMS has no presentation layer. It deals exclusively with the content, that it serves, as APIs, to external clients.

And it's those clients that will be fully responsible with the presentation layer.

Speaking of which, let me give you the most common examples of external clients using APIs content:
 

  • static page application (SPA)
  • client-side UI frameworks, like Vue.js or React
  • a Drupal website, a native mobile app, an IoT device
  • static site generators like Gatsby, Jekyll or Hugo
     

A traditional CMS vs headless CMS comparison in a few words would be:

The first one's a “monolith” solution for both the front-end and the back-end, whereas the second one deals with content only.

When opting for a headless CMS, one of the increasingly popular types of content management systems, you create/edit your website content and... that's it. It has no impact on the content presentation layer whatsoever.

And this can only translate as “unmatched flexibility”:

You can have your content displayed in as many ways and “consumed” by as many devices as possible.
 

Main benefits:
 

  • front-end developers will get to focus on the presentation layer only and worry less about how the content gets created/managed
  • content's served, as APIs, to any device
  • as a publisher you get to focus on content only
  • it's front-end agnostic: you're free to use the framework/tools of choice for displaying it/serving it to the end-user
     

Main drawbacks:
 

  • no content preview 
  • you'd still need to develop your output: the CMS's “head”, the one “in charge” with displaying your content (whether it's a mobile app, a website, and so on)
  • additional upfront overhead: you'd need to integrate the front-end “head” with your CMS
     

In short: the headless CMS fits any scenario where you'd need to publish content on multiple platforms, all at once.
 

3. Static Site Generators (Or Static Builders)

Why are SSGs some of the future-proofed content management systems? 

Because they're the ideal intermediary between:
 

  • a modular CMS solution
  • a hand-coded HTML site
     

Now, if we are to briefly define it:

A static site generator will enable you to decouple the build phase of your website from its hosting via an JAMstack architectural pattern.

It takes in raw content and configures it (as JSON files, Markdown, YAML data structures), stores it in a “posts” or “content” folder and, templating an SSG engine (Hugo, Jekyll, Gatsby etc.), it generates a static HTML website with no need of a CMS.

How? By transpiling content into JSON blobs for the front-end system to use. A front-end system that can be any modern front-end workflow.

And that's the beauty and the main reason why static site generators are still, even after all these years, one of the most commonly used types of content management systems:

They easily integrate with React, for instance, and enable you to work with modern front-end development paradigms such as componentization and code splitting. 

They might be called “static”, yet since they're designed to integrate seamlessly with various front-end systems, they turn out to be surprisingly flexible and customizable.
 

Main benefits:
 

  • they're not specialized on a specific theme or database, so they can be easily adapted to a project's needs
  • Jamstack sites generally rely on a content delivery network for managing requests, which removes all performance, scaling and security limitations 
  • content and templates get version controlled with right out of the box (as opposed to the CMS-powered workflows)
  • since it uses templates, an SSG-based website is a modular one
     

And, in addition to their current strengths, SSGs seem to be securing their position among the most popular types of content management systems of the future with their 2 emerging new features:
 

  • the improvement of their interface for non-developers (joining the “empower the non-technical user” movement that the headless CMS has embraced); a user-friendly GUI is sure to future-proof their popularity
  • the integrated serverless functions; by connecting your JAMstack website with third-party services and APIs, you get to go beyond its static limitation and turbocharge it with dynamic functionality 
     

To sum up: since they enable you to get your website up and running in no time and to easily integrate it with modern front-end frameworks like Vue and React, static site generators are those types of content management systems of the future.

The END!

What do you think now? Which one of these CMS solutions manages to check off most of the feature and functionality requirements on your wishlist?

Feb 22 2019
Feb 22

 custom theme pictured near a pre-built theme

When implementing Drupal or any CMS for that matter, you can jump-start development and save time with pre-built themes. However, these themes can also hamstring your efforts to deliver content in the way you envisioned. 

An advantage of a pre-built theme is that they are usually already tested and will work as designed right out of the gate. On the other side, building a custom theme ties your web presence tightly with your brand identity and feels more like a singular experience. In this post we will try to determine if you should build a theme to match a custom design, or use a pre-built theme and try to fit your needs into the pre-packaged solution.

What is a CMS theme?

First, let's talk about what a theme even is and what its role in the website is. Themes exist for the most part in the presentation layer of your site. A theme will generally consist of templates for markup, CSS, and JavaScript. A theme is the rendered interpretation of the content data being returned by the backend CMS system. The theme determines the HTML structure through its templates and the look and feel of the HTML through its CSS and javascript files.

Brainstorm your next development project with an Ashday Drupal expert! Request your free session today. 

A pre-built Drupal theme may also include small pieces of custom code or custom views depending on what is needed. Often times they will also come with some predefined content types and usage examples. Similarly, pre-built Wordpress themes can also have some custom code or dependencies on additional plugins. A pre-built theme can’t accommodate a lot of custom needs or integrations and in many cases need to be hacked, ( significantly altering the code in a way that will likely eliminate any hope of support ), to get them to do anything beyond their design.

In the world of themes there are free themes and premium themes. Premium themes have a cost, usually a one-time fee or subscription, and a license and terms of use. There is a cottage industry around the creation of premium themes, individuals build attractive looking layouts and load them up with the entire kitchen sink of design patterns from sliders to parallax video backgrounds, then provide varying levels of support for them. The marketing behind these themes make them out to be the one-size fits all web solution. In reality, they often fall short of what you actually need and cause unnecessary bloat from the included features that you don’t need or use. That’s not to say that they are a bad solution, sometimes it is exactly what is needed for a project with very loose requirements.

About Drupal Themes

For Drupal, themes are broken up into a few different categories. There are base themes that don’t provide any visual design but do provide structure for HTML markup and some basic functionality. Base themes require a custom child theme that extends them to finish out the look and feel of the site. Related to custom themes in Drupal are distributions, these include a theme but also a pre-configured suite of contributed and custom modules. Distributions are generally built around specific project types like CRMs, e-commerce, education, or government to name a few. 

If you are considering using a pre-built theme, whether it’s a premium or free theme with Drupal, you should consider if you even need to use Drupal at all. Pre-built themes bypass a lot of the flexibility that Drupal can provide, and you may be able to achieve your goals with a more streamlined SaaS website builder solution. Pre-built themes make a little more sense for a CMS like Wordpress that is designed for a specific task like blogging. If you are looking to do more than a basic brochure style site or blog with Wordpress, you should think about a custom theme. 

Pre-built themes can save time up front during your initial build phase. They can also end up consuming more time than a custom theme would if anything needs to be modified or added to in any way. If you have plans to add an integration or custom feature in a future phase of your site, the pre-built theme could add more time in development and end up costing more in the long run. In short, if your project is a square peg that fits in the pre-built theme’s square hole, then the pre-built theme is the way to go, but this scenario is rare. In most cases you want your site to be tailored to your business and have a user experience that feels intentional and purpose-built. This is something that can only be achieved with a lot of planning and a custom theme.

Offer for a free consultation with an Ashday expert

Feb 22 2019
Feb 22

Whether you’ve just recently built a new site, or you are in charge of maintaining an existing one, it’s critical to leverage the most you can out that site on an ongoing basis. As the internet grows and audience needs change, your site needs to be maintained and adapted over time. Sites can also be expensive to upgrade if not properly cared for (think of not performing regular maintenance on your car for several years until finally it breaks in an expensive way).

And yet, most organizations don’t have the money to redo a site more than once every three or four years. Sometimes they often don’t have the money to hire someone in-house to maintain the site beyond content updates. Who takes care of your security updates, or changes to modules or plugins so that your site doesn’t break?

That’s where quality website support and maintenance comes in. A good support agency can make your site last a long time past its creation date and keep it fresh until it’s time for the next rebuild and redesign.

Here’s are the top five things to look for when hiring for outside website support:

  1. Make sure they have a dedicated support team or department. Don’t go with an agency that simply pulls people off of regular design or development build projects to do support tickets on the side. Your site won’t get the same attention or care, since they consider support more of a side gig rather than an important part of their business model. Make sure the agency has a dedicated team that is committed to and organized around supporting sites.
  2. Look for transparency in billing. Make sure you understand the billing options. Most companies will offer different levels of packages, each with a set number of hours. If you have a site with a lot of traffic and ecommerce for selling items to customers, you’re going to want immediate service if something goes wrong vs. a site that’s more informational and can wait a few hours before a fix is implemented. Understand the levels of service you’re getting and the differences in costs for the timeliness of the response. Also ask what happens with any unused hours paid for in advance: do they rollover to the next month, or are they “use it or lose it?”
  3. Ask if you can talk to a human if needed. All agencies use (or should use) a ticketing system in order to track support requests. Ticketing systems allow for transparency, accountability, and clarity on what is being addressed and when. While these systems are tremendous for tracking the progress of an issue as it gets fixed, using them exclusively can be frustrating if something is hard to explain via text. Ask the agency if you’re allowed to hop on a call with one of their support staff, or the Project Manager, for advice and guidance. Often you can save time and increase clarity to simply have a conversation with a human. Plus it’s nice to establish a relationship with the person in charge of keeping your site running smoothly.
  4. Check that there’s a diverse range of talent within the team. Most developers can do module, plug in and security updates. But can they do any front-end work? What if the theme breaks, or you need a new page design? You might need more than code updates. Go for a more diverse and creative team that has experience with feature development as well as creative enhancements to cover all the range of items you might need.
  5. Determine how important it is if they work in your time zone. Talented designers and developers are all over the globe, but it can be tough to get fast responses from people in time zones very far off from yours. What happens if you need something right away, but it’s the middle of the night for them? If you’re in Hawaii, for example, you may not want to have an east coast agency handle your support. Ask the agency what their hours are, and try to get serviced in as close to your time zone as possible.

Following these tips will help give you confidence that you are asking the right questions and finding the right support services to fit your organization.

If you’re interested in learning more about Kanopi’s support offerings, contact us. We have dedicated support teams for both Drupal and WordPress, with a diverse staff who can cover anything you need. We also do it very well. Our hours are 9:00 am to 5:00 pm your local time in North America . . . and that counts for Hawaii!

Feb 21 2019
Feb 21

This is Part 3 of a three part series about choices you can make with the news of Drupal 9’s release. Part 1 is an overview. Part 2 is what to do if you choose to stay on Drupal 7. Part 3 is what to do it you choose to upgrade to Drupal 8. 

If you’re following along in our series about the release of Drupal 9, you understand that there are options for upgrading, each with its pros and cons. At Kanopi, we know it’s not a one size fits all decision. We want to provide you with as much information as possible to help you decide what’s right for your site.

To recap, we shared an overview of all the options in part one, and a deep dive for our clients who plan to stick with Drupal 7 in part two. Here in part three, we share a bit of wisdom for those who are considering moving to Drupal 8.

At Kanopi we support more than 100 Drupal 7 sites. Many of them are well optimized and built to last, which can make it difficult to pull the trigger on a rebuild.  

When we talk to our Drupal 7 clients about migrating to Drupal 8, we typically hear one of three things:

  1. We don’t have the budget.
  2. We don’t have the capacity.
  3. The site looks and works perfectly fine.

Below, I’ll dig a bit deeper into each of these objections.

Budget

An average website lasts 3-5 years. However, many stakeholders aren’t aware that they need to budget for a new site that often, so they are caught off guard when the time comes. There are a few ways to bridge this gap:

Build the business case. A business case compares the challenges of sticking with your current site with the new opportunity and ROI that could be gained by making a change.

To get started, we recommend a site audit and creative strategy session to help identify what’s not working and what might be needed to get back on target. You should also take a look at your organic search performance (SEO), accessibility, speed, and overall usability. All of these factors can reveal where your site may be missing the mark and help to justify an upgrade.

When building your case, make sure that you think through the total cost of ownership for your site so that you can reserve enough budget to get the work done right. For example, if you spent $25,000 on your website in 2013, then made incremental updates over the last five years at $10,000 per year, the cost of your site is $75,000. If you want to preserve all features in your rebuild, you should ask for at least $75,000. While you’re at it, it’s a good idea to ask for 25 percent more than the amount it would take to preserve existing features. The redesign process will inevitably generate new ideas and site improvements that will require additional budget to implement. In this example, we would recommend asking for $100,000 and justifying the cost with a breakdown that takes your total cost of ownership into account.

Here’s another example: if you built your Drupal 7 site in house and worked on it for 24 months using a resource who makes $75,000 per year, the site cost your organization $75,000. Knowing this can help you build a rationale that hiring an agency to build your Drupal 8 site at $75-100,000 within six months is a great deal since the work will have similar costs and take far less time to complete.

Demonstrating where and how a new website could show direct ROI can make all the difference when convincing stakeholders to approve the budget for an updated site.

Consider the costs of doing nothing. It’s also helpful to think bigger than the cost of an upgrade and consider the costs of not improving your website. Lost customers, damaged reputation and missed opportunities can be hard to quantify, but should be considered.

For example, if your website’s contact form currently gets completed an average of 10 times a month and 10 percent of those who complete the form convert to a sale, that means each deal is worth $10,000. What if, through a smart redesign and upgrade, you were able to increase form completions to 15 per month and add content and features that support the sales team, resulting in 20 percent sales conversions?

As you can see, there are many ways to frame your case to support budget requests. Use the approach that will work best to help your stakeholders understand the value of your website project and it’s potential to make a meaningful impact on your organization’s bottom line. Once they see the value, the budget will come much more easily.

Capacity

Today’s working world moves at lightning speed. Most of us end up doing far more than what’s included in our job descriptions, and those full plates can make a website rebuild feel impossible to tackle.

If your stakeholders are concerned about your team’s capacity to handle a rebuild, talk to them about approaching the work in smaller phases. Many of our clients tackle rebuilds one phase at a time, often signing on for smaller, more digestible bites that make up a larger endeavor. This can help make the process feel more approachable and easier for stakeholders to wrap their heads around. Try getting started with a bit of user research. Then tackle design. You can continue from there in small steps until the work is complete.  

Alternatively, this is where an agency like Kanopi Studios comes in. Rebuilding your site on Drupal 8 or WordPress is a lot of work, but an experienced agency can take much of that work off your plate by making the process as smooth and straightforward as possible and keeping the project’s momentum at full swing. That keeps your team concentrating on their day to day work while the rebuild happens simultaneously.

The site looks and works fine

The most common objection we hear from our clients is that their stakeholders don’t see a need to change or understand the point of doing things differently through a rebuild.  

Maybe you already have a beautiful website that is driving strong results. If so, that’s wonderful! However, as time goes on, you’ll find you need to mix things up a bit to keep up with the pace of change and stay competitive. Trends shift, customer behavior changes, and Google likes to keep us guessing with their algorithm updates. Change is constant in all things, and even more so online.

Most websites have room for improvement, even if they are doing well. To ensure your site stays current, keeping your CMS up to date should be part of your roadmap. If you’re planning to make any updates this year, consider upgrading to Drupal 8 as part of your solution.

Remember, the safety zone may feel warm and comforting, but it will never give you the insight and growth that exploring the unknown can provide. Who knows what wonderful things could be in your future?

Need help?

We can help you strategize and build your case for an upgrade to Drupal 8, 9, or even WordPress. When in doubt, get in touch! We can work out the best approach together.

Feb 19 2019
Feb 19
Performance and scale for all levels of digital commerce


Drupal Commerce is a fantastic open source ecommerce platform, but there is a common misconception that it is lacking when it comes to performance and scalability. This is not true! Drupal Commerce is extremely fast and is more than capable of scaling from small business all the way to enterprise level ecommerce. We have proof and it’s right here for you to view.

Download the Drupal 8 Commerce Performance Benchmarks Report (PDF)

About the report

Shawn McCabe, Acro Media’s CTO, put Drupal Commerce to the test to see how it performed on a number of different AWS configurations, ranging from single server setups all the way up to multi-server configurations.

He ran simulated traffic through Drupal Commerce, mimicking actual traffic as close as possible, testing concurrent users, site speed, transactions per second, and a number of other useful technical metrics.

The smallest server configuration tested was capable of handling 130 concurrent users flawlessly, with a throughput of 13.59 transactions per second. On the other hand, the largest configuration could handle 52,000 concurrent users with a throughput of 1,305.85 transactions per second.

The report goes further and includes how the tests were set up, their limitations and methodology, all of the server configurations details and, of course, the test results. This testing puts the performance and scalability question to rest, backed by hard data that anyone can reproduce. Drupal Commerce is a viable option for ecommerce that businesses of any size can use and grow with in the future.

Feb 14 2019
Feb 14

How do you run a page speed audit from a user experience standpoint? For, let's face it: website performance is user experience! 

What are the easiest and most effective ways to measure your Drupal website's performance? What auditing tools should you be using? How do you identify the critical metrics to focus your audit on?

And, once identified, how do you turn the collected data into speed optimization decisions? Into targeted performance improvement solutions...

Also, how fast is “ideally fast”, in the context of your competition's highest scores and of your users' expectations?

Here are the easiest steps of an effective page performance audit, with a focus on the prompt actions you could take for improving it.
 

1. Front-End vs Back-End Performance

They both have their share of impact on the overall user experience:

Long response times will discourage, frustrate and eventually get your website visitors to switch over to your competition.
 

Front-End Performance 

It's made of all those elements included in the page loading process, as being executed by the browser: images, HTML, CSS and JavaScript files, third-party scrips...

The whole process boils down to:

Downloading all these elements and putting them together to render the web page that the user will interact with.
 

Back-End Performance 

It covers all those operations performed by your server to build page content.

And here, the key metrics to measure is TTFB (Time To First Byte).

It's made of 3 main elements:
 

  1. connection latency
  2. connection speed
  3. the time needed for the server to render and serve the content
     

2. What Should You Measure More Precisely? 5 Most Important Metrics

What metrics should you focus your page speed audit on? Here's a list of the 5 most relevant ones:
 

a. Speed index

The essential indicator that will help you determine the perceived performance on your Drupal website:

How long does it take for the content within the viewport to become fully visible?

When it comes to optimization techniques targeting the speed index, “battle-tested” techniques, like lazyloading and Critical CSS, are still the most effective ones.
 

b. Time to first byte

As previously mentioned, the back-end performance:

Measures the time passed from the user's HTTP request to the first byte of the page being received by the browser.
 

c. Start render

The time requested for rendering the first non-white content on the client's browser.

Note: the subsequent requests are “the usual suspects” here, so you'd better ask yourself how you can reduce, defer or relocate them. Maybe you'd consider a service worker?
 

d. Load time

How long does it take for the browser to trigger the window load event? For the content on the requested page to get loaded?

Note: consider enabling HTTP/2, with a dramatic impact on individual page requests.
 

e. Fully loaded

It measures the time of... zero network activity. When even the JavaScript files have all been already fired.

Note: make sure your third-party scripts are “tamed” enough. They're the main “responsible” factors for high fully loaded times.
 

3. How to Perform a Page Speed Audit: 5 Useful Tools

Now that you know what precisely to analyze and evaluate, the next question is:

“How do I measure these key metrics?”

And here are some of the easiest to use and most effective tools to rely on when running your page performance audit:
 

Use them to:
 

  • collect your valuable data on all the above-mentioned metrics
  • get an insight into the page rendering process performed by the browser
  • identify the “sore spots” to work on
  • automate repeated page speed tests
  • keep monitoring your website (SpeedCurve) across multiple devices and in relation to your competition's performance 
  • get a peek into your web page's structure and into the process of downloading resources over the network (Chrome DevTools)


4. 3 Key Benchmarks to Evaluate Your Website's Performance

So, now that you've got your “target metrics” and your toolbox ready, you wonder: 

“What should I measure those metrics against?”

And here, there are 3 major benchmark-setting processes to include in your page speed audit:
 

  • determine your competition: your current production site before its rebuild, your direct and indirect “rivaling” websites
  • determine the key pages on your Drupal website: homepage, product listing page, product detail page etc.
  • measure your competition's web page performance
     

5. Most Common Performance Bottlenecks & Handiest Solutions

Here are the most “predictable” culprits that you'll identify during your page speed audit, along with the targeted performance-boosting measures to take:
 

Factors Impacting the Front-End Performance & Solutions

a. Too many embedded resources

Too many embedded stylesheets, JavaScript and images are an extra challenge for your page loading time. They'll just block the rendering of the page.

Each connection setup, DNS lookup and queuing translates into... overhead, with an impact on your site's perceived performance.

The solution: consider caching, minification, aggregation, compression...
 

b. Oversized files

And images (stylesheets and JavaScript) sure are the main “culprits” for long response times on any Drupal website. 

The solution: consider aggregating/compressing them, turning on caching, lazyloading, resizing etc.
 

c. Wrongly configured cache

Is your website properly cached? Have you optimized your cache settings? Or is it possible that your Drupal cache could be broken? 

If so, then it will have no power to reduce latency, to eliminate unnecessary rendering.

The solution: look into your response headers, URL/pattern configuration, expiration and fix the problem cache settings.
 

d. Non-optimized fonts

Your heavy fonts, too, might play their part in dragging down your website.

The solution: consider caching, delivery, compression, and character sets.
 

In conclusion: do re-evaluate all your modal windows, third-party scripts and image carousels. Is their positive impact on the user experience worth the price you pay: a negative impact on your page loading time?  
     

Word of caution on caching:

Mind you don't overuse caching as a performance boosting technique. If there are serious back-end performance issues on your website, address them; using caching as the solution to mask them is not the answer. It works as a performance improvement technique on already working systems only.
 

Factors Impacting the Back-End Performance & Solutions

And there are some handy, straightforward measures that you could take for addressing back-end performance issues, as well:

  • Consider optimizing the page rendering process directly in the CMS.
     
  • Upgrade your server's hardware infrastructure (e.g. load balancing, RAM, disk space, MySQL tuning, moving to PHP7).
     
  • Keep the number of redirects to a minimum (since each one of them would only add another round trip, which bubbles up to the TTFB).
     
  • Reconfigure those software components that are lower in the server stack (caching back-end, application container).
     
  • Consider using a CDN; it won't serve everything, plus it will lower the distance of a round trip.
     
  • Consider using Redis, Varnish.
     

6. Final Word(s) of Advice

Here are some... extra tips, if you wish, to perform a page speed audit easily and effectively:
 

  • remember to run your audit both before and after you will have applied your targeted performance improving techniques
  • grow a habit of tracking weekly results
  • define the goal of your Drupal website performance test: what precisely should it test and measure and under which circumstances?
  • … for instance, you could be analyzing your site's back-end performance only: the time requested for generating the most popular web pages, under a load of 700 concurrent visitors, let's say (so, you won't be testing connection speed or the browser rendering process)
  • pay great attention to the way you configure your page speed audit system if you aim for accurate and representative results
     

The END!

This is the easy, yet effective way of performing a website speed and optimization audit. What other tools and techniques have you been using so far?

Photo by Veri Ivanova on Unsplash

Pages

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