The next generation of display ads is built with HTML5

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.




HTML5 now is an official recommendation

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.

Firefox 19 has arrived and it’s rendering PDF files with HTML5

firefox-logoMozilla upgraded their Firefox browser to version 19 today and the most significant new feature is a built-in PDF-viewer. After some digging around I found out that Mozilla is actually using HTML5 and JavaScript to render the PDF. Correct me when I’m wrong, but it seems they’re the first browser maker to use this technique to render PDF files in the browser. The development of this functionality started back in 2011 and quickly gained traction as it became a popular open source project on Github.

Let’s try to render a PDF with HTML5

A long time it was only possible to show PDF files on the web by using another application, like Adobe Reader. Andreas Gal, VP of Mobile Engineering at Mozilla, and some colleagues wondered why nobody had implemented a PDF reader in HTML5 and JavaScript. So they started pdf.js on as an open project.

In a blogpost from 2011, Andreas already announced they’d like to use pdf.js in their own browser and today that day has come.

Initially we will make a Firefox extension available to interested users that enables inline PDF rendering using pdf.js, but our ultimate goal is of course shipping pdf.js with Firefox.

Great work from everybody who’s involved in this project!

Live test: fast and safe

I’ve upgraded my Firefox to version 19 and tried to open some PDF files to see how well it works. The first thing that struck me is how FAST it is. Firefox renders the files really fast, even complex ones like this 60 page report (the first one I encountered). Btw, you can easily find PDF files with this Google search. Although Firefox sometimes warned me that this PDF document might not be displayed correctly, I didn’t run into any issues.

This way of rendering is also safer than, for instance, Chrome uses. The Chrome browser uses a native-code plugin to render the PDF and puts it in a sandbox to prevent the execution of malicious code. But since pdf.js is open source, the contributers to Webkit can adopt it too.

How to disable the PDF viewer in Mozilla Firefox

If, for some reason, you’re not happy with this new feature, here’s how to disable it:

Go to the Menu > Options > Applications > Portable Document Format > set “Preview in Firefox” to “Ask”.

Are you happy with the new Firefox?

What does Opera’s switch to Webkit mean for HTML5?

Opera_512x512Opera, the Norwegian browser maker, announced last week they’re switching to Webkit as their rendering engine of choice (and to the V8 JavaScript engine). That may be good news for HTML5 and web standards.


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.

The HTML5 iframe sandbox attribute protects against framed threats

tweet-sandboxSome time ago I wrote about, 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 sandbox attribute 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?

HTML5 specification complete, released as candidate recommendation

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.


Responsive banner ads

ResponsiveLong 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
  • Banners are actually normal web pages, so they can use any technique a web page can use (Javascript, forms anyone?)
  • 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.

Dive into HTML5 with these free HTML5 resources and tutorials

Hold handsIf 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.

A lot more technical but as comprehensive as it can be is the web developer’s guide to HTML5.

Good old Sitepoint has a great archive of tutorials on subjects like using the geolocation api, HTML5 canvas and best practices for building HTML5 games.

Another quality HTML5 tutorial resource is HTML5 doctor. Their posts about semantics are very useful to get a better understanding of when you can and should use the various new elements.

If you know of any other good HTML5 resource drop it in the comments!

Google updates

RocksGoogle just announced an update to their 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


Mozilla releases HTML5 Popcorn framework

Popcorn.jsMozilla has released Popcorn which is a framework to enable interactive web video. An example can be seen in the movie One Millionth Tower (requires Firefox or Chrome). The technology relies on HTML5 video, the Popcorn JavaScript framework and various web APIs. An example is a scene where the weather is dynamic; it pulls the actual weather data from  Yahoo’s Weather API to reflect it in the movie.

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.