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.
Microsoft's current homepage features some great usage of oversized text, making for simple navigation through a website with thousands of pages.
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.
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
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.
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
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