Blog de sonicbyte

Mobile web design with HTML5, CSS3 y Javascript

To be or not to be…¿Native version or HTML5 design for our new mobile Web site or application? That is the question.

Sorry, bad joke….But is an important question that you should ask before undertaking a project like this.
Each option, like everything in life has its pros and cons, I’m not planning to go too deep into the native applications subject on this post, but I’ll give you a brief introduction.

Native application is the one that is specifically designed to run on that device’s operating system.

This has its advantages:

• Access to device hardware
• Ability to work off-line (though thanks to HTML5 as I’ll explain later, it is now possible to achieve similar functionality.)
• Speed and performance
• Monetize application (For instance if you want to sell it thru apple’s appStore)

These advantages are of course important, but require a specific development for each platform (Android, Iphone, Symbian, Blackberry, etc) sometimes even more than one, and an investment of hardware resources, time and development knowledge.

On the other hand if we choose HTML5, CSS3 and Javascript as development options we find a totally different path. If we use some CSS3 rules and take advantage of the new features of HTML5 + Javascript we can control the behavior of our site or mobile phone application and provide a pleasant user experience.

With Media-Queries we can check a few universal parameters and evaluate them on any current or future device (there are many more, but we only need these):

• Browser width and height
• Device width and height
• Orientation of the device (Example, to evaluate if an iPhone is in landscape mode or portrait)
• Device screen resolution

Example:

@media all screen and (max-device-width: 600px) {#container { width: 550px;}}

With this simple CSS3 rule we are saying that if the device that loads our page has a maximum width of 600px will then apply to the div “container” a width of 550px. This way we can control how we view our web site or application in different resolutions not only for mobile phones but also on desktop monitors, notebooks and netbooks with minimal effort.

Here you can see a practical example of a web application we developed for a client recently called Tivifan in which we use this technique, and you’ll see how the design adapted to different devices:

Desktop monitor: This site is the “normal” view on a monitor with high resolution.

Ipad portrait mode: the site is displayed correctly, but without sidebar, giving more space and comfort to main content

Ipad landscape mode: By having more space, it shows automatically the sidebar and more space to interact with the main content.

Android device: At lower resolutions like the example below, all layout is modified. Navigation, logo and forms are smaller, minimalist style, no sidebar, etc. Although less attractive than other options the site is fully usable and most important, content is still accessible.

You can try it yourself from here by simply manually resizing your browser.

Other interesting methods: I wrote earlier that one advantage of native applications was the ability to work off-line, well, on HTML5 is also possible, thanks to its ability to save data locally. One option is to use localStorage. Lets set some fields in what it could be described as a simple database browser. This lets you retrieve a value, even when the user closed their browser and reopened it later. Try it and play online with this example created with HTML5 and javascript from the following link: http://jsbin.com/alagur/3/edit

This of course was just a glimpse of the potential of HTML5, CSS3 and Javascript to develop web sites and applications for mobile phones.
More coming soon …

More info about Media Queries and localStorage:
Media Queries
LocalStorage en Quirksmode