Pros and Cons – Responsive Design vs. Mobile Website
Unless you’ve been living under a rock you’ve probably heard someone mention responsive design.
This is basically a website that provides a custom user experience no matter what screen resolution you are using. They’ve been all the rage lately and rightfully so. There a great way to consolidate code from mobile websites, quick to execute, and provide an overall better user experience then a static HTML framework.
But are they right for every situation? Does this mean that Mobile Websites are obsolete?
I have to admit I was definitely riding the Responsive Design bandwagon pretty hard myself. But, as we dealt with more an more clients with different needs, budgets, expertise, I began to doubt whether responsive design is right for everyone. I quickly began to realize that Responsive Design was simply a shiny new toy we all got obsessed with and in the end there are Pros and Cons of both platforms. Maybe Responsive websites aren’t the Holy Grail of design that everyone had been infatuated with.
The following is a guide to illustrate the strengths and weaknesses of both mobile development strategies.
What is a Responsive Website?
Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.
A responsive design is built on one code base. Google likes this and your designers and developers will like this, too. One code base means one content source to maintain. Mobile sites have two code bases and two urls so that maintenance can be a challenge.
Content delivery is flexible to accommodate all screen sizes. A responsively designed website reacts to the width of the browser window and adjusts the display of content on your site to fit those dimensions. Certain elements can be hidden to optimize the view on smaller screen sizes. No more optimizing for every new device that comes on the market as you must for a mobile site, a responsive design does that automatically.
Often times migrating a site to a responsive design means a completely new website. For cash strapped businesses or businesses that need a quick fix, a responsive website may not be feasible in the short term. Moreover, if you are developing and designing from a different code base you will have the liberty to build in richer interactive elements.
What is a Mobile Website?
A mobile website is a website that is made specifically for mobile and tablet devices. This site often times lives separately from the desktop website.
A mobile site can be less expensive to develop in the short term. A responsive design requires you to essentially rip and replace your current site in order to make it a responsive design. This isn’t something that is an easy overlay. If a site wasn’t developed with a responsive design in mind, it won’t be easily transitioned into a responsive site. A mobile site is a less expensive option that can be created at any time without performing a complete site redesign.
Mobile sites are optimized exclusively for the mobile experience. Responsive sites can be heavy with long load times. One issue that’s arisen with responsive websites is that the content and images that are served up for larger screens, which usually are supported by high-powered bandwidth and high resolution, are also served up on smaller, mobile screens with limited bandwidth, resulting in poorer performance. As mobile devices become more powerful however this is becoming less of an issue.
As stated above mobile sites can be cost effective in the short term. However, in the long term they can begin to get more costly as you spend extra time updating two sites.
A Side by Side Comparison
A famous comparison of responsive design vs. mobile design experience is the 2012 election websites for Barack Obama and Mitt Romney. Barack Obama’s technical team chose to utilize responsive design for there mobile strategy while Mitt Romney’s team chose to utilize a mobile website. See for yourself what you think provided the best mobile experience.
As you can see from the comparison the Obama site menu utilizes a sliding menu whereas the mobile Romney site uses a button navigation. User testing showed that many people didn’t even know that the Obama site had a menu on the mobile version.
Even though its true you can hide certain elements on responsive sites with .css the mobile versions are often bigger and longer. Its simply easier for designers and developers to tailor a better user experience when you have a separate code base. The result can easily be seen in this enormously long page compiled on the Obama site.
As you can see, due to the larger page size of the mobile version of the Obama site, it loaded more than twice as slow as the Mitt Romney site.
So Who Wins – Mobile Websites or Responsive Design?
If there’s one lesson to learn from analyzing these websites and techniques, it’s that this stuff is genuinely hard. A lot goes into making a great mobile Web experience, and I’m personally thrilled that businesses have taken the important first steps toward making their websites mobile-friendly. Viewing the mobile web as a wonderful journey and not as a destination is absolutely essential. As we step into the deep end of multi-device Web design, we must strive to continually improve our websites and services in order to better serve our users — wherever they may be.
What do you think?
Contact us to see what solution is right for you.