Embracing HTML5+CSS3 for Mobile Website Development

The devices are prepared

The vast majority of smartphones accessing the web today are running some recent version of iOS/Safari or Android OS/browser software. As these operating systems and browsers evolve, they are quickly implementing the proposed standards of HTML5 and CSS3. Recognizing frequent updates and releases to the software, combined with a quick adoption rate for new devices, and we can see how the mobile market is the best prepared to handle these new standards. A quick review of mobile device web traffic for a number of our destination tourism marketing clients reveals that 70-75% of devices are powered by a recent version of iOS or Android, meaning web developers and designers can confidently develop content with these new technologies in mind, such as CSS3 transitions, which can be utilized to present a familiar "native app" style interface smartphone users are accustomed to.

The tools are available

With the first release candidate (version 1.0) of the jQuery Mobile library announced just last week, as well as with Dreamweaver CS5.5 providing HTML5 and CSS3 support (not to mention integrated jQuery Mobile libraries and code hinting), we have at our disposal numerous tools with which to quickly deploy functional, responsive and aesthetically pleasing mobile content.

Using jQuery Mobile as a foundation for developing this new content, we can confidently produce sites that will render well on most mobile devices. The development team behind the library has designed the software with an important concept in mind, termed "progressive enhancement." By starting with a web-standards HTML document, we are assured that even the most dormant of browsers will at a minimum be able to generate the heading, links and basic HTML content presented to it.

However, for browsers supporting HTML5+CSS3, the script dynamically applies style attributes supporting transitions, background gradients, and rounded corners, to name a few. These new styles are combined with a custom page-rendering strategy which uses AJAX to load page content and then animates the new page load using a variety of pre-defined transition types, such as fade, slide-left, slide-up, or pop.

The result is a rich, functional interface with which to frame our clients' specific mobile content needs, allowing our development team to focus on advanced content such as location based logic, interactive mapping/directions, social media marketing integration and other custom database driven content.

Exciting development possibilities

Here are some of the areas we're excited about ramping up with HTML5+CSS3 development:

• Fully accessible, device-independent e-commerce solutions
• Conversion of HTML5+CSS3 sites to "native apps" using tools such as Phonegap
• CMS admins – functional, intuitive interfaces for our clients to manage and control their web content from anywhere
• Geo-located logic - tailoring the content and presentation of data to site visitors so it is most relevant.

Setting the stage

By embracing the future of web standards now for our mobile site development, we are preparing for rapid and efficient adoption of these standards into our overall web development process. As tablet computing quickly grows, we are seeing a blurring line between mobile and desktop browsing. Our sites must be adaptable, responsive and efficient. Our content logic and presentation can and will be targeted, but the devices with which the user is consuming this content have become too varied for us to code for specific device capabilities. All manner of online content must be accessible for users wherever and however they choose to access it. E-commerce sites, CMS admin interfaces, rich media and interactive displays must all render themselves functional and usable.