Responsive Web Design: 50 Examples and Best Practices

  •  16 Comments

Sweet Hat Club

Much like the previous example, the content is tightly packed together. The newspaper-style layout is aimed to predominantly feature images since the website is an online club of those who like to wear hats.

The textual filling here is quite optional, so the responsive grid should chiefly take care of properly modifying image sizes and fitting them into new dimension. What is worth attention here is that even the mobile version of a website includes 2 columns as the original one.

Glitch

At the present time the website is closed. The home page includes some information about the previous project activity, helpful links and characteristic illustrations. This is only one static web page that is reminiscent of the old days.

However the non-working status in no way affects the responsive behavior that is inherent to the website. Even now, being out of service, it continues to complying with web requirements and formally notifying users about its current status whether they stumble upon the website sitting at his computer or using a cell-phone.

dConstruct

dConstruct is a website dedicated to conference and workshops that take a look at perceptions of technology and culture. Though the design is quite primitive, yet the informative side is really well-thought-out. Thus, the front page draws your attention to only 3 main moments:

  • speakers and workshops’ teachers;
  • description about the event;
  • sponsors.

Those are the main things that worry potential visitors and need to be instantly highlighted.

Adaptive Web Design

As the nameplate implies, the website is concentrated on adaptive issues. To be more precise, this is a promotional website that advertises a book that will answer all you questions.

So it’s quite predictable that the developer leverages it as a tool for showcasing its skills through providing users with a representative example of how should a regular website behave when users come to it from various devices.

Authentic Jobs

Authentic Jobs is an online directory that is aimed to unite employers with job seekers. It traditionally displays data via a list-style layout that is quite elegant and easy to handle when it comes to adding versatility via incorporating responsive behavior.

The transformation does not cause much trouble, since the structure stays the same; the only thing that undergoes changes is a sidebar which is moved down the hierarchy by giving way to more relevant and priority data.

Five Simple Steps

The website of Five Simple Steps has a clean appearance that features only some kind of valedictory speech and a list of helpful stuff from those who previously run this website.

Staying responsive till the end is a good rule of etiquette, and the company is perfectly conscious of this. Even being closed, the website continues to meeting current web requirements and supplying its mobile and tablet readers with a perfect readability.

Splendid

Splendid is a simple online portfolio that emphasizes users’ attention on artist skills and experience. You will not find neither fantastic illustrations nor ingenious effects; the designer takes a minimal approach in order to present himself, and it definitely stands in a stark contrast to other sophisticated creatives’ websites.

In this particular case, the minimal design doesn’t mean minimal functionality. The artist feels that the responsive design is and will be the primary focus, so he takes care about a proper adaptation to huge and small screens.

Ryan O’Rourke

When you run into online portfolio of Ryan O’Rourke, it seems that the designer is guided by the wise phrase “brevity the soul of wit” and realizes it literally. Minimalism, minimalism and again minimalism…there is only one web page that features one sentence, email and small gif animation that shows off his activity. However much like the previous example, the website is based on a responsive framework that makes the website ready for mobile web audience.

FlexSlider

FlexSlider is a lightweight jQuery slider from WooThemes with simple semantic markup and numerous valuable features that was created to become your reliable companion for an ideal image showcase on every popular device.

Nevertheless, the web page that promotes the product, unlike the slider itself, is not as adaptive as it should be. Unfortunately, the team has missed this point that really disappoints.

El Sendero del Cacao

El Sendero del Cacao has a visually-appealing website with a calm and warm atmosphere that is achieved with a help of soft coloring, spectacular images and appropriate graphics. Moreover, thanks to such integral features as

  • responsive layout;
  • cross-browser compatibility;
  • easy navigation;
  • multi language support.

the website is able to unobtrusively force users to indulge in an enjoyable pastime.

Newsletter

16 Comments
  1. Tammy Cornett Dec 2, 12:12 am

    After a complete redesign and new content creation in August, this week our site (it.eku.edu) is now responsive. Our goal with the redesign was to be clear, concise, consistent and keep our content correct. The goal with the RWD is for our users (students, faculty, staff) to be able to find the IT support they need on any device.

  2. Paul Eustice Jan 18, 8:35 pm

    Some nice examples here. I recently launched my site (I actually started playing with it in December 2010 but I got lazy) which uses a responsive layout with column-count, which I haven’t seen used on any other sites.

    It’s also fluid between breakpoints, which is something I think many people miss out, to ill effect. What point is a responsive site that isn’t fluid between your set resolutions?

  3. Joe Twumasi Jan 20, 2:31 am

    Nice list on responsive web design and looking forward in getting my new website to this technique in making it easier on different screen resolution.

  4. TJ Feb 3, 12:13 am

    This is a great article and some really good examples of responsive design.

    I think we’re really going to start to see a shift from traditional design to responsive design. It makes the most sense for client who are looking to design their website and applying similar themes to a mobile or tablet device without having to create a native app.

  5. Ken Feb 5, 1:47 pm

    Great examples of very responsive and fluid design. Really nice for inspiration for any designer willing to level up their skills for flexible work

  6. Sheryl Feb 11, 2:11 am

    Love these examples. Does anybody have any examples or insight on how to apply responsive design to desksites that currently employ mega-dropdown navigation?

  7. Sebasitan Mar 9, 4:02 pm

    Great lists that really presents at lot of interesting examples. We are currently trying to educate our clients in Responsive Design, and I will add this to a “must read list” :)

  8. Westleigh Mar 18, 7:05 pm

    How to I brief my designers for a responsive web design layout? or is this purely a developers role where he/she must convert the design into responsive code?. How is responsive handled / done when it’s PSD to HTML/CSS?

  9. Mads Sørensen Mar 20, 2:05 am

    Very nice examples here! RWD is moving along really fast, but I wish there was a better way to do images responsive!

    I found little browser app who’s located in the menubar, it’s really great for when I’m developing my responsive sites.

  10. Stein Mar 22, 3:08 pm

    Thanks for these great example websites! Times are evolving and web designers need to keep up, that’s a fact. However, I do feel that the more we adjust our website designs to display properly on different screens and devices is limiting our creative ability. Designers need to create designs that fit all, so it’s almost becoming a necessity to stick to the standard header-content-sidebar-footer layout, making it hard for creative, alternative designs to survive and I think that’s just too bad.

    • Patzilla Apr 15, 5:58 am

      Exactly. I had just altered my own and my clients’ sites to accommodate larger resolution screens and now find myself doing the opposite or compromising eye quality for “thumbster” quality. I also am finding coding for this difficult to implement since I’ve done my own html for so many years. [shrug]

  11. Tony Porto Apr 20, 6:35 am

    Awesome examples that go beyond the usual grid layouts

  12. Timothy Gibson May 22, 3:28 am

    I believe that eventually, there will be more variety of layouts that uses responsive web design given the fact that it is fairly new.

  13. Russell Epstein May 23, 5:06 pm

    Great examples; thanks for sharing. We just made our site responsive. It is unique in that the images are not only fluid across screen sizes, but are draggable and droppable as well.

  14. Reseau Mar 21, 12:27 pm

    Little curious about AMP beside responsive design.

  15. kamal mondal Mar 28, 6:59 am

    very helpful guide for responsive website design.

Leave a Reply

*
* Minimum length: 20 characters