So far, Responsive Design has not been adopted by very many government organizations yet, but as new websites are designed, more and more will be adopting Responsive Design.
Three great examples of what I’m talking about:
1) Here is how Michigan’s homepage looks on my desktop:
And here’s how it looks on my phone:
2) Rhode Island looks great on a desktop
And on mobile
3) This very blog uses Responsive Design. Here’s how it looks on a mobile phone
Two main elements that make up Responsive Design
1) CSS3 Elements
Responsive-Designed sites use the most contemporary CSS (Cascading Style Sheets) design elements to adjust the layout of your digital content to the appropriate screen size. These apply to web content as well as email. Here’s how Wikipedia explains them:
- Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.
- The fluid grid concept calls for page element sizing to be in relative units like percentages or EMs, rather than absolute units like pixels or points.
- Flexible images are also sized in relative units (up to 100%), so as to prevent them from displaying outside their containing element.
Basically, to summarize, instead of creating absolute sizes for items, you size them in relation to size of the browser displaying your content. So, instead of setting a table to be 700 pixels wide within a 1,000 pixel web page, you set the table to 70% of the width of the browser. On your desktop, that would be 700 and 1,000 but on your smart phone that might be 350 and 500. You get the idea.
So what do I do with all this and why should I care?
Excellent question to ask, especially for the non-tech-nerds, reading this. There are 4 main reasons Responsive Design is the way of the future:
1) We all know smart phone adoption is going to continue to grow in years to come. The same is true of tablets and any other yet to be invented digital technology. As the screen size variations begin to reach exponential numbers, it will become impossible to design digital content that work well on all the different variations without Responsive Design. So, you can either go with Responsive Design or have a website, blog or email that looks good on one platform and horrible on all the others. Also, since your one site works on all platforms, you don’t need to maintain completely separate mobile sites, saving your web team time and money.
2) The Federal Digital Government Strategy lays out several initiatives that Federal agencies will have to meet. Nearly all of the initiatives have a component of increased accessibility for mobile platforms. And, as goes the Federal Government, so goes the rest of government.
3) Responsive Design is a great tool to allow you to have nice looking digital content and still remain 508 compliant. Gone are the days of needing to sacrifice design for accessibility. With Responsive Design, everyone can enjoy the benefits of a great website or email.
4) It helps with SEO (Search Engine Optimization). Since you site looks better and is easier to navigate with Responsive Design, people are less likely to leave right away and will spend more time browsing your content. That directly translates to reduced bounce rates and increased time-on-site metrics. If they are leaving less and spending more time your site, it gives you more time to get them to sign up receive your content in the future, thus converting them from browsing into some you can engage. Finally, having a completely separate mobile version of your site could be seen as having duplicate content on your site, something search engines really frown upon.
I’m sure there are several other benefits I’m missing out on but this is enough to get you thinking. When it comes time to redesign that website, make sure start with Responsive Design from the get go. Otherwise it might be extremely painful to come back in after your site is finished and retrofit Responsive Design techniques.
Speaking of Responsive Design, check out this short video of GovLoop Founder and President, Steve Ressler, talking about how Responsive Design in being implemented in the Federal government.
Steve Ressler talks about the Digital Government Initiative from GovDelivery on Vimeo.