With the internet being more accessible across many different devices these days, it’s no surprise that responsive design have seen a rise in popularity. Gone are the days of pinch-to-zoom. A wide range of websites now automatically adjust their layout according to the user’s device. Some have even stretched the boundaries of the standard 960 grid and take up the full width of the screen. This has been a great approach when it comes to reaching out to their audience. These types of sites not only look great on any device, but also makes the text easier to read. Even those who are not as internet-savvy are able to easily navigate around a responsive site.
The following are some websites that take advantage of this new responsive approach:
The makers of the famous Internet Explorer line, Microsoft went all out and built an excellent website. Their website showcases a very colorful, clear and concise design. With the release of the Windows Phone and The Surface, it only made sense to showcase their website on these devices.
If you’re an avid coffee drinker like myself, you’ve likely landed on the Starbucks website at some point. They have managed to keep their simple design and carry it over to any device you’re viewing on. The main menu transforms into a drop down button, which gives users more of a cleaner look while navigating on their mobile phone.
One of my favourite online magazines has taken full advantage of screen real-estate. With the previous two examples, I’ve talked about how great they look on smaller mobile devices. Smashing Magazine has gone beyond that and stepped outside of the standard grid. Their website looks amazing whether you’re viewing it on a mobile device or an extra large monitor. Developers have stretched the boundaries and engineered the site to expand to the edges of the screen.
When you first view the desktop version of the Mashable website, you might be thinking “How are they ever going to fit all of that content into a smaller viewing area?” They achieved this by taking the minimal route and making the mobile version more compact with tabs. The navigation also slides from the left so it does not interfere with the main content.
The Next Web is another example of a site taking advantage of the full width. The design is very simple and clean, which is what you come to expect when you’re reading an article on an online blog. The neat and tidy look carries on to smaller screens. You also have the option to sort and filter your articles with the nifty overlay menu from the top left.
CSS Tricks is one of the websites which I visit quite often. As a front-end developer, I find myself always reading their articles on the regular. So when I want to read about the latest news in design and development, I don’t have to worry too much as I can access their site whether I’m on my mobile device or on my laptop.
Mozilla has done a great job of keeping the same look and feel with their design. The text and images remain big and bold on any device. They have also retained the main call to action buttons in the body of the website. On the desktop version, these animate horizontally. This transforms to animate vertically to accommodate the smaller mobile screen area.