Responsive Design Vs. Mobile Websites

September 17, 2013 by Emily

Did you know that smartphone sales are predicted to double PC sales in 20141? With this in mind, it’s no surprise that mobile friendly eCommerce solutions have become imperative for businesses to portray relevance and professionalism within their industry.

Desktop computer screens can be as large as 2,000 pixels wide and phones can be as small as 320 pixels. The challenge is creating a website with consistent branding and top-notch user experience on any size device. Without a mobile presence you run the risk of losing sales from users unable to make purchases and ultimately you just look outdated.

Related: 5 Ways Tablets & Mobile Devices Influence Design Trends

3 Options for Creating a Mobile Customer Experience:

1. Mobile websites
2. Responsive web design
3. Mobile applications

Selecting a suitable direction can vary depending on your audience, user habits, and budget. Mobile applications reside on a smartphone or device. This is the direction to take if you want to build productivity tools as it allows your site to be heavily dependent on interactive components and functionalities.

Since we’re talking eCommerce I’m going to focus on the two primary options – Mobilized Websites and Responsive Design. The following outlines some pros and cons to each approach in order to help you determine the best direction for mobilizing your business.

Mobile Websites

Mobilized websites detect a user is viewing their site on a mobile device and redirects them to a different version of the design. It uses a slightly different URL – often, m.yoursite.com or mobile.yoursite.com. Usually the code will detect the user’s device and automatically re-direct them or it may offer the user a choice of switching to the mobile version.

If your website or product will have different purposes on a desktop computer vs. a mobile device, this is an effective direction. It gives you design flexibility and allows for greater differentiation between the desktop and mobile site. If you want to repurpose, redesign or rebrand an existing website this will give you all the freedom necessary to do so. The example below shows the difference between the Barnes & Noble website on a desktop and mobile device.

You can see the drastic jump in layout, navigation, and even content. The interface has shifted to a mobile friendly user experience with it’s simplification and large buttons, however the branding looks a little different. There is also less content available, which could be a frustrating experience for a loyal visitor trying to find a link they’re used to finding in the top navigation.

Related: Design Conventions Are Not the Enemy

The problem with mobilized websites is that each resolution you want to support is essentially a separate website (desktop, mobile, tablet). Even mobile devices aren’t consistent from iPhone to Android to Blackberry. This adds technical overhead and is much more difficult to maintain. With completely separate designs and builds, you run the risk of lacking brand consistency across all platforms. The most significant downside is cost. Designing, building, and maintaining a separate site for each resolution can be very expensive. All of this developing in turn means they do not adapt to change quickly or easily.

Mobile websites can also pose challenges in terms of SEO. Having duplicate content heavily discredits websites from a search engine’s perspective. There are some methods around this (e.g. Switchboard tags), but these have not been fully implemented with popular search engines such as Yahoo and Bing. Link building is another important part of ranking high and creating a mobile site can mean starting from scratch instead of adapting all of your previous time and money from your existing site.

Responsive Web Design

Responsive is a method of building a fluid layout which shrinks and grows as a browser is resized. Unlike mobile websites detecting the device, responsive detects the dimensions and resizes the elements accordingly in order to give an optimized visual for the user.

Sometimes this can be simply re-flowing text and other times it can be completely changing the layout. However, in the end it is one website with one URL. Sometimes the design will make drastic changes once resized to mobile in order to adapt to the habits of mobile phone surfers (e.g. hidden menus or touch screen attributes). Below you will see the desktop and mobile version of Ardene. The navigation has transitioned into icons and a hidden menu. The branding and layout is similar, but still adapts to a mobile friendly interface.

This method gives you a lot of flexibility to the number of resolutions you design for, from mobile to tablet to laptops to larger iMacs. Having one URL means it is easier to build, change, and maintain which ultimately makes it more cost efficient. A single URL also means more effective tracking for SEO purposes.

Designing responsive websites still has it’s hurdles. It requires a lot of forethought in the initial stages in order to develop a plan for how the layout will react in different resolutions. It can require a special expertise from a designer in order to accomplish an effective solution.

Page loading speed can also be a challenge in responsive design. Since it is run on one URL, it cannot be stripped down to bare bone HTML like mobile websites can. However, if you are working with a reputable team or agency, they will know that performance should take priority when developing your responsive strategy.

Advertising can be a challenge as there aren’t a lot of standard size units which will work within responsive templates. However, this is a noted concern and has already been addressed by Google Adsense and other companies offering tools to create and display flexible ad units.

Who wins this battle?

If you are simply looking for your website to be accessible, consistent, and user-friendly on multiple platforms then Responsive Web Design is the clear winner. If you want to create functional productivity tools or build a completely separate user experience for your visitors then a mobile website is the direction to consider.

There is no doubt that Responsive Web Design is here to stay. It has been publicly backed by several notable designers and on June 6, 2012 Google stated that responsive design was their recommended configuration for SEO2. Having one of the largest tech companies sing it’s praises has solidified that this method is the way the industry is moving. It is no longer a concept, but a mainstream reality. It seems as though eCommerce has been relatively slow to catch on to this trend, which gives a unique opportunity for retailers to portray their forward-thinking values.

Reference 1: http://www.itworld.com/mobile-wireless/339568/spotlight-mobility
Reference 2: https://developers.google.com/webmasters/smartphone-sites/details

About Emily

UX Designer

Read more posts by Emily