Responsive Design vs. Dedicated Mobile Websites

Sep 18, 2012
By
Responsive Design vs. Dedicated Mobile Websites

I attended a Google Engage workshop in Vancouver last week. The focus at these workshops is mostly centered on best practices for managing Google AdWords and Google's other paid advertising campaigns. While I found discussion about AdWords stimulating, a lively review about delivering websites to mobile devices really caught my attention.

Should Your Mobile Site Be Different Than Your Main Desktop Site?

We have recently been building a lot of mobile sites for many of our existing clients. These mobile sites are unique and different from the desktop versions of their websites resulting in two separate websites: a desktop version and a mobile version. The mobile version is typically set up as a different subdomain. For example, our mobile site is available at http://m.customfitonline.com ... notice the 'm' in this website address.

Why Choose Dedicated Websites for Different Screen Sizes?

We build these unique dedicated mobile sites based upon the following assumptions:

  • Mobile sites don't need as much information as a desktop site.
  • Mobile sites need to have smaller images and 'lighter' programming so they load faster on a mobile networks that might not have connection speeds that match wired or WIFI networks.
  • Optimizing mobile sites for search engines can have unique requirements compared to desktop sites.

Or Should Your Mobile and Desktop Site Actually Be the Same Site?

I've been researching the hot new trend in web development these days. It's called "responsive design'. Responsive design refers to websites that adapt in design and layout dependent on the size of screen size being viewed.

If you are viewing the website on a desktop computer or laptop the layout of a modern website usually stretches between 960 to a little over 1,000 pixels wide. (Pixels are the unit of measurement used online.) A responsive design would display at these widths. But when the same site is viewed on a mobile device the page layout, images and content actually adjust to fit the reduced size of the smart phone or tablet screen. For example, the width of a smart phone can vary between 320 to 640 pixels wide when viewed in 'portrait' mode. Responsive websites will literally flex to accommodate the viewer's choice of browsing.

Responsive vs. Dedicated

Some Advantages of Responsive Website Design?

  • You only need one website to serve a variety of devices.
  • Building one website for all devices can save time and money.
  • Building one website makes content management easier as you don't have to worry about 'duplicate' content on different site versions.
  • Search engines like Google are on record noting they prefer responsive design sites.

I was getting ready to switch our web development team to building responsive websites exclusively. But now I think that building unique but complimentary desktop and mobile websites is the correct way to proceed in many situations. I was somewhat surprised to hear the prominent panelists at last week's Google Exchange and even Google representatives in attendance note that they favour using a dedicated site for mobile phones.

For Those on the Go? Keep It Simple!

As noted above, mobile sites for many applications can be 'dumbed down' with less content. People using a mobile phone typically aren't looking for as much information contained on your 'main' site. Keep content simple, and very easy to browse on a small screen. 

For example, if you have a hotel or a restaurant there are a few basic things that will address the vast majority of people viewing your site on a mobile device. These would include:

  • A short summary of what you offer; for example, your hotel's amenities and facilities or your restaurant's menus.
  • Some good quality pictures that show off your product; for example, your hotel rooms and lobby or some of your more popular menu items and the bar or eating area at your establishment; people always like to see what they are ready to buy or use.
  • Have a good, short promotional video? Did you know that more YouTube videos are viewed on mobile devices that desktop or laptop computers? Video can be very effective on mobile devices, especially if the video viewing time is under 60 seconds.
  • And most importantly provide very obvious ways for mobile devices users to call you immediately or find you easily using an interactive online map; we often refer to this as 'tap to call' or 'tap to a map' functionality; think BOB (a.k.a. Big Orange Button) that reads 'tap to call us' or 'tap to view our location'.

So Responsive Design or Dedicated Sites?

You can make up your own mind but here are some things to consider.

  • If you are building a brand new site from scratch then responsive design warrants strong consideration. One website that works on a wide variety of screen sizes might just be best. As noted above, it's typically faster and perhaps less expensive to build one responsive site rather then two unique sites.
  • If you have a desktop site but want a mobile presence, then just 'add on' a unique mobile site to your online presence; there is probably no need to rebuild your main site when just adding a mobile version will do. However, keep in mind that you will need to review content on both sites. Make sure that your content on both sites is always current and in-sync.
  • If you do opt for a responsive design, I would consider trying to reduce the amount of content available on your website when it's viewed on a smaller screen; this can be done by hiding or removing some navigation buttons and / or content that might not be needed for smart phone viewing (think, 'hiding' your blog posts or your desktop website's extensive help section and their related navigation links or buttons by using some special programming that detects when the site is viewed on a smaller screen).

What Do You Think?

Do you have a mobile website? What would work best for your business… a responsive website or unique mobile and desktop websites? Feel free to leave your comments below. And if you found this post helpful why not share it using the social media buttons below? Thanks!

 

Made With In Whistler