Mobile Web Page Development Tutorial Part I

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:

codeSample

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:

simulator view

 

 Click to go to the next part – part II – Mobile Web Page Development Tutorial

 

Hubert Huynh

Add your Biographical Info and they will appear here.