ellipsis flag icon-blogicon-check icon-comments icon-email icon-error icon-facebook icon-follow-comment icon-googleicon-hamburger icon-imedia-blog icon-imediaicon-instagramicon-left-arrow icon-linked-in icon-linked icon-linkedin icon-multi-page-view icon-person icon-print icon-right-arrow icon-save icon-searchicon-share-arrow icon-single-page-view icon-tag icon-twitter icon-unfollow icon-upload icon-valid icon-video-play icon-views icon-website icon-youtubelogo-imedia-white logo-imedia logo-mediaWhite review-star thumbs_down thumbs_up

Responsive design vs. mobile websites: And the winner is...

Responsive design vs. mobile websites: And the winner is... Brandt Dainow
VIEW SINGLE PAGE

Website owners today are confronting the task of adapting to the rise of mobile. Mobile web access is one of the dominating trends of the current internet economy, with many sites now seeing 25 to 30 percent of their traffic on mobile devices. However, most traditional websites experience much lower mobile conversion rates because their design does not work well on smaller screens or slower connections.


Responsive design vs. mobile websites: And the winner is...


Site owners who need to improve their mobile game recognize this means creating a design that is tailored to mobile users. The first step is deciding between building a dedicated mobile site or recoding their main site into a responsive design. This article assesses the pros and cons of using responsive design versus creating a dedicated mobile site.


First, let's clear some confusion from the area. A mobile site is not the same as a mobile app. An app is downloaded onto a smartphone or tablet and lives there. A mobile site is nothing more than a set of webpages that have been designed specifically for mobile (as opposed to desktop) devices. Responsive design occurs when the server sends the same stuff to every device but includes information enabling the device to work out how to display the page on its screen.

Design


Responsive design is much more complicated than traditional design or building dedicated mobile sites. At this time, responsive design is relatively new and few developers have much experience. Good responsive design can therefore be expensive. Bad, but affordable, responsive design is everywhere. You can recognize such second-rate work by web pages that are absurdly tall on mobile devices. These are typically pages from a traditional design in which the elements have simply been rearranged to fit a narrower screen. The result is a tall, thin column, guaranteeing people never see the bottom two-thirds of the content. Reworking an existing design into a responsive design is an extremely complex process, which is simply beyond the ability of most web designers and thus requires best-of-breed coders.


This often means designers underestimate the amount of work required in responsive design until they've had several years of experience. This complexity can also lead to situations where designers simply do not know how to convert an existing design element to a responsive design. For example, simply getting the phone to resize images might not work because important details get lost at smaller resolutions or because the images only make sense when several can be viewed at once. Similarly, banner and callout placement is much harder on responsive designs because of the narrow mobile phone screen. In fact, many sites find callouts and banners cannot be shared between desktop and mobile sites at all. They find the screen dimensions of a mobile device do not allow for placement of insertion boxes alongside their related content, while moving them underneath renders them meaningless.


Navigation can also be an issue in responsive design. Pop-out navigation tabs can be a problem because they might be too big for a mobile screen. Such designs often have their functions locked to very specific sizes, which means it's impossible to resize them so they work for smaller screens. Often this can mean redesigning the entire navigation system from scratch. A responsive design therefore requires a considerable redesign effort.


Unless your website is very minimalist, you cannot create a responsive design by simply rearranging the existing elements. Responsive design usually requires a complete redesign of the main site from the ground up. Designing and coding responsive design is much more complex than simply building two different sites. As a result, responsive design is much more expensive if you want the guarantee of a good mobile user experience. If you are happy to accept lower performance for mobiles, it might be cheaper than building a mobile site, but even that is not guaranteed. What is guaranteed is that if the responsive design you go for is significantly cheaper than building a mobile site, you'll probably get garbage.


However, the issue cuts both ways when it comes to artwork, especially product photographs. Getting an image that works well on both small and large screens is difficult. In a responsive design, you have to use images that work well no matter what their size. That puts a burden on the product photographers and can significantly lengthen image production times. On the other hand, a mobile site might require a completely different set of images from the main website, effectively doubling the image workload. Either way, catering to such a wide range of screen sizes makes artwork much more problematic than in the pre-mobile days. In general, dedicated images designed for a small screen will provide better results for the mobile visitor, which should translate into more conversions, which is something only possible on a dedicated mobile site.


Browser compatibility is also an issue. Coding responsive design is "bleeding edge" technology. It requires a sophisticated implementation of the very latest CSS techniques. It's hard to avoid using code elements that are not yet standardized and so implemented differently on different browsers. This is especially true of Internet Explorer, which just happens to be the world's most popular web browser. Due to changes between versions, getting a responsive design that works on a mobile device and also on all versions of Internet Explorer on the desktop is extraordinarily complex -- possibly the most complex task that can be asked of any web designer.


By contrast, a separate mobile site can use more modern front-end technologies like HTML5 and WebKit features without the need to code for backward compatibility with older desktop browsers. These newer technologies can enhance the user experience and cut down on maintenance costs. A mobile site doesn't require you to redesign your main site and so could be considerably cheaper than a responsive design that requires a complete rebuild of everything.

SEO issues


There is a widespread belief that Google wants everyone to use responsive design and that Google will list responsive websites above mobile ones. This is not true. Google actually said it prefers responsive design if it is better for the user and if it suits you and your infrastructure better. It also said it is perfectly happy to see and index mobile sites. It has never said that responsive designs will be listed above mobile sites.


Some people are concerned that having a mobile website means Google can see the same content on two different sites. They are concerned this could see one site vanish from the search engines or that they could get penalized by Google for having duplicate content. This is not something you should worry about. Google uses different bots for mobile and desktop, populating different databases. Google also has techniques for handling dedicated mobile sites (read more here). Its recommended techniques, such as canonical tags and bot redirects, should handle any potential problems regarding the website conflicting with the mobile site.


Experienced search marketing consultants will tell you what Google says you should do does not always match what Google rewards. My research reveals Google is listing mainly mobile sites in mobile search, not responsive designs. The Google mobile database uses different ranking rules from the main system. For example, Google has stated that it considers speed much more important for ranking sites in mobile search than for the main database. This is perfectly logical, as speed is more of an issue for mobile users than for desktop users. While Google might prefer responsive designs, sites still need to meet the criteria Google wants for mobile users. In practice, mobile sites are meeting Google's requirements much more than responsive designs. Perhaps as a result, having a mobile site is strongly correlated with having a high listing in Google mobile search.


Getting the best search listings in Google mobile search means meeting the criteria laid down for that Google database, not just blindly going responsive because Google said you should. What matters is the quality of the work. In practice, most people find it easier to meet those criteria with a dedicated mobile site rather than a responsive design.

Conversion rates


Mobile sites perform better in terms of sales. Typically mobile sites have conversion rates three times better than those using responsive design. This is because mobile sites are almost always faster and better designed for small screens. Mobile sites are faster for users because the work is done on the server, not the phone. Responsive design requires the device to do the work of calculating layout for the screen and resizing graphics. This can be processor heavy and slow on mobile devices. It's not uncommon to see a mobile device take four or five seconds to process a responsive design page before it can display it. A desktop device, with more memory and a faster processor, might take only one second to process the same page. With a mobile site, you can load only the elements that your mobile users need, resulting in faster download and processing times.


Speed is critical to mobile sales. Ideally, you need to download and display the site on a mobile device in two seconds. For every 10th of a second beyond that, you lose about 10 percent of potential mobile sales. A good-looking modern website, which might contain dozens or even hundreds of items, can rarely meet that goal. It may be possible to create a responsive design that can download and display in two seconds, but it will need to use a very minimalist style by modern design standards.


Mobile tech


Mobile sites allow the inclusion of features unique to mobile devices that make no sense for desktop computers. For example, mobile sites also allow for the incorporation of phone calls into the design, where visitors can click a button on the design to make their phone initiate a call. This cannot be done on a responsive design since desktop devices cannot make sense of the click-to-call functionality and lack phone capabilities. Mobile design also allows for easy inclusion of mobile-only HTML, touch events (such as using a finger to scroll through images), or features such as location-based services.

Maintenance issues


Whether you go mobile or responsive, your costs will increase. Server maintenance is a little more complicated with mobile design, but a mobile site is cheaper and easier to build than responsive design, so the overall cost of ownership is usually cheaper for mobile sites. However, a mobile site might require more complex management as you now have two outlets for content. I think this issue depends on your organization. If you're not used to running more than one site, responsive design might offer an easier system for updating content. However, if you're used to managing more than one website, adding a mobile one isn't going to cause problems. Furthermore, you might be able to populate a separate mobile site with syndication technology like RSS, making things even easier.


Following the leaders


Looking at the 100 top-trafficked websites in the world reveals that 83 have dedicated mobile sites, 11 use responsive design, and four just have old-fashioned, non-responsive design. This is not really a conclusive argument, but I tend to assume these guys earned their dominance by knowing something about the web, so I like to have very solid reasons not to follow their lead. They clearly favor dedicated mobile websites.


A middle way


I don't think there's a long-term future for either responsive design or dedicated mobile sites. When you look at these issues what you see is a pattern: There are some things that should be shared across all devices, like content, and there are some things that should be designed for the device, like photographs. Neither responsive design nor a mobile website offer both.


Responsive design rarely provides a best-of-breed solution for the mobile user, while mobile websites make sharing elements difficult. It seems to me the solution to this is to use "adaptive design." Under an adaptive design system, the server works out what type of device is connecting and serves a combination of shared and unique elements. For example, it might use the same content for all devices, but use different artwork for smaller screens. In adaptive designs, some CSS files are common to all, but smartphones will get different sizing and layout CSS instructions from those sent to desktop browsers. Adaptive design is already possible with some CMS systems, such as Drupal, because of their browser detection and response capabilities.


If your CMS system is up to it, adaptive design offers the best of both worlds. If you're not ready for adaptive design, then a dedicated mobile website might be your best interim solution. Responsive design is viable only if you have the best designers, with significant responsive design experience, and are happy to completely redesign your existing websites.


Brandt Dainow is the CEO of ThinkMetrics.


On Twitter? Follow iMedia Connection at @iMediaTweet.


"Two businessmen press hands" image via Shutterstock.

Brandt is an independent web analyst, researcher and academic.  As a web analyst, he specialises in building bespoke (or customised) web analytic reporting systems.  This can range from building a customised report format to creating an...

View full biography

Comments

to leave comments.

Commenter: Eric Oliver

2014, June 16

9) What the author refers to as "adaptive design" is mainly best practices in responsive design. Responsive designers will often use client-side Javascript to detect support for certain features and supply alternatives if that support does not exist. Or will supply different image sizes as needed. And in many situations responsive designers will use server technologies to serve up slightly different content (again, images is a great example)

Don't get me wrong: responsive sites are NOT appropriate in every situation. As the author cites, most of the top-trafficked websites in the world have mobile-dedicated websites. However, most of those websites are complicated web applications whose functionality demands different behaviors on mobile. The reality is that most readers of this article don't have Amazon-level complexity on their websites, and responsive websites will be more appropriate for them. We have built mobile-dedicated sites for our clients in the past and will continue to do so in the future. However, the opinions outlined in this article seem hugely misleading.

To paint responsive sites as a binary, "big budget or poor experience" offering is ignorant at best, misleading at worst. The proper solution (responsive vs. mobile-dedicated) should take into account the desired user experience, technological limitations and opportunities, and client budget (among other things). ALL businesses should consider responsive design as an option: contrary to the author's assertions, very often it saves substantial time and resources while offering an excellent user experience.

Commenter: Eric Oliver

2014, June 16

As a web developer in the business for over 10 years, I disagree strongly with the points made in this article. Specifically:

1) "Responsive design is much more complicated than traditional design or building dedicated mobile sites." Building a completely dedicated mobile site basically doubles the complexity of your site (instead of one site, you now have two). That means building and maintaining two sites. This is not a simple prospect. In my experience, building one responsive website well is less complicated than building two distinct websites well.

2) "The result is a tall, thin column, guaranteeing people never see the bottom two-thirds of the content" This is a fallacy carried over from the "people don't scroll" and "everything is lost beneath the fold" mentality. In actuality, many recent studies have shown that "the fold" is irrelevant and that people scroll on sites without any problem, assuming that the content they see initially is engaging (see http://uxmyths.com/post/654047943/myth-people-dont-scroll and http://blog.kissmetrics.com/why-the-fold-is-a-myth/)

3) "Unless your website is very minimalist, you cannot create a responsive design by simply rearranging the existing elements" This is only true if you're talking about repurposing DESIGN rather than repurposing CONTENT. And no one wants to repurpose design - whether you're building a new mobile site from scratch or developing a responsive site, you'll need to design the mobile look and feel of the site. So assuming that design work needs to be done anyway, you don't save any work by building a completely new mobile site.

4) "Coding responsive design is "bleeding edge" technology. It requires a sophisticated implementation of the very latest CSS techniques" Totally untrue. Media queries (the foundation of responsive design) are supported by all major browsers, including Internet Explorer 9 and above. Internet Explorer 9 was released in 2011 -- it's nearly 3 years old already (and Internet Explorer is now at version 11). Hardly "bleeding edge"

5) "A mobile site doesn't require you to redesign your main site and so could be considerably cheaper than a responsive design that requires a complete rebuild of everything." Again, I disagree. The separate site would still need to be designed, so no work saved there. You don't have to do a complete rebuild of everything, but you need to do a complete BUILD of something new. So again, no work saved - in fact, being able to repurpose code and CMSs already built for the non-mobile site is a time-aver.

6) "In practice, most people find it easier to meet those criteria with a dedicated mobile site rather than a responsive design." According to whom? This is definitely not my experience.

7) "Mobile sites perform better in terms of sales. Typically mobile sites have conversion rates three times better than those using responsive design. This is because mobile sites are almost always faster and better designed for small screens. " There are so many false assumptions in this paragraph it's difficult to know where to start. Responsive sites needn't be slower or poorly designed for small screens. And the author cites figures but provides no citations. I have found no studies that offer any clear metrics on dedicated mobile performing better than responsive. I would love to see them, if they exist.

8) "[Mobile-only features] cannot be done on a responsive design since desktop devices cannot make sense of the click-to-call functionality and lack phone capabilities" So hide the button on desktop but show it on mobile. Or keep it -- many desktop applications (such as Skype) can actually use the links now.

9) What the author refers to as "adaptive design" is mainl