My top 3 web design trends from 2012

Posted Monday 31st Dec 2012 by James Bavington

Happy New Year! I’ve finally found a few hours this morning to catch up on my emails, read some blog posts and even write a little one of my own. There’s been quite a few 2012  style posts over the past couple of weeks, so I’ve jumped on the band-wagon to collate just a few of my favourite observations because let’s face it, 2012 has been a huge year.

Not only have there been substantial advancements in technique, but the demand on designers has increased exponentially. Clients are learning to expect a website that does everything it did before, but with new or added focus on everything from multiple device compatibility to retina screen resolutions. So I’ve put down the left-over turkey, watched the season-finale of Homeland and made myself a cup of tea. I’ve listed below just some of what I believe has strongly impacted 2012 and can expect to see well into 2013 and beyond. Make sure you check out my external links at the bottom of the post too, I’ve come across some great blogs and videos over the Christmas break.

Responsive Design & Development

2012 has seen ‘Responsive Web Design’ emerge as the best all-round solution for displaying websites on multiple devices. Unlike creating separate mobile sites or pinching and zooming your way around a full-size website (like they suggested in the old iPhone ads),  going responsive means you can create a single site that can adapt to suit the device being used to access it.

qwed

I don’t want to waffle on too much about Responsive Web Design, except to say that Google recommend it and if you wish to know more, I’d recommend this simple post on Mashable that explains why 2013 is the Year of Responsive Web Design. I’m currently working with my colleagues on a new responsive Creare site and although it’s time consuming, it’s a lot of fun and the results are rewarding.

Designing for Retina/Hi-DPI Screens

2012 also saw the rise of High-Definition screens. And with it, Hi-DPI website design.  I remember back in April 2012 when I first considered the impact of Hi-DPI design when  a client ask me: “why are elements of our new website fuzzy on my Retina iPad?”. Although vector elements like text and CSS were crisp, any raster files like PNG logos or JPEG photos simply looked blurry.  This is because they were being displayed at 72dpi, a quarter of the resolution they are now capable of being displayed at.

Currys.co.uk is a great example of a website that is beginning to adopt Retina/Hi-DPI techniques. Whilst most of their product photos and banners are still 72dpi Raster JPEG files, they use vector techniques for pretty much everything else:

currys-retina-shot

  1. Font Awesome, a Web Icon Font for their assorted small icons
  2. SVG (Scalable Vector Graphics) for items like their UK Map in their footer
  3. CSS3 to create buttons, the navigation and purple tear-drop style sticker

Don’t assume however that websites like Currys, simply haven’t got round to making all of their product graphics ‘retina-ready’ yet. Page Speed is still a huge objective for all websites, so increasing the file size of each JPEG file by four, isn’t necessarily a welcome prospect. Higher resolution graphics take longer to load and this should be taken into consideration because right now, most Hi-DPI resolutions are found on mobile devices which usually depend on a slow mobile connections.

My advice if you’re not doing so already, is to begin changing your habits. Use CSS, Web Fonts, Icons Fonts and SVGs where possible. When you do start to look at increasing the resolution of your Raster graphics, do what Smashing Magazine have done and start with template items like the website logo. Standards and best practice will undoubtedly appear in 2013 for how to work with images, but in the meantime you might wish to check out Retina.js and WP Retina x2, two of my favourite plugins that I’ve recently experimented with.

Web Fonts & Icon Fonts

Web Fonts have been with us for a few years, but they’ve really taken off with designers in 2012. Gone are the days of painfully embedding exotic fonts with SIFr or Cufon which were a pain to set-up, style and work with. Web Fonts today that utilise CSS3′s @font-face, pretty come with no baggage or side-effects. Today designers have the flexibility to work with a wide range of premium and exotic typefaces without having to flatten them into graphics.

Currently boasting 613 fonts, the simple UX of the site will have designers of all levels using Web Fonts in minutes.

Currently boasting 613 fonts, the simple UX of the site will have designers of all levels using Web Fonts in minutes.

Notable libraries are Google’s free Web Fonts and Adobe’s Typekit service which provide designers access to thousands of Open Source and premium fonts.

Web Fonts are mostly lightweight, compatible back to IE6 and can be installed within minutes by adding a few lines of HTML and CSS to your website. If you’re new to Web Fonts, i’d recommend starting with Google Web Fonts by watching the video blog I produced earlier this year.

Similar to standard Web Fonts, Icon Fonts have really taken off this year. These purely icon-based typefaces are perfect for embedding modern vector icons on your website without using graphics. I don’t wish to repeat anything my colleagues and I have recently published, so I’d thoroughly recommend watching the video blog we did a few weeks ago, which explains why Web Icon Fonts are so brilliant.

Conclusion

So the three things I’ve singled out probably won’t come as much of as surprise to anyone.  The reason why I’ve focused on Responsive, Retina and Web/Icon Fonts is because I strongly believe they will continue to be key influencers of 2013. Smartphone and Tablet usage will undoubtedly continue to grow, along with the usability and security trust issues that currently account for the low-conversion rates we see on mobile devices. Advances in computers, tablets and smartphones will also continue to develop in 2013. Hi-DPI screens on Smartphones will become standard and Apple will probably launch a highly coveted, slim, Retina iMac range.

Keeping up with such a fast-evolving industry is never easy, but it is exciting and it can be fun.

Extra Reading

If you’re browsing online for more useful overviews of 2012 and predictions for 2013, i’d recommend checking out some of the posts listed below, that I’ve found interesting over the past week.

Happy New Year

There’s still a few days of the holidays left, so do what I’m about to do, shut down your computer and spend time with your friends and family. But before you do, I thoroughly recommend watching this incredible video that I saw Google’s Matt Cutts tweet on 23rd December:

A humble reminder that despite a lot happening in our industry, a lot also happened elsewhere in the world. Happy New Year!

By James Bavington

Creare's Web R&D Manager is a creative graduate and self-taught front-end developer. When not sat at a computer, he's either at Comic-con, driving his car or reading military history.

See all of posts.

Connect with James Bavington on Google+

James Bavington's latest tweets