Mobile Web Applications

Recently a colleague of mine was discussing developing mobile apps for smartphones when I recollected my past engagement where I had to architect a digital coupon system running on web and mobile platforms with single code base. It presented quite a challenge given that your web apps are content rich and mobile devices had limited real estate and each device had different ergonomics.

Here are some lessons learnt from my experience -

Before you dive on mobile enabling consumer, read these design constraints and please come up design notes/solutions that will address each one of them.

Web and mobile are different media serving different requirements and different fields of application. Web mobile will be targetted towards 3 segments: Feature phones, smart phones, PDA's

• Feature phones usually come in candy bar, clamshell or slider form. They have a 12-key layout.
• Smart phones share the same features as a feature phone with two primary differences: Its ability to run additional third-party applications and a slightly larger screen. Smart phones typically use a more full featured operating system.
• PDAs often include QWERTY keyboard and stylus in place of the 12-key layout on normal phones.They also feature a larger screen.
  

Design constraints:

• Mobile browsers may stop scrolling vertically on pressing the down key when a link appears in the currently viewed section of the page.
• Some user plans may be tied to data bandwidth and therefore keep the data traffic to a minimum.
• Mobile devices have limited memory, limited CPU and run on slower networks than desktop computers, running scripts on client side will drain the battery. Keep such stuff to a minimum.
• Mobiles do not support popups/frames/etc. Not all mobiles support scripting/styling. Identify mobile device and then render pages as per device support features. Page Design will need to take account for diff. screen sizes, devices.
• The W3C suggest that all the images on a page should total less than 10KB. Keep page size to less than 25kb.
• You should consider how your page will render when the images are not available
  

Rules to Follow:

• Use HTML Validator firefox extn to validate markups for every page.
• Use style based layout instead of tables to produce pages. Page layout will be split as header, content. while you should state the dimensions of your images (width="120" height="107") when designing for mobile devices, don't state the pixel units. Keep dimensions dynamic that will be supplied from, say a DeviceBean.
• Use accesskeys to links and limit links to less than 10. Navigation can be performed using keys instead of browsing.
• Use Wireless CSS
• Adopt a short URL
• Do not mask user input when entering a password.
• Read http://www.w3.org/TR/mobile-bp/