Embracing Responsive Design
The number of mobile users is growing rapidly. In 2012 USA.gov and GobiernoUSA.gov received more than 2.5 million visits from mobile devices, not including tablets. These customers want access to our full sites without unnecessary clicks (not a different version of the site on mobile). Responsive design adapts the display to the customers’ device, offering the full site in an optimized resolution regardless of the device of choice, presenting the same high-quality content to fit smaller devices.
Using responsive design is very efficient and cost effective: It allows us to more easily create and maintain content that will display correctly on all devices and across all platforms. It saves the government money since it’s “future ready,” which means that the sites will work on future mobile devices.
A lot of planning went into the redesign efforts.
We met with key stakeholders in developing our strategy and goals.
We studied responsive design on various public and other government sites.
We also discussed the pros and cons to using responsive design and decided that responsive was the way to go for USA.gov and GobiernoUSA.gov. We had done the apps galleries in responsive design and that served as a baseline to approach the bigger sites.
Building on this project, we decided to design the Spanish site first, since text as well as words tend to be 15% longer in Spanish – this strategy ensure that the design would work well for both sites.
From there, our contractor built a prototype and we tweaked it so that design and accessibility guidelines were met.
We worked with our accessibility experts every step of the way to ensure compliance with section 508 of the Rehabilitation Act — we are still working out some minor details, but fixes are on their way to make both site fully accessible.
Let us know what you think. With the ability to count traffic for desktop, tablet and mobile phones separately, we’re anxious to see what our numbers tell us about this approach over time.
More responsive design examples: