Display advertising for mobile devices has been hard for a long time. Existing display ads were shrinked down, but that didn’t make for a great user experience. Ads created in Flash didn’t even work in many cases. And by using the old GIF-format an advertiser couldn’t bring the rich media experience that we’re all used to nowadays.
But, according to Google, the next generation of mobile display ads are built with HTML5. In the fall of 2014 they launched several new mobile display ad formats and tools across the Google Display Network, the AdMob Network and DoubleClick. They enable advertisers to build new ads that will work across screens.
And so, the future of HTML5 display ads is known. With this push from Google and the IAB urging marketers to use HTML5 for mobile ads, it is clear that the next generation of display ads is built with HTML5.
The status of HTML5 has been upgraded to recommendation by the W3C. Tim Berners-Lee announed this milestone yesterday. HTML5 has been in use for years, but the W3C takes some time before the spec receives the status of recommendation. It took some time but, considering this was initially planned for 2022, one can argue it was a relatively fast process.
Not a lot will change, but this is still an important milestone for the web. The focus of the W3C focus will now shift to HTML 5.1.
One less vendor prefix
Opera abandoning their Presto engine means one less browser specific prefix, because -o is now dead. That means better standards in coding and writing less exceptions.
Add one tablespoon of Opera to Webkit..
Opera will now be contributing to Webkit/Chromium. In the past they were involved in many great ideas that are standards now, like HTML5, native video and media queries. And they were innovative with tabbed browsing, Speed Dial, mouse gestures and data compression, so you’ll bet they’ll be adding some great ideas to the open codebase.
Opera’s first contribution already happened: they submitted a change to Webkit to improve CSS multicolumn support. Thank you!
Three major players managing the direction of rendering
Webkit is now being improved upon by three powerful players on the web: Apple, Google and Opera. They will probably shape the future of the browser, as the dominance of Webkit on mobile devices is unmatched. Other browser makers, like Microsoft and Mozilla, will probably have to follow lead.
A lot of major players managing the direction of HTML5
The WHATWG, which maintains the HTML5 standard, was started as a venture between Apple, Mozilla and Opera. They even have Microsoft employees among their team. With this other group of major players managing the HTML5 standard, I think the future of web standards looks bright.
Some time ago I wrote about html5rocks.com, a great website aimed at HTML5 developers. When I checked the site out the other day, my eye fell on a new property in HTML5 that puts iframes in a sandbox. When blocking is too strict and allowing is too broad, the sandbox attribute can put some restrictions on the actions that are allowed for an iframe.
Iframes can contain all sorts of code, so there’s always a potential risk for embedded malicious threats. Like The New York Times has experienced. What if, for instance, you really wanted to embed a cool widget in your website, but you’re not entirely sure if you can trust it. Here comes the HTML5 sandboxattribute into play.
Framed content, by default, doesn´t have access to the page’s DOM or locally stored data. But the framed content (page) still has a number of options for malicious behavior: it can autostart video, use plugins and *gasp* fire popups. The sandbox attribute enables the blocking of features that aren’t relevant to functionality we’d like to use.
Check out the main article for all the detailed info and code examples. The sandbox property is currently supported in all major browsers, except for Opera. I think it’s a nice feature which can make the web a little bit safer. Do you agree?
Big news for the HTML5 specification today, as the W3C announced it’s feature complete. Although not a standard yet, this is a big step towards a stable and broadly supported specification. The same is true for Canvas 2D. New features won’t be added, so developers can now target a stable specification and use HTML5 features without the fear they won’t be supported in the future.
The spec is expected to become a final standard in 2014 which will then mark the end of a process that started in 2004. HTML5 exists mainly because the Web Hypertext Application Technology Working Group (WHATWG) wasn’t happy with the World Wide Web Consortium’s (W3C) efforts on XHTML 2.0, which was bound to become the new standard language of the web. The WHATWG started working on their own standard and today we’re all very lucky they agreed to work together and the W3C abandoned XHTML 2.0 in favor of HTML5. You can imagine the chaos if two standards would be developed to let the market decide which one’s the best. That’s exactly what the web doesn’t need.
Work on HTML5.1 has begun
If you think all the focus has now shifted to debugging the candidate recommendation, you’re wrong. Work on HTML5.1 has already started, which is the new branch for new features. As in shiny new. Surely, browser makers will implement some new HTML5.1 features as soon as they’re announced and developers will use these new toys to create fantastic new things, so they’ll know what works and what doesn’t. By the time the HTML5 spec has become a standard, everybody will be longing for HTML5.1 because it enables new possibilities we all really need.
Long time no hear, but here’s a new post for you. And although it’s old news, it’s great news nonetheless. Matthew James Taylor wrote a great article about creating responsive banner ads with HTML5. Yes, that’s one of the many advantages of using HTML5 for banners: they can be responsive. And responsive equals cool. But you’d know that by know.
How to make responsive banners
Matthew describes how to break out of the good old pixel and use fresh and juicy HTML5 mixed with some CSS3 media queries to make banners responsive. The trick is to create the ad as an HTML5 page and then embed it in a page by using an iframe. You set the banner dimensions by wrapping the iframe in a div and using media queries to give the div various widths and heights. Matthew has some code and working examples on his site, so go check it out!
Does it get any better than this?
Yes, here are some of the added benefits for using this technique:
Accessible banners, because you aren’t using images or Flash
Easy to make changes while the ad is running
Use your favorite familiar analytics software to track clicks and impressions
Smaller size means faster page loading
And with Swiffy, Google’s Flash to HTML5 conversion tool, now built into Adwords (see ‘Using Flash in your ad?’), it becomes more and more clear that HTML5 banners are the future of online advertising.
If you want to learn more about HTML5 these resources are good starting points. Dive into HTML5 is a great resource by Mark Pilgrim. It talks about all the familiar subjects like canvas, video, forms, offline web apps and more.
W3schools also has some extensive info on the new standard. And you can try every example yourself with their code editor.
Google just announced an update to their HTML5rocks.com website. The site is aimed at developers who want to learn more about HTML5. And to make their content better focused on different needs, they’ve split the tutorials in mobile, gaming and business.
Articles range from Keeping up with HTML5 and browser support to HTML5 techniques for optimizing mobile performance. And a lot of technical stuff in between.
I think the site does a great job at promoting HTML5 to developers. And the new design indeed rocks. Check out HTML5rocks.com.
Video can also be augmented with data from Flickr, Wikipedia, Google Maps and dozens of other web services. Be sure to watch the demos and see a glimpse of the future of web video.
Of course, the company sees HTML5 as “an opportunity”, but it becomes clear that HTML5 will be more and more important for animations and banners on the web. With this move Adobe just tries to be ahead of the curve.
In this video they create an animated butterfly and a pre-roll animation for a website: