Mobile Web Page Development Tutorial – Part II

In part 2, we will show an example of using CSS with the XHTML MP. It will be a simple example, and it can be expanded to a more sophisticated example when we review other CSS tutorial on the web. If we know how to use CSS for normal web page, we are 99% ready to use CSS for mobile web page. Let look at the three following steps.

Step 1 – add a link statement.

We want to add a statement to our HTML page as follows

Step 2 – create a CSS file

Next, we need to create a CSS file and name it as xmlmobile.css. Let’s us add just a simple H2 style.

Step 3 – upload to the website, validate and test the revised page

This time we will use www.ready.mobi to test and validate our page. This is a mobile page testing tool offered by dotmobi.com. The test result is shown as follows

Note that you can view the page through several emulators

Recap

In the part II of this tutorial, we showed an example of CSS, to be linked from the mobile web page. We also use www.ready.mobi site to test our mobile web pages. For CSS syntax for mobile web pages, we should visit
CSS Mobile Profile: http://www.w3.org/TR/css-mobile/
CSS Comparison on mobiforge.com: http://mobiforge.com/designing/story/comparison-css-21-css-mp-wcss-and-css-level-1

Click here to go to part III of this tutorial. We will look at back-end processing for mobile web forms.

Hubert Huynh

Add your Biographical Info and they will appear here.