As web designers and developers, we trust our core design sensibility to create websites around principles of taste and usability. But we also love seeing new ideas and new current website trends. In this post, we’ll run down some of the web design and development trends we found captivating in 2012.
1. Single-Page Websites
Navigating through single page websites is faster than clicking through multiple pages. You can easily browse through text and media by scrolling, sliding, or flicking – whatever you do on a touchscreen.
For some examples of visually stunning single-page designs, check out Smashing Magazine’s post on navigable single-page sites.
That said, there are trade-offs. For instance, mixing a bunch of subjects on a single page (rather than splitting them into a page for each topic) can impact how a site’s indexed by search engines. This can confuse search engines as to what the page is about.
In terms of usability, there’s sometime a trade-off between the “uniqueness” of single-page websites, and the familiarity of multi-page navigation. To create a familiar experience, it’s wise for single-page websites to have links to headings further down the page to keep them from having to scroll long distances. As well, it helps for single-page sites to list different addresses for each section so that saved and shared links will lead to a specific part of the page. Also, being able to use the browser’s back button to return to different sections makes navigation easier.
2. “Metro” Style in more than Microsoft Products
Whether you know it by the name “Metro” or “Modern UI Style”, or just know it to see it, you’re likely familiar with Microsoft’s new, colourful, tile-based interface as seen on Windows 8 devices and Windows Phones, and – although less likely – on the Microsoft Zune.
The Metro design language has, in fact, influenced some inspiring website designs. There’s even a framework called BootMetro that helps developers put together a website using Windows 8 style.
3. Big is Beautiful
Large backgrounds are dramatic and help add mood and personality to a website. And thanks to average increases in bandwidth, large, high-resolution backgrounds are possible without causing unbearable load-times. There’s even a sub-trend of websites with big, blurred backgrounds. These blurred backgrounds help the in-focus page elements look sharp and stand out.
4. Sticky Navigation
Sticky (also known as fixed) navigation is locked into place – usually affixed to a screen edge – and it doesn’t disappear when the user scrolls. According to a usability study, it was quicker for site visitors to navigate a site with sticky navigation, and all site visitors preferred sticky navigation to a typical navigation menu at the top of the page.
With sticky navigation, there’s no searching or scrolling for the menu since it’s accessible from anywhere on the website. And since navigation is one of key components of a website, there’s a compelling case for keeping menus where you can see them.
5. Designing for Retina Displays
With the high pixel density of devices such as the Retina Macbook Pro and third-gen iPad, users are liable to find the images on some sites blurry. And this has posed a serious problem for web designers.
Among the solutions designers and developers have come up with including using a media query to identify high-resolution devices, and deliver them high-resolution graphics. Another solution is to use vector-based graphics and icon fonts (which essentially store images in a font library) which, unlike pixel-based graphics, don’t lose resolution and get blurrier when expanded.
The problems caused by high-resolution displays, is something designers and developers will have to address as more screens get more pixels.
6. Mega Menus
Menus have been reaching “mega” proportions. Plugins like Jquery Mega Menu are being used to make enormous drop-down site navigation menus that can fit more text, images, and links.
Large menus are particularly good for displaying headings and the pages that belong to them. With a regular menu, a site visitor may have to hover over a main heading, then several sub-headings before finding the page they want. Furthermore, a large menu can spell out the whole structure of a section, letting visitors know exactly what pages are under each heading. And if there’s room, there could be a brief description explaining each topic, or even each page.
Mega menus help visitors navigate complex sites.
7. HTML5’s Finally Coming of Age
It was a big year for HTML5, the successor to HTML4 which was standardized almost 15 years ago, promising some great new additions to what’s become a basic building block of the World Wide Web.
Earlier this month, The World Wide Web Consortium (W3C) published the complete definition of the HTML5 and Canvas 2D specifications. This isn’t standardization, but it means that developers can be more confident about the viability of HTML5, and that it will become a standard as early as 2014.
Of course, web developers haven’t been waiting for HTML5 to be officially approved. A report released in September 2011 found that 34 of the world’s top 100 Web sites were using HTML5. It’s being considered a disruptive technology in the mobile world, where building and deploying highly-interactive, web-based applications is often faster, easier, and cheaper compared to developing a native Apple App Store or Andoid app.
Despite the backlash this year from CEO Mark Zuckerberg, who said he regrets focusing on HTML5 instead of native mobile apps, HTML5 seems destined to grow. Even with the growth of new app platforms such as Windows Store Apps, to create an HTML5 that works across platforms and to not be at the mercy of an app marketplace’s rules can prove extremely enticing for developers.
Even if we were able to resist paying attention to trends, an innovative web agency has a duty to keep up with trends. After all, what seems trendy and of-the-moment could be adopted as a principle foundation later.
Do you notice any design and development trends this year that weren’t on our list? Please let us know what trends you spotted in 2012 in the comments!