February 15, 2013 3 min to read

Mobile Friendly vs. Mobile Optimized vs. Responsive Design

Category : 4CDesignWorks

If you use a smartphone, you know how difficult it can be to load websites that look phenomenal on your computer, but take minutes to load and look patchy at best on your smartphone. As we discussed in a previous post, there are a LOT of reasons why your business needs to have a mobile presence in 2013.  Depending on your business, your customers, and your budget however, there are multiple avenues you can take to have one.

There are three different website designs you can utilize to make sure mobile users aren’t cut off from your business.  Your three options are:

1.  Mobile Friendly Website

A mobile-friendly website is a site designed for displaying on a desktop computer as well as devices like phones (iPhone, Android, BlackBerry) and tablets (iPad, Galaxy), etc.  These kinds of websites will appear just as they would on a desktop…only smaller.  While it’s great in the sense that you don’t have to design a separate webpage, you may have noticed that the real estate on a phone is significantly more cramped than a desktop.  This kind of site therefore generally requires lots of scrolling and zooming to locate and navigate your website.  If your webpage has a lot of graphics, menu options, and tiny buttons to click, a “mobile-friendly” website alone doesn’t really live up to its name.

2.  Mobile Optimized Website

This is a separate version of your website, designed specifically for smartphones—NOT desktops.  This version of your website will come up for users accessing your page from their mobile devices automatically.  This is a streamlined version of your website, with just the most important features (the “cliff notes,” if you will).  This version of your web page will fit perfectly within the dimensions of their phone, and provide a lot of “push” options, like tap-to-call, tap-to-email, tap-to-purchase…etc.

Most major consumer-driven businesses have a robust website with a separate, mobile-optimized website.  The disadvantages to this are the extra cost of designing a separate website, and the fact that certain elements of the full version website will not transfer over to the mobile version, which could cause frustration for the consumer.  Of course if they want the pinching and zooming “desktop experience” there is usually any option to view Full Mode at the bottom of the page.

3.  Responsive Design Website

Responsive Design is popular new buzz word in the design world, and you’ve probably heard a lot about it already.  Responsive Design is a method of developing a site that transforms to work on any screen from desktops to tablets to phones. This design doesn’t have to detect your browser type or device—it automatically orients itself to fit the screen in use.  Unlike the mobile-friendly website, this design doesn’t require lots of scrolling from side to side or zooming in and out.  And unlike the mobile-optimized website, what you’re seeing on your phone is the full website in its entirety, just stacked in a different orientation.

For a great example of a responsive website, check out this example from the iPhone app Selective Disturbance, one of our clients.  4CDesignWorks built their website using responsive website design, and it looks just as great on the desktop as it does on our iPhones!

Selective Disturbance

Due to unique development requirements, responsive website design typically costs more than a mobile-friendly website, but less than a mobile-optimized site because it serves double duty rather than requiring the development of two separate websites.

* * *

Whichever route you choose, make sure your business is ready to take on the wave of customers and clients who will come knocking on your (mobile) door in 2013!  A little unsure which is the right direction for your business?  Feel free to talk to our designers at 4CDesignWorks! We’d be happy to help you figure out which style of website is best for your business’s unique needs.

Leave a comment