The best new websites in the world get recognized yearly, through online awards such as The Webby Awards. In an effort to uncover some of the best responsive websites in the world, we started with this years list of Webby Awards. Not surprisingly, all of these websites are an incredible testament to the power of design but not all of these websites can take home a title under the best responsive websites.
When we combed through the the list of winners, we were looking for key elements that represent excellence in responsive web design. To really identify the winners we've broken down our list by who hit what element right to create an award winning responsively designed website.
Excellent Use of Imagery
On a large desktop screen, the Nixon online store is clean cut and easy to use and when paired down to a smaller screen this clean feel remains. The images scale down with the screen and the website stays clearly readable and user friendly over all screen sizes. The Nixon online store also uses another tenant of the best responsive websites; the navigation menus change as they shrink with the site, and though they don’t directly mirror the desktop, they work to please the user.
Barney's New York Online Store
Barney’s New York online store is one of the best uses of image shrinking. The site is very image heavy, and the images change size as the screen does. They lose no quality, and they remain easy for the users to see detailing on clothing for purchases. Keeping this quality is essential for an ecommerce site, and crucial for a successful responsive website.
Lens is a photography, video, and visual journalism blog hosted on the New York Times website. This blog is of course full of images, and when accessing the blog on mobile, the images are just as stunning and impactful as they are in a desktop layout. Though the mobile site is very similar to the desktop site it does shift content slightly, and the larger images and more dramatic images are prioritized for the mobile viewer to see first.
A Responsive Changing Layout
Wired, an editorial website, is a great example of how your content layout changes when scaled down to a mobile screen. In a larger desktop section they show thumbnailed stories, and when the screen is shrunk to mobile, these stories are grouped together under a “Top Stories” heading. In the actual stories on the site, there are links or block-quoted notations on the side of the articles; in the mobile version of these stories these side notations are positioned within the text to break up large blocks.
National Geographic: Climate Change Issue
The Climate Change Issue of National Geographic’s website is another great example of how to adapt your content to a smaller screen. In its desktop version the top of the page is a large video. In the mobile version the video shrinks, and under the video is placed a title and a short caption of the webpage. This shows the website viewer the topic of the webpage, and it also is a great way to fill space when the video has to shrink to a certain size to keep the resolution. The title and short caption are nowhere on the larger desktop site.
Prioritizing Your Best Content First
The United Auto Workers webpage in its desktop form has a banner of three major stories before you scroll down to any other content. What UAW does well in its responsive website design is prioritize which of the top 3 stories will remain at the top. One story remains a banner, while the other two drop down to below, shown in a smaller way. This website best shows how to ensure you’re showing your audience the most important content before all else.
Haus’ online portfolio uses images that are optimized to shrink without losing resolution at all, and their layout of the images for mobile viewers is very well done. A larger screen requires users to hover their cursor over the squares which contain an image of each project, however, in mobile version they are broken up, no hovering required, and are displayed with the name/company that they did the work for. In mobile you can’t see all of the projects without scrolling down, so they have prioritized the content they want their mobile users to see first, creating an excellent user experience.
VML’s mobile website has a similar layout to their desktop site, however there is shifting in the images linking to the work they have done. These images shift from a grid style to being on their own, with the user scrolling down and seeing each image individually. This shows how they have prioritized their work, as it doesn’t simple go in order of the grid. The site shows how important showing your best work first is, because users may not actually scroll passed the first image.
Shifting Ultra Creative Desktop to Mobile
The front page of the Hampshire College site uses different image sizes in their desktop and mobile sites in a really interesting way. On the desktop site the images are tall and narrow and when users hover the cursor over the image the “Learn” button comes up with a backdrop of colour. In the mobile version the images are square and they show the whole image, unlike the desktop site, and do not need to be hovered over. This shifting of the images makes for two very different sites, and is an example of how your mobile site does not need to be a mirror of your desktop site.
Vroom is an automotive site, which shifts text on top of imaging incredibly well. Their best example of this is on the “About” page where, in the large screen text is shown on an image, but as the screen shifts to mobile the text moves below the image for easier viewing. The sites responsive capabilities get better, instead long blocks of text Vroom uses horizontal siders to group important details (seen in the mangement section).
Responsive website designs come in many forms, but they all work to provide an excellent user experience. What the above websites have done is hit the mark on each best pratice of mobile design.
By following these practices, your business will also have a stand out responsive website design. Mobile friendly websites starts at the design stage and then require the expert coding of a seasoned developer. Learn how to find developers who offer responsive website design services with our new Guide to Outsourcing Web Development below.
