An Analysis of Responsive Websites – What’s Hot and What’s Not

Posted in Tips, Web Design • Posted on 18 Comments

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.

1. Sony

Sony

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.

2. Starbucks

Starbucks

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.

3. Aids.gov

aids.gov

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.

4. Dairy Queen

dairyqueen

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.

5. Alsacreations

alsacreations

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.

6. Gravitate

gravitate

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.

7. Spigot

spigot

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.

8. Disney

disney

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.

9. Food Sense

food-sense

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.

10. Skinny Ties

skinny-ties

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.

11. Coca Cola

coca-cola

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×480 portrait screens.

12. Clean Air Challenge

cleanairhanller

First thing you notice about Clean Air Challenge are the moving clouds in the background. Like many, I expected the website to lose this animation on mobile devices, but amazingly the animation stays smooth and balanced. In addition to that, the website intelligently transforms into a vertical format while still maintaining its other aesthetic elements for example you will lose the images of the main navigation icons when you move to your mobile device but when you scroll down, they will be visible to you in the footer.

13. Contents Magazine

contentsmagazine

Contents Magazine gives one of the best illustrations of how effective responsive web designing can keep the content of the website at the center and front at all times – regardless of the device or platform used. The designers have managed to create a near perfect design where the pre-issued illustrations dynamically wrap around depending on the different breakpoints. The best thing about the design is that a reader will find genuine pleasure in reading the various content on his mobile site as the responsive images adjust themselves and never act as a distraction.

14. Crayola

crayola

Crayola gives us a perfect example of how cleverly used responsive web design can lead to navigation and content being scaled down for users operating a mobile device. When you look at the desktop version, the website has loads of tabs for navigation but when you switch to a mobile device, you get to see only the important ones whereas a user-friendly accordion pops up to accommodate the main navigation bar.

15. Time

time

In this day and age, it has become essential for every news site to have a responsive web design since they have to cater to the needs of a large population of their readers who want access to all the latest news and stories on the go. Time gives us an example of a minimalistic responsive web design approach while at the same time it sets an example for other News websites and companies on how to design grids and menus for easy viewing on a mobile device.

16. Smashing Magazine

smashing

Smashing Magazine sets the example for absolutely perfect responsive web designing where they demonstrate how the original design and content of a website does not need to be sacrificed on mobile devices. The developers of this website have paid attention to accommodating virtually every single screen size and resolution. One of the best things about viewing this website in your mobile device is that the ads simply disappear. The left side bar and the main navigation bar all wrap up into a drop down menu giving a mobile user easy accessibility to all pages of the site. One drawback is the absence of the social media buttons and the RSS feeds subscription button which are only visible in the desktop version.

17. Polygon

polygone

Polygon stands out from the rest of the crowd in the Gaming websites industry combining stunning artwork and responsive web design architecture for a superb display across desktop and mobile devices. But one very obvious drawback is that the social media buttons disappear when you switch from desktop to mobile.

18. Ableton

ableton

Even if you have a relatively heavy sight, Abelton demonstrates that with intelligently written code, you can still deliver a vibrant color combination with a mix of bold imagery across all platforms and devices. With the need to incorporate both video and music, Abelton have managed to do keep the focus on the content while making sure the design is not sacrificed.

19. Burton

burton

Although Snowboard retail giant Burton have incorporated responsive web design nicely for most elements of their page, there is still a lot left to be desired. For instance, the main menu navigation bar on a mobile device is nothing but a simple drop down button. The Board Finder tool is also missing which would have been a great feature for customers who are on the go and who want to find the perfect snowboard for themselves.

20. Abduzeedo

abduzeedo

Although Abduzeedo has a lot going on for itself on the Desktop, it doesn’t quite live up to the same expectations on a Mobile device. For starters, the posts automatically align themselves on the grid which makes them look clustered and improper. Regarding the sticky navigation on the Desktop, it has become more of a trend these days although there are two different opinions regarding this.

The Pros

There are companies that have chosen to design dedicated websites for mobile devices, tablets and desktops while there are others who have incorporated a single responsive web design that can accommodate a wide array of devices accessing it. The most obvious advantage of a responsive web design is that since there is a single website, it is much less of a hassle maintaining it. A single website means a single code for all devices and whenever you need to make a change, you will have to do it only once.

Responsive web designing is also beneficial for owners who are trying to get better SEO rankings as the website offers a single unique URL across all platforms and devices. There are numerous success stories in the industry where companies have reported an increase in mobile clicks to their website by as much as by 50% ever since they revamped their websites with a responsive web design.

The Cons

Providing a truly unique experience across different devices can become a hefty challenge for websites that are increasingly complex compared to others. This means your design team will be spending a lot of hours at the desk customizing and integrating various JavaScript sequences with HTML5/CCS3 code to create a balance between a native-app touch and a desktop-website feeling.

Although Responsive Web design is meant to provide a great experience for every user (and every device) accessing a merchant’s website, the ground reality is not always as such. In some cases, users find themselves having a better experience on Tablets rather than their smartphones and in other cases, it’s the opposite. Sometimes on mobile devices, the text can get too small for a user to read, forcing him to use the pinch and zoom actions – the exact same thing that is meant to be avoided by a mobile website. Getting the navigation absolutely right is another challenge that most designers face for responsive web design especially when it comes to smartphones. There is also a need for a fresh approach for image optimization and content management workflow.

The Final Take

Although widely adopted by a number of reputed companies and merchants worldwide, Responsive Web Design is still in its infant stages. And in spite of the challenges faced, many experts are of the opinion that this is definitely something to look out for in the future. More and more websites are leaning toward Responsive Web Design and if it is planned out properly, we might well see every reputable website as a stunningly beautiful blend of responsive web designing with specific touch elements giving mobile phone and tablet users a truly great experience.

1 Written Articles

18 Comments Best Comments First
  • Jack

    Friday, April 12th, 2013 03:41

    3

    Brilliant! Great article to the letter! Am now ready to make my own website, responsive.
    The way websites are going one day they might be like mini operating systems where users do what they want within a set system.

    +1
  • Herman

    Thursday, April 11th, 2013 19:25

    1

    Your information is just very useful. We do not have to design two or more style and format to meet the different devices. You have come out with that brilliant ideas. Hopefully that we could share more information in the near future! The world is changing dramatically!

    +1
    • Saad Akhtar

      Sunday, April 28th, 2013 02:58

      16

      Hello Herman

      Thanks a lot for your feedback .

      As i said , Responsive Web Design is the way forward. With changing times and trends, companies and website owners will have to adapt for the different platforms and devices and its a good idea to have onw working design across all platforms.

      0
      • karenwalters

        Friday, May 17th, 2013 02:55

        18

        Wow!! It’s great really to take an idea to create new designs. I think it’s going to be important for all designers to get more familiar with responsive design because now web is no longer defined by the experience you have on your computer. People are now accessing the web from a variety of mobile devices/tablets and your design and how it functions need to account for this.

        0
  • Kristy

    Thursday, April 18th, 2013 00:25

    7

    Turning your site into a responsive website is an advantage to make your page accessible to all modern devices that people are using nowadays whether it is a desktop computer, android phones, iPad, tablets or etc. Increase number of qualified leads or conversions and gaining more traffic for the site are the good result of it.

    0
    • Saad Akhtar

      Sunday, April 28th, 2013 02:49

      11

      Hello Kristy

      Yes , very rightly said . A responsive website works across all devices and platforms and thus increases the overall traffic ratio.

      0
  • Mayur

    Thursday, April 18th, 2013 07:24

    8

    All the above designs are the great examples of designing efforts. I observed “Starbucks” taking too much time to load as compare to other sites.

    0
  • Peter

    Saturday, April 13th, 2013 10:40

    6

    Not much talk about the various tablet screens. Although most websites currently do display correctly on tablets, some don’t an those are the ones that are not designed well that could stand to benefit from responsive web design.
    You also have to be careful when designing for ecommerce sites if you are taking the responsive approach.

    0
    • Saad Akhtar

      Sunday, April 28th, 2013 02:51

      12

      Thanks Peter for your feedback. Yes I did not include a detailed discussion on the different tablet screens on purpose to keep the length short. And you are very right when you say that Ecommerce websites need to be cautious when approaching responsive web design.

      0
  • Bianca

    Friday, April 12th, 2013 15:16

    5

    Aside from starbucks not much mention here of tablets. I am interested in how companies are modifying headers for a variety of sizes.

    0
    • Saad Akhtar

      Sunday, April 28th, 2013 02:53

      13

      Thanks Bianca for the feedback . A detailed discussion of responsive design for tablets might be coming soon :-)

      0
  • Daquan Wright

    Thursday, April 11th, 2013 21:00

    2

    I love this article, great round up. I’m really inspired by responsive web design, it’s so creative. The great thing about it is that even though responsive web design has drawbacks, its pros are enough to make it “work,” regardless of the effort. If you can provide a great user experience with less maintenance, and the content is always spot on, no reason to not use it.

    It’s a more efficient way of doing things, but there will always be a situation where creating a separate mobile site is ideal I suppose.

    0
    • Saad Akhtar

      Sunday, April 28th, 2013 02:57

      15

      Hello Daquan

      Thank you very much for your comment.

      Responsive web design is the way of the future , I agree and yes the pros outweigh the cons and like you said , for some specific companies and businesses , its a better idea to have a dedicated mobile website.

      0
  • Christoph

    Friday, April 12th, 2013 06:14

    4

    Hi,
    First, thanks for this Post, very helpful.
    A Question: I am just starting with responsive Webdesign, its very useful and as you said, i takes a lot of time to display a website on every device perfectly.
    But I am wondering, more and more Mobile Phones, Tablets etc. are getting a bigger screen resolution. So at some point, it wouldnt be necessary to make a website responsive. Or am I missing something?

    Thanks, Chris

    0
    • Saad Akhtar

      Sunday, April 28th, 2013 02:55

      14

      Dear Christoph

      I would advise you to go for Responsive Web Design. Its the incorrect design technique and inefficient coding which leads to slower loading times on tablets and other devices .

      If you do the coding and design right – Responsive Web Design is the best option for you !

      0
  • Saad Akhtar

    Saturday, April 20th, 2013 15:19

    9

    @Mayur

    Thank you for the acknowledgment.

    Indeed the Starbucks website takes much longer to load than other websites . A slow loading time is one of the drawbacks.

    SA

    0
    • Mayur

      Monday, April 22nd, 2013 02:12

      10

      @ Saad, Yes, It will create some troubles for website, due to slow loading time. The bounce rate ratio may get high, which affect on website traffic stats.

      0
  • Ravi Karthick S

    Monday, May 13th, 2013 12:50

    17

    Thanks for posting such a wonderful thing!!.
    I already tried your responsive design website tutorials!!.. that help a lot!!
    Thanks once again!!

    0
  • Ravi Karthick S

    Monday, May 13th, 2013 12:50

    17

    Thanks for posting such a wonderful thing!!.
    I already tried your responsive design website tutorials!!.. that help a lot!!
    Thanks once again!!

    0
  • Saad Akhtar

    Saturday, April 20th, 2013 15:19

    9

    @Mayur

    Thank you for the acknowledgment.

    Indeed the Starbucks website takes much longer to load than other websites . A slow loading time is one of the drawbacks.

    SA

    0
    • Mayur

      Monday, April 22nd, 2013 02:12

      10

      @ Saad, Yes, It will create some troubles for website, due to slow loading time. The bounce rate ratio may get high, which affect on website traffic stats.

      0
  • Mayur

    Thursday, April 18th, 2013 07:24

    8

    All the above designs are the great examples of designing efforts. I observed “Starbucks” taking too much time to load as compare to other sites.

    0
  • Kristy

    Thursday, April 18th, 2013 00:25

    7

    Turning your site into a responsive website is an advantage to make your page accessible to all modern devices that people are using nowadays whether it is a desktop computer, android phones, iPad, tablets or etc. Increase number of qualified leads or conversions and gaining more traffic for the site are the good result of it.

    0
    • Saad Akhtar

      Sunday, April 28th, 2013 02:49

      11

      Hello Kristy

      Yes , very rightly said . A responsive website works across all devices and platforms and thus increases the overall traffic ratio.

      0
  • Peter

    Saturday, April 13th, 2013 10:40

    6

    Not much talk about the various tablet screens. Although most websites currently do display correctly on tablets, some don’t an those are the ones that are not designed well that could stand to benefit from responsive web design.
    You also have to be careful when designing for ecommerce sites if you are taking the responsive approach.

    0
    • Saad Akhtar

      Sunday, April 28th, 2013 02:51

      12

      Thanks Peter for your feedback. Yes I did not include a detailed discussion on the different tablet screens on purpose to keep the length short. And you are very right when you say that Ecommerce websites need to be cautious when approaching responsive web design.

      0
  • Bianca

    Friday, April 12th, 2013 15:16

    5

    Aside from starbucks not much mention here of tablets. I am interested in how companies are modifying headers for a variety of sizes.

    0
    • Saad Akhtar

      Sunday, April 28th, 2013 02:53

      13

      Thanks Bianca for the feedback . A detailed discussion of responsive design for tablets might be coming soon :-)

      0
  • Christoph

    Friday, April 12th, 2013 06:14

    4

    Hi,
    First, thanks for this Post, very helpful.
    A Question: I am just starting with responsive Webdesign, its very useful and as you said, i takes a lot of time to display a website on every device perfectly.
    But I am wondering, more and more Mobile Phones, Tablets etc. are getting a bigger screen resolution. So at some point, it wouldnt be necessary to make a website responsive. Or am I missing something?

    Thanks, Chris

    0
    • Saad Akhtar

      Sunday, April 28th, 2013 02:55

      14

      Dear Christoph

      I would advise you to go for Responsive Web Design. Its the incorrect design technique and inefficient coding which leads to slower loading times on tablets and other devices .

      If you do the coding and design right – Responsive Web Design is the best option for you !

      0
  • Jack

    Friday, April 12th, 2013 03:41

    3

    Brilliant! Great article to the letter! Am now ready to make my own website, responsive.
    The way websites are going one day they might be like mini operating systems where users do what they want within a set system.

    +1
  • Daquan Wright

    Thursday, April 11th, 2013 21:00

    2

    I love this article, great round up. I’m really inspired by responsive web design, it’s so creative. The great thing about it is that even though responsive web design has drawbacks, its pros are enough to make it “work,” regardless of the effort. If you can provide a great user experience with less maintenance, and the content is always spot on, no reason to not use it.

    It’s a more efficient way of doing things, but there will always be a situation where creating a separate mobile site is ideal I suppose.

    0
    • Saad Akhtar

      Sunday, April 28th, 2013 02:57

      15

      Hello Daquan

      Thank you very much for your comment.

      Responsive web design is the way of the future , I agree and yes the pros outweigh the cons and like you said , for some specific companies and businesses , its a better idea to have a dedicated mobile website.

      0
  • Herman

    Thursday, April 11th, 2013 19:25

    1

    Your information is just very useful. We do not have to design two or more style and format to meet the different devices. You have come out with that brilliant ideas. Hopefully that we could share more information in the near future! The world is changing dramatically!

    +1
    • Saad Akhtar

      Sunday, April 28th, 2013 02:58

      16

      Hello Herman

      Thanks a lot for your feedback .

      As i said , Responsive Web Design is the way forward. With changing times and trends, companies and website owners will have to adapt for the different platforms and devices and its a good idea to have onw working design across all platforms.

      0
      • karenwalters

        Friday, May 17th, 2013 02:55

        18

        Wow!! It’s great really to take an idea to create new designs. I think it’s going to be important for all designers to get more familiar with responsive design because now web is no longer defined by the experience you have on your computer. People are now accessing the web from a variety of mobile devices/tablets and your design and how it functions need to account for this.

        0

Comments are closed.

54.167.138.53 - unknown - unknown - US