Less is More: Reimagining FEMA.gov

The digital age has made information more available and more accessible than ever before. That’s a good thing. Information drives innovation, a more engaged citizenry, and helps those of us working for you in government do a better job providing information you need to be safe and secure. But often, a consequence of living in a digital age is too much information all at once. For example, many websites have become crowded with distractions getting in the way of the content users are trying to find.

There are too many navigation links. There are too many banner ads. Sometimes, you’re even asked to share the page on social media before you had a chance to read what’s on the page.

Distraction, distraction, distraction.

Today, we’re announcing a new BETA version of FEMA.gov. In this redesign we moved away from the conformity of what websites have become and got back to basics:

• We focused on getting the content in front of you, the reader, without any distractions.
• We designed it so you can read the content on any screen size.
• We increased the font size.
• We made it easier for you to identify the sections of content on each page.
• And we limited the duplication of navigation links.

First, I want to talk about the content. If you’re visiting the site on a desktop, laptop, or mobile device, you’ll notice the content is front and center and starts at the very, very top of the page. No distractions.

This screenshot is a great example of what I mean by that:

If a page has section headings, you’ll see that we collapsed the content underneath the headings and the headings in effect become the table of contents for the page. On large screens, we decided against using a right column of content and “anchored” all of the content on an imaginary vertical line, allowing you to skim all of the content a lot easier.

As you’re reading this blog post or content on another page, you’ll notice the font is larger and we increased the space between each line of text. After you’re done skimming or reading the text, we hope you will share it with your colleagues, which is why you’ll find the share this page at the end of the content. Again, no distractions.

Second, let’s talk about the navigation. Instead of duplicating links all over the page, we decided to create one main, global navigation list. This way your eyes don’t need to bounce all around the page. Instead of trying to fit all of our topics into a certain number of sections, we took all of the main content sections and placed them in one list, alphabetized it, and added a filter function.

You’ll also notice that the navigation, search, and languages are all grouped together. On a larger screen, they’re flush left; on a smaller screen, they’re at the bottom. Again, we are putting content first and getting the other stuff out of your way. Internally, I’ve started affectionately calling the navigation, search, and language area the control panel, and hopefully you’ll find it as useful as I have.

As you can see, we tried to keep the site simple and clean. We didn’t just try to fix what didn’t work on the current site – we tried to skip two or three iterations ahead.
 
I would be remiss if I didn’t mention a few sites we drew inspiration from:

1. The UK Government and their filter function.
2. Wikipedia (mobile version) and their collapsed headings.
3. Google Ventures and their flush left navigation.
4. Medium and their simple layout and page presentation.

We took the items that we thought worked really well on those sites, mixed in our own ideas (collapsed section headings on large screens; single column of content; all topics in one list), and came up with this end product. We hope you’ll find it functional and easy to use.

For Drupal developers, other techies out there, and anyone else who is interested, I wanted to share a couple of things happening “under the hood” as the analogy goes:

• We used the bootstrap framework which allows the site to work across all devices by being cross-platform, cross-browser, and device agnostic.
• This BETA site is 100% 508-compliant, meaning that anyone with a screen reader or other assistive device will be able to use the site.
• A lot of effort was put into making the pages are as light as possible, meaning pages are able to load more than twice as fast as on the current site.
• And the new site was designed and built to run concurrently with the current site, which took a lot of blood, sweat, and tears. Drupal developers understand this task.

Thanks for indulging me and getting all of the way to the end of this post, but I have one more thing to mention: we’re still working on a few sections of the site, so you’re definitely going to come across things that aren’t quite working correctly and/or may not look quite perfect yet.

As we’re working on tweaks here and there, please kick the tires on the site and let us know what you think – the good, the bad, and everything in between as I often say. You can leave a comment here or email us at fema-new-media@fema.dhs.gov.

Thanks for your time.