Our current Designzillas website is built with Drupal. Many of our clients also request Drupal websites. Much of what we do every day involves this awesome content management platform we call Drupal.
So, the only logical move for Designzillas is to stay ahead of the curve and continue learning the best ways to use it by campin' out at DrupalCamp 2018! This year’s DrupalCamp brought a great opportunity for our Zillas to delve into Drupal development trainings, network with other ferocious developers in the industry, and participate in sessions on topics from accessibility and security, to advanced CSS techniques and beyond. Here’s a quick recap of what we uncovered at Drupal Camp 2018.
Web Accessibility Training
Cindy McCourt @cindymcqt
We had a full-day training session with Cindy McCourt, the author of Drupal: The Guide to Planning and Building Websites and the Pantheon-sponsored book, Drupal 8 Explained, to talk about better implementing accessibility in Drupal websites.
The Web Content Accessibility Guidelines (WCAG 2.0) is the current web standard to help guide designers, developers, and content creators make the web more accessible for all. The guiding principles of accessibility in WCAG 2.0 are the POUR guidelines which help make your website perceivable, operable, understandable, robust.
Here are some quick tips to make sure your website is more accessible:
- If there’s any non-text content, there must be a text alternative.
- All images need alternative text.
- Provide captions for audio content.
- Screen readers rarely interpret the data inside of HTML Tables in appropriate order. To solve this issue, provide a list-styled alternative for screen readers that makes it easier to read the data properly.
- When developing forms, if you use a single red asterisk for required fields, ensure to also add the ‘required’ textual content for users that don’t understand icons like the asterisk.
- Provide alternative time-based media for live events (such as post-event recordings) that allow users to pause and play to digest the content as necessary.
- When developing content, don’t use abbreviations. A screen reader won’t know the difference between the Dr. in a doctor’s title, or the Dr. at the end of an address for drive. The screen reader will just spell out the letters and provide no context for the user.
There are also many site-wide design considerations that should be made throughout the entire development process, such as providing high background to font color contrast, designing with an appropriately readable text size, establishing the language used on the site, and developing in data structures (like HTML headings) that are easily readable by assistive devices.
Once you’ve implemented your accessibility techniques, make sure to double check your site and run it through an accessibility site checker. The World Wide Web Consortium provides a full list of accessibility checkers for everything from 508 compliance and color contrast checkers to development tools that lint through code and provide error notices for non-accessible code.
And if you’re still not sure if your website is accessible, another simple, but very functional test is to turn off all CSS styles to see how readable and contextually aware your site content remains. If your website is being developed in Drupal, you can even implement the Stark theme which automatically displays your website without any styles.
Drupal 9 and Backwards Compatibility
Angie Byron @webchick
The alpha release of Drupal 9 was released January 17, meaning that most developers are looking forward to the next release of Drupal and how to upgrade their current Drupal sites. It’s important to upgrade, because once the fully stable and production version 9 is released, no security updates will be made to previous versions of Drupal. This new upgrade will also be dropping support for PHP 5 resulting in errors if your site still uses PHP5. Also note that Drupal event hooks must be object oriented in order to be used in Drupal 9. And as a sweet bonus for doing the right thing (security-wise), the new content editor in Drupal is now an awesome, and much fancier drag-and-drop editor. #micdrop
The New Styles Evolving Your Stylesheets for the Modern Web
Mike Herchel @mikeherchel
CSS has been releasing awesome new methods for styling websites. But with so many new developments in CSS, sometimes browsers can’t keep up with supporting all the new code releases. To solve this issue when developing, you can now use @supports to run new CSS code only if the current browser used by the user actually supports it. Now if a modern browser is being used by the user, there are tons of great new CSS methods to use, like new CSS --variables that can be used throughout the stylesheet and reassigned when needed and the CSS grid layout method for generating new websites layout designs.
Top Drupal 8 Modules
Jay Callicott @drupalninja
How many modules do you need a new Drupal site? According to Jay Callicott, there’s a few essential modules that are needed on every site as seen in the following list:
- Admin Toolbar: allows fast navigation and bookmarks for frequently visited pages in the backend.
- Field Group: organize fields into vertical tabs, accordions, or even fieldsets.
- Panels: allows you to create a custom layout via a drag and drop editor.
- Paragraphs: Enhances the editor to include custom content types like testimonials, contact information, faqs, and more.
- Pathauto: Generates custom url and path aliases
- 301 Redirects: setups up redirects for pages that no longer exist.
- Search API: creates a search page.
- External Links: automatically directs external links to open in a new tab.
- Scheduler: allows scheduling options for publishing and unpublishing.
Security in Practice
Adam Bergenstein @n3rdstein
Security starts with you. One of the best tips is simple: do not save passwords on sticky notes on your desktop where anyone can see them. Instead of using sticky notes, store your passwords on secure services like LastPass or 1Password that have browser plugins and app service with personal vaults that support both passwords and key storage. Also use password managers that actually revoke access to people who don’t keep the passwords secure. Use secured channels and a secure development workflow that changes only in small increments. Small increments of code changes are much easier to filter through and update in case of security breaches.
A Sweet Test Suite
Dan Gurgin @dgurin
When the time comes to quality-assurance test your development on a Drupal site, you don’t have to do it manually. Try automatic testing with tools like Behat, a Drupal extension for testing behavior-driven development. You can also try visual regression testing with WebdriverCSS, which takes interval screenshots of your user interface to track the visual changes made to the UI over time. For custom coded testing, try PHPUnit, a unit testing framework that generates screenshots, reports, and error/failure messages for your code.
The Last Drops of Drupal Knowledge
This year we learned a lot, reiterated the importance of our current development processes, and met some great friends in the Drupal community. We’re looking forward to implementing some new processes in our development workflow and to coming back for more Drupal training at next year’s conference.
Hearing about growth-driven design for the first time? Learn more about the three pillars of GDD and how this methodology can help you solve your greatest marketing challenges.