New Post has been published on Mocco
New Post has been published on http://mocco.sk/an-analysis-of-responsive-websites-whats-hot-and-whats-not/
An Analysis of Responsive Websites - What’s Hot and What’s Not
Let’s face it folks, everyone in the web design world is chirping away about responsive websites these days. People definitely carry strong views about it and whether you like it or not, you cannot deny the fact that responsive web design has gone mainstream and will continue to progress and expand in the future.
Every client on the web these days are looking for a website that will function just as good on mobile devices as it does on desktop browsers. And come to think of it, the need of today’s modern technological era is to have one working design that is compatible across multiple platforms and devices that includes Netbooks, Blackberry’s, iPhones, iPads, Kindle readers and other smartphones and tablets. It’s inevitable that over the next few years, new gadgets and devices will be unleashed in the market, all having their own respective screen sizes and resolutions.
It seems almost impossible or at least impractical to have a different website version for each of these devices. Some people might opt for creating websites for one platform or device only but they stand to face the risk of losing viewers of other devices.
So what is the solution to this predicament?
The answer is simple – Responsive Web Design
For those who are totally new to the concept, Responsive Web Design is a design technique that thoroughly focuses on a user’s environment and behavior based on the orientation and size of his screen as well as the platform. This methodology integrates a blend of cleverly laid out grids and images combined with the smart usage of CSS Media Queries. What happens is that, when a user switches from his desktop or laptop screen to his iPad or iPhone, the website will automatically itself to fit the device’s screen.
In a nutshell, you could say you are empowering a website with a kind of artificial intelligence which lets it respond to the user’s environment. Responsive Web Design has gained tremendous popularity in the Web Design World as it eliminates the need of having different development and design phases for every different gadget in the Industry.
So if you are looking for inspiration for your next website, you should look at these fresh and stylish responsive design layouts (in no particular order) which cover a wide range of companies and design strategies. Here, we will focus on the mobile side of these responsive websites and try to take a look at what practices make these websites an inspiration to everyone who’s looking to transform their web design to function across multiple platforms and devices.
Sony manages to get everything right in their elegantly designed website. My favorite part of their responsive design approach was seeing the way their navigation bars change when switching from desktop to mobile devices. On a mobile device, the main navigation menu will change places with the social media buttons. The menus also compact themselves into a single drop down button where the different pages can be accessed easily.
Starbucks is unarguably one of the biggest retailers in the world and it was one of the first to make the jump to responsive web design. The minute you switch to mobile from desktop on this website, you get the feeling that they have a sizable team with a substantial budget working on the transformation. The first noticeable thing was that the initial breakpoint arrives at the 769px mark (I assume this has been done to accommodate the portrait orientation of tablets). The best thing about the design is that the navigation adapts itself automatically across different breakpoints. For example, at the largest breakpoint, the top level menu allows you to jump across two levels of navigation for viewing a page.
Aids.gov‘s website is probably the first US government website that has made the switch to responsive web design. I noticed that they use the HTML5 doctype without the use of any additional HTML5 elements like articles, headers or sections. Specific attention has been paid to the website for how it is viewed by users on Windows IE Mobile 7. Aids.gov employs the standard responsive web design approach as the website was redesigned from scratch. The theory lies in working with the smallest screen size and resolution first and then building up the additional required CSS code as the breakpoints are increased. Responsive images have been incorporated to make the website more visually appealing with special emphasis on how the script dynamically recalculates the appropriate height and width of each image based on the screen size.
If you want to feast your eyes on one of the most perfect examples of responsive web design, head over to the Dairy Queen’s official website. One of the best things about the design is the fluid slider motion for mobile devices. There is a strong emphasis on how visible the content is to users across multiple devices and screen sizes. The main navigation menu wraps up into a smart drop down box at the first breakpoint allowing users to easily navigate the different food categories. All in all, the website is a visual treat and a perfect execution of elegant and efficient responsive web design.
This is one website that has taken a different responsive web design approach than most websites present on the Internet. Alsacreations doesn’t worry about maintaining all their elements and aspects of their desktop website when a reader switches to tablet or mobile. Instead, Alsacreations drops their image slider from widescreen display to square and even more, when the readers switch to mobile they will not be able to see any of the original elements except for the About button and the Email form in addition to the links for all other elements. This has been done keeping the views of the specific target audience in mind where the creators have kept in mind that most users opening websites from their mobile devices do it to get the brief company information only.
It wouldn’t be fitting to have a design studio website without responsive website design on their own page, right? Even if you are a lone freelancer, you would want your website to reflect your design skills and portfolio and this is exactly the approach that Gravitate Design Studio has incorporated into their website. They have kept and simple yet elegant design without going over the top on borders or shadowing or other flashy elements. The menu buttons on the top compact and nicely re-arrange themselves when you switch to mobile giving users to access to every page on the website.
This is another web design and development company that has flawlessly perfected the art of responsive web design for their website. Going through the pages, you cannot deny the fact that the entire layout has been designed to work without any errors on desktop and mobile devices. You would expect that the shifting and animated icons would lose their touch on mobile devices, but this is not the case with Spigot. Although it would have been difficult to make this design work across all devices yet they have pulled it off magnificently setting a truly inspiring example for others in the field.
Entertainment giants Disney have a website which is a perfect example of coherent designing across all devices and platforms. Smaller resolution doesn’t necessarily mean that you have to compromise on content. The beauty of this responsive design is that the focus stays always on the content that matters. Photos and Videos are the main focus of attention whether you open it on a mobile device, tablet or your PC. However the only drawback from usability point of view on mobile devices is that the navigation doesn’t have direct access in mobile version and you have to make up for it with an extra click.
Another excellent example of sharp responsive web design techniques is Food Sense. It uses wide screen resolutions to the maximum but when limited by width on mobile devices, it adjusts brilliantly by managing to still maintain its smooth flow and tidy outlook. However, one drawback I noticed with the Mobile version was the loss of the latest Tweets and Facebook plugin which can be seen on the full version under the navigation bar on the side column.
There is no better definition of perfect responsive web design execution than Skinny Ties. The design is even more impressive considering that it was a complex website – an ecommerce one. You will find a unique navigation experience across all breakpoints and viewpoint resolutions but the best thing about is its exceptionally responsive handling on mobile devices. Despite the use of the hovering function on touch devices, all visual aspects remain intact.
Soft Drinks giant Coca-Cola made their entry into the fast changing web design world with one of the most complicated responsive web designs I have come across so far. One of the noticeable features is how the content boxes on the right hand side automatically align themselves below the slider so the user has no viewing problems. One drawback I came across however was some minor bugs with the navigation on 240
