I wanted to recap a presentation that I did a few weeks back on HTML5. As you guys might have heard, 60% of mobile applications will be web based applications by 2015 and 60% of developers will start using HTML5 by end of 2012. So, it would be nice to establish some ‘rules of engagement’ since the mobile is a big wide world.
Form factor — there are a zillion mobile devices in the market, each with its own device size and screen resolutions. So when designing a mobile web based app, these attributes need to be kept in mind. Developers guide such as Android might be a good place to start to figure guidelines which group screen types by pixel density and screen size. And, always validate your designs on the actual target devices and not emulators. Also remember, If you’re testing on your desktop browser, then you can’t test touch.
Browser Compatibility — Not every browser is going to correctly render HTML5 especially when it comes to animations and form validations. CSS3 3D transform animations are not supported across all browsers. Device compatibility tests can be performed by navigating the site on the target device. The website detects the browser and runs compatibility checks on a lot of the new HTML5 elements and tells us whether they are supported or not.
Frameworks — Before you jump into developing an app, it is good to define the objective and if any of it is possible some of the available HTML5 mobile development frameworks like JQuery, Sencha, HTML5 boilerplate etc.
Touch events — Some touch events which work on Android won’t work on Windows. Different types of frameworks capture different touch events. You should be able to navigate to the respective framework websites and check out which events are supported.
Screen Orientation — As you know would be a huge consideration when designing a mobile web app. You definitely need to consider both portrait and landscape mode mainly because there is no easy way to lock the screen orientation. Also, the elements that might look good in portrait might not look good in landscape, so you need to test both.
Screen real estate — This is something that you constantly need to think about during the design process. Some of the things that you need to consider are the font size, graphical assets, interactive elements etc. A good benchmark to start out with for text size is “medium”, this will render as readable on the majority of current devices. A nice way to maximize your screen real estate is to get creative.
HTML5 forms – When designing a highly interactive app you will inevitably run into the need for forms. HTML5 offers better support for forms and validation, but just adding instant validation to your forms will only enhance the experience so much, you need to think beyond just the “smart validation” and think about actually inputting data into the form on the target device. HTML5 offers a variety of new form attributes as I’m sure you’ve heard, some of these include color, date, email, month, tel, time and url. These attributes allow you to better control what input method the end user sees when a field has been given focus.
Notifications – While notifications are not specific to HTML5 you will need to deal with them. Screen size and real estate as well as the importance of the task the user is currently performing are what you are going to want to watch out for. When creating notifications the importance of the notification should dictate how you notify users. When trying to decide how/when to notify make sure you mind what the user is doing, if its something important make sure the alert is front and center. If the task is less important make the alert more subtle, E.g. inline messages. Frameworks can offer a way to stylize pop up notification windows. That being said, most devices (if not all) will recognize native pop ups.
Compatibility with other devices – And finally the last major consideration when designing an html5 mobile web app is compatibility with older devices. What are you allowing the user to do? Does it make sense to allow users with less advanced devices to access the same content? How important is the task?
What I’ve found is that: If you want to support older devices you will have to detect what device the user is viewing from, you will probably need to have a separate style sheet for less advanced devices, design for the least advanced device, users who are on less advanced devices may not be as open to performing that task on a mobile device.
