Web trends of 2012

Mar. 7 2012  Dennis Simpson  Managing Director
Web trends of 2012Web trends of 2012
mediaqueri.es is a showcase of websites that employ responsive design techniques. This image shows an example of a site reflowing to accommodate reduced browser width.
Web trends of 2012
Microsoft's current homepage features some great usage of oversized text, making for simple navigation through a website with thousands of pages.
Web trends of 2012
Adobe Edge brings a Flash-esque interface to the HTML5 world, giving designers and developers a familiar method of creating animations and interactive content.
Web trends tend to move faster than those of printed or traditional media, as more and more technologies offer up new opportunities for brands to express themselves online.

There are two main elements to building a website - the front-end (aka user interface - it’s everything that you see on a webpage), and the backend, which is the behind-the-scenes stuff that goes on every time a user clicks a link or otherwise interacts with a webpage. Web trends therefore encompass both of these, so not every change in trend results in a change of visual style.

In this article, we’ve summarised a handful of trends and our thoughts on where the web is headed in 2012 and beyond.

Responsive web design

With every major web browser now supporting HTML5 and CSS3, responsive web design is flourishing. Put simply, this technique allows website content to gracefully resize and re-shuffle to accommodate all manner of screen/device sizes. Visiting a website on an iPhone for example will trigger the pre-designed smaller version of a website, with images and text formatted ideally for the narrower, taller screen. Likewise, shrinking your computer’s browser window will result in an instant, smooth reshuffling of website content.

This approach allows for content to sit where it will be used most effectively, no matter the screen size of the device that’s accessing the website.

Big text

One of the key design trends of the moment is large text, a style that lends itself especially well to sites that need to convey a whole lot of content. Microsoft’s latest homepage layout is a fine example of this - with hundreds of products spread across dozens of product ranges, their designers have done a fantastic job of keeping things organised and ensuring easy navigation.

A whole new world (of fonts)

Gone are the days of web designers being limited to a meagre selection of ‘web safe’ fonts, for there are now several methods of using any font (licensing and legality depending) on the web. The easiest of these methods comes in the form of several online startups who, for a fee, licence and serve out hundreds of the world’s best fonts. On the Magnum site we’re using several fonts from Fontdeck; other services include Typekit, Fonts.com and a free offering from Google.

A major drawcard of using real fonts on the web is that text can be just that - text - as opposed to images or Flash-based font-replacement, both of which are far less indexable by search engines and big accessibility no-no’s. These fonts look great on all major smartphone platforms too, so there’s no need for your site to look any less glossy for mobile users.

Blocked colours

While mega-sized imagery was once all the rage, designers are now swaying more toward clean backgrounds broken up with chunky blocks of colour. It’s a trend that we’re all for, as when it’s done well it makes page navigation and content hierarchy much clearer. A positive side effect is that this style keeps website filesizes down - something that mobile users especially will find comforting in this age of restrictive data limits.

Adobe gains edge

We detailed it a few months back and now the decline of Flash continues, with Adobe speedily finding a replacement for the ailing format. Enter Adobe Edge, a Flash-lookalike that “allows designers to bring animated content to websites, using Web standards like HTML5, JavaScript, and CSS3”. Currently available as a free preview download, it’s clear that Edge will be a vital part of Adobe’s strategy to remain a major player in the new web.

Social is key

The fastest growing area of the web is that of social networks, with social sharing promising to deliver new traffic and new customers. The old adage of “if you build it, they will come” has become “if you build it, they will share”. As always, content is king, so don’t expect social sharing to do your job for you - users are only likely to share content they find personally and genuinely interesting.

The next great idea

If you're ready to put these techniques into action and enhance your brand's online presence, get in touch with us.