Upgrade Your Drupal Skills

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

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

argument-open-sourceargument-open-source

Recently, Drupal has been on an update rampage. The introduction of the oh-so-beautiful Drupal 9 core has spurred a chain reaction of upgrades across the Drupal platform. Just this week, we’re getting a new default theme (which is hyper-minimalist and easy-on-the-eyes), a 20% reduction in install times, and automated lazy load for images. But let’s talk about the juiciest UI/UX update that came with Drupal 9 — the standardization of Drupal’s Layout Builder.

If you’ve built a pre-Drupal-9 website over the past few years, you probably dabbled with Panels/Panelizer, WYSIWYG templates, or even custom coding to set up your UX/UI. And that works. We did it for years. But you can throw that worn-out Panelizer module in the trash. The times, they are a-changing. Drupal’s new Layout Builder module combines the core functionality of Panelizer with an out-of-the-box WYSIWYG engine.

First hinted at in 2017, Drupal Layout Builder officially left the onerous Drupal testing pipeline last year as part of Drupal’s 8.7 updates. Despite circulating for a year now, the chaos of 2020 has overshadowed this potent and flexible tool. So, let’s talk about it. Here’s what you need to know about Drupal’s Layout Builder.

What is Layout Builder?

Layout Builder is a WYSIWYG page editing engine that lets you manipulate back-end features via an easy-to-use drag-and-drop interface. It’s difficult to overstate just how valuable Layout Builder is when it comes to time-savings. You can create templates in minutes, immediately preview and create content changes, and tweak page-by-page UI/UX features to create more cohesive and on-the-fly websites and landing pages.

At its core, Layout Builder is a block-based layout builder. You can create layouts for either a single page or all content of a specific type. In addition, you can jump in and create rapid-fire landing pages based on your existing design theme. There are three “layers” that Layout Builder operates on to help you build out holistic websites.

  1. Layout templates: You can create a layout template for all content of a specific type. For example, you can make a layout template for your blog posts or a layout template for every product page. This template will be shared across all pages, so you don’t have to go in and rebuild for each content type.
  2. Customized layout templates: You can also go in and make granular changes to a specific layout template. So, if you want a certain product page to be different than the layout template, you can make granular changes to just that page.
  3. Landing pages: Finally, you can create one-off pages that aren’t tied to structured content — like landing pages.

Important: Founder of Drupal — Dries Buytaert — dropped a blog post with some use cases for each of these layers.

To be clear, Layout Builder isn’t a WYSIWYG template. It uses your existing template. Instead, it allows non-developers (and lazy-feeling developers) to quickly make per-page changes to the website without diving into code. But these aren’t just simple changes. You can create a layout template for every page type (e.g., creating a specific layout for all the shoes you sell), and you can also dive into each of these layout pages to make custom changes. So, it really lets you get granular with your editing without forcing you to completely retool and redesign pages for each type of content. This gives Layout Builder a massive advantage over WordPress’s Gutenberg — which requires you to go in and re-lay elements for every page individually.

Here’s the kicker: you get a live-preview of all changes without bouncing between the layout and the front-end. Every block and field you place and every change you make to taxonomies or content is visible the second you make the change. The entire process takes place on the front-end, and changes are instantly visible. Remember, Layout Builder is part of Drupal’s Core, so you don’t need to implement new entity types of dig into third-party elements. It’s an out-of-the-box experience.

Advantages of Layout Builder

Last year, we got a gorgeous, picture-perfect demo of how Layout Builder would work. It’s beautiful, fast, and packs a punch that other leading layout builders are indeed missing. So, to help unpack the value of Layout Builder, let’s look at some of the advantages of Layout Builder:

Customization

Beyond Layout Builder’s incredibly powerful and customizable block-based design engine, it offers customization in usage. Let’s say you want to create an amazing landing page. You can start with a blank page that’s untied to structured content, drop in some hero images, a few pieces of text, some content, and a video. Suddenly, you have a custom landing page (complete with modules, blocks, and taxonomy) that exists in a separate ecosystem from your website.

Simultaneously, you can create a template for every blog post, then dive into a specific blog post and make on-time changes to just that page while still being tied to your structured content. Remember, you can make these changes nearly instantly, without touching code. And you’ll see a live preview of every change immediately without switching between interfaces.

Accessibility

Drupal is committed to accessibility. The second principle of Drupal’s Values & Principles page reads, “build software everyone can use,” and this rings true. Layout Builder meets Drupal’s accessibility gate standards (i.e., conforms to WCAG 2.0 and ATAG 2.0, text color has sufficient contrast, JavaScript is keyboard-usable, etc.)

Ease-of-use

Like many WYSIWYG editors, Drupal Layout Builder is all about “blocks.” But these aren’t your run-of-the-mill blocks. There are inline blocks, field blocks, global blocks, and system blocks. Each of these has its own use case, and you can combine these block types to create stellar pages in minutes. For example, global blocks are used to create templates, and inline blocks are used to create page-specific changes that don’t impact the layout. The combination of these block types makes Layout Builder a hassle-free experience.

Additionally, there are plenty of ease-of-use features built into the core. Layout Builder works with the keyboard, has plenty of usability features that tie to Drupal’s value statements, and allows nit-picky setups for customized workflows.

Creating a Drupal Website is Easier Than Ever

With Layout Builder, users can generate valuable content and pages without needing to patch together various WYSIWYG tools or Panel/Panelizer. At Mobomo, we’re incredibly excited for our clients to dive into Drupal Layout Builder and make actionable and memorable changes to their templates based on their in-the-moment needs and experiences.

But Layout Builder isn’t a replacement for a well-designed and well-developed website. We can help you build your next world-class website. Once we’re done, Layout Builder gives you the freedom to make substantial changes without the headaches, back-and-forth, or unnecessary touchpoints. Are you ready to create a customer-centric, experience-driven digital space? Contact us.

Aug 04 2020
Aug 04

argument-open-sourceargument-open-source Like many developers, some of our first websites were built on the backbones of WordPress. It’s the hyper-popular king of content management systems. It has name recognition, an overflowing user base, and plenty of third-party integrations that help cut your development time. But, over the years, we’ve migrated almost exclusively to Drupal. So why did we switch? What is it about Drupal that leaves developers drooling? And why would anyone pick Drupal — which has around 1.3 million users — over WordPress —which has over 400 million users? Today, we’re going to compare David to Goliath. Why is Drupal, the third most active CMS behind WordPress and Joomla, a good choice for businesses looking to build a refreshing, impactful, and feature-rich website?

UNDERSTANDING THE CORE DIFFERENCES BETWEEN DRUPAL AND WORDPRESS

By far, the most significant difference between WordPress and Drupal is the overall development need. WordPress is simple. There are hundreds of thousands of third-party plugins that you can leverage to build an entire website with virtually no coding or developing knowledge. And, that’s the single biggest reason that WordPress is so massive. Anyone can build a WordPress site. It’s easy. Drupal requires development. If you want to build a Drupal website, you’re going to have to hire some developers. So, naturally, Drupal has fewer overall users. But, it’s essential to make that distinction. Drupal is built for businesses, public entities, and enterprises. WordPress is built for your everyday website. It’s important to keep this main difference in mind. It’s this difference that resonates throughout these core pillars. And, it’s this core difference that creates pros and cons for each platform.

DRUPAL VS. WORDPRESS: SECURITY, FLEXIBILITY, AND SCALABILITY

We consider security, flexibility, and scalability to be the three primary pillars of a CMS. An amazing designer can make a fantastic template or theme regardless of the CMS. And ease-of-use is relative to your plugins/modules, familiarity with the platform, and overall development capabilities. So those are both highly subjective. Security, flexibility, and scalability aren’t subjective; they are what they are.

SECURITY

WordPress has a security problem. Alone, WordPress accounts for 90% of all hacked websites that use a CMS. There’s a tradeoff that comes with leveraging third-party plugins to build websites. You increase your threat landscape. WPScan Vulnerability Database shows 21,675 vulnerabilities in WordPress’s core and with third-party plugins. This security vulnerability issue has been an ongoing headache for WordPress from the start. If we do a play-by-play, year-over-year of WordPress’s history, we see an ongoing and consistent security issue:

  • 2013: 70% of the top 40,000 most popular WordPress websites were vulnerable to hackers
  • 2014: SoakSoak compromises +100,000 websites, a massive DDOS attack hits 160,000 websites, and All In One SEO Pack puts +19 million sites at risk.
  • 2015: A core vulnerability puts millions of websites at risk, Akismet opens millions of websites to hackers, and YoastSEO puts over 14 million websites in hackers’ crosshairs.
  • 2016: At this point, millions of hacks are happening every week across plugins. Check out this WordFence weekly update during this period.
  • 2017: The hacks continue. The average small business website using WordPress is attacked 44 times a day at this point, and WordPress websites are 2x more likely to be hacked than other CMS.

The list goes on. Year-over-year, more vulnerabilities happen across WordPress. And this is an important point. WordPress has subpar security by design. It’s the tradeoff they made to build an ecosystem that doesn’t require development. We aren’t saying that the core of WordPress is inherently security-stripped. It’s not. But, given the scale, scope, and third-party-fanatic nature of the platform, it’s weak on security by nature. Drupal, on the other hand, is the opposite. Websites require development time, each website is customized to the user, and building a website takes time and patience. The tradeoff is better security. Drupal has built-in enterprise-scale security, and you don’t rely on a hotchpotch of third-party applications to build your website’s functionality. There’s a reason that NASA, the White House, and other government entities use (or used) Drupal. It has better security. We want to take a second to make the distinction. WordPress has a secure core. We would argue that Drupal has a more secure core. But the difference isn’t massive. WordPress’s security vulnerabilities are a product of its reliance on third-party applications to make a functional website.

FLEXIBILITY

WordPress is more flexible than Drupal to some users. And Drupal is more flexible than WordPress to some users. That may sound complicated. But it comes down to your development capabilities. Drupal has more features than WordPress. Its core is filled with rich taxonomies, content blocks, and unique blocks than WordPress. But, if you aren’t experienced, you probably won’t find and/or use many of these functionalities. On the surface, WordPress has more accessible features. At the core, Drupal is the single most feature-rich CMS on the planet. So, for businesses (especially public entities and larger enterprises), Drupal has a more robust architecture to tackle large-scale projects that have hyper-specific needs. For small businesses and personal website owners, WordPress is easier to use and requires far less development experience to tap into its functionalities, features, and flexibility.

SCALABILITY

Drupal has better scalability. This one isn’t a competition. Again, this comes down to the dev-heavy nature of the platform. To scale WordPress websites, you add more plugins. To scale Drupal websites, you develop more. There’s a key practical difference here. Drupal modules, taxonomies, and content blocks all exist in the same ecosystem. Each WordPress plugin is its own micro-ecosystem. So, with WordPress, most users are stringing together a ton of third-party ecosystems in an attempt to create one overarching website. Also, Drupal is built for enterprise-scale projects. So there’s backend support and a large landscape of community support around large-scale projects. WordPress is a catch-all CMS that has a little of everything. If WordPress is a Swiss army knife, Drupal is a custom, hand-forged bread knife — explicitly designed to help you scale, slice, and butter larger projects.

ARE YOU READY TO DEVELOP YOUR PERFECT DRUPAL WEBSITE?

At Mobomo, we specialize in Drupal development projects. Our agile-based team of top-level design, development, and support talent can help you launch and scale your website to fit your unique needs. From NASA to Great Minds, we help private and public entities build dreams and execute visions.

Contact us to learn more.

Jul 30 2020
Jul 30

argument-open-sourceargument-open-source Over 500,000 businesses leverage Drupal to launch their websites and projects. From NASA to Tesla, public and private institutions regularly rely on Drupal to launch large-scale websites capable of handling their development and visual needs. But, starting a Drupal project doesn’t guarantee success. In fact, 14% of all IT projects outright fail, 43% exceed their initial budgets, and 31% fail to meet their original goals! In other words, if you want to create a successful Drupal project, you need to prepare. Don’t worry! We’ve got your back. Here are 5 things to keep in mind when starting a Drupal-based project.

1. GATHER REQUIREMENTS FROM STAKEHOLDERS EARLY AND OFTEN

According to PMI, 39% of projects fail due to inadequate requirements. Believe it or not, requirement gathering is the single most important stage of project development. In fact, it’s the first step Drupal itself takes when pushing out new projects (see this scope document for their technical document project). Gathering requirements may sound easy, but it can be a time-consuming process. We recommend using SMART (Specific, Measurable, Agreed Upon, Realistic, Time-based) to map out your specific needs. If possible, involve the end-user during this stage. Don’t assume you know what users want; ask them directly. Internally, requirements gathering should rally nearly every stakeholder with hefty amounts of cross-collaboration between departments. You want to lean heavily on data, establish your benchmarks and KPIs early, and try to involve everyone regularly. The single biggest project mistake is acting like requirements are set-in-stone. If you just follow the initial requirements to a “T,” you may push out a poor project. You want to regularly ask questions, communicate issues, and rely on guidance from stakeholders and subject matter experts (SMEs) to guide your project to completion.

2. PLAN YOUR SDLC/WORKFLOW PIPELINE

We all have different development strategies. You may leverage freelancers, a best-in-class agency, or internal devs to execute your Drupal projects. Typically, we see a combination of two of the above. Either way, you have to set some software development lifecycle and workflow standards. This gets complex. On the surface, you should think about coding standards, code flow, databases, and repositories, and all of the other development needs that should be in sync across devs. But there’s also the deeper, more holistic components to consider. Are you going to use agile? Do you have a DevOps strategy? Are you SCRUM-based? Do you practice design and dev sprints? At Mobomo, we use an agile-hybrid development cycle to fail early, iterate regularly, and deploy rapidly. But that’s how we do things. You need to figure out how you want to execute your project. We’ve seen successful Drupal projects using virtually every workflow system out there. The way you work matters, sure. But getting everyone aligned under a specific way of working is more important. You can use the “old-school” waterfall methodology and still push out great projects. However, to do that, you need everyone on the same page.

3. USE SHIFT-LEFT TESTING FOR BUG AND VULNERABILITY DETECTION

Drupal is a secure platform. Of the four most popular content management systems, Drupal is the least hacked. But that doesn’t mean it’s impenetrable. You want to shift-left test (i.e., automate testing early and often in the development cycle). Drupal 8+ has PHPUnit built-in — taking the place of SimpleTest. You can use this to quickly test out code. You can perform unit tests, kernel tests, and functional tests with and without JavaScript. You can also use Nightwatch.js to run tests. Of course, you may opt for third-party automation solutions (e.g., RUM, synthetic user monitoring, etc.) The important thing is that you test continuously. There are three primary reasons that shift-left testing needs to be part of your development arsenal.

  • It helps prevent vulnerabilities. The average cost of a data breach is over $3 million. And it takes around 300 days to identify and contain website breaches.
  • It bolsters the user experience. A 100-millisecond delay in page load speed drops conversions by 7%. Meanwhile, 75% of users judge your credibility by your website’s design and performance, and 39% of users will stop engaging with your website if your images take too long to load. In other words, simple glitches can result in massive issues.
  • It reduces development headaches. Nothing is worse than developing out completely new features only to discover an error that takes you back to step 1.

4. GET HYPER-FAMILIAR WITH DRUPAL’S API

If you want to build amazing Drupal projects, you need to familiarize yourself with the Drupal REST API. This may sound like obvious advice. But understanding how Drupal’s built-in features, architecture, and coding flow can help you minimize mistakes and maximize your time-to-launch. The last thing you want to do is code redundantly when Drupal may automate some of that coding on its end. For more information on Drupal’s API and taxonomy, see Drupal API. We know! If you’re using Drupal, you probably have a decent idea of what its API looks like. But make sure that you understand all of its core features to avoid headaches and redundancies.

5. SET STANDARDS

Every development project needs standards. There are a million ways to build a website or app. But you can’t use all of those million ways together. You don’t want half of your team using Drupal’s built-in content builder and the other half using Gutenberg. Everyone should be on the same page. This goes for blocks, taxonomy, and every other coding need and task you’re going to accomplish. You need coding standards, software standards, and process standards to align your team to a specific framework. You can develop standards incrementally, but they should be shared consistently across teams. Ideally, you’ll build a standard for everything. From communication to development, testing, launching, and patching, you should have set-in-stone processes. In the past, this was less of an issue. But, with every developer rushing to agile, sprint-driven methodologies, it can be easy to lose sight of standards in favor of speed. Don’t let that happen. Agile doesn’t mean “willy-nilly” coding and development for the fastest possible launch. It still has to be systematic. Standards allow you to execute faster and smarter across your development pipeline.

NEED SOME HELP?

At Mobomo, we build best-in-class Drupal projects for brands across the globe. From NASA to UGS, we’ve helped private, and public entities launch safe, secure, and exciting Drupal solutions. Are you looking for a partner with fresh strategies and best-of-breed agile-driven development practices?

Contact us. Let’s build your dream project — together.

Jul 28 2020
Jul 28

argument-open-sourceargument-open-source

DRUPAL MIGRATION PREPARATION AUDIT

All good things must come to an end. Drupal 7 will soon meet its end. Does your organization have your migration plan to Drupal 9 in order? Here’s what you need to know to keep your Drupal site running and supported. Talk to Our Drupal Migration Experts Now!

OUR APPROUCH TO DRUPAL MIGRATION.

  • Analyze 
  • Inventory
  • Migration
  • Revision
  • SEO

OVERVIEW

Staying up to date with Drupal versions is vital to maintaining performance to your site:

  • Future-proofing
  • Avoiding the end-of-life cut-off
  • Performance
  • Security

GOALS

  1. Catalog existing community contributed modules necessary to the project
  • Do these modules have a corresponding Drupal 8 version?
  • If the answer to the above question is no, is there an alternative?
  • Is there an opportunity to optimize or upgrade the site’s usage of contributed modules?
  1. Catalog existing custom built modules
  • Do these modules rely on community contributed modules that may not have a migration path to Drupal 8?
  • Do these modules contain deprecated function calls?
  • Are there any newer community contributed modules that may replace the functionality of the custom modules?
  1. Review existing content models.
  • How complex is the content currently—field, taxonomy, media?
  • What specific integrations need to be researched so content will have feature parity?
  1. Catalog and examine 3rd party integrations.
  • Is there any kind of e-commerce involved?
  • Do these 3rd party integrations have any Drupal 8 community modules?
  1. Catalog User roles and permissions
  • Do user accounts use any type of SSO?
  • Is there an opportunity to update permissions and clean up roles?

PRE-AUDIT REQUIREMENTS

  • Access to the codebase
  • Access to the database
  • Access to a live environment (optional)
  • Access to integrations in order to evaluate level of effort

DELIVERABLES

Module Report The module report should contain an outline of the existing Drupal 7 modules with the corresponding path to Drupal 8, whether that’s an upgraded version of the existing module or a similar module. This report should also contain a sheet outlining any deprecated function usage for the custom modules that will need to be ported to Drupal 8.

Content Model Report The Content Model report should contain an overview of the existing site’s content types, users, roles, permissions and taxonomic vocabularies with each field given special consideration. Recommendations should be made in the report to improve the model when migrating to Drupal 8.

Integration Report The integration report contains a catalog of the third party integrations currently in use and marks those with an existing contributed module from the community and those that will require custom work to integrate with the Drupal 8 system.

Our Insights on Drupal Our latest thoughts, musings and successes.

Contact us. We’ll help you expand your reach.

Jul 10 2020
Jul 10

argument-open-sourceargument-open-source

When you first sit down to create your Drupal website, you have plenty of decisions to make. What are your first blog posts going to be? What kinds of marketing materials do you need to help your website convert? What is your SEO strategy to boost your SERP position? These are all important, and we highly recommend that you consider each point before you launch your first website.

But those are details. The most significant decision you’re going to make is what theme you’ll use. Think of your theme as the building block of your website. It’s how users are going to perceive your site, interpret your content, and engage with your products or services. You want a beautiful, interactive, intuitive, and easy-to-browse website that pushes customers to think, engage, and consume your rich creatives.

Here’s the problem: there are thousands of Drupal themes. When you first look through the avalanche of bright colors, minimal panes, and unique content configurations, it can be dizzying. How do you pick a theme with that certain something that sets you apart? 

Here are some criteria to help you sift through the tsunami of designs on the market.

How Important is Your Drupal Theme, Really?

At some point, you need to pull the trigger. But how soon should you go with your gut instinct? After all, is picking the “perfect” theme really that important? In today’s hyper-redundant theme ecosystem, it’s easy to think that website design is a secondary factor in your website build process. Many websites today have eerily similar themes, and you may be looking to copy-paste that minimalist, white-space-heavy style that your competitors probably use.

Don’t make the mistake of minimizing the importance of the theme. Your competitors may use cookie-cutter themes, but you shouldn’t. Here’s why:

  • 38% of people will flat out refuse to engage with a website if its looks aren’t appealing to them.
  • 88% of people won’t return to your website ever again after a single bad experience.
  • 75% of customers make a judgment call on your brand’s credibility based on your website design.
  • Given 15 minutes to read content, people would rather view something beautifully designed than something plain-looking.
  • 94% of negative feedback regarding your website will be design related.

In other words, your customers are going to judge the efficacy of your brand based on your website’s design. Remember the phrase, “first impressions are everything.” Well, 94% of first impressions are based on design—you want something stunning. Obviously, design is still a highly personal experience. Some people like quirky and weird, some like minimal and smooth, and others like aggressive and animation heavy. It depends on your end user and who you are as a brand.

So how do you go about picking the right one? After all, there’s a lot at stake. Your theme is going to be the first thing customers see when they click on your website. Here are the three core components of website themes you should consider before you make your choice.

1. Your Brand’s Identity

We all know that branding is a big deal. 89% of marketers say that branding is their top goal, and branding is the first thing that 89% of investors look at when deciding whether or not to open their wallets. So, when it comes to your design, brand should be front-of-mind. Who is your company? What does it stand for? And, most all, what does it look like?

Your Drupal theme is a powerful branding tool. Every single component of your website is an opportunity for branding. We could get overly complicated diving into website branding, but we’ll stick with the simple stuff. Let’s talk about color. Seems simple enough, right? Check this out:

  • Color alone improves brand recognition by 80%.
  • 93% of people focus on your brand’s color when buying products.
  • When people make subconscious decisions about your product, 90% of that decision is related to color.

Ok! So color is obviously important. But what about all the other “stuff” on your website? Does the position of content boxes, navigation menu, and blog posts really matter? You bet! Consistent brand representation across content boosts bottom-line profits by 33% on average. And 80% of people think content is what drives them to really engage and build loyalty with brands.

In a nutshell, think about branding when you look at themes. 90% of users expect you to have consistent branding across all channels. If you can’t find a theme that screams, “you,” that’s ok! If you can’t find one, build one.

2. Performance

The theme you choose will have a direct impact on your website’s performance. Unnecessary components, visual clutter, and poor frontend coding can all increase load times and disrupt website accessibility. Obviously, some of your performance capabilities happen on the backend (e.g., caching, DB Query optimization, MySQL settings, etc.) But your theme still has a sizable effect on how your website performs.

Overly large CSS files, redundant coding for modules, blank spaces, and other issues can all increase time-to-load, create visual issues, and create stop-points for your users. To be clear, performance is a significant component in both lead generation and retention:

  • A 100-millisecond delay drops conversions by 7%.
  • Increasing the number of page elements from 400 to 6,000 drops conversion rates by 95%.
  • 79% of shoppers that encounter a website with poor performance will never return.

Always test out themes for performance. The aesthetic qualities of a website are important, but performance is a necessity.

3. UX

We like to call UX the “hidden performance.” It’s how your users will engage with and consume content throughout your website. The theme you pick will dictate a significant portion of your UX. Before you choose a theme, build out your information architecture strategy, create mockups for UI (or at least find UI examples that you enjoy), and plot out your broad content strategy. Then, choose a theme that compliments your strategy and information architecture.

Here’s the most important thing: always evolve your UX. Consider applying agile to your theme building and choosing practices. Even after you select the right theme, constantly make improvements to your UI/UX to breed consistency and customer-centricity. You can purchase a pre-made theme on the Drupal marketplace, but you still need to customize the theme to fit your brand and conform to your UX framework. You don’t want to choose a cookie-cutter theme on the marketplace and fail to maximize its value. Not only will your website look nearly identical to thousands of other Drupal sites, but you also won’t truly build an experience-driven website. Give your customers home-cooked steak and potatoes—not a microwaved frozen dinner.

Are You Looking for the Perfect Drupal Theme?

If you want a theme that’s hyper-branded, built for performance, and created using brand-specific information architecture, you won’t find it on a pre-built theme website. You need to create it. At Mobomo, we help public and private entities create breathtaking Drupal themes specifically for their brand and their users. Let’s build your brand something amazing.

Contact us to learn more.

Jul 08 2020
Jul 08

argument-open-sourceargument-open-source

Businesses and governments build websites for one reason: to provide value to their users. But what if your website was incapable of reaching millions of your users? 25% of Americans live with disabilities. For some of them, the simple act of navigating websites, digesting information, and understanding your content is difficult. Yet, despite brands increasing spending on web design and digital marketing, less than 10% of websites actually follow accessibility standards. Businesses are spending significant money to capture an audience, yet they’re not ensuring that their audience can engage with their website.

It’s a problem—a big one.

You don’t want to exclude customers. It’s bad for business, and it’s bad for your brand. Better yet, accessibility features help improve your SEO, reduce your website complexity, and increase your ability to connect with your loyal audience. But accessibility standards aren’t always baked into the architecture of websites.

Luckily, there are some content management systems (CMS) that let you create hyper-accessible websites without even trying. Drupal comes equipped with a variety of accessibility features — each of which helps make your website more accessible for your customers.

Understanding the Importance of Website Accessibility

Creating an accessible website may sound vague, but there’s already a worldwide standard you can follow. The Web Content Accessibility Guidelines (WCAG) — which is maintained by The World Wide Web Consortium — is the global standard for web accessibility used by companies, governments, and merchants across the world.

Sure! Following the WCAG standard helps you reach a wider audience. But it also keeps you out of legal hot water. Not only has the ADA made it abundantly clear that compliance requires website accessibility. A United States District Court in Florida ruled that WCAG standards are the de facto standards of web accessibility. And there are already cases of businesses getting sued for failing to adhere to them.

  • The DOJ sues H&R Block over its website’s accessibility.
  • WinnDixie.com was sued for accessibility, and the judge required them to update their website.
  • The National Museum of Crime and Punishment was required to update its website accessibility.

The list goes on. Adhering to WCAG web accessibility standards helps protect your brand against litigation. But, more importantly, it opens doors to millions of customers who need accessibility to navigate and engage with your amazing content.

One-third of individuals over the age of 65 have hearing loss. Around 15% of Americans struggle with vision loss. And millions have issues with mobility. The CDC lists six forms of disability:

  • Mobility (difficulty walking or climbing)
  • Cognition (difficult remembering, making decisions, or concentrating)
  • Hearing (difficulty hearing)
  • Vision (difficulty seeing)
  • Independent living (difficulty doing basic errands)
  • Self-care (difficulty bathing, dressing, or taking care of yourself)

Web accessibility touches all of those types of disabilities. For those with trouble seeing, screen readers help them comprehend websites. But, screen readers strip away the CSS layer. Your core content has to be accessible for them to be able to comprehend it. Those with mobility issues may need to use keyboard shortcuts to help them navigate your website. Hearing-impaired individuals may require subtitles and captions. Those with cognitive issues may need your website to be built with focusable elements and good contrasting.

There are many disabilities. WCAG creates a unified guideline that helps government entities and businesses build websites that are hyper-accessible to people with a wide range of these disabilities.

Drupal is WCAG-compliant

WCAG is vast. A great starting point is the Accessibility Principles document. But, creating an accessible website doesn’t have to be a time-consuming and expensive process. Drupal has an entire team dedicated to ensuring that their platform is WCAG compliant. In fact, Drupal is both WCAG 2.0 compliant and Authoring Tool Accessibility Guidelines (ATAG 2.0) compliant. The latter deals with the tools developers use to build websites. So, Drupal has accessibility compliance on both ends.

What Accessibility Features Does Drupal Have?

Drupal’s accessibility compliance comes in two forms:

  1. Drupal has built-in compliance features that are native to every install (7+).
  2. Drupal supports and enables the community to develop accessibility modules.

Drupal’s Built-in Compliance Features

Drupal 7+ comes native with semantic markup. To keep things simple, semantic markup helps clarify the context of content. At Mobomo, we employ some of the best designers and website developers on the planet. So, we could make bad HTML markup nearly invisible to the average user with rich CSS and superb visuals. But when people use screen readers or other assistive technology, that CSS goes out-of-the-window. They’re looking at the core HTML markup. And if it’s not semantic, they may have a difficult time navigating it. With Drupal, markup is automatically semantic — which breeds comprehension for translation engines, search engines, and screen readers.

Drupal’s accessibility page also notes some core changes made to increase accessibility. These include things such as color contrasting. WCAG requires that color contrasting be at least 4.5:1 for normal text and 7:1 for enhanced contrast. Drupal complies with those guidelines. Many other changes are on the developer side, such as drag and drop functions and automated navigation buttons.

Of course, Drupal also provides developer handbooks, theming guides, and instructional PDFs for developers. Some of the accessibility is done on the developer’s end, so it’s important to work with a developer who leverages accessibility during their design process.

Drupal’s Support for the Accessibility Community

In addition to following WCAG guidelines, Drupal supports community-driven modules that add additional accessibility support. Here are a few examples of Drupal modules that focus on accessibility:

There are hundreds. The main thing to remember is that Drupal supports both back-end, front-end, and community-driven accessibility. And they’ve committed to continuously improving their accessibility capabilities over time. Drupal’s most recent update — the heavily anticipated Drupal 9 — carries on this tradition. Drupal has even announced that Drupal 10 will continue to expand upon accessibility.

Do You Want to Build an Accessible Website

Drupal is on the cutting-edge of CMS accessibility. But they can’t make you accessible alone. You need to build your website from the ground up to comply with accessibility. A good chunk of the responsibility is in the hands of your developer. Are you looking to build a robust, functional, beautiful, and accessible website? 

Contact us. We’ll help you expand your reach.

Apr 01 2020
Apr 01

argument-open-sourceargument-open-source

Back in 2013, when I first joined Mobomo, we migrated NASA.gov from a proprietary content management system (CMS) to Amazon Cloud and Drupal 7. It goes without saying, but there was a lot riding on getting it right. The NASA site had to handle high traffic and page views each day, without service interruptions, and the new content management system had to accommodate a high volume of content updates each day. In addition to having no room for compromise on performance and availability, the site also had to have a high level of security. 

Maybe the biggest challenge, though, was laying the groundwork to achieve NASA’s vision for a website with greater usability and enhanced user experiences. If NASA’s audience all fell into the same demographic, that goal probably wouldn’t have seemed so intimidating, but NASA’s audience includes space fans who range from scientists to elementary school kids. 

Our mission was to create a mobile-first site that stayed true to NASA’s brand and spoke to all of the diverse members of its audience. A few years later, we relaunched a user-centric site that directed visitors from a dynamic home page to microsites designed specifically for them.

Making Space Seem Not So Far Away

NASA.gov includes data on its missions, past and present. To make this massive amount of data more user-friendly, we worked with NASA to design a site that’s easily searchable, navigable, and enhanced through audio, video, social media feeds, and calendars. Users can find updates on events via features such as the countdown clock to the International Space Station’s 20th anniversary. NASA.gov users can also easily find what they need if they want to research space technology, stream NASA TV, or explore image galleries. 

The NASA.gov site directs its younger visitors to a STEM engagement microsite where students can find activities appropriate for their grade level. The site also includes the NASA Kids’ Club where students can have some fun while they’re learning about exploration. For example, they can try their hands at virtually driving a rover on Mars, play games, and download activities. 

Older students with space-related aspirations can learn about internship and career opportunities, and teachers can access lesson plans and STEM resources.

How to Make it Happen

To successfully achieve NASA’s goals and manage a project this complex, we had to choose the right approach. Some website projects are tailor-made for a simple development plan that moves from a concept to design, construction, testing, and implementation in a structured, linear way. The NASA.gov project, however, wasn’t one of them.

For this website and the vast majority of the sites we develop, our team follows DevOps methodology. With DevOps, you don’t silo development from operations. Our DevOps culture brings together all stakeholders to collaborate throughout the process to achieve:

Faster Deployment

If we had to build the entire site then take it live, it would have taken much longer for NASA and its users to have a new resource. We built the site in stages, validating at every stage. By developing in iterations, and involving the entire team, we also have the ability to address small issues rather than waiting until they create major ones. It also gives us more agility to address changes and keep everyone informed. This prevents errors that could put the brakes on the entire project.

Optimized Design

NASA.gov has several Webby Awards, and award-winning web design takes a team that works together and collaborates with the organization to define the audience (or audiences), optimize the site’s navigation and usability, and strike a balance between the site’s primary purpose and its appeal. 

Mobile-First

Because NASA.gov users may be accessing the site from a PC, laptop, tablet, smartphone, or other device, it was also pivotal to use mobile-first design. Mobile-first starts by designing for the smallest screens first, and then work your way up to larger screens. This approach forces you to build a strong foundation first, then enhance it as screen sizes increase. It basically allows you to ensure user experiences are optimized for any size device. 

Scalability

NASA.gov wasn’t only a goliath website when we migrated it to Amazon Cloud and Drupal. We knew it would continue to grow. Designing the site with microsites that organize content, help visitors find the content that is most relevant to their interests, and enhance usability and UX informed a plan for future growth. 

Efficient Development Processes

DevOps Methodology breaks down barriers between developers and other stakeholders, automates processes, makes coding and review processes more efficient, and enables continuous testing. Even though we work in iterations, our team maintains a big-picture view of projects, such as addressing integrations, during the development process. 

Planned Post-Production

DevOps also helps us cover all the bases to prepare for launch and to build in management tools for ongoing site maintenance. 

What Your Business Can Learn from NASA

You probably never thought about it, but your business or organization has a lot in common with NASA, at least when it comes to your website. Just like NASA, you need a website that gives you the ability to handle a growing digital audience, reliably and securely. You’re probably also looking for the best CMS for your website, one that’s cost-effective and gives you the features you need.

Your website should also be designed to be usable and to provide the user experiences your audience wants. And, with the number of mobile phone users in the world topping 5 billion, you want to make sure their UX is optimized with mobile-first design. 

NASA’s project is also an illustration of how building your website in stages, getting input from all stakeholders, and validating and testing each step of the way can lead to great results. You also need a plan for launching the site with minimal disruption and tools that will make ongoing management and maintenance easier. 

You probably want to know you are doing everything you can to make your content appealing, engaging, and interactive. You may think NASA has an advantage in that department since NASA’s content is inherently exciting to its audience.

But so is yours. Create a website that showcases it. Not sure where to begin? Click here and we’ll point you in the right direction.

Jan 30 2020
Jan 30

A chef can make a great meal with a few basic ingredients. But when offered a massive pantry full of options, the result can be a work of art.

The same principle applies when it comes to website CMS software. A basic template-style CMS can result in something that hits the spot. But Drupal’s staggering degree of flexibility and modular options has allowed the developers of some of the world’s most prominent websites to create gorgeous and highly functional sites that inspire, inform, and elevate.

Here are our top 10 picks for Drupal websites that we think have raised the bar:

  • Tesla
  • PGAL
  • The University of Texas at Austin
  • Children’s Hospital of Los Angeles
  • Mint
  • National Baseball Hall of Fame
  • The Australian Government
  • Rethinking Picasso’s Guernica
  • The Emmy Awards
  • NASA

Let’s examine these in more detail:

10. TeslaTeslaTesla

A rare day passes by without Tesla making headlines. The brand and its founder, Elon Musk, are renowned for big, audacious ideas that have potential to change the world. The beautiful photography and design make every section look like a high-end editorial page in a magazine, while the simple, intuitive navigation and call-to-action features are clean and unobtrusive. It all combines to create a website that’s aspirational yet attainable.

9. PGALPGALPGAL

PGAL is an international design firm focusing on interiors, architecture, planning, and engineering. Their challenge is to show and tell, so that potential clients are dazzled by the site’s visuals while still being able to find enough solid information to want to take the next step. The site, which uses imagery as the gateway to project stories, is a delightful rabbit-hole that we could spend hours exploring. Make sure to check out their Projects page, as it is an excellent example of how to show off a portfolio in a clean but comprehensive way.

8. The University of Texas at AustinUniversity of Texas at Austin University of Texas at Austin 

University websites can often be an overstuffed nightmare to navigate, but the team behind UT Austin’s website got it right: Their menu navigation is clean, well-organized, and enticing. Add to it a home page that evokes the fresh excitement of starting the post-secondary journey, while peppering in well-organized data that invites the reader to learn more, and you have a website that gets students and their families off to the perfect start.

7. Children’s Hospital of Los AngelesChildren’s Hospital of Los AngelesChildren’s Hospital of Los Angeles

160,000 visitors go to CHLA.org every month, making it vital for the site to present clear, accurate, easily navigated information in a way that builds and maintains trust. It’s a tall order, but CHLA.org delivers. The design is clean but far from cold, while the most frequently searched information is put front and center instead of being hidden in the navigation bars, making it easy for frazzled parents to find out what they need to know. The sheer volume of information on the “Patients and Families” page could easily be overwhelming but is organized beautifully and intuitively.

6. Mint

Mint’s value statement: “We help you effortlessly manage your finances in one place.” They offer clean and simple financial management, using a clean and simple sentence to describe what they do. A cluttered or complicated website would completely undermine their brand. Fortunately, Mint.com is anything but cluttered or complicated. The simple and soothing colors and minimalist text are reassuring to visitors who want straightforward information, while the navigation and iconography make navigation a breeze.

5. National Baseball Hall of FameNational Baseball Hall of FameNational Baseball Hall of Fame

For any website to be successful, it has to give the end-users what they’re looking for, and the BHoF delivers. After extensive user research, the site was designed to showcase the incredible stories and artifacts in BHoF’s collection, bringing it all to life for the site’s visitors. Fortunately, it also does so in a way that’s easy to navigate, inviting visitors to spend plenty of time exploring.

4. The Australian GovernmentThe Australian GovernmentThe Australian Government

As with universities and colleges, government websites can often be an impenetrable labyrinth to navigate. Australia.gov.au does things differently, living up to their header, “Helping you find government information and services.” The site is incredibly well-organized, with virtually no clutter. And even though it has not one photo to speak of, it still manages to be attractive, through a judicious use of color and minimalistic icons.

3. Rethinking Picasso’s GuernicaRethinking Picasso’s GuernicaRethinking Picasso’s Guernica

The Museo Nacional Centro de Arte Reina Sofía created an ambitious project around one of Picasso’s most famous works of art, and the results were groundbreaking: The project has been recognized with a Webby as the best 2018 Cultural Institutions Website. The storytelling and imagery on this site are captivating, while the user experience is smooth and unobtrusive.

2.  The Emmy AwardsThe Emmy AwardsThe Emmy Awards

The Emmy Awards are splashy and glamorous on the outside, while requiring meticulous planning and organization behind the scenes. Their website is no different. With a plethora of content, rich color choices, and high-quality images, the site is as immersive an experience as the awards show is. But thoughtful, intuitive navigation, exciting features, and well-curated content demonstrate expertise.

1. NASANASANASA

NASA.gov is a massive resource on space, astronomy, and the universe, offering detailed information on present and past missions, gorgeous photography, educational resources, and information about the organization in general, to name but a few features. Organizing such a wealth of information in a coherent and clear way shows what is possible with Drupal.

Full disclosure: We’re the team behind NASA.gov, so it’s understandable that we might have a soft spot for this site. However, we’re far from alone in loving the finished product. Our friends at Vardot.com call it “a shining example of Drupal CMS used to present stunning information, and elevate the user’s experience,” and NASA.gov has made the top of more than one “Best Drupal Websites” list.

Want to see the possibilities that Drupal can hold for your organization’s website?
Contact us today!

Jan 17 2020
Jan 17

Drupal 9 is scheduled for release on June 3, 2020. And as with any highly anticipated release, questions abound: “What will change from Drupal 8 to Drupal 9?” “What do I need to do to prepare before upgrading?” And top-of-mind is the big question: “What will Drupal 9 be like to work with?”

Read on as we share what you’ll need to know … and what might surprise you.

Anybody who’s upgraded from Drupal 7 to Drupal 8 recalls the giant chasm between the two systems. Almost 200 new features were launched including an entirely new page editor, a new theme engine, a new text editor, and new field types, to name but a few.

This gap doesn’t exist between Drupal 8 and Drupal 9. In fact, on the surface, there IS no difference: Drupal 9 has the same code, functions, and feature set as Drupal 8.9.

So why release it then? As it turns out, there are differences — they’re just not front-and-center on the interface.

Time to Clean House

Throughout its development cycle, Drupal 8 has wound up with a lot of code debt: functions that were created programmatically and used for some time but have been rendered redundant by more efficient functions.

These bits of code clutter up Drupal 8 like your old CDs and DVDs clutter up your bookshelf: There’s nothing wrong with them, but you probably don’t need them anymore now that you have something more efficient.

The result of all this extra code is that programmatically, there might be 10 different ways to do one single thing.

What Drupal has done is marked all of those code items in the backend code base as being “deprecated”. When Drupal 9 comes out, the plan is to remove all the deprecated code on this list, leaving only the latest version of whatever that code’s API is. They’ll also be updating third-party dependencies, such as Symfony and Twig. From Drupal’s site:

“Drupal 9 will be a cleaned-up version of Drupal 8. It will be the same as the last Drupal 8 minor version with our own deprecated code removed and third-party dependencies updated. We are building Drupal 9 in Drupal 8.”

Will Drupal 9 Be Better?

Yes, but not without some minor risks.

Jettisoning all this deprecated code will result in a much faster, cleaner, and better-operating version of Drupal. However, if you have legacy programs whose modules use some of that deprecated code, you could find yourself with some broken processes.

How to Prepare for Drupal 9

In general, upgrading to Drupal 9 is not an onerous process – it can literally be done via a single command. What will take more time is monitoring and auditing code bases to ensure that none of your functionality is dependent upon deprecated code.

Fortunately, Drupal is well prepared for this, and has indicated that the Drupal 8 branch of the Upgrade Status module can be used  to identify and report on any deprecated code:

“This module scans the code of the contributed and custom projects you have installed, and reports on any deprecated code that must be replaced before the next major version. Available project updates are also suggested to keep your site up to date as project will resolve deprecation errors over time.”

In addition, we anticipate that when downloading or updating modules, Drupal will likely advise whether there are compatibility issues due to bad functions. However, that notification system isn’t currently in place (if it indeed happens at all), so your best bet is to work with your development partner, who can audit your code to identify any trouble spots.

Marie Kondo-ing Your Infrastructure

Drupal 9 will be a much faster and more streamlined platform, but it doesn’t exist in a vacuum. If the rest of your operational architecture is similarly full of code debt and redundant processes, updating Drupal 9 will be akin to sending a Lamborghini down a pothole-rutted road: That powerful engine is wasted if the route is slowing it down.

So, going to Drupal 9 is an excellent opportunity to look at your legacy systems, audit them as well, and make sure your entire infrastructure is clean, fast, and free of roadblocks.

The Bottom Line

In general, upgrading to Drupal 9 should not be a complex or lengthy process. By cleaning out the clutter and performing some common dependencies, Drupal is practicing good development hygiene and providing its customers with a more streamlined system that will be faster … but still familiar.

Want to know more? Contact us today!

Oct 21 2018
Oct 21

Wouldn’t it be nice if you could add any block you want to your paragraphs?

Kaleem Clarkson

In years past, layout for Drupal has been in the hands of front-end developers, but over time various modules were developed that provided site-builders the ability to adjust the layout. An improvement yes, but there still wasn’t a clear cut option that empowered content editors to alter the layout during the editorial process.

Look out! Here comes the Paragraphs Module. This module has been taking the Drupal community over by storm because it allows content editors to add pre-designed components which gives each page the option to have different layouts. One of the limitations of the Paragraphs module, is that each paragraph can only be used once, and only for the current node you are editing. This means that you can’t re-use a common paragraph such as a call to action block, email signup or contact us form, so you end up finding yourself duplicating a lot of work if you want the same block on numerous pages. While the Drupal community has been working to help solve this problem by allowing the re-use of paragraphs, there are still going to be plenty of situations where you want to insert custom blocks, views, or system blocks such as the site logo or login block.

How do you allow your site editors to add re-used blocks into their content during the editorial process?

Let me introduce you to the Block Field Module. Maintained by the one and only Jacob Rockowitz (you know the webform guy ), you can be assured that the code follows best practices and that there will be support. The block field module allows you to reference any block regardless of where it is coming from and the best part, you don’t have to create some hidden region in your theme in order for the blocks to be rendered.

There are plenty of awesome articles out there that explains how to use paragraphs so I won’t get into that. To follow along with my steps be sure to have downloaded and enabled both the Paragraphs and the Block Field modules.

  1. Download and Enable the Paragraphs and Block Field modules.
  2. Create a paragraph type called Block Reference (or whatever name you want)
  3. Add a new field, by selecting the Block (plugin) field type from the dropdown and save it.
  4. Go to manage display and make the label hidden.
    I always forget this step and then I scratch my head when I see the Block Ref field label above my views title.
  5. Now go to back to your content type that has the paragraph reference field and ensure the Block Reference paragraph type is correctly enabled.
    The content type with the paragraph reference field was not covered in this tutorial.
  6. When adding or editing your content with a paragraph reference field. Add the Block Reference paragraph type. Select the name of the block that you would like to reference from the dropdown hit save on the content and watch the magic happen.

In conclusion, it does feel a little scary giving content editors this much freedom so it will be imperative that all views and custom blocks have descriptive names so that editors can clearly identify what blocks to reference. Overall I feel like this is a good solution for referencing existing blocks that can save a lot of time and really unleashes the power of the paragraphs module. The Drupal community continues to amaze me!

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