Responsive Design vs. Mobile Websites

*UPDATED March 2019*

The idea behind responsive and mobile websites is still the same. What has changed, however, is the volume of traffic coming from devices other than the traditional desktop, as well as the variety of shapes and sizes. Mobile devices, tablets, and televisions are now responsible for more of the total market share than desktops.

Year after year we have seen desktops being used less and less. As we cover below, mobile-specific websites still have their place. Though, because of the wide variety of screen sizes being used to access websites globally, it is now almost always a better idea to go with a responsive design.

MAIN ARTICLE:

It’s no secret that the number of people accessing the web from mobile phones and tablets is growing exponentially. Is your website optimized for this kind of traffic?

What is Responsive Design?

Responsive Design is a term coined by Ethan Marcotte which refers to the way websites are designed using a flexible grid system that will adapt to a variety of different screens with varying resolutions and sizes. Website designers and developers have been exploring using the principles of Responsive Web Design, or RWD, since roughly 2009.

Prior to Responsive Design, websites were built using fixed grids, which did not allow elements on the page (text, images, video, etc.) to move and adjust to different viewing environments. The idea behind Responsive Design is to create a seamless user experience for your site visitor, whether they’re on an iPad or a 52″ TV, they will be able to easily find and access information on your site without zooming, scrolling or other any other unnecessary adjustments, which can create a barrier to interaction.

Responsive Website Design Example

What is a “Mobile Website”?

A Mobile Website is different from Responsive Design in that the Mobile Website will be a completely separate entity; its own website. A different version of your site will be designed and maintained to only be viewed when your website is accessed via mobile devices. There are a number of different ways (“browser sniffing”) we can use to determine the capabilities of your device and choose which site you should see.

Pre-responsive, this is how all sites needing an optimized mobile presence were done. The majority of the web’s most highly trafficked sites have a separate, dedicated mobile website.

Separate Mobile Website Example

Pros and Cons of a Responsive vs. Mobile Site

Responsive Website

• All users get the same content
• It is easier to maintain (same html, css, js)
• Single place to make changes
• Not just for mobile sites – scales up and down
• Can be slower to load because all page elements are being displayed regardless of device

Separate Mobile Website

• A truly mobile optimized site will generally load more quickly
• Users may not get the same content
• Only for mobile or other small screens – does not scale up
• Harder to maintain – you have a whole second website to change, host and maintain
• More costly to maintain – see above

What do we prefer?

Because of its flexibility on a wide array of screen types and sizes, as well as the ability to make changes in a single place, we prefer Responsive Design for MOST websites.

However…

It is important to note that support of Responsive Design does not imply it is a perfect solution. One of the major drawbacks of Responsive Design is that it does not allow for the re-organization of the site’s information architecture – which can be a double edged sword. Sometimes there is a need for different language and organization on a mobile site, and responsive is not designed to provide two different versions of content. There are, however a number of workarounds to this specific issue and other problems related to page load speeds and the way images are displayed.

If cost were no object, it would be optimal to have a combination of both responsive and a dedicated mobile site to harness the benefits of a site that fluidly adapts to any screen environment while ensuring it runs smoothly and fast. This would also give you the ability to hand-select what content is shown where on which device. Oftentimes this hybrid is just simply not cost-effective or reasonable, in which case, we say go Responsive.

Cost of Responsive Design vs. Mobile Website

This depends on a wide range of factors, but typically there is not too much of a difference in the upfront cost when creating a new site. This is not always true when rebuilding a site, and you have to take into consideration a lot of variables including the reasons why the current site does not function optimally on mobile – is it flash based? was it built using tables?

The biggest difference with regard to cost of Responsive vs. Mobile comes down the road when you look at maintenance, hosting costs and site updates. A dedicated mobile website is typically going to end up costing more because there are multiple versions of the same website. The many versions of the website each need to be hosted and backed up. When changes need to be made to the site, they need to be made on each version of the site, whereas with Responsive you make the change in one place and it propagates to all devices viewing your site.

Additionally, remember when I said earlier we “have ways” of routing you to a different version of the website depending on what type of device you are using? All of that information is stored in a database, and needs to be frequently updated to route users to the appropriate mobile experience. Additionally, things have become more and more challenging in this arena as there are a number of devices that now walk the tightrope between a mobile device or a desktop device – a good example would be the Samsung Galaxy Note.