Web Development in 2012


31 January 2012, by

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!

Browsers

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.

Along with standards compliance, 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 personal favourite.

slaveryfootprint.org

HTML5 along with all its associated JavaScript APIs means that along with additional HTML elements to add greater semantic meaning to web pages there are cool additions like geolocation and offline storage (more than just a bit-sized cookie). The new web workers API allows running background JavaScript threads, and web sockets, which are like having Push turned on for your browser, mean browsers 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 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.

CSS3

Twenty CSS sites that rocked… especially this one.

2011.beercamp.com

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!

Beautiful Websites

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

Beautiful website

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):

WebGL spiders

and this

WebGL F1 car

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

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.

Tags: , ,

Categories: Mobile, UX / Design

«
»

Leave a Reply

* Mandatory fields


two × = 8

Submit Comment