Mobile Web Pages Development Tutorial – Part I
If we know how to create web pages using XHTML, we can comfortably create web pages for mobile browsers. For part 1 of this tutorial, we are going to create a simple home page for a mobile website. At the end of part 1, we will recap before we move to part 2. In part 2, we will incorporate CSS as part of a mobile webpage.
A few tools we will use in this part one are as follows:
- Opera Mini Simulator, used to test our simple mobile web page. Opera Mini Simulator is popular mobile browser from Opera
- A text editor, (to write our web page)
- Mobile Profile Validator to validate your XHML Mobil Profile 1.1
- FileZilla, to transfer our simple web page to our website.
Step 1 – Develop the mobile web page
Use a notepad and create a page name index.html. Enter the following code:
Step 2 – Upload to our website
Use FileZilla to upload to the website of the mobile web page.
Step 3 – validate the web page
The W3C Validator of XHTML Mobile Profile is at http://validator.w3.org/
Simply enter the URL of the mobile web page and hit return. The result could be shown as follows
Step 4- View the web page with Opera Mini Simulator
The Opera Mini Simulator is at http://www.opera.com/mini/demo/. The simulator allows us to simulate the Opera Mini browser of a mobile phone.
Enter the URL of the mobile web page. See image below
Next we press OK. We would see the web pages as follows: