Well here we are at the start of another exciting year with plenty of new design opportunities on the horizon. After a quick recap on last years predictions, I think we were right on the money.
1) Responsive and adaptive web design
The use of responsive design will continue to increase throughout 2013, as more people get their hands on smartphones and tablets. This trend is changing visitor’s expectations of how websites should work across different devices, so companies are having to adapt to remain competitive online. As well as responsive design, we are also seeing more websites starting to use fluid/liquid design where content containers and areas flex to suit any browser width and adaptive design where features are disabled for specific devices to improve usability.
e.g. Urban Leisure Group
Apple have set the bar with their new retina displays, which have twice the pixel density of average screens, meaning they can display much higher resolution graphics to deliver a sharper/crisper look. While the majority of devices don’t have retina displays yet, as other manufacturers catch up and the public start demanding higher res devices, this will become the norm. To support retina displays, designers use images at 200%, then save a “standard” version at 100%. The larger image will then be scaled down to the standard resolution for most non retina users, however the 200% version is also available for those that can handle it. With larger images come issues with excessive file sizes slowing down page load times. Image compression becomes paramount here and there are a number of tutorials starting to crop up explaining how to minimise the delay without pixelation.
As more users are accessing websites from mobiles and tablets (up to 35% in some industries), many companies are using larger font sizes to improve readability. Previously many sites used 12px for body copy, but now we’re seeing many using 14px and even 16px in some cases. Font rending services such as Typekit have made it possible to use a much wider range of fonts on websites without having to purchase prohibitively expensive licenses, so expect to see more creative fonts on websites in future.
e.g. Smashing Magazine
As predicted in 2012, websites will continue to get cleaner and simpler in terms of their look and feel. This is due to studies showing cleaner UIs can produce better conversion rates, as they focus the users attention on important parts of the page and calls to action. Cleaner designs also are easier to scale and make responsive so this is also a contributing factor in this trend.
More sites are using full page background images and full width image sliders to bring content to life and give a richer and more visual impression to visitors. This does throw up some challenges in terms of load time, however some companies have sidestepped this issue by using filters to allow lower resolution graphics to be used without looking budget. Another approach is to disable these features on mobile and tablet devices to ensure pages load quickly and improving accessibility. Auto-rotating homepage carousels have become less popular this year, as recent eye-tracking studies have shown users have become so good at filtering out display advertising that they ignore anything automatically changing on websites, whether adverts or not. In summary it’s ok to have a carousel on the homepage, but let the user click through the slides rather than it being automated.
e.g. Works Festival
Developments in CSS3 are opening new doors for animating content without the use of Flash. This is being increasingly used to draw a users attention to calls to action and make user experience richer and more engaging.
e.g. Chrome Web Lab
SVGs are going to make a big impact in 2013, as they are a fraction of the file size, but can scale infinitely without pixelating which opens up many exciting design opportunities. SVGs use computer generated geometry to render graphics rather than pixels. Where a picture in JPEG format may be 500kb, the same image may be as little as 50kb as an SVG. Despite having being around for several years, use of SVGs isn’t that widespread yet, because until now most browsers have been unable to handle them properly.
Similar to SVGs, some websites are starting to use icon sets which have been created as a typeface. This means they don’t use pixel based images so are more lightweight and will scale nicely across different browser sizes. Common examples include social media icons and buttons.
This is a trend largely driven by the increase in mobile access, where buttons need to be larger to make it easier for our chubby fingers to click on them without simply mashing the screen. Increasingly people are building buttons using CSS rather than images as they are more lightweight, more search engine friendly and can be set to scale for different devices more easily than images.
Some companies have been experimenting with different scrolling options to make a website more unique or engaging. For example Google’s Mobile Playbook which is specifically optimised for tablet devices uses horizontal scrolling. For 2013, vertical scrolling will remain the standard due to engrained user expectations, however going forward a couple of years, we could see horizontal scrolling becoming more common as people get more used to it through using native apps.
Paralax scrolling is a design technique which creates the impression of a website being 3D, as content is placed on layers which can be moved independently in front or behind one another. This technique works well on one pager websites where there is lots of scrolling involved and adds a new richness wasn’t previously possible.
e.g. The Art of Flight
This approach to navigation has proven particularly popular on longer websites such as blogs and social networks, particularly those which use infinite scrolling. A fixed header is where the primary navigation remains fixed to the top of the browser window and follows you as you scroll down the page. This improves usability as the navigation is only ever a small mouse waggle away, rather than having to scroll right back to the top of the page each time.
When responsive sites scale down for mobile browsers, often the primary navigation will stack vertically which takes up a lot of real estate at the top of each page and forces the user to scroll a down the page to access the content. Instead, designers are increasingly building navigation in a collapsable block, so it can be toggled open or closed to take up less space, making the site cleaner and more user friendly.