How to build a mobile Website?
The good news is HTML can be used to design and build your mobile Web site. Here is a step by step guide to doing this:
- To make things easy, you will need Adobe Creative Suite 3 which has Adobe Device Central and Dreamweaver CS3.
- Launch Dreamweaver CS3. From the Create New option, click on More..
- Choose HTML from the Page Type button then publish out with the use of the XTHML Mobile 1.0 profile which can be found beneath Doc Type.
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> - You can now begin to code your HTML-based mobile Website. It is best that you go for a simple HTML design which is more focused on great content than all the other design perks. There are a number of online sources that can help you with the fine details of HTML coding for mobile Web sites. Try searching for these on Google.
Testing Your Pages Using Adobe Dreamweaver CS3
- Once you are done with the coding, you may want to test the mobile Web site you have built. You do not test it within the browser. Choose "Preview in Browser" then click on Adobe Device Central from the resulting menu. This changes your interface from a desktop to a mobile.
- In Adobe Device Central, try to choose a target device (look at the Available Devices panel found on the left of the screen) which through which the mobile cards will be displayed. You have the option to choose them manually, or you can build a custom device profile which contains all the possible devices that you wish to support.
- As soon as you are finished, your code can be loaded and rendered on the devices you have chosen.
- It is difficult to support all the available devices out there. The best solution to keep your mobile Web site as clean and as simple as possible is to allow it to be viewable across as many mobile platforms and portable devices.
- Text entry can be quite difficult. Users prefer to select values from a list of choices, such as radio buttons or lists.
Check a Web Page for mobile-friendliness: W3C MobileOK Checker http://validator.w3.org/mobile/
Mobile Web Design Tips & Techniques:
http://www.cameronmoll.com/archives/000577.html
http://www.webpagefx.com/design-build-mobile-web-site.html
http://msdn.microsoft.com/en-us/library/aa458771.aspx
http://www.w3.org/Mobile/
iPhone Compatibility Tips:
http://www.lassotech.com/TotW_20080222
http://blog.prasannavignesh.com/prasanna/blog/post/2008/02/14/iPhone-Compatible-Website.aspx