Responsive web design is more than just a web design buzz-word these days as more and more sites decide to go the responsive design route rather than a completely separate mobile codebase or native app. If you’re new to all this, responsive web design is defined (by the folks over at wikipedia) as “... an approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).” If that's a little too wordy for you, what it’s trying to say is that RWD is an approach to creating websites that look great on large, medium, and small screen sizes. What we’re going to do for this blog post is analyze 5 responsive websites by looking at what makes them awesome, more specifically things like design, user interface (UI), and user experience (UX).
1. Walmart (Canada)
While most of the big box retailers out there have their own native app available, oftentimes that is not always the most convenient entry point for users. Walmart Canada has put together a really sharp design and implementation of their site for medium/small screen sizes which comes across as intuitive and pleasing to the eye. Their use of iconography for their main menu is a great way to visually guide users to their target goal or action. Often it’s easy to get overwhelmed by the vastness of e-commerce sites with multiple categories and pages, but by letting you drill down to a particular category before loading the next page we're given a great way to streamline the UX by reducing load times. Overall, it’s a very well executed responsive website, especially given the size of the site itself. For some further information on the responsive re-design of the site, check out this post: How Walmart.ca's Responsive Redesign Boost Conversion by 20%
2. Lenovo (Australia)
The Australian Lenovo website is another great example of an e-commerce site using responsive design to give their users a comfortable and intuitive experience on smaller screens. It features a similar navigation system as the walmart site, which is great to see for consistency’s sake. Drilling down to particular products is also done in a similar way through the main navigation as well - yet another consistent element that just makes it so much easier for the user to connect the dots and intuitively navigate the site without feeling frustrated. Images around the site scale up and down gracefully and swipe gestures are used sparingly for various content sliders. Lenovo Australia obviously cares about its mobile audience and shows it with this strong responsive effort - hopefully other countries get the same care and attention soon as well! For some more in depth look at the re-design, check out this blog post: Lenovo Responsive Web Design Project Summary
3. West Virginia University Research (USA)
The WVU Research website takes us in a different direction than our previous sites in that project is more content focused rather than a full blown e-commerce site. In saying that, it becomes extremely important that on a site like this, your content grows and shrinks gracefully while maintaining readability across all screen sizes. Thankfully, this site excels at it while also providing an excellent navigation experience. Much like the walmart site, WVU leverages the use of iconography around the site to create that familiar connection of imagery and content. This site is a great example of how an educational institute can still deliver a great mobile experience to users without having to go with a separate mobile codebase or native app. For a developers view on how the site was put together, as well as some de-mystifying of responsive design rumours, check out this blog post: WVU Research Responsive Redesign, Web Performance Optimization, and More...
4. Awwwards (Spain)
What better site to feature than one that gives out awards for awesome websites? There are a couple of interesting concepts to take note of on this site actually. The primary navigation of this site remains consistent - even on large screen sizes. While most sites go for a more traditional horizontal main navigation and then switch to more mobile friendly layouts, here we have one layout to rule them all! Personally, I think this is a great approach as it does not require the user to figure out the navigational structure again in different screen sizes - they’re keeping it simple and it works. Another concept to take note of is that the amount of visual elements on the page gets reduced the smaller the screen size gets. My view on this is that usually a users' behaviour or set of goals is vastly different on a medium/small screen than it is on a large one. For example, on this site, are you really going to submit your site while on your mobile phone? You’re more than likely going to sit down at your laptop where you can input information faster and easier rather than with your thumbs on a mobile device. In saying that, it makes perfect sense to remove the elements on the page that users' are rarely going to click on and let them focus on other parts of the website that they will actually care about. Not only does this make for better UI/UX, but it can often be better for load times and site performance as well.
5. Mailchimp (USA)
As Mailchimp is one of the premiere services for e-mail campaigns and templates, I’m glad they've decided to go responsive with their website. As a company that would pride itself on having e-mail templates that should work on all devices and browsers, it gives you a sense of trust right off the bat that they are thinking of mobile users just as much as their desktop ones. While this is one of the simpler responsive sites on this list, it still does the little things well - especially with their main navigation. Along with their minimalistic design, Mailchimp has created an inviting user experience that presents clear paths to their users and their goals which in this case is either signing up, logging in, or browsing prices or features. Oftentimes simple is just the best way to go, hands down.
That brings us to the end of our list! If there are any responsive sites out there that you think need to be mentioned, feel free to share them below. Thanks for reading!