 |
Mobile Friendly Options By Erich - January 10, 2017 Updating your website, or creating a new website opens up a lot of options. An important consideration is to be mobile compliant. This leaves you with the choice: to use a responsive web design, or should you include a separate website for mobile visitors. View Condensed Version |
Responsive vs. Mobile Version
An unbiased look at choosing to use either a mobile version sub-site or a responsive design.|
Consideration |
Responsive |
Mobile Version Sub-Site |
|
What is it? |
A design style that responds and conforms for all devices. Known as "RWD". Details |
A top level website with a mobile version inside a folder. Sometimes called "Adaptive Web Design". Details |
|
Mobile compliance |
Responsive design, if coded correctly, will check as mobile compliant. |
Mobile version will also be fully mobile complaint and responsive. |
|
Responsiveness |
Top level site will be fully responsive for desktop, tablet and smartphones. |
Mobile version website will be fully responsive for desktop, tablet and smartphones. |
|
SEO |
Good for mobile ranking. Passes the Google Mobile-Friendly Test. The top level homepage will be mobile for better SEO.
Because it is less specifically tailored to mobile it may rank slightly lower than a mobile version sub-site. |
Good for mobile ranking. Passes the Google Mobile-Friendly Test. Because the mobile site includes extra pages and content, this can be beneficial for SEO if you have unique or different page copy on the mobile site.
At this time the general consensus among SEO experts is that this is better for mobile ranking because Google sees it as a better user experience. |
|
Ease of use |
Responsive design is more restricting and difficult to work with. The design and load speed is more easily compromised by adding 3rd party applications and widgets, too many Google Fonts or images that are too large and/or do not include responsive widths. In most cases the webpages will include double the normal site code.
Big corporations can keep people on staff to create high-end user applications that flex for smartphones. For the more casual webmaster keeping the responsive site properly responding can be a time consuming task. |
The major drawback with a separate mobile version is that you'll need to maintain two websites. This can make for extra work when updating. Redirection of some kind, user interactive or automatic using a PHP or jQuery script, can be added.
Because the mobile site is separate, the code is not lumped into a single site so how the css and html work is usually more easily understood. |
|
Design |
This type of design should be simple and include less design elements. As the site becomes more complicated it can be difficult to change any design elements. Because a responsive design must respond to many different devices, you will have to make many compromises if you plan to do a lot of layout changes. |
Allows for total creative freedom on the full website. The sub-site should be treated as a responsive design. |
|
User experience |
It is more difficult to integrate elements and apps specifically for mobile, or specifically for desktop into a responsive design thus limiting what the website can offer. Generally will be slower and less mobile friendly due to design considerations built-in for desktop display. |
The mobile site is specifically designed for smartphones and will display better and load more quickly. |
|
Mobile and desktop |
Will need to be a more basic design with a limited number of images and applications. All webpages must always work on all devices. |
Because the site has one area specifically for desktop, and one for mobile, this allows for more creative freedom and tailoring of your website for different devices. |
|
Speed |
Will be a slower website due to including the css Media Queries code for responding. Additionally, there are usually many more webpage elements and above-the-fold content included to allow mobile flexibility. Speed matters for SEO. See Google PageSpeed Insights. |
The mobile site, if coded correctly will be "stripped" of many elements that slow down mobile devices. With PHP auto-redirection smartphones are automatically re-directed and never load the full website. Speed matters for SEO. See Google PageSpeed Insights. |
|
Updating an older site |
If you are planning to update your current website to responsive, you will want to add some css Media Queries. In most cases a site can pass the Google SEO tests if fonts and linked images are made larger, elements are hidden for mobile and the layout is made to flex. This however requires learning about the Media Queries and quite a lot of design changes and testing. Details |
If a site is very large, it may be better to add a mobile sub-site. This allows you to ease into mobile in a more seamless way. As you update the mobile site you can more easily see how the responsive design works. At any time, once you have the mobile site setup how you like, you can always make this site your top level website, replacing your older site with a responsive design. |
|
Building a new site |
This is considered by many to be the more forward thinking way to build a site. Best if you plan no layout changes. |
This allows the webmaster to cater to the mobile experience employing different objectives than they would for desktop users. |
|
Our brilliant analogy |
Imagine if you had a kitchen device that was both a toaster and a blender. Maintenance would be more difficult and you may be limited as to what the device can do, plus if you do not remain vigilant you might have wet toast. |
Imagine if you had two cars and two custom fit garages. It may be more work to get to the car you want to drive that day, and you will have to clean two garages. |
|
Domain |
Uses the top level domain. Using a single shared site preserves a canonical URL, avoiding redirects. Simplifies the sharing of the web addresses.
|
Uses the top level domain but inside a "mobile" folder. The mobile site does not need its own domain name.
Being inside a folder does not have any adverse affect on SEO, however, you may want to setup canonical code or the "Vary HTTP header" for the mobile site in the robots.txt or .htaccess or using PHP. Use great care when editing these files!! This is also called Dynamic Serving by Google. Read more... Pretty complicated huh? Hopefully Google will simply add the function to Google Tools soon and you can skip all this nonsense. It already includes "Set your preferred domain" so why not add "Set your preferred mobile domain". If you use a separate domain name for mobile then the above canonical settings are not needed. UPDATE 5/16/15: We did some mobile and desktop test searches and found that the Google update works exactly as expected for sites with a mobile site inside a folder. The top level sites listed high on desktop searches and the sub-sites in the "mobile" folder listed high for mobile searches. We did not use any special scripts or change any server files and Google is smart enough to know where the mobile site is for ranking. UPDATE 11/3/15: One of our clients contacted us for help with getting their mobile site better listed using one of our desktop sites with a mobile version. We made a few suggestions and in smartphone searches Google added a "sitelink" in their results and automatically named it "Mobile Version". This indicates that Google now recognizes the mobile version without the use of any special scripts or server side configuration. See support for Improving Your Mobile Version Google Listing. |
|
Future considerations |
If you plan no major design or layout changes this type of website should be compliant for many years. |
As a website is updated over many months and years, typically the site will include many more pages and more design elements on both the full site and sub-site. At any time the responsive mobile sub-site can be moved into the top level hosting folder and become the main website. |
|
Our findings |
In a test website we were able to simply make some fonts and tap targets larger on an older website (using Media Queries with a breakpoint) and it passed the Google mobile friendly test. Just because a website is responsive does not mean it will rate highly at Pagespeed Insights. Loading speed can be a factor. |
Google Pagespeed Insights rates a webpage low for even medium size images, but may still rate the site highly for user experience. Our test used a site with 11 small images (50 x 50 pixels) and 1 medium image (700 x 234). It rated a 59/100 for speed and 99/100 for user experience. |
|
Best choice if... |
Best for websites that do not include a lot of page text, many products, or require large tables of information. |
Best when you want to target desktop computers and mobile devices separately. |
|
SEO special considerations |
Although good for SEO, this type of design does not allow for as much page text unless you plan to hide areas for mobile. Long pages of text are unreadable on mobile. Keep in mind that most people "scan" webpages looking for specific information. |
Google has made it clear that relevant content on a website is good for SEO. With this option you can include more text on each desktop page, and optionally, you can use more condensed page copy on the sub-website. This allows for much more content to be added to the website. |
|
Conclusion |
While many think that responsive is the best solution, there are a number of drawbacks, most specifically the difficulty of updating and adding new elements. If you like the design you purchase and do not plan to change the site layout, then this is the best choice. This also is a good choice for experienced webmasters and new users that want to learn about this style of design.
✓ Good for small simple sites. ✓ Less webpages to maintain. ✓ Simplifies the web addresses. ✗ Code is complicated. More prone to errors. ✗ Slower to load. |
If you like to add new elements to your website and change the design layout, or you want to target mobile and desktop separately, a full website with a mobile sub-site version allows for much more freedom of design. You will be maintaining extra webpages with this option. ✓ Best for larger and complicated sites. ✓ Targets specific devices. ✓ Better user experience so better for SEO, ✗ Extra webpages to maintain. ✗ Automatic redirection script may be required. |
Web TemplateSolutions | ||
| ||
Responsive designs will "flex" the webpages, fonts and images to fit many different types of mobile devices, tablet, smartphones and PC and Mac desktop and laptop computers. This allows for an optimal viewing experience no matter what type of device or computer the site is being viewed on. Responsive design uses Media Queries and other CSS and HTML code to detect the width of the web browser. Extra code is included with the website so it can render the pages differently for the different device widths.
This type of website design offers the benefit of having only a single set of webpages to work with. Although very trendy at the moment (for good reason), responsive designs are usually more complicated to work with, include more code than a standard website (in some cases more than double), load more slowly and require great care when updating so as not to interfere with the responsiveness of the webpages. When editing the css style code used for the layout, colors and fonts, the classes may need to be edited in multiple places depending on the number of Media Queries detection "stages" that are included.
Read more details...
A mobile sub-site setup will include a full or top level site designed specifically for PC, Mac and desktop computers (and optionally tablets), and a separate second or sub-website for mobile viewing. The mobile site may be in a folder as a subdirectory of the main website, or it may use it's own domain url, or it can optionally even be mixed in with the top level site. A visible icon or text on the full site will include a link to re-direct smartphone viewers to the mobile website. Optionally automatic detection re-direction can be included using CSS, PHP, ASP, CGI, jQuery, Javascript or any other web scripting language.
Dedicated mobile version websites offer the benefit of having a sub website that can be tailored specifically for smaller device screens offering a better user experience. The major drawback is that webmasters will need to maintain and update extra webpages that are included specifically for mobile viewing.
Read more details...
Step by step adding a mobile version
This option can be used on older websites and involves adding some responsive Media Queries CSS code along with increasing any linked image sizes (tap target sizes). You basically update any non-responsive website so when viewed on mobile, through the magic of css, your website fonts increase in size, menu buttons get larger and/or some may hide to slim the menu. Other non mobile friendly elements may also need to be hidden using CSS.
This is a type of "reverse" Media Queries whereas instead of the site getting smaller for mobile, some elements get larger for mobile so the full website can be legible on all devices. With this design style it is important to NOT include a viewport meta tag. If the font sizes and webpage layout are balanced properly this type of design can pass all Google Mobile-Friendly Tests. Generally this will require font size changes in the css, making linked images larger or hiding them, and quite a lot of testing and re-checking in the Google tests. See "Responsive Solutions" in Updating for Mobile.