Mobile responsive websites are designed to look good no matter what device you’re viewing them on; smart phones, tablets, laptops or desktop computers. If you’ve ever pulled up a site on your phone and had to scroll, pinch and zoom so you could just read at least some of the site, you know the frustration of viewing websites not optimized for mobile.

The smartphone screen grabs below illustrate what I’m talking about.

Not mobile resposnvie

Mobile Responsive Header

Mobile Responsive Text

Mobile Responsive Menu

Mobile Internet use is growing faster than ever.

Smartphone usage and traffic is exploding! 2014 is proving to be the tipping point where mobile will overtake desktop Internet usage.

Check out these statistics at Smart Insights

Google likes mobile responsive websites

If you want to get the word out about your product or service and search engine optimization is part of your Internet marketing strategy (if not it needs to be), then you need to have a website that is mobile friendly.

Social media is also driving the need for mobile responsive websites. According to a study by ComScore, 55% of social media usage occurs on a mobile device. Keep these folks happy, as they will spread the word about your site.

Mobile friendly options

You can either create a mobile friendly website using responsive web design or a separate mobile website.

Determining which approach is better is an ongoing debate, beyond the scope of this post, but here are the important things you need to know.

Mobile responsive websites use the same website for all screens and devices; same web address, same content, same HTML code. What sets them apart from websites that are not mobile responsive is the use of a responsive web design.

Wikipedia defines responsive web design (RWD) as a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).

Mobile responsive websites look very similar to what you see on your desktop computer. By using CSS (a style sheet language used to define the look or presentation of your website), developers can use rules based on the width of the screen or device to make the necessary style adjustments. As the screen size gets narrower and smaller, the navigation, font size and layout adjust accordingly (see illustration below). This provides a consistent user experience across all devices and screen sizes.

A mobile website is a separate version of your site that is developed with a different program. This approach delivers a site that is often quite different then what your desktop visitors will see. Your content will need to be entered again and updated separately. You may also require a second web address like (m.yourdomain.com or mobile.yourdomain.com) and may also require a separate hosting account.

Websites that are not mobile friendly have the exact same layout and design that you see on your desktop only they appear scaled down and very small. This makes the design that looks great on your large screen very tiny and hard to read if you can read it at all. You’ll have to pinch, zoom and scroll to view the site which is very annoying. It can also be frustrating trying to hit a tiny button with your big fat finger.

Summary

With the growth of mobile usage and the increasing demand for information on the go, it just makes sense for you to deliver a positive experience through a mobile responsive website. It’s at the point where if you don’t, people will perceive your site as old or outdated. As I get used to viewing sites on my smartphone I get very annoyed with sites that I can’t read. If your website is not mobile responsive you could also be losing users.

While the subject is currently still being debated, I fall soundly on the side of mobile responsive sites using responsive web design. This approach is more flexible, provides a better user experience as you move between devices and allows you to work with just a single site. Mobile responsive websites are also much easier to adapt to future devices.

I really have only scratched the surface on this topic. Check out the infographic below for a visual summary. I’ve also included a few links for those of you who would like to learn more.

Realted Articles

Mobile Responsive Design 101
By Josh Byers – Copyblogger Media

Mobile Sites: Choosing an Implementation Process & Strategies
Search Engine Watch

The Mobile Web: An Illustrated Look
By Annette Gustafson – Crux Collaborative

Infographic created by:
Dot Com Infoway – Software and Mobile Application Development Company