updated: January 28th, 2007 / Ross Johnson / 8 Comments

Should you create a mobile specific page, and how?

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" "http://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.

8 thoughts Should you create a mobile specific page, and how?

  1. Pingback: Scailay.net » Adaptando nuestra web para visualizarla en móviles

  2. Thank you for the tips, Ross. I’m ganna do a mobile-specific page tomorrow!

  3. I’m working on a service that allows publishers to offer a mobile version by automatically adapting their content to work on mobile devices. It’s meant more as a very low effort way to get mobile content up and working, but for folks who do want to take the time to customize the mobile version we provide ways for them to provide a mobile stylesheet. We also swap in mobile advertising for folks who want ads on their mobile pages.The service is called Mowser, and information for site owners is available at http://pub.mowser.com.

  4. the information was good and i dont whether can be used for my blog and also if u provide something like free mobile web page creation then it will be great.

  5. to actually detect what mobile browser and mobile handset is trying to view your site, you can use a service such as handsetdetection.com

    It also provides screen size and device capabilities – in the instance that you are looking to create specific custom views for individual devices.

    david
  6. I created a Mobile web site
    http://www.mobile.klotzwarehouse.com/

    thank you

    Search the world wide web with the new Google search Engine
    sponsored by Klotz-warehouse

  7. There is a page on Facebook with 18 mobile landing pages in 18 different niches that you can test them out… http://t.co/EEclD8Qi

Comments are closed.

FREE CASE STUDY: 100% INCREASE IN LEADSHow we increased our clients leads by 1000% by using design psychology

Using a process that anyone can use for any industry