Written by: Brandt Dainow, Consultant, ThinkMetrics
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.
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.
Written by: Brandt Dainow, Consultant, ThinkMetrics
