If you had the chance to build a website from scratch. A website that is going to be launched in the late summer of this year. And an old version of that website already exists, which will be maintained but not developed further…
How would you build the frontend?
I have given that some thought in the last time. And here are the three most important conclusions I came to:
- Use HTML5 excessively
- Style with CSS3
- Drop IE support
While the first two might seem obvious, the third sounds like madness. How can I seriously even think of excluding like fifty percent of the users (less in Europe, more in the US)? It’s only logical (and I admit I’ll cut that down a little later on). But let me explain the first two points first.
Use HTML5 excessively
HTML5 offeres a broad variety of new structural elements. And the basis for a good website is semantic markup. footer, header, nav, article, time and so on are HTML5’s answers to a ton of divs that we used in old (and current) websites. But HTML5 is more, using the audio and video elements you can easily embed multimedia to your site. OK, video is still a mess if you don’t want to double encode your content, but that might change in the near future, since Google announced to drop support for H.264 last week.
There are a lot more techniques that help building a light-weight application, part of which are associated with HTML5, but are not part of the specification. Offline-applications, drag and drop, the File-API, local storage, geolocation and more.
Style with CSS3
So using CSS3 drastically can decrease the number of files you need and therefore the improve the performance of your application.
There is one drawback, though. CSS3 support is not complete in most browsers. Opera for example does not have gradients. Firefox does not support transitions. That’s partly because these specifications still are working drafts. But let’s be honest. Does it really hurt, if Opera users have a single background color instead of a gradient? If Firefox users don’t have an animated hover effect? Form follows function.
Drop IE support
If you have a look at what browsers support today, you can see that many, many features I would use already are supported in Opera, Chrome, Firefox and Safari. So if we dropped IE support, we could be using them today.
And if you then have a look at what will be, you can see that in mid/late 2011, when IE9 is released, most of the features are supported by all browsers. So I correct myself: Drop IE<9 support. As I said it. If you build an application that will be launched in the second half of 2011, use HTML5, CSS3 and don't care about IEs. But how long will it take users to adapt to IE9? My guess is, pretty quickly. Those using IE8 will switch quickly. Those using IE7 or - godforbid - IE6 will probably stick to it forever and eventually die out. You can still send them to the old version of your application (which is a prerequisite of IEs. If you don't have an old version you most likely cannot afford to drop IE support).
In the meantime build the next jQuery
So spend the time building a library that adds the few missing functions. That works around the remaining browser bugs and inconsitencies. Build a library for the future.
A note at the end
When you use semantic markup, media queries and progressive enhancement for the advanced features (and do everything right), then you have a mobile web app almost for free. You don’t have to build an extra app for iPhone, Android… Now wouldn’t that be nice? Think of all the time (and money) you could save. So go ahead and start.
Latest posts by Matthias Reuter (see all)
- So your dropdowns won’t open in IE7? - November 11, 2011
- User-agent sniffing is back - February 15, 2011