Step 1

This page has been put together by following Dev Mobi guide , pages 43-51 of The Mobile Web book and the XHTML MP Tutorial

If you go to View menu and Source or Firefox, View and page source, Safari, View and View source etc, you can see the Xhtml code used for the website. This is the same every time you look at a new web page. A mobile version of the Xhtml code using Xhtml MP compared to this one is as follows

If you want to compare in more detail please feel free to download both files.

If you don't have access to the web on your phone, you can test how the code looks in using the emulators from the list on dev.mobi

Other differences so far between xhtml mp and the xhtml for this site are

• There is a different DocType definition at the top of the page for Xhtml mp and a difference W3C reference
• Some mobile browsers will ignore all meta tags except the meta http-equiv tag
• Access keys - these can be written using numbers instead because of the mobile phone keypad being different to a normal computer keyboard
• You can give lists, images and anchors an "id" instead of a "name" - an id is a unique reference for that particular image or anchor link.
• All formatting should be put in the CSS including image width and height and not in the Xhtml, which is already the case with this website
• You don't want visitors having to use too many keys or continually having to press keys on their phone to try and find letters, so you can add an input mask to the style and specify that it only needs numeric characters and limit it to e.g 10 characters

View the xhtml mp code by going to this web page , select View menu and source. Please note this xhtml mp page does not have a stylesheet written for it yet, so it will look different to the rest of this website.

Writing a mobile stylesheet will be Step 2