It’s 2012! And it’s a great time to be a web interface developer.

We’ve seen a lot of new changes on the web in the last year or two, so here’s a quick overview of some of the highlights and some examples from the best of the web.

There are a lot of links. Thankfully, they’re all good.

Browsers

In the last few days we saw usage of IE6 finally drop below 1% in the United States! USA! USA! USA!

And it’s not doing so bad here in London either. Must do better, China, still 25.2%.

IE9 is Microsoft’s best ever browser, and IE10 promises to be even better. The young ‘uns will never know the sacrifices we had to make during the web’s dark ages just so they could see these times…

And browsers are becoming much faster. Not just fast to start up, but with hardware accelerated JavaScript engines and graphics card rendering, some of the examples below will really show off what browsers can do.

HTML5

Twenty great HTML5 sites and the one below is a favourite.

HTML5 along with all its associated JavaScript APIs means that along with a few additional HTML elements to add greater semantic meaning to web pages there are cool additions like geolocation, offline storage (more than just a bit-sized cookie), web workers for running background JavaScript threads, and web sockets, which are like having Push turned on for your browser so that it can receive data without necessarily having to request it.

The HTML5 Boilerplate is a great starting point for any project, featuring lots of useful things you’ll need. Even if you don’t use it, check it out and use bits from it. There’s also a Mobile Boilerplate.

CSS3

Twenty CSS sites that rocked… especially this one.

Remember when if you wanted rounded corners for your website you had to fiddle and eff around jigsawing multiple image pieces together for a simple button? Well you don’t have to do that anymore. And along with rounded corners, CSS3 features goodies like dropshadow, gradients and transparency. This all means fewer images to have to load. And CSS3 also allows embedding of fonts.

There are already great examples of what is possible with new CSS transitions.

But it has to be said. CSS is hard. Oh it’s easy to learn but hard to do well. HTML is easy, especially if you’re good at CSS. Mastering CSS allows you to keep your HTML mark-up super clean and not pollute it with div tags, br tags and clearfixes. CSS pseudo elements and display types can take care of all of that for you.

But how do you keep CSS clean? CSS becomes especially hard as sites grow large and complex. New ideas are emerging that suggest current best practices are wrong. Object oriented CSS is a new way of thinking about how to structure CSS, as is SMACSS.

And even with CSS3, CSS is far from perfect. CSS still leaves a lot to be desired, made obvious from the popularity of CSS preprocessors like LESS and SASS which allow use of variables and mix-ins. There’s also a whole host of grid systems out there if you’re making something griddish!

Beautiful Websites

There are some great examples of full background websites out there.

And techniques for creating full height app layouts where headers and footers are always visible in fixed positions at the top and bottom of the page are becoming increasingly popular too.

In part this is all down to great advances in JavaScript with libraries like jQuery becoming almost the de facto standard for client-side development along with emerging frameworks like KnockoutJS and SpineJS for commercial application development.

Some neat ideas have developed on asynchronous web interfaces that provide an extremely fast and seamless user experience.

But websites are becoming bloated. The average size has increased by 25% in the last year alone and this is mainly due to JavaScript and CSS. There are a lot of things that can help in this area, from use of CSS sprites to use of web workers for delayed loading. But this trend is only going to continue and website performance tuning will become increasingly important.

Animation

The arrival of the HTML canvas element has brought with it a whole host of technologies like three.js and WebGL, which make it possible to build things like this (viewed best in Google Chrome):

and this

Does this mean the end for Flash? Only time will tell.

Twenty awesome 3D sites.

Mobiles and Tablets

Do you hold your mobile up to your ear with two hands? This lady does.

The trend for developing a single app in multiple native languages for iOS, Android, Windows, Blackberry, Nokia etc… will it continue? HTML5 mobile development is getting better all the time.

And instead of building apps for multiple platforms, what about multiple screen sizes? That’s where CSS media queries and responsive web design come in.

That’s all folks

Let the good times roll. Things move fast, and if you don’t keep up, you could find yourself quickly out of date. Like flowery wallpaper.

Now if only browsers could build something in so that the entire internet wasn’t littered with social Like buttons.

Leave a reply

required

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>