Choosing Between a Mobile Version or a Responsive Design

Designing For Mobile - Nov 2016

Whether you have an existing website, or are planning to build a new site, recent trends in SEO stress the importance of being mobile compliant. Search engines like Google will list a site better for mobile searches if your web pages are mobile friendly. The following information outlines some of the options available so you can make an informed decision about how to update your current site, or create a new mobile compliant website.

View Short Version



Responsive or Mobile Version

Advantages and disadvantages of either using a mobile version website or a fully responsive design.

Aspect
Responsive
Mobile Version
How they work
This type of design responds by shrinking or expanding to fit smartphones, tablets and desktop computers. It allows for a single website for all devices. Read more...
This setup includes a top level desktop website and a second website either inside a folder or on another domain specifically for mobile viewing. Read more...
Little known facts
Responsive design is difficult to work with but has the benefit of less webpages. In essence you are still creating two websites but are putting them both in the same webpage.
Responsive code is included in the mobile version and additionally you can still add responsive elements to the full, or "top level" website.
Mobile friendliness
This will be mobile friendly, however how mobile friendly depends on how many elements are included to allow for desktop display.
The mobile version will be mobile friendly.
Is it responsive?
Fully responsive.
The mobile version will usually be responsive.
Loading speed
Needs to include code for both desktop and smartphone display as well as tablet. Extra code is needed to allow the webpages to flex. This type of design will be slower.
If auto detection is included loading will be quick. The sub-site is a condensed version of the top level site setup specifically for mobile device display and speed.
SEO
Good for SEO. Will rank well in both desktop and mobile searches. Passes the Google Mobile-Friendly Test.

This style of design will rank a little lower in mobile searches than a dedicated mobile version due to page load speed.
Good for SEO. Because this setup has one website specifically designed for desktop and one for mobile this type of design may do slightly better in searches. Passes the Google Mobile-Friendly Test.

May get better ranking due to Google seeing this site as a better user experience.
Ease of use
Responsive design is generally more cumbersome and does not allow the addition of some types of widgets, some animation applications and large tables of information. In general there will be 30% to 60% more code so the layout can conform or "flex" for all devices. Not as design friendly for the casual user.

You could look at it as if a town were to make a single vehicle for postal delivery, fire fighting and police. Maintenance and repairs would be more involved and you might be more limited as to what can be included in the vehicle. Plus it would be damn confusing.
With this type of setup two separate websites must be maintained. Because there is less code in each site the webpages and files may be easier to work with, and how the site works can be more easily understood. Less testing is usually needed.

Although it may sound more difficult to maintain two websites, because the code and pages are more simplified this can be a better choice in some cases.
Limitations
Usually will not allow for as many applications and interactive elements to be added. Adding elements like large tables of information can be difficult. Although you can hide elements on mobile devices you will still need to have a version of the same information on the same page in a simpler form that displays on mobile.
The top level website can include any type of application, widget, images and interactive elements. The sub-site will be limited to mobile friendly applications.
User experience
Designing for multiple devices and desktop all in the same webpage does offer some challenges. In general you will need to compromise on what can and can not be included on the site. These limitations may make for a less rich user experience.

Obvious, but generally not considered is that long pages full of text will not display well on mobile. Will your site have loads of information? If you plan short pages of info and/or few images this is a good way to go.
There will be one site configured for desktop display and one specifically for mobile. This allows the developer to create a more customized version of each site allowing for a better user experience. You can present a more condensed version of your top level website in the sub-site.
Real world
Responsive design is complicated. Although it is all the buzz right now (or trending if you prefer) authors of articles espousing the benefits or RWD are usually developers or are very familiar with current design and industry trends failing to understand that everybody wants a website, but everybody does not want to be a code guru. Small business webmasters in the real world may not want to learn the code needed for this type of design.
Two websites are more difficult to keep updated, however webmasters that have setup sites in the past, before RWD, will find it much easier to work with separate websites and code that is more similar to what they have used in the past.

A sub-site can introduce novice webmasters to responsive without overwhelming them.
Updating old sites
Can be used to update any website no matter how old it is, but it can be complicated.

You can update an older coded website using Media Queries responsive code. Because HTML5 and CSS3 are subsume (can be mixed together) with older HTML, new CSS3 Media Queries code can be added to even very old designs. Updating with new CSS may not work on every website but with enough work some older sites can be made to pass the Google Mobile-Friendly Test.
Allows older sites to be updated without disturbing the current site.

A mobile version website can be added either inside a folder on the current domain, or it can be placed on a new domain. Automatic detection using PHP, jQuery or even Javascript can be added to redirect the user to the mobile version.

Optionally, you can create the mobile version using a responsive web template, edit the new site over a period of time and once you are satisfied with the sub-site you can move it to the top level hosting folder and make it your main site. This allows for a more seamless update.
Building new sites
Best choice if you plan a more simple design and will not be adding a large number of applications and images or an abnormally large amount of page text.

Example: The page you are reading is not mobile friendly because it would be unreadable as responsive. We removed the viewport meta tag on this page to instead allow mobile zooming.
Best choice if you want to create a very complex website for desktop or if you want to more specifically target mobile and/or desktop users.
Domain
Only a single domain is needed.
Can optionally be a separate website with its own domain name, or the mobile site can be inside a folder under the same domain. Google ranks webpages inside folders the same as if they were in the top level folder.
Goals
This may be the best choice if your business targets desktop and mobile visitors equally. Say for example if you are a restaurant or a candy shop.
This is best for a business that sells downloads or software, or if you want a very elaborate top level website with lots of information, but only need to show mobile users your location and phone number.
Future considerations
This type of design is relatively new and is still evolving. There will be more changes in how RWD works but they may not affect a site built using current responsive code. Another consideration is that as smartphones become larger and tablets smaller, how will this affect the css code used that in general detects the screen resolution to create the responsiveness.
Using this type of setup you can optionally make the sub-site the top level website at some future date.

If auto detection is used it may need to be updated as new devices become available.
When to use
For new websites that will not include a lot of text, images or page elements.
When you have larger tables of information, many images, lots of products or want to target specific devices.
Conclusion
Generally more complicated to work with, slower loading speeds and the design has more limitations as to what can be included on the webpages. The real benefit of RWD is that you only need to maintain a single website.

This is an excellent choice for webmasters that want to learn how to design using Media Queries responsive code and also for users that plan to not add a lot of new elements or make any changes in the website layout.

Good for SEO.
Allows for more creative freedom and tailoring to specific devices. The drawback is that you need to maintain multiple websites.

This is the best choice for webmaster that would like to more specifically target desktop users with a more feature rich site, and/or target mobile visitors with something specifically created to display well and load quickly on mobile devices.


Has a slight edge over RWD for SEO in most, but not all cases.
Web Template
Solutions
Search Responsive Designs
Responsive Design Options

Search Mobile Versions
Mobile Version Website Templates

Aspect
Responsive
Mobile Version






How Responsive Design Works
Responsive Web Design, or RWD refers to websites that change layout, hide elements and generally "flex" to fit all device screens to allow for an optimal user experience whether the viewer is using a smartphone, tablet or desktop or laptop computer. Each webpage in this style of design includes code to detect what screen width the browser software is displaying. Media Queries CSS3 code is used in concert with HTML and other css code to make each webpage respond. Multiple Media Queries stages or "breakpoints" can be included to alter the design layout for tablet, desktop, smartphones and even to detect larger screen smartphones.

Current trends in web design are hailing this as the best solution for web design, however, there are some drawbacks. The code can be difficult to work with, webpages usually load more slowly and many sites will not display properly in older browsers that are still in use. Responsive websites can include from 30% to 60% more code than a standard site.


Sites With a Mobile Version
This type of setup includes a top level or "full" website that is coded to display on desktop and laptop computers and in most cases on tablet as well. A second website is included specifically for mobile, usually located inside a folder on the same domain or it can be setup with its own domain. With this design style you can tailor each of the websites for either device or computer viewing. The main drawback is that two websites must be maintained. The benefits are that you can place a more condensed version in the mobile site allowing for faster page loading and a better user experience.

In most cases the mobile version website will include responsive elements and additionally these elements can also be included in the full or desktop website version making it partly respond to the screen size.


Mobile Friendly Option
This design style is not covered in the above article and is used more for updating a site. It's a different approach to making a website mobile compliant and can be used on older websites to update them for mobile. By adding CSS3 Media Queries code you can make fonts larger, hide elements and change some areas of the design layout. When a website is updated this way it will increase webpage elements in size to make them more readable and viewable. So instead of shrinking the site for mobile, you would be increasing text and tap targets (image links and buttons) in size and hiding non mobile friendly elements. With the right application of CSS3 and Media Queries even a very old website can be made to pass the Google Mobile Friendly Test. It does however require quite a lot of work and testing. If you plan to update your site this way be sure to NOT use a viewport meta tag as we have done in this non mobile friendly page you're viewing.