Mobile Websites vs. Responsive Design

No doubt, we live in a post-PC world. The smartphone has become our device of choice.  The percentage of visitors using mobile to access your website has spiked quite a bit over the past year.  Over 20% of all web traffic is now mobile.  We’ve heard from clients who now get 30% – 40% mobile traffic.  Analysts expect mobile to overtake desktop traffic as early as next year. Waiting is no longer an option, it’s no longer a question if you should ensure an excellent experience for mobile visitors – it’s now simply a question of how.

If you have researched building a mobile website or have recently searched Google for the best approach, you may have noticed a debate: dedicated mobile website vs. a responsive website. Industry leaders in technology, the web and mobile do not agree on the best solution.  The answer for you depends on the needs of your mobile viewers and your particular web content.

We’re going to help define what ‘responsive’ design is verses a dedicated mobile site and give you some pros and cons of each.


What is the difference between a responsive website and a mobile website?

A responsive website is a specially designed site that will adapt the same content to different browsers. The pages of your website will render content based on the device screen size and type. Not all mobile browsers have ‘smarts’ yet to handle this well, so the results can be different across browsers.

Breakpoints in the website that are set to specific widths and will render your content differently, so what you see on a desktop site, looks different on a mobile device or tablet.  One way that web developers achieve this is by using a feature of a web language used to style websites called CSS.  The media queries included in CSS allow a developer to specify different rendering rules for content on the site.

It is worthy to note that the desktop view and the mobile view will display the exact same content to audiences. It’s also important to understand that a responsive website needs to be developed from the ground up.  You can’t turn your current website into a responsive site, unless it was built as a responsive website to begin with.  Design layout is key.

A mobile website is different than a desktop site and it typically does not serve the same “exact” content. A mobile website will run alongside your desktop site.  Mobile websites are designed entirely with the mobile user in mind.  They assume all of the content from your desktop site is not needed for the mobile viewer.  They focus on a mobile specific context – focusing on the things a mobile audience will most want to see.  The site itself optimizes the content and functionality for 1000′s of small screen devices. So instead of letting the browser determine the layout (like responsive design does), the layout of the content is specific to the size of the device.  You have much more control here on the display outcome of for the viewers on mobile phone devices.

Now that we understand responsive design versus mobile website design let’s look deeper into the pros and cons of each:

Reponsive Design vs. A Mobile Website – Pros & Cons

 

Reponsive Design – Pros

Maintenance – Because the decision of content display is up to the device and browser and not the server, you only need to  maintain one website  instead of two. This will save some time and allow a company to make updates in one place.

Future Proof – Since the optimization of a responsive design site is done on the device, when new devices come to market, the content should automatically be optimized for these devices. However the browsers on mobile devices need to catch up  and keep pace.

Same Content – While this can be considered a pro & con, visitors accessing your site via mobile will have access to the same content mobile or desktop. This means you will only need to make changes once to update both your desktop and mobile presence.

 

Mobile Website – Pros

Maintenance – Because the site is focused on mobile visitors, you can customize your messages and content to this particular audience. This allows you to provide the best experience to your visitors; however it may mean making changes on both the mobile and the desktop version.

Performance – Since the content is specific and focused on mobile devices, the speed of the mobile site will be much faster compared to a responsive site. This is a very important to factor as people bounce quickly from a mobile site that doesn’t load within a few seconds.

Context & Flexibility – A mobile website, unlike a responsive site, can be completely customized to include or exclude the information you want to display.   As an example, a local TV news group knew that their mobile audience was most interested in checking weather. However the desktop site has breaking news as the top priority.  They understand that their mobile audience is different than their desktop audience!

Pricing – Having a mobile website designed will typically always cost less than responsive design.   There are numerous options to have a mobile website designed.  You can use a mobile web platform to build a mobile website or have a custom mobile website designed for you.

 

Responsive Design – Cons  

Support – older browsers don’t support CSS media queries (yes there are ways to get around this with Javascript) it still comes down to a performance impact on older browsers. There are no “industry standards” to design a responsive site – what is true today, certainly may not be true tomorrow.

Same Information Architecture – With the same information across all devices, you may save a little time, but you are unable to optimize for your mobile audience. Specifically marketers, publishers or any business that cares about conversion rates and consistently improving the users experience will find this to be a huge flaw with a responsive website.

Performance – Typically responsive sites will be image and code heavy. This will slow the speed of a site load on every mobile device.

Pricing – Having a responsive website designed will be more expensive than having a standard desktop site and mobile site separately created.  A responsive design site will  require more technical and design ‘know-how’; the higher creation cost comes down to skill. Many designers simply don’t understand responsive design yet, therefore, those that do can charge a higher price for the time being.

 

Mobile Website – Cons

Maintenance – When you  have content that needs to be added to both your desktop and mobile site there can be twice the work (there are simple work-around’s such as RSS and other type of feeds).  Offering specific content to a particular audience  is important, it will certainly take more time to do so.

Content – A mobile visitor may need information or specific content from your desktop site and this will force your visitor to view the full site from their phone. Giving them the option is important and solves most of the problem, but it still requires an extra step.

As you can see, each option has strengths and weaknesses.  It is important to consider your mobile web audience first and decide  which method would work best for you.

 

Is a responsive website or a mobile website better for my business?

Understanding the specific needs for your mobile audience is the first step.  If for example a high percentage of feature phone visitors come to your site, this would be an indication that a highly optimized mobile site instead of a responsive site is for you.  If there are functions or features aimed at your mobile audience – like click to call, directions to your store, or coupons for mobile viewers etc, then you really need to consider building a mobile site specifically for that audience.

Budget is also a key consideration.  Regardless of your decision, the most important thing to remember is that going mobile with your business is critical and what was once a question of “why do I need a mobile website“  is now a question of  “how do I get a mobile site”.