There exists a wide range of mobile device user agents (browsers), each rendering markup in different ways. The choice to use WML, XHTML Mobile Profile, XHTML Basic, or cHTML can be an overwhelming decision, to say the least.
All mobile web development strategy must begin with an understanding of the target audience and what they want from a site or app, and what the contextual relevance of such a site or app is, what is relevant to the users and the tasks, the problems, and the needs, the users may encounter while being mobile?
WAP 2.0: An XHTML Environment
WAP 2.0, XHTML Mobile Profile (XHTML-MP) is generally the preferred mark-up language, with mandated backward compatibility for WML.
Nearly, all devices today are WAP 2.0 devices with XHTML Mobile Profile, which will be familiar to anyone who has worked with XHTML Transitional or Strict is the official mark-up language for such devices.
Finally, because XHTML-MP is a subset of XHTML, initial testing and validation are done within most desktop browsers. Thorough, final testing will certainly need to be conducted using actual devices, but one may test on the desktop initially to see if the mark-up renders correctly and semantically.
Design Strategy
Opt for web standards and a flexible layout and then with the reference design and adaptation rules in place, the final strategy builds flexibility into the mark-up through the use of generic, standards based XHTML and CSS. In practice, this means creating mark-up that uses the tags and structures inherent in HTML (i.e. headers, paragraphs, lists and divs) to define the structure of the page. The immediate benefit—any browser that can read HTML will be able to display your content and will assign it with (albeit rudimentary) visual style. Given the vast number of mobile devices, this benefit cannot be underestimated as it ensures your content will be accessible to a large number of users without too much higgery-jiggery on the part of developers. One will then be in a great position to progressively enhance the design for different device groupings through the use of browser and/or device-specific CSS, graphics and scripting.
The BBC web site is an ideal example as it shows how simple it can be to combine clean mark-up with well conceived styles and strategic editorial decisions to achieve a great experience on a wide range of devices. Ultimately, the design, adaptation and editorial choices will be based on many factors including the budget, target audience and the functionality of the mobile web site. In the end, it’s all about striking a balance between the creation of a well optimized, fast-loading site and the delivery of great, targeted content to the users.
Development Strategy
A mobile-optimized site addresses first how content is accessed and second what it looks like. In other words, it means context before aesthetics, function before form. Pages are leaner, which means users are spared excessive bandwidth costs and generally enjoy a faster browsing experience.
The development follows the W3C’s Mobile Web Best Practices 1.0 document.
ASP.NET version of HAWHAW can be used in creating such mobile website.
Testing Strategy
There are almost 30+ different mobile browsers and many more. With these kinds of numbers, it is highly impossible to test the Web site across all devices? What can be done is test the site on at least one device from all popular manufacturers, and on as many of the mobile browsers as possible. This will give a good idea of how the site works on different devices and will also help in resolving issues. The catch is in making sure that there is access to all of the necessary devices and mobile browsers. Testing is usually possible in one or two physical devices – not enough to adequately test on but emulators can be used instead to simulate testing on the real device or browser. The benefits of this approach are many-fold:
· No data browsing charges are incurred, as all browsing is performed via your standard Web connection
· Quicker access to devices – starting an emulator is faster than switching sim cards and rebooting devices
· Provides access to a potentially large number of devices/browsers – the number of devices is only limited by hard disk space and the number of emulators that can be found
· Inexpensive – many emulators are available for free
Fortunately, Mozilla Firefox supports some great extensions that can make testing of mobile sites a piece of cake. Firefox is probably the best browser out there for mobile Web site testing. To make Firefox imitate a mobile device, the following are required:
· The Firefox Web browser (obviously)
· The Modify Headers add-on
· The User Agent Switcher add-on
· At least one mobile device user agent
· A UA Profile HTTP Header
After the add-ons have been installed, Firefox is ready for mobile site testing.
Mobile websites can be developed for the following devices:
|
Apple (iPhone)
|
|
|
Blackberry
|
BlackBerry® World Edition™
BlackBerry® Tour™
BlackBerry® Storm™
BlackBerry® Pearl™
BlackBerry® Curve™
BlackBerry® Bold™
BlackBerry® 88(00,20,30)
|
|
Palm
|
Palm Pixi
Palm Pixi Plus
Palm Pre
Palm Pre Plus
|
|
Android
|
Nexus One
Passion / Bravo
GW880
Xperia X10a
Eve / GW620
Eris / Desire
One
Streak
Calgary / Motus
Liquid / A1
Moment
Behold II
DROID / Milestone
Archos Phone
CLIQ / DEXT
O1
Spica / Galaxy Lite / i5700
Pulse
Mini 3i
Sprint Hero
Tattoo
Hero
Galaxy / i7500
Magic / myTouch 3G
Dream / G1
|
|
Samsung
|
Android Phones
Windows Phones(z105)
|
|
Nokia
|
All N Series
|
|
LG
|
Android Phones
|
|
Motorola
|
V3i
|
|
Sony Ericsson
|
K750i
|
Mobile websites will have to be compatible across the following mobile browsers:
·Blazer ·Bolt browser ·Deepfish ·Firefox for mobile ·IbisBrowser ·Internet Explorer Mobile ·Iris Browser ·JOCA ·Konqueror Embedded ·MicroB ·Minimo ·NetFront ·Obigo Browser ·Opera Mobile ·Pixo ·S60 web browser ·Safari ·Skyfire ·Steel ·Teashark ·ThunderHawk ·UCWEB ·uZard Web ·WinWAP