Creating Mobile Websites

Sir Pumpkin Longshanks — Thu, 29 Jan 2009 15:53:18 +0000

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:


"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">


"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">


"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

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

http://mobiforge.com/ - independent mobile development community
http://wurfl.sourceforge.net/php/ Wireless Universal Resource FiLe
http://mdevinf.sourceforge.net/
http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes

7 Usability Tips for Mobile Web Sites

Sir Pumpkin Longshanks — Thu, 04 Dec 2008 15:00:44 +0000

Better browsers such those found on the G1 and iphone have contributed to the growth in mobile internet access. What factors should you consider to make your website more usable for users of these mobile devices? When people are using mobile devices to access the web they are more likely to be looking to find information quickly and specifically. You can make their search more fruitful by considering the following points.

1. Screen Size – mobile devices have much smaller screens and so the layout of the site on a computer screen is not usually suitable to display on a small screen. A separate stylesheet can be used to display the content in a different layout. For example:

This will avoid creating duplicate content.
2. Blotted Code -bandwidth on mobile devices is often much more expensive and slower than a standard broadband connection. In such circumstances, data is money, so remove any unnecessary code such as table layouts. Improving the amount of code to content will also improve the download time on mobile devices.

3. Avoid Flash – many mobile phones are still unable to render Flash. It is bad for search engine optimisation and it is poor on mobile devices especially if it is used for navigation. If possible it should be avoided on mobile websites.

4. Search facilities – give your user a search facility placed prominently on the page so they can find the content they need quickly.

5. Navigation to your most important pages should be displayed in a prominent position on the screen so that scrolling is not necessary.

6. Avoid long URLs and Forms – mobile devices are still not great for typing with. Most web enabled phones still use the traditional numeric texting keyboard. Even devices with querty keyboards are still fiddly to use compared to a normal computer keyboard. Most of the time links will provide the URL locations but if you have ever had to type a long URL into a telephone, you will know how annoying it can be. If you have to fill in a form online on a mobile site avoid collecting unnecessary data for the same reasons.

7. Make selected items clearly visible – mobile phones typically have poor control of the cursor and so it is quite easy to select something which you did not intend to. One way of reducing the chance of doing this is to make sure that selected items stand out.

If you follow these tips, then your mobile website will be more attractive and easier to use. It may even increase the revenue generated from your site.

Just Search Labs » mobile

Creating Mobile Websites

Accessing Mobile Stylesheets

Testing Mobile Websites

Useful Resources

7 Usability Tips for Mobile Web Sites