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.
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%.
Twenty great HTML5 sites and the one below is a favourite.
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.
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!
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.
Some neat ideas have developed on asynchronous web interfaces that provide an extremely fast and seamless user experience.
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):
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.