Web Development in 2012
31 January 2012, by Tajinder Birdi
It’s 2012 and we’ve seen a lot of new changes in web development in the last year or two. So here’s my quick overview of some of the highlights and some examples from the best of the web, along with lots of links!
The great news is that modern browsers are becoming much more standards compliant, which means less work for web developers and better experiences for users.
Usually when I talk about standards compliance, I’m pointing the finger at Internet Explorer, but IE9 is Microsoft’s best ever browser, and IE10 promises to be even better.
In the last few weeks 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%. That’s a lot of people.
Twenty great HTML5 sites and the one below is a personal favourite.
The HTML5 Boilerplate is a great starting point for any project, featuring lots of useful things necessary for modern day web development. 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 faff 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.
CSS can be hard. For sure 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 clear-fixes. 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, made obvious from the popularity of CSS pre-processors 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 grid-ish!
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
I’ll save talking about mobiles and tablets for another post but it’s worth asking – the trend for developing a mobile app in multiple native languages for iOS, Android, Windows, Blackberry, Nokia etc is a lot of work. Will it continue? HTML5 mobile development is getting better all the time. Using HTML5 also means you can take advantage of CSS media queries to make responsive sites that adapt their layout based on the size of the browser window, to help tackle all those screen sizes out there.
That’s all folks, let the good times roll.