Step by Step Adding a Mobile Version Website

Since about 2016 more users access the Internet from mobile devices than from desktop computers, so if your website is not mobile friendly, it may be time to update. If you have an older website that's not displaying well on smartphones and other small device viewing screens, one option is to add a separate mobile version targeting mobile devices. This is called mobile adaptive design. Your current website may display well on tablets, but not on smaller screens. Plus it's not passing the Google Mobile Friendly Test giving you a less than ideal mobile SEO listing.


Solutions: You can optionally re-do your site, however, if your current site is large and you've spent countless hours getting it just right, this may not be the ideal solution. One option is to add a separate dedicated mobile version for smartphone viewers. This option is called an adaptive rather than responsive design (allowing the website to adapt for mobile device screens). Your current site will display on desktop, and your new mobile version will be configured to display when a user visits your website using a smartphone or small tablet.


The following steps are for creating a separate mobile version website in a sub-folder of your top level or desktop website. Optionally, you can place the mobile version on its own separate domain.

Step 1.) Getting Started

The first step to adding a dedicated (or adaptive) mobile version to your website is to create your mobile site. The mobile version can be a responsive design, or something specifically tailored for mobile device display with a screen width that flexes down to 320 pixels in width for the smallest vertical smartphone users.

Although you can create your mobile version webpages from scratch, using a pre-made website template is usually a better solution. The following list of template options are good starting points to use for a device friendly adaptive website update. These are listed in the order of how much they specifically target mobile devices. The lower on the list, the more complex the design is. All choices below pass the Google mobile friendly test for optimum SEO.

Keep in mind that any responsive template can be used for your mobile targeted sub-website.


Pre-Made Template Options:

• Mobile Website Plugin
• mobi-Hybrid^® & Mobile Optimized
• Minisites
• Single Page
• Budget Responsive
• Business Responsive
• View All Responsive Designs

Considerations: Any of the mobile friendly templates listed above are an ideal choice for adding mobile compliance, and will work as an adaptive mobile version on any website. Another consideration is that if your initial template choice is to use a more sophisticated responsive (lowest on the list above), rather than something more specifically mobile, as you update your mobile version over time, you have the option to swap out and make the newer mobile version site your top level website. This can allow you to make your site mobile friendly now by adding a sub-website, with the option of updating your top level website over a period of time, without having to re-do your entire website up-front.

Step 2.) Add Your Content

Think of the mobile site as a separate more stripped down version of your top level website. You'll want to add only the most important information. Smartphone users generally spend less time on a website and make less purchases as shown in the stats below.


US Website Conversion statistics:
Stats provided by www.smartinsights.com

• Traditional desktop: 4.66%
• Tablet: 3.89%
• Smartphone: 1.43%

Although for sites like car repair or a local restaurant, visitors may simply be looking for your contact info. In these cases you may actually have more mobile visitors than desktop users. Consider your business model when deciding on what information should be show on smartphones, and what info should be on your desktop version.


Quick Setup: Add general information about your product or services, contact info and links to your social media pages. Any one of the mobile compliant templates we offer can be setup rapidly with your quick details. You can get the new website started, get listed at Google and other search engines, then expand the mobile version over time. This can allow for mobile compliance on a website very quickly.

Step 3.) How to Integrate the Mobile Version

Once you have your mobile version website ready to go, create a sub-folder in your hosting account. In most cases this new folder should be created inside your "public_html" or "www" folder. Name the new folder "mobile", although optionally you can name it anything you want. Upload your new mobile version into this sub-folder.


Use Caution: In many cases the mobile version website will use the same names for the HTML webpages as your top level, or desktop, website. Be sure you always check that you are uploading into your mobile folder.


Site Location Options: You can order a new domain and hosting package and place your mobile site on the new domain. The redirection scripts outlined below can either redirect to a different domain, or can redirect to a set of webpages inside a sub-folder on your current website.

Step 4.) SEO & Redirection

Now your new mobile version needs to be seen and listed by search engines. Since your new smartphone web pages are inside a sub-folder, they may not automatically be indexed unless you let search engines know where they are located.


Get the Mobile Website Listed:

• Add a plain text link to your mobile version on your desktop homepage. The exact location of the text link is not important. This link is required so search engines can follow the flow of your website and list all pages. The link may appear similar to the following:
  
  <a href="mobile/index.html">View Mobile Version</a>
• If you use a sitemap.htm webpage, add a link to the mobile site to this page.
• If you use a sitemap.xml file, also add a link to the mobile site to this file. If you automatically generate your sitemap xml file then your program should find the mobile version from the link you will add to your desktop version homepage.
• Option #1: Use automatic jQuery redirection. This script application detects smartphones and will automatically send the viewer to the mobile version inside the "mobile" folder.
  
  
• Option #2: Use passive css redirection. This option uses css code to detect the screen width and displays a clickable box overlay on small viewing screens with links to the mobile website. This allows the user to choose what version to visit.
  
  

Step 5.) And You're Done!

Test your mobile version, make sure it's working on mobile and redirects on smartphones in the manner that you setup. Now it's just a matter of time before search engines recognize your mobile version and give it better smartphone rankings. Is there more you can do? Yes, always. Check the following support pages for more reading.


More Reading:

• Improving Your Dedicated Mobile Site Ranking
• Passing the Google Mobile Friendly Test
• Tips for Mobile Compliance
• Choosing Between Responsive or Adaptive

Building Mobile Friendly

Mobile device website viewers now comprise more than half of all web users, thus making mobile viewability an important consideration when creating a new, or updating an older website. Whether you're planning to add an adaptive mobile version dedicated sub-site, or want to upgrade with a responsive design, either choice will help improve mobile compliance as well as SEO. Website layouts created by Allwebco design are built for optimal display on desktop computers, tablets & surface as well as smartphones and other mobile devices.


Mobile Compliant Design Choices:

• Responsive Drop Menu
• Responsive Designs
• Mobile Version Add-on
• Tablet Optimized