How Georgia’s Portal Embraces Responsive Design

Mobile devices have quickly become the norm. In fact, 31 percent of Americans use a smartphone as their primary means of accessing the Internet, according to the Pew Research Center's Internet & American Life Project. Government agencies that don't optimize content or services for mobile users fail to reach at least one out of three citizens, making for poor customer support.

Recognizing this trend in Georgia two years ago, we began considering ways to reach the growing number of mobile users. One possibility was to create a mobile-friendly website, but this would offer less content and fewer options and create redundant work for content managers. Plus, maintaining two separate sites would be a problem waiting to happen. Instead, we chose to use the power of JavaScript and Cascading Style Sheets to reformat content on the fly according to device type.

Responsive design has rapidly become the de facto approach to mobile websites. With this approach, the website recognizes the type of device a visitor is using to access content and presents that content at the ideal resolution. As a result, users don't have to zoom in or scroll horizontally to read content on a mobile device. GeorgiaGov seamlessly presents content differently to desktop, tablet and smartphone users. For example, visitors can resize a desktop browser and see the site resize itself in real time.

Moving to responsive design is not a decision we made lightly or quickly. A lot of preparation went into the design and ensuing development. Those contemplating this approach should heed the following advice.

Seek Input from Stakeholders

Share knowledge with the entire team so everyone is on the same page. More than just a new look and feel, responsive design encompasses content, navigation and development. IT groups will need input from everyone.

Emphasize the importance of the initiative. We designed and developed the GeorgiaGov portal amidst a massive migration to a new content management system. But we continued to press responsive design as a requirement, and as a result, the site that launched in 2012 was one of the first state portals to implement this technique.

Embrace Minimalism

Adopting a mobile-first approach means basing design, content and navigation decisions with mobile users in mind. Everything else flows from that.

Keep in mind that less is more. Many organizations are tempted to decorate sites with flashy graphics, large panoramic photos and special effects. These enhancements might look great on a large, high-resolution monitor, but won't translate well to a mobile device. Instead of including flashy graphics on the desktop site and trying to figure out how to implement them on a mobile site, focus on what the mobile site will look like, then add functionality if necessary.

As cable and DSL speeds increased, we allowed our pages to become bloated. But remember that 3G is still the norm for many smartphones, and massive page sizes can significantly slow the website download. If users have to wait more than five seconds for a page to load, they may leave the site.

Focus on Content

Content is key, and this is especially true for responsive design. When we designed our portal, we worked on the editorial content first, then tackled the design. By doing this, we were able to see everything within context and base design decisions on what was best for the actual material, not just "lorem ipsum" place-holder text.

Chunk content into usable sizes. Use tables and large images sparingly, and don't make pages too long. In the past, designing a mock-up translated to a working HTML site pixel by pixel. With responsive design, it's different, like reading between the lines. Nothing is absolute. Envision what each component of the site will look like at different resolutions. Things may look great at certain resolutio.ns, but does that translate to others as well?

Analyze and Adapt Accordingly

Examine website analytics closely. Be honest and eliminate things that the site doesn't really need, then pare down the home page to include only those elements that customers need most.

We can't meet every citizen's need, but by analyzing our pageviews and search terms, we have a good idea about why residents visit GeorgiaGov. These search terms become our "Popular Topics" — bite-sized nuggets of content that provide the most important information on issues such as jobs, child support and taxes. By offering this, we serve 80 percent of the citizens' needs with only 20 percent of the content. It eases site maintenance too.

Although GeorgiaGov is the main website for state government, we have found that people come to our site looking for local government information as well, so we now feature links to city and county information prominently on our home page.

Responsive design is relatively new, and we are still trying to figure out the best way to implement it. New solutions and approaches emerge every day, so don't feel the need to tackle everything at once. Small iterations are better than nothing at all.

After relaunching the GeorgiaGov portal in 2012, we've continued to improve the site using new techniques. We strive to keep staff knowledgeable about current web development trends and technologies.

For more information on the GeorgiaGov design and development process, visit our Tumblr site at georgiagov.tumblr.com. You can find our blogs at the GeorgiaGov Interactive website at portal.georgia.gov/interactive/blogs.