Adding a Mobile Version Website
Updating an older site with a mobile sub-website
Add a mobile specific sub-website:
With the popularity of smartphone use for web viewing, you may want to add a sub-website for mobile phones and devices, specifically tailored to these types of web visitors. Many sites like Amazon and ebay include mobile versions of their websites. Below is some general info and options for this type of setup.
Smartphones and mobile devices do not render webpages the same as desktop web browsers. They have smaller viewing screens, less resolution, some do not support Flash applications, and most will load bloaty code or large, and a large number of images slowly. Here are some options to better accommodate mobile and smartphone users on your website.
Redirecting mobile viewers:
- Addon: Mobile site upgrade plugin available for any website, no matter what version of HTML it's using or how old it may be. DIY upgrade, includes step by step instructions and support. To order this add-on see Mobile Upgrade Add-On.
- Custom built: Allwebco Design can custom build a matching mobile version for any existing website. See Custom Built Mobile Website.
- Use a responsive template: Allwebco Design Corporation offers a selection of Mobi-Hybrid® website templates that can be used to setup a second site for mobile users. Our Mobi-Hybrid® website templates rate as "Awesome! This page is mobile-friendly" in the Google Mobile-Friendly Test.
Note: Place the mobile website template inside a folder in your hosting upload area. You can name this folder "mobile". Link to the mobile homepage that's inside the folder from your top level desktop website homepage.
Once you have the mobile sub-site setup inside your "mobile" folder you'll need to redirect smartphone visitors to the mobile version. Here are some options:
Mobile version or responsive?
- Mobile Redirect Option #1 (Link): Add a visible link to the mobile website inside the "mobile" folder from your top (full) website pages (homepage or index and site map). Be sure this link or image link is large and easy to read on a mobile device. You can use the following link code:
<a href="mobile/index.html" style="font-size: 25px;">View Mobile Version</a><br>
Note: Add a link similar to the above to your top level site homepage even if you use one of the redirection options below.
- Mobile Redirect Option #2 (Overlay): Use a CSS mobile detection overlay website add-on to allow users to click to get to the mobile website. Use this option as well as option #1.
- Mobile Redirect Option #3 (Script): Available free with any Allwebco web template purchase is an automatic smartphone redirection add-on. Optionally, if you search at Google, there are many PHP automatic detection scripts available that will automatically redirect visitors to another area on your website. These scripts are usually built in PHP.
Allwebco hosting and most other hosting companies do include PHP already installed.
- Mobile Redirect Option #4 (Intro): Use a free "select full or mobile website" intro page to allow users to choose the mobile website.
See Intros 1 | Intros 2 | Intros 3
- Mobile Compliance Option #5 (Update): Rebuild your website using a new web template that includes a mobile sub site or is a responsive design.
What's the better choice for a new website setup? A dedicated mobile website specifically designed to load quickly on smartphones, or a responsive design that caters to all devices and computer types? See mobile or responsive at mobi-Hyrbid.com
so you can decide for yourself what style of design will best suit your web development project.
Mobile site recommendations:
When setting up a mobile website, the following are some items to keep in mind.
- Keep your images small in size and kb size. The recommended page size for a mobile site is under 1/2 meg.
- Any items like videos, Flash animations, and other bloaty scripts should not be added to the mobile homepage (index.php or index.html) to maintain compatibility and fast load time on the most devices and computers.
- Either give your visitors a choice to view your mobile area or add a detection script for mobiles.
- You can test your website to see how "Mobile Ready" it is at Google Pagespeed Insights.
Once you have your mobile site setup you may want to test on as many mobile devices as possible. Below are some popular platforms to test on.
Some popular mobile operating systems are:
Some popular mobile browser software is:
- Windows Mobile
- iPhone platform
- Palm OS
- Mobile Linux
- Symbian OS
- Safari for iPhone
- Android browser
- Opera Mobile
- WebOS browser (Palm devices)
- BlackBerry browser
- Internet Explorer Mobile (Windows Mobile devices)