Responsive Web Design: 50 Examples and Best Practices

Seminal Responsive Web Design Example

As the nameplate implies, the website serves as a perfect example of a responsive design. It even has a proper title “A Flexible Grid”, so it becomes clear that everything here is riding on rules of graceful degradation. As expected, the team pays more attention to an ideal data presentation rather than to aesthetics, so styling goes into the shadows.

The demo page includes navigation, a text block, grid-style area and even illustrated logotype, so to speak covers a minimum of integral elements. The team showcases how sizes of logical divisions and arrangement should properly change in order to provide users with an excellent experience on portable devices.

Naomi Atkinson

Naomi Atkinson leverages a mosaic-style layout for the front page. This solution is widely-used among those who want to immediately shed a light upon its artworks by creating online portfolios.

The website is worth mentioning not because of its design, since, to put it mildly, it leaves much to be desired but due to its functional side that is quite intelligent. The designer employs irregular grid that nicely transforms into a correct grid once you start minimizing your browser window. And that’s not all; metamorphoses are supported by pleasant effects that add dynamics and attractiveness to the project.

Forefathers Group

What can you say about this website? It certainly conveys a distinct, quite overwhelming impression with its matchless, sophisticated design. The team has not stinted on the artistry that manifests itself in various moments.

The website charms with its incredible retro-style typography, fantastic hand-drawn illustrations, textured background, and amazing graphics; and these all embellishments skillfully co-work with textual content that takes up a special place in the design.

So as you can see, the team has to take into account lots of details in order to turn the website into a comfort place that will satisfy needs online visitors that surf the website via various pocket devices.

Spigot Design

Here, the responsive behavior should leave an imprint not only on a standard layout that includes grid-style and line-by-line data presentation but also on intro video, dynamic graphics and of course, menu.

Bearing everything in mind, the team is managed to provide online audience with an elegant design spiced up with some charming effects and full of whitespaces that nicely reflect data regardless of screen dimensions.

New Adventures In Web Design Conference 2012

Being based on a flexible grid allows the organization to win over as many potential visitors as it possible. And in this case, this quality not only contributes to the appearance of the website but also unobtrusively supports the event that it publicizes. Since the website is dedicated to web design conference, it is highly desirable to demonstrate regular users that the team is aware of current web requirements and rigidly sticks to them. So building a website with all specifications is an important move towards a success.

Illy Issimo

The responsiveness is an essential feature of every high-quality promotional website that understands rules of attraction. Illy Issimo got the hang of it and used a flexible grid in order to

  • provide a pleasant user experience;
  • extend a targeted audience;
  • draw in potential customers that use small devices.

So as a result, its advertisement campaign is certainly out in front.

Arrrrcamp Conference

The website focuses more on text rather than on multimedia. Thus, the large part of the website is based on a white monotone background that nicely underlines text and some trendy “ghost” buttons.

The front page undergoes changes once you resize your browser window; it ably supports all resolutions starting from 1920px and ending up with 240px that is really convenient since Ruby-lovers definitely know how to use tablets and mobiles in search of necessary stuff such as conferences in internet.

Robot or Not?

Robot or Not? is a demo website that puts a flexible grid in action.

Featuring an equal mix of textual and multimedia data that takes up the whole browser screen (as is often the case) and stripping away all the decorations and creative styling, the team tries to make from the regular page an excellent example for newbies that want to vividly understand basic transformations that happens with the layout when it adapts to various screen dimensions.

Earth Hour

Earth Hour is a really advanced and complex website that is filled with lots of multimedia including both videos and eye-catching photos. Moreover, it is also an online infographic that utilizes some beautiful graphics and smooth transitions in order to draw attention to the issue.

Unfortunately, the adaptation is not well-crafted and fully elaborated, since the website suffers from some inconsistencies starting from tablet version, to say nothing of displaying on a much smaller devices such as mobiles.

Teixidó

The creative team resorts to an ingenious approach of using textures, fantastic drawings and illustrations in order to effectively set its company online and make it look unique and eye-catching.

An artistic side is absolutely stunning. How about an ability to skillfully adapt to competitive environment? Here is also all present and correct. Though the website is static, there are no magnificent effects or dynamic zest, yet the responsive behavior dramatically contributes to the users’ experience, saving the day.

Ribot

Ribot is a high-end digital design studio which specializes in mobile, tablets and beyond – as the title says.

The key words here are mobile and tablets, it means that the team concentrates on creating designs that will be suitable for namely such devices, so it’s not surprising that the website design itself also easily blends into screens of such gadgets, nicely displaying information and providing regular online visitors with a proper way of exploring company’s services and possibilities.

Deren Keskin

Deren Keskin has a compactly arranged, clean online portfolio that obviously resorts to a rule that every web page should occupy only browser screen, even blog falls under this requirement.

The same goes to modified (according to responsive scheme) layouts, so everything is compressing until the whole structure perfectly fits into a screen regardless of its dimension. Furthermore, the designer is managed to save all the proportions and relationships between integral components in order to save and carefully identify the previously set priorities of some elements.

Newsletter

14 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.

    Reply
    0
  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?

    Reply
    0
  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.

    Reply
    0
  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.

    Reply
    0
  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

    Reply
    0
  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?

    Reply
    0
  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” :)

    Reply
    0
  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?

    Reply
    0
  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.

    Reply
    0
  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.

    Reply
    0
    • 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]

      Reply
      +1
  11. Tony Porto Apr 20, 6:35 am

    Awesome examples that go beyond the usual grid layouts

    Reply
    -2
  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.

    Reply
    0
  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.

    Reply
    -1

Leave a Reply

*
* Minimum length: 20 characters


Download Web Design Freebies & Resources

psd

You have Successfully Subscribed!