TAKEAWAY: It seems to be the indispensable item of discussion these days: the importance of HTML5.
The ever-growing popularity of HTML5
It happened again yesterday as we conducted a one-day workshop to kick off the tablet project at Vienna’s Kronen Zeitung.
A few minutes into the discussions, there it was, that often mentioned reference to HTML5 and how it can “make things better for the project and for the users.”
This week, The Wall Street Journal Europe presented the topic of HTML5 to its readers, in the Business & Finance section.
The article states that “a year and a half after Steve Jobs endorsed it in an unusual essay, a set of programming techniques called HTML5 is rapidly winning over the Web.”
And winning it is, to the point that Adobe, who earlier rejected Jobs’ arguments against its Flash, has now announced last week that it would no longer develop new versions of Flash for mobile browsers.
We see Steve Jobs smiling behind his iPad in the clouds.
Also smiling, many of us down here, and, especially, web designers who now have more options for typography, offline storage, and multimedia (thanks to HTML5 and its lesser-known counterpart, CSS3). We are likely to see a very vibrant and positive evolution in the design of websites as a result.
Advertisers, too, are excited about what HTML5 offers them: more ads with visual pizzazz and special effects now possible in mobile apps.
Happy also, those users who have not been able to play their favorite Flash-based games on their iPhones and iPads.
Welcome, HTML5!
What, really, does HTML5 mean?
Although many are familiar with a few of HTML5’s benefits, as a technical subject it is useful to have some solid information on what it actually means and can do. Our art director & project manager Reed Reibstein provides some pointers on HTML5 and CSS3.
“I like the Mobile Bits guide to HTML5 from pinch/zoom. It describes in clear language why HTML5 is an improvement and how to use it today for mobile projects. Most helpfully, it describes HTML5’s key features: “native audio and video support, offline storage, canvas, location services, inline document editing, [and] enhanced form control.” One important item missing from the list is structural semantic elements. With HTML5 we can describe websites in their code as having navs, articles, headers, footers, sections, and asides. This is a feature largely invisible to most visitors but potentially important to coders and users with vision impairments.
“A number of delightful visual elements are part of CSS3, allowing designers to create sites that rely less on static graphics or Javascript and more on the basic building blocks of the web. The new book CSS3 for Web Designers by Dan Cederholm describes the core CSS3 properties we can use today. I’ve chosen some highlights below:
border-radius: round an element’s corners
text-shadow add a shadow to type
box-shadow: add a shadow to an element
opacity: control an element’s transparency
Media Queries: tell the user’s browser to make certain changes to the CSS depending on their screen size and other dimensions; in practice, this allows for responsive sites that adapt their layouts to different devices
Web Fonts: allow the use of fonts beyond those installed on a user’s computer; leading webfont vendors include Typekit and Webtype
Transitions: cause an element to visibly change from one state to another, allowing for text to fade-in, images to fly across the screen, and many other effects
Transforms: create more advanced animations, such as scale, rotate, skew, and translate
“The techniques mentioned above will work right now in modern browsers. And in many cases there are workarounds for older browsers as well. So if one of these features seems useful for your website, go for it!”
Of related interest:
Chrome Web Store, HTML5 and the iPad: symbiosis at its best
http://www.engadget.com/2010/12/10/chrome-web-store-html5-and-the-ipad-symbiosis-at-its-best/
These Are The HTML5 Apps That Scare The Pants Off Apple
http://www.businessinsider.com/html5-apps-2011-8#ixzz1dsuwUL6c