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.
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:
- Font Awesome, a Web Icon Font for their assorted small icons
- SVG (Scalable Vector Graphics) for items like their UK Map in their footer
- 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.
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.
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.
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.
- 10 UX things we remembered in 2012
A nice post covering obvious but notable UX considerations that stuck out this year.
- The State of The Media – The Social Media Report 2012.
With tongue-in-cheek, this ‘Leveson Enquiry’ style report is actually a highly interesting, 30-page Info-Graphic, statistical 2012 Social Media report.
- .NET Mag’s Top 20 Conference Talks
If you have an iPad, headphones and a few hours, I’d recommend watching at least a few of these conference talks from 2012.
- The Ginormous Best of 2012 List (SEO)
Whether you love it or hate it, SEO including everything from Social Media to CRO is closely related to website design and development. This huge blog post catalogues some key posts and videos in the world of ‘optimisation’.
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:
This is a pretty great Year in Review video: goo.gl/r2iLZ
— Matt Cutts (@mattcutts) December 23, 2012
A humble reminder that despite a lot happening in our industry, a lot also happened elsewhere in the world. Happy New Year!