Site Menu

Why 2013 Is the Year of Responsive Web Design

March 12, 2013 3 Comments

With over 51% of Americans having smart phones and tablets, it has become extremely important to make sure that your website renders on mobile devices the way it’s supposed to.

 

What Is Responsive Web Design?

A responsive design is one where the website adapts to the device that it’s being rendered on. In the example below you can see how this website looks on an iPhone (left), an iPad (middle) and a laptop or desktop (right). Not only does the size of the screen change, but notice the simplified iPhone version; it only has four links. There are other considerations besides layout, such as font size (iPhones and Androids have very small screens) and device limitations (for example, mouse hovering on mobile devices isn’t possible).

Screen Shot 2013-03-11 at 11.23.04 AM

 

How Do You Know If You Need a Responsive Design?

Although all websites will need to be responsive in the very near future, understanding how much of your existing traffic is from mobile devices is crucial.

On Google Analytics you can go to Audience > Mobile > Overview and you’ll find a table like this one:

Screen Shot 2013-03-11 at 11.15.59 AM

 

We can see that 44% of the traffic this website receives is from mobile devices. If this website didn’t render well on smart phone or tablets I’d be ignoring almost half of my visitors.

If you go to Audience > Mobile > Devices, you can actually see the type of devices sending traffic:

Screen Shot 2013-03-11 at 11.19.05 AM

 

The report above shows the top operating systems. We can see that iOS (the operating system in all the Apple products like iPhones and iPads) represents a huge portion of my traffic. The following report shows the actual devices being used.

Screen Shot 2013-03-11 at 11.19.55 AM

 

As you can see from these reports, I would be out of my mind not to optimize my website for iPhones and iPads, right?

Mobile traffic is also one of the default advanced segments in Google Analytics, so it’s very easy to isolate mobile traffic so you can study it in more depth.

Screen Shot 2013-03-11 at 11.21.45 AM

 

How to Create a Responsive Design

If you want to go the “do-it-yourself” route, I highly recommend this book: Responsive Web Design with HTML5 and CSS3. You should also check out these cool responsive web design examples. You can create a responsive design by coding a website from scratch or you can use one of these popular frameworks:

If you’re not a designer, talk to one and ask for a list of responsive web designs he or she has done. Then check them all on mobile devices and tablets to see if you like them.

Do you have more questions about responsive designs? Post them in the comments section below.

Tags:      

Zeke Camusio

About the Author

Zeke Camusio is a serial entrepreneur, marketing speaker, author of The Internet Marketing Bible and CEO of Digital Aptitude, a data-driven digital marketing agency in Portland, Oregon.

Contact Us

3 thoughts on “Why 2013 Is the Year of Responsive Web Design

  1. I think responsive design is a good solution for addressing layouts from desktop to tablet. However, for mobile devices, a mobile framework or template may be in order. While it makes everything “fit” to the mobile device screen, some sites resort to just “stacking” all of the content, making the user scroll infinitely. A good CMS should allow you to detect mobile devices and serve up a mobile optimized template to keep you from having to manage 2 separate sites. This also gives the user the flexibility to view the “full site” to access content that may not be viewable on the mobile version.

    At the end of the day a successful website does come down to a solid content strategy and user experience.

  2. I applaud you for showing people how to see what they are missing out on. It’s amazing how few people realize that their site is not going to be viewed exclusively on a computer like the one they have at home. In fact, there is a growing trend for people to opt for the cheaper phone/tablet, and never invest in a computer if what they typically do is just browsing and email on their computer! The numbers are growing all the time, and they’re already fairly staggering.

    That said, I agree with Ronnie, mobile devices have special needs that a CSS sheet alone may not be able to provide for. Something important to remember is that unlike with most landline connections, people on mobile devices are often paying by the byte! If you’re still transmitting “hidden” elements, you may have something that looks good, but burns all your customer’s internet time. Not cool, and not a good way to get people to return and use your site.

  3. I agree with Ronnie and Kim.

    However, unfortunately while most CMS implementations have “mobile/non-mobile” scripts (with the occasional dysfunctional “Tablet” attempt) they’re often not very good, relying on a few regular expressions, or sometimes even assumptions which don’t work; and you find most of the mobile plugins are relying on the same set of (poor) code that’s either too simple, or which looks like voodoo and was written in 2006.

    So, do not ever assume that whoever wrote your CMS tested their mobile/non-mobile adequately. There are options for improving your mobile device detection, though. (There’s a Mobile Device Detection page on Wikipedia, for instance).

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>