Blog
Should you create a mobile specific page, and how?
Ross Johnson
With the release of the iPhone, the mobile web is expected to take off. Even though the iPhone has it’s own built in browser that is likely to be more capable than those browsers being used today; many users will begin browsing the web with out a capable browser simply due to the mobile web buzz.
Further, you must keep in mind that users are often paying for ever byte that they are downloading. Simply assuming that your site will be usable on a small device could leave users angry at painful $5 it cost them to simply download it.
Finally those browsing your web site are unlikely to be looking for the same information as their computer counterparts. My company for example is likely to have mobile users loading up the site to get directions, or our phone number rather than learn about our services or browse through our portfolio. By making a mobile specific page that caters to those specific needs we have a more usable and affordable mobile web site.
So the answer is yes, you should have a mobile specific page. There will be a large demand for it, and you want to cater to mobile users much differently than you would computer users.
How do I go about it?
The first step in creating your mobile web page is simply deciding why someone would be browsing your site from a mobile device. For example I looked at my company, and the most common uses would be to find out where we are located or a contact number. If a client was running late, couldn’t find my office, or needed to contact me they would be likely to look up my website on their mobile device.
Most companies will want to stick to this model. The exception would be a retail/service industry that wanted to advertise their great rates or specials, so someone who is shopping around can do a quick price comparison.
Creating the Page
Creating the mobile page is pretty similar to any other webpage. The main difference is the need for a Mobile Specific Doctype.
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "https://www.wapforum.org/DTD/xhtml-mobile10.dtd">
Mobile devices use a stripped down version of XHTML dubbed XHTML basic. It supports most of the common XHTML tags.
It would also be a good idea to add the MobileOptimized meta tag, this lets devices know that the site is designed for the mobile web and doesn’t need to be shrunk.
<meta name="MobileOptimized" />
Keep the graphics, markup and css to a minimum. Remember most users are paying for any and all data, the less they have to download the better. You can use CSS but keep in mind not all browsers support it, another reason to keep things simple.
We will be saving the file as www.yourdomain.com/mobile/index.html.
Need some inspiration? Take a look at my mobile page.
Detecting and Redirecting
Here is the bread and butter of the process. In order to seamlessly support handheld devices you need to detect which browsers are accessing your site and redirect and handhelds to your mobile page.
Luckily Studio Hyperset has us covered with a mix of PHP and VBScript to detect a large list of User Agents and forward them to your mobile specific page. Make sure that you edit the script pages and change the forward to point to your site otherwise you will end up forwarding them to Studio Hyperset.
All you have to do is drop the following code in your HEAD section
<script type="text/php" language="php" src="/scripts/mobile.php" ></script>
<script type="text/vbscript" language="vbscript" src="/scripts/mobile.asp" ></script>
<script type="text/vbscript" language="vbscript" src="/scripts/mobile2.asp" ></script>
You should note that many devices have the ability to change the user-agent to bypass sites which try and block mobile devices. Because of this it is not a 100% effective method, however it is better than javascript alternatives.