Templates That Include Mobile Sites

Support for Allwebco Design mobile friendly dual templates

Support and setup info for Allwebco desktop with a mobile version templates.

Desktop With Mobile

Mobile with desktop dual templates include a mobile version website inside a folder called mobile in the download. Some files will be linked between the two websites.

Setting up the two websites
Your desktop or "full" website, and your mobile version website each include a separate HTML help page with step by step instructions. The mobile site is located in the "mobile" folder. It is best to do the steps on the "full" site "help.html" first.


Before you start
For some tips to keep your site mobile compliant see the following:

Mobile overlay & redirection
If your template includes mobile overlay detection review the following:

SEO and linking
It is very important to include a visible link to your mobile website on your main or "top level" desktop version website homepage so search engines can see and index all your mobile webpages inside the "mobile" folder. Include this link even if you are adding automatic redirection. The link can be either a text link or a linked image or button. The code should be something like the following:

<a href="mobile/index.html">View Mobile Version</a><br>

See also Improving your mobile version Google listing


SEO and duplicate content
In the mobile website you may use paragraphs and text copy from the full website. Optionally you can re-write this content for the mobile pages, however, the duplicate content in the mobile site will cause no issues in search engines. See the following support video at Google for more info on duplicate content and what type may cause SEO issues.

How does Google handle duplicate content?


CSS problems, mobile site not updating
If you change some styles in the full website and the mobile site is not updating, look for classes of the same name in the "style-mobi.css". These classes may be overwriting the full site css on the mobile version pages. Make a backup of this file if you plan to edit the classes.


Social icons folder variable
In templates that include a mobile website inside a "mobile" folder, there is a variable for the social links icon folder "var socfolder". This variable is located in the "javascripts.js" for the main website and in the header.js for the mobile website. This variable is used in the "social-links.js" so both the mobile site and full site can find the icons folder.


Adding Auto Mobile Detection
We offer a jQuery automatic mobile redirection script to detect smartphone devices and automatically redirect smartphone mobile device visitors to the "index.html" inside the "mobile" folder. This script does not redirect tablet viewers.

See jQuery automatic mobile redirection

There are many free open source scripts available. Try a search at Google for "website mobile detection open source PHP" or "PHP mobile redirect".

A PHP or jQuery script are the most popular type to use and will work with most hosting companies. If you go with PHP you may need to check with your hosting support to make sure PHP is installed in your hosting account.


Overlay Not Working as Expected
On some mobile devices in some orientations the css overlay may not popup. See CSS Mobile Select Overlay for details on this issue.