Bringing the U.S. Web Design Standards to Drupal

uswds-18fIn September 2015, designers and developers alike cheered as 18F released a modern and unifying style guide for how government websites should look.

Prior to the release of the design standards, users had often complained about the confusing and outdated user interfaces of the different visual styles in government websites. The standards tackled these issues with a complete overhaul of common web elements such as:

  • Typography
  • Forms
  • Colors
  • Buttons
  • A responsive grid based on Bourbon and Neat.

Converting the Style Guide into Drupal themes

Since Drupal powers a large (and growing) number of federal websites, it was a no-brainer for CivicActions to start thinking of how to port the U.S web design standards into Drupal themes. We started planning a CivicActions Labs project to build a Drupal 7 theme based on the styleguide.

Our Development Goals:

Our aim is to build a lightweight and minimal Drupal version of the web design standards. Since the standards were built to provide basic building blocks and tools for clear UI direction, we are working on translating that same flexibility and simplicity to the Drupal themes.

We soon discovered that Fureigh at 18F and Alex Brown at Appnovation had already created a Drupal.org sandbox and a GitHub repo for the project, and we gladly joined forces with them. Theme template markup will be stripped and refined, strict BEM-based CSS syntax will be followed, code patterns will be reused, and above all, Section 508 standards will be upheld and maintained in every part of the theme.

We also plan to add and style a number of Drupal-specific elements which are not part of the design standards. These common elements, when styled and customized, will give the Drupal 7 and 8 themes a finished and professional look.

You can explore more details about our planning and work in the github issue:https://github.com/18F/web-design-standards-drupal/issues/15

Get involved

This project is very much a work-in-progress. We have tickets to spec, tasks to perform and more than enough work to go around. You can see our progress so far in the Demo Site (still in its infant stages!).

So go ahead, grab a fork and start churning out awesome code. We’d love to have you! We also really appreciate folks getting involved in the issue queues with questions, ideas, and creating new issues etc. Every bit of input counts.

Links

Find out more about the standards

Here’s a fantastic podcast where Ethan Marcotte & Karen McGrane interview two members of the 18F team: Mollie Ruskin and Julia Elman

2017-03-31T06:19:56+00:00 Categories: Design, Development, Drupal, Government, Theming|Tags: , |

About the Author:

Iris joined CivicActions as an Engineer in 2014. She leverages her creativity and design skills to create compelling, standards-compliant themes. Passionate about the evolving web and design impact across various devices, Iris creates future-proof websites with OOCSS, lean markup, flexible grids and device-agnostic design principles.

Iris is a front-end developer with skills in HTML5, CSS3, Javascript & JQuery. She is skilled in Drupal theming and configuration and is adept in juggling between using cutting edge development techniques and ensuring graceful degradation for older browsers.

Before joining CivicActions, Iris was an independent contractor collaborating with clients to engineer website projects from initial concept to final product launch and maintenance. With her strict attention to detail and high coding standards, she established a powerful online web presence for each client using baked-in SEO techniques and semantic, 508-compliant code.

Iris earned her bachelors degree in Electronic Engineering from the University of Nigeria. Once you coax her away from her computer, she enjoys exploring the beautiful Virginia countryside, discovering hidden treasure in remote antique stores and visiting local farmers’ markets. She enjoys African cuisine, loves to travel and is also a skillful seamstress.

Q&A

What do you do at CivicActions?

I am a Front-End developer.

I work on Drupal theming, champion accessibility practices, mobile development, general Drupal site-building and a bit of Wordpress development. In my role as one of the practice leads for front-end development, I’m usually on the lookout for the latest advances in front-end techniques and test them for possible adoption into our development workflow.

What tools do you use most often?

  • Terminal
  • IDE: PHPStorm
  • Apps: Slack, Trello

What do you love most about CivicActions?

It is difficult to put a finger on the thing I love most about CivicActions.

I love the openness, the collaborative atmosphere, the honesty, and the way CivicActions prioritizes the well-being of team members.

The flexibility and the way team members are trusted to put forth their best effort and meet their work goals without any form of micro-management is absolutely encouraging. I love the way tough conversations are encouraged and worked through, dissenting opinions are aired in an atmosphere of respect and a willingness to understand other people’s points of view.

CivicActions is particularly special to me because at a point where new mothers are pressured to choose between taking care of a new baby and continuing with their career, CivicActions made it possible for me to have my cake and eat it, too.

What do you love about what you do?

I love working with Drupal.

It is quite flexible and gives one the ability to build a wide range of websites for different purposes, all with open source tools. I also enjoy working with front-end technologies as a whole. I’m looking forward to where the industry is going and the future, exciting possibilities in store for Javascript and Drupal.

  • R

    http://www.c6f.navy.mil is a Drupal CMS that was built using the U.S. Web Design Standards.

    • That looks fantastic! What is the name of the theme you developed? Is it available on drupal.org?

  • Scott

    That explains why the Michigan.gov website is so screwed up.

    But seriously, who was the moron that decided it was a good idea to put a banner at the top of web pages that takes up 1/3 to the majority of the browser window?

    A good example of this is: http://www.michiganlottery.com
    That mess at the top of the page is not going to encourage people to purchase online who do not already purchase online.

    Not only is it a waste of web page realestate, it’s a low quality and inconvenient design. People go there to find out what the lottery numbers are, not to be sold more lottery tickets.

    By the way, what idiot thinks that having gray text inside a text box is a good idea.
    When it comes to usability, there is nothing worse than hard to see text on a web page.