Jan 29 2009

Creating Mobile Websites

mobile-web-development

Gone are the days when a separate version of a web site was required to see a web-site. Many 3G Phones, such as the iPhone and Android compatible phones  support rendering of web pages in their full glory (except for Flash on the iPhone). While this creates the richness that one expects when you are surfing at home on your laptop or desktop computer. It can still be difficult to navigate around a large web pages. If you really want to make your website usable on a mobile phone it might be a better idea to go for a mobile version of a website.  Domains are available for mobile websites and  it is a good idea to buy the .mobi domain for your mobile website to host your mobile version of your website to show you are really serious about providing mobile content.

Mobile phone browsers  support two languages:

WML (WAP) – a form of XML – quite old, good for old phones. I mean really old phones. If your phone is less than six years old it should be okay for XHTML-MP.

XHTML-MP (WAP 2.0) – good for modern phones – easy to create content from existing website a cut-down version of  XHTML. To specify the document is to be read on a mobile device, one of the following doctypes is used:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

The biggest problem with mobile web-sites  is displaying the website correctly given the large number of different screen sizes that exist on mobile phones.  Common screen sizes include 128 x 160, 320 x 480, 176 x 220 and 240 x 320.

Some browsers do a good job of resizing web pages to fit the size of your mobile screen. Opera for example, can automatically re-order the elements of a page to fit the width of a screen. WURFL is an XML configuration file which contains information about capabilities and features of many mobile devices. Using the WURFL PHP class, the XML can be parsed and appropriate action taken from the user agent string.

Accessing Mobile Stylesheets

<link rel="stylesheet" type="text/css" media="handheld" href="mobile.css" />

Coding is pretty much the same for as for your normal website but the way in which you handle resizing and input for forms should reduce the amount of typing as far as possible.

Detecting the mobile phone can be done using a php script like the php detection code or use a free third party service to detect the mobile device and send back the information about the model and specifications of the mobile device that is accessing your site. This information can be used to server the correct CSS template or change what is sent to the device.

Testing Mobile Websites

We usually test web pages to make sure that they work in Firefox, Safari, IE 7 and IE 6.5. On mobile devices it is difficult to know which mobile browser your users will be seeing the site on. One solution is Adobe Meermeer (a corruption of ‘mirror mirror’) as an online service or extension to Adobe Dreamweaver CS4. Alternatively, there may be a mobile phone emulator for your model of phone.

Useful Resources

Sir Pumpkin Longshanks
Programmer, Research and Development

Tags: , , , , , , ,
Posted in Development, PHP, mobile | 2 Comments »

2 Responses to “Creating Mobile Websites”

  1. Hi,
    I have issue with Opera 9.6 on Windows(vista) PC, we have mobile version of our site.
    when i check through Opera 9.6v on windows(vista) PC it taking me to mobile version not to the regular website. we using ASP code to target mobile browser.
    the rest browsers(Firefox,ie8,ie7,safari)works well.
    can you / any suggest me the solution..

    thanks in advance

    By vinod April 2nd, 2009

  2. I would use your asp code to detect the user_agent and then redirect to the correct site accordingly.

    By Sir Pumpkin Longshanks April 2nd, 2009

Leave a Reply