Responsive Website Design Versus Separate Mobile Site: What’s Best For Your Business?

Today I’ll be discussing a topic that’s frequently brought up with modern web design: how to choose between a responsive website design and a standalone mobile website.

Let me begin by saying, there isn’t one right answer to this decision. Each solution has benefits and drawbacks that are dependent on the goals of the site.

So, granted you know what the website should be accomplishing, this post should help you determine the mobile site solution for your business.

What is “Responsive/Adaptive” Design?

Responsive Design Defined

I hear this question coming from clients and prospects on a regular basis:

“I recently heard this term “Responsive Website Design” and how it can help a website. What is it and do we need it?”

Responsive design, sometimes referred to as adaptive design, allows a website to cater to multiple screen or device sizes using one website build.

For example, if you take your mouse and resize the WebMechanix website, it will adjust the website according to the size of the window. So, it doesn’t matter if you’re on a computer, a tablet, or a smartphone – the content will remain consistent regardless of device.

Pre-Responsive Websites

Pre-responsive website design, professional designers and developers who were creating mobile friendly websites would create multiple websites to handle different devices. With the number of mobile devices growing exponentially these specialized sites became MUCH more difficult to maintain and develop a consistent user experience across multiple devices. In short, this was a giant headache for developers.

Responsive design, on the other hand, utilizes a new CSS technology known as Media Queries. Media Queries allow a developer to create certain rules for when, and when not to apply specific CSS rules based on the devices screen size. With support growing for the new technology design firms have been selling these websites like hotcakes.

But, the real question is… do you NEED a responsive site?

Do You Need a Responsive Site?

What are the benefits of responsive and adaptive design?

Many individuals have harped on the benefits of this topic such as this great article by Jerod Morris on Copyblogger. However, listed below are what you’ll really want to consider when weighing the benefits of responsive design.

1.  Easier site management

This is one is straightforward. Utilizing responsive or adaptive design allows you to manage both the content for desktop and mobile from the same CMS or template files. This means less time spent updating in the long run.

2. It is good for SEO (if done correctly)

Google has publicly stated that they recommend using responsive design when appropriate. You can read more in this article.

Notice, however, I said, “if done correctly”. One caveat here is that proper implementation is a must. Building a desktop site and simply scaling it down and hiding elements based on device size may drastically affect a websites load time and negatively impact the site’s SEO.

3. Design based on device size instead of user agent

Responsive and adaptive sites serve different CSS rules based on certain conditional statements to detect how large the viewport is on the user’s device. Whereas, mobile specific sites are served to a user based on the device’s user agent such as Windows, iOS, etc…

Due to the fact that there are countless device manufacturers and models of devices with their own user agents, the mobile-specific website approach can be problematic. Responsive and adaptive design trends use something that is native to every device which in turn, makes modifying the layouts for specific device sizes much easier.

4. Frameworks aplenty

With the boom in responsive and adaptive design, many free and reliable tools and frameworks are popping up to make creating these sites less of a chore. Being a developer, I would be crazy not to list a few of my favorites in this article. A few to consider are:

• Twitter’s Bootstrap
• Zurb’s Foundation
• Uikit

Not only do these frameworks come with responsive grid systems baked into the core functionality, they also come with JavaScript libraries and components to make developing user interfaces more streamlined and effective.

So what are the drawbacks of responsive and adaptive design?

There are always drawbacks with new technologies and responsive design is no exception. Listed below are a few of the concerns the developer community has about the approach of responsive and adaptive design when it comes to mobile:

1. Browser support

Every developer’s perfect nightmare is combatting browser compatibility issues. While most modern browsers have sufficient support for CSS media queries (the technology that makes responsive and adaptive site possible) Internet Explorer 8 and older do not.

While compatibility problems aren’t a giant issue since most modern mobile devices use browsers that support the CSS media queries, some older devices will be left out in the cold. So, if your site sees a significant number of visits from older browsers, the move to responsive design could prove harmful.

2. Hidden content & media file sizes

Another major drawback of using a responsive design is that content hidden with CSS rules for specific browser sizes will still be loaded and processed by the browser. This comes to be a problem for extremely media rich websites with many photos and videos that are not properly optimized for mobile devices.

There are some ways to optimize the performance of a responsive site by using JavaScript libraries to swap images for mobile optimized versions and by using server-side mobile detection scripts to output appropriate content based on the device but none of them are perfect.

3. Cost

Responsive / adaptive website design and development isn’t cheap, in fact, most projects will end up taking 4-5 times longer than a standard desktop site. This is due to the amount of time it takes to design every layout for each device size. Usually the standard sizes to design for include:

• Large Desktop
• Standard Desktop / Tablet Landscape
• Tablet Portrait
• Mobile Portrait
• Mobile Landscape

Considering that each layout will require 5 different variations and those will all need a little custom development work as well, you can see how these projects grow exponentially. This also applies to the testing a Q/A process which takes longer due to the amount of devices that the site needs to be tested on.

Bottome line take on a responsive/adaptive approach for a mobile site

Being an advocate of using the newest and coolest technologies for web design, I try to go the responsive web design route whenever appropriate. The ability to keep all of your mobile and desktop site content managed from one site is something that is not only extremely convenient but also efficient in the long term for many of our clients.

However, if you are on a budget and a short timeline to get the project out the door, then responsive/adaptive design may be a bit more than you can chew.

The benefits of standard mobile optimized website

While all the trends are pointing toward a responsive/adaptive approach, there are still many instances that may require or be better suited for a separate mobile optimized site.

1. They are better for advanced applications and websites

Separate mobile sites are still leading the charge on sites that serve a lot of dynamic content using database connections. Sites such as large e-commerce and social media platforms have continued to use separate sites that are optimized specifically for mobile devices.

As mentioned earlier responsive site designs aren’t efficient at serving mobile optimized content – they are effective at service mobile optimized layouts.

Having a separate mobile website will allow you to load only the content you need for each layout, which means better performance and a better user experience.

2. Doesn’t require the desktop version of your website to be modified

Unlike responsive design a traditional mobile website is a stand-alone package. While responsive designs require you to modify your website to scale down appropriately and mobile specific site can be designed with only mobile devices in mind making them easier to design and develop when compared to a responsive approach.

Bottom line take on a standard optimized mobile site

Going with the obvious downfalls, having two sites means that site updates and modifications take twice as long. Small websites won’t have as much of a problem as larger ones but keeping content consistent between the two will prove to take more work and time.

Some other important things to keep in mind

The overall decision for which approach to take really should be based on three things:

• User Experience
• Type of Content
• Project Budget

Depending on your target audience, the user experience may differ drastically in a mobile environment. Here are some that come to mind:

• E-commerce
• Restaurants
• Hotels
• Transportation

The 3 examples above are booming in the mobile browsing world. The difference between the above and something such as information sites like blogs and online news is that users are looking for something extremely specific (they are hungry, or they need a cab). Keep your target audience in mind when deciding how to design and implement a mobile site at all times.