Main Content

Less is More: Reimagining FEMA.gov

Author: 

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:

This is a screenshot of a web page in the new fema.gov BETA site. The screenshot is being displayed on a laptop, tablet, and smartphone. The screenshot shows the logo and navigation left aligned and the content is centered on the page and starts at the very top of the browser page.

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.

This is a screenshot of the navigation menu on the new fema.gov BETA site. The screenshot is being displayed on a laptop, tablet, and smartphone. The screenshot shows a list of all of the top level navigation sections on the site, and it overlays the current text so it's front and center for the user.

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.

Last Updated: 
06/02/2017 - 09:22

Comments

I'm trying to access the eOPF web page and I'm getting an error message, "Internet Explorer cannot display the webpage". Can someone please investigate? Thanks

HELLO, MY NAME IS RON E NAPPER IN WHAT HAPPEND IN MY U.S PATEND AND WHAT F.E.M.A. HAVE DONE IN MY U.S IN MY INTERVIEW WITH FEMA AFTER SHOWING MY GENRAL CONTRACTER AGREEMENT IN WORKING WITH MY SKILLS TO CATER IN THREE SERVICES OF SEGERGATION IN GOVREND DEFENCE , PUBLIC GOVREND IN CATER TO THE LINES OF SERVICES AND PUBLIC TRADE THE ATACKS AND FEDRAL INJURY PROLONG IN ANY RECOVERING FROM HOME LAND AND FEMA THE RETURN IN COMPUTER GOVERNMENT AND THERE WHITE COLLER RELATION AND EXCHANGE COLLER OR PLACING THE ON SOME ELSE IN I/D CRISES SO TO ASK THE TRESURY FOR WHAT EVER BASED ON THE REQUIRMENT OF REGESTRY AND INTERSTATING THE INTERSEPTION. IN THER OSCURE DENOMNATION OF ACOINATED DEPLOIMENCEY.

I simply wanted to look up a list of CERTeams in the state of MA. I'm sure you still have that listed someplace........... Will keep trying to make sense of your new and improved web site and hopefully will be able to find the things I am used to having access to,,,,,,meantime, on a scale of 0-10 you get a 1.

is there an rss feed?

I am trying to log onto training for Incident management but other items pop up on my screen before I can do anything?

I would like to appeal home being in Flood Zone Area.

Attention: Insurance Office. Case #450525022 Disaster # 4223 RE: Call from FEMA's Mr. Valery (512) 8331370 RE: # 450525022 Disaster # 4223 Please assist me. A Mr. Valeri, from FEMA,, called me up some time this week. He inquired regarding the status of my disaster claim, which has been denied, so far. Mr. Valeri advised me to report this fact to FEMA, in order to document the fact that ALLSTATE, my insurer, has formally notified me rtheir being unable to " ... provide coverage for my dwelling claim." Accordingl:, attached, please find copy of the 2 letters sent by the insuring company: one to my Insurance Adjuster, and a second one to me.. Please assist me to advance in my quest for compensation Find any possible way you deem adequate to face the situation. Thanks! Jorge P. Tello, 2202 N. Dos Arbolitos Avenue, San Juan, TX 878589-4139 (956)782-5891.

Any FEMA financial assistance will be greatly appreciated,

I am disabled and cannot go to the door. I have damage on my roof and limbs (my neighbor told me). Please let me schedule an appointment when I can get someone here (possibly city engineers). I need the telephone number of someone approved by FEMA. A car stayed in my front yard all day and I couldn't get to the door. Just out of curiosity are your contractors (PB Disaster Services, Inspector 87010) paid to sit for 6 hours in front of my home? Seems like a waste of time.

looking for emergency relief (nj). From sandy we have had roof problems that have leak and almost destroyed one bed room floor and my bathroom and living room ceiling and floor. I is so confusing to find the right wedsite to go to. I'm afraid that I will lose another floor. It is very dangerous where I live and unsafe. We have tried to get help BUT RECIEVED NOTHING.

Is there any way to get on a daily mailing list that would provide homeowners with the many changes that go on? Very difficult for us to know what is expected.

I have some questions regarding a construction commercial property to be developed on a site that only a partial of the land is in flood zone. But the actual structural to be built is not in flood zone. Want to know if flood insurance is required for this structural.

When Dorchester County was paid by FEMA to cover the cost of employees that worked during the flood,, are they(Dorchester County) obligated to pay that money to their employees or are they allowed to use the money for other purposes?

I prefer old one. The new one is easy to confuse.

HAVE DONE IN MY U.S IN MY INTERVIEW WITH FEMA AFTER SHOWING MY GENERAL CONTRACTOR AGREEMENT IN WORKING WITH MY SKILLS TO CATER IN THREE SERVICES OF SEGREGATION IN GOVREND Defense , PUBLIC GOVREND IN CATER TO THE LINES OF SERVICES AND PUBLIC TRADE THE ATTACKS AND FEDERAL INJURY PROLONG IN ANY RECOVERING FROM HOMELAND AND FEMA THE RETURN IN COMPUTER GOVERNMENT AND THERE WHITE COLLER RELATION AND EXCHANGE COLLER OR PLACING THE ON SOME ELSE IN I/D CRISES SO TO ASK THE TREASURY FOR WHATEVER BASED ON THE REQUIREMENT OF REGISTRY AND INTERSTATING THE INTERSECTION. IN THER OBSCURE DENOMINATION OF ACOINATED DEPLOIMENCEY. to more know just click on this link //www.wheelalignmentreading.com/tyre-shop-reading/

How can I register for a SID number? The site shows server error.