May 4th, 2012 // by Jon McClure

Responsive Web Design

The future of the mobile web?
According to analytics firm StatCounter, users accessing the Web through mobile devices has almost doubled every year since 2009. In its latest report, StatCounter says that global Internet usage through mobile devices rose to 8.5%, nearly doubling the 2011 figure of 4.3%.

What is Responsive Web Design?
Responsive web design was defined by Ethan Marcotte, technical editor of A List Apart as, “the act of creating various forms of the same basic site design that are optimized for different ranges of browser widths.”

Simply put, responsive Web Design allows you to design and develop one website that adapts to any device such as an iPhone, iPad, desktop computer, laptop, and even mobile devices that are yet to be released.

The benefits seem pretty huge, but let’s look at some of the most common questions people have about responsive design.

Would you recommend this for all companies?
Like most things, no one company or client is the same. It would depend on the type of product they are selling and their target audience. Before making a decision, first analyze your Google Analytics to see if your site is being viewed mostly via desktop or mobile. If you have a good mix, I would recommend looking into a responsive design.

Will it take more time to design/develop a responsive website?
In most cases, I would say yes it should take more time, but that depends on the complexity of the website. The real benefit of having a responsive site is it eliminates the need for an alternate, device-specific version or app.

Web app or responsive?
For some time now a separate web app was the user–friendly way to reach your customers on mobile devices. If you have multiple versions to support, that means you have multiple versions to update, whereas a responsive design is one site that simply “responds” to the device it’s being viewed with. So in theory, you won’t have to build a new app for when the iPhone 10 arrives.

Would I spend more money going this route?
With new processes and development comes a learning curve. Not all companies are taking on responsive web design quite yet, but it never hurts to ask. Responsive web design tends to cost more based on the time it takes to design and develop, but may be cheaper than building a website and multiple device specific versions. Your pricing will definitely increase with functionality and amount of unique page layouts (which is the same with a static website). Long term this functionality and user experience will pay for itself.

Why should you consider creating a responsive based website?
1. Improve access and usability for your website across all platforms.
2. Cost and maintenance is less than having a separate website and web app.
3. Your website becomes truly usable across multiple devices.
4. It forces you to think about creating a user-friendly experience.
5. You understand that it’s ALL about the end user.

TOOLS/REFERENCES

Things to consider before deciding to make your website responsive.
• Time and Money
• Browser Support
• Performance
• Content
• Website vs. Web App

Best practices for early development/design.
• Content Check
• Start Small (mobile first)
• Make it modular
• Always Be Optimizing

List of companies that are using responsive web design:
• Solo
• Fork
• Teixido
• Do Lectures
• Sparkbox

In case you’re curious, our site is not responsive yet…
Stay tuned!

List of references.
• Ethan Marcotte (Author of Responsive Web Design)
• Treehouse (Web Design and Development Learning Site)
• Get Skeleton (A Beautiful Boilerplate for Responsive Development)

Keep checking our site as we will be showcasing new examples of responsive designs soon.