Responsive Web Design – Ideas, Technology, and Examples

Responsive Web Design

The web design industry is constantly evolving, whether that be with the latest trends in web design – big header images, large photographic backgrounds, etc, or with the latest technologies – HTML5, jQuery, CSS3, and so on. It’s important as a web designer and developer to keep up with these ever changing “trends” within the industry.

One of the biggest “trends” that has hit this field over the past year or so, is the concept of responsive web design. It has become much more than just a buzz word and has taken the industry by storm. It is clearly not going away. If anything, if you haven’t already got on board with it, it maybe it’s about time to start warming to the idea.

Responsive Web Design

Responsive Web Design

What is Responsive Web Design?

Responsive web design is the term given to the concept of designing and developing a website so that the layout changes depending on the device/viewport on which the website is being viewed. By device, this could be a mobile phone, tablet, laptop, desktop computer, or even a smart TV. The term ‘Responsive Web Design’ was coined by its creator, Ethan Marcotte – his book is highly recommended reading “A Book Apart – Responsive web design”

Responsive Web Design Book
Image credit: Responsive Web Design

In the book, Ethan covers where the term ‘Responsive Web Design’ came from and why it was required.

As a start, its’ important to understand that responsive web design is not one particular technology or item but in fact it is a collection of techniques and ideas, which together establish a new way of thinking in moving the web design industry forward.

Why is Responsive Web Design Such a Big Thing?

With technologies evolving and new products and devices being introduced to the market it’s only natural that consumers will want to keep up with the latest gadgets that we become more and more reliant on.

First it was desktop computers and laptops, then mobile phones and tablets. What’s next?

The fact that we are in an era where it is becoming easier to browse the web means that we need to make it easier for consumers to “reach” us and see what we have to offer, at their convenience.

We naturally have a requirement as designers and developers to provide our end user with the option, or rather, convenience to browse through whatever medium (within reason) they see fit. Therefore, we need to provide a clearer means of portraying the information on different screen sizes, whether this be big or small, vertically or horizontally.

Responsive Web Design Menu
Image credit: Responsive Web Design Menu

It has been noted that in the past creating different versions of a website was the way forward, however it was not the most practical solution, especially as in most cases the user would end up having to download a lot of extra code and design, alongside receiving a poor user journey.
This is why responsive web design has become such a big thing.

Responsive web design provides us with the solution of meeting these requirements without having to create and design different versions of a website depending on the device.

One point to make is that from a business perspective it is not essential we make these changes or adjustments, but rather by doing so we are inevitably meeting the unconscious needs of our end user.

OK so we know what responsive web design is and we know why we may need it. The next step would be how to go about producing it.

How to Make a Website Responsive

As mentioned earlier responsive web design is a collection of techniques and ideas. The two main techniques consist of flexible grid and media queries.

Flexible grid
When designing a website we first start off in Photoshop, making sure each element is designed to pixel perfect measurements. We then translate this design into code, all again based on pixels.

This is fine, and still correct. The website will be viewable all on devices, however not in the most convenient manner, or the prettiest. Stating pixel measurements and viewing on a screen smaller than the one it is intended for forces horrible scrollbars to appear.

Hence we need a solution that is fluid, more relative to the issue, but also keeps its proportional values.

To find a proportional value of an item we use the formula:

“ target / content = results ”

Target + Context = Result
Image credit: Beep2

It’s quite an important formula and one that is key to making designs responsive.

If all values are proportional then the grid based design will scale nicely between devices. So, in other words, no scrollbars.

So, for example, using a Photoshop design mock up, we can find the layout width, typically this could be 960px (this being your main body container). Now say you want this container to “shrink” to 310px wide then the formula would read as follows:

310px / 960px = 0.32291666666667

To obtain the percentage value we multiply by 100 to get: 32.291666666667%

More often than not the percentage value may result in NOT being a whole number. If this is the case then it is important to NOT round up or down to the nearest whole number. Although it may look pretty, your machine will understand the figures in a proportional manner, so its important to keep them as they are!

The Grid System
Perfect grid layout that can be very useful.

The Grid System

Once the fluid grid is in place, the web design is scalable but not responsive.

That is where media queries come into play.

Media Queries

CSS3 media queries go hand in hand with the flexible grid to make responsive web design work.

Luckily CSS3 is supported by many modern browsers.

Media queries were first investigated by W3C a few years ago. A media query allows you to gain information about the viewport from which the user/visitor is looking at the website and target that particular screen size by applying specific CSS styles.

For the purpose of making web sites responsive it can be said that the most important media feature is the “min-width”, this property allows us to apply specific CSS styles if the browser window (in pixels) drops below a particular width.

As a starting point, and possibly the most common pixel min-widths that are targeted are the following:

  • 320px
  • 480px
  • 600px
  • 768px
  • 900px
  • 1200px

Responsive Design Platform Measurements
Image credit: Responsive Design Platform Measurements

It goes without saying that targeting more resolutions will naturally require more time and effort, so it generally depends on the clients’ requirements and your judgment as to whether targeting all resolutions is necessary or not.

Progressive Enhancement

Progressive enhancement is the term or rather strategy for web design which focuses on the content, rather than device or browser. The aim is to enhance the web design by creating semantic HTML markup and giving prominence to accessibility and content.

Many web designers will argue that content is the most important element of a website project and should therefore be considered ahead of the presentation layer, or design.

With this in mind, we could relate progressive enhancement to responsive web design by aiming to design for mobile first.

Essentially when designing for mobile first the restriction due to the smaller screen automatically pushes the thought process into considering what important elements (content) need to be featured for this device. Therefore we naturally start to design around content.

Obviously as the screen sizes differ between tablets, laptops and desktops more space is available and therefore secondary content (social media or RSS links) can be added in a “nice to have” manner for the larger mediums.

It can be said that designing for mobiles enriches the experience of the user by focusing on the content and providing them, the user, with what is considered the most important elements on first view/load.

Showcase of Responsive Web Designs in Action

Below are a few examples of responsive web design in action. The screenshots show a couple of the variations, however to see the full variation of each site (in some cases there are more than others), view the website and change the browser window size. Alternatively view the website on a different device.

Full Frontal
Full Frontal

Future of Web Design London
Future of Web Design London

Clear Air Challenge
Clean Air Challenge

Forefathers Group
Forefathers Group

Andersson-Wise
Andersson-Wise

The Boston Globe
The Boston Globe

1140 CSS Grid
1140 CSS Grid

Laufbild Werkstatt
Laufbild Werkstatt

Responsive Web Design Resources

Responsive web design concentrates quite heavily on devices, viewports and how to gracefully degrade the designs we create across these mediums. In all of the “hype” about RWD we shouldn’t forget Progressive enhancement and its relationship with responsive web design.

Conclusion

It’s safe to say that as technology evolves and new gadgets are invented, new trends happen.

Do you think responsive web design is here to stay? What do you think of responsive web design? Let us know what you think at the bottom of this article.

Krishna is a web designer based in Cambridge, UK. She is passionate about all things design related and loves learning about new techniques and technologies.

Comments

  1. / Reply

    The subject about “platform measurements” is so tricky to deal with because the pixel density issue. I.e. there is no difference between iPhone 3GS (320×480) and iPhone 4/4S (640×960) just because their pixel density. Of course they render the images of a website diferently but as you may know the 320 px breakpoint affects both. (hope you understand, i’m brazilian).

    • dj,
    • May 18, 2012
    / Reply

    Calling something “responsive” without designing for both ends of the screen width spectrum is, as far as I’m concerned, merely “PLAYING AT” being responsive. Unfortunately, all but one of your examples I would adjudge to be “fluid design” but only go part way.

    Remy’s “full frontal” and “future of web design” look like mere 960 down the middle of my screen and treat me to mostly “dead space,” wasting over 50% above the fold screen-space on my monitor. I know both of them could be better, they just didn’t want (or need) to in this instance; but, I’m not sure why you would call them an “example” of responsive design if they aren’t responsive through the whole spectrum.

    Laufbild, forefathers, and the 1140-grid are obviously larger than 960, but not much and seem to think that an iPad is about as big as is needed; after all, why bother “it fits.” Separating 960 worth of content with extra white space (40% margins plus gutters) – isn’t thinking much of those who use wide-screen monitors from desktops. The globe at least utilizes more “above-the-fold” for extra content but not much.

    Andersson, and clean air commute are the only two of your list that I would call truly “responsive design.” They maximize screen usage across the whole spectrum of screen sizes, actually re-arrange for the smaller sizes and remain interesting, balanced and readable throughout.

  2. / Reply

    I have already purchased the HTML5 for Web Designers and CSS3 for Web Designers books and the Responsive Web Design book may be the next on for my shopping list. For someone who is fairly new to creating responsive website there are a few elements and issues I have not come across yet. What I do know is the importance of gaining the understanding and knowledge to move forward. There are more and more technologies out there where people can access the internet and it is vital to ensure your website can work at its best on them all. From some of the example above there are two I have seen before ‘ Andersson-Wise’ and ‘Forefathers Group’ personally I think these work great and are fantastic examples of responsive web design.

    • Raj,
    • May 18, 2012
    / Reply

    what is the best way to implement responsiveness to an existing web layout..? any plugins or third party tool suggestions are highly appreciated..

    • fjpoblam,
    • May 18, 2012
    / Reply

    I surely think responsive web design is here to stay. I’ve read Ethan’s book, and it’s a real help. Jeffrey Zeldman’s alistapart, to which Ethan often contributes, is worth watching. But responsive web design is a real headache at times, especially when trying to figure for devices that rotate from portrait to landscape. And back. And sizing images to avoid overload. Grr…

  3. / Reply

    Great examples, I got some experience in designing responsive WordPress themes and tutorials here (OXP) really helped me a lot.

    • Saya,
    • May 19, 2012
    / Reply

    Excellent post thanks

    • Seth Stymiest,
    • May 19, 2012
    / Reply

    Krishna — very detailed article. My thoughts on RWD, though, is that it should start and end with the UX… It’s just not that easy. I recently blogged about it, link below. Would love to see some thought given to end-to-end solutions for true web apps, not just brochure or newspaper-ware.

    http://barkgolgafrincham.wordpress.com/2012/05/09/responsive-web-design-a-time-and-place-for-everything/

      • Seth Stymiest,
      • May 19, 2012
      / Reply

      Sorry – should NOT start and end with the user experience! :)

  4. / Reply

    Hi,

    again really nice post…keep it up.

    Thanks

  5. / Reply

    Great information, thank you for posting it.

  6. / Reply

    Responsive web design is definitely here to stay. It will stay on my blog at least: http://fuenfbuecher.de (German). I have a default layout and 3 breakpoints (800px, 650px, 480px).

  7. / Reply

    Nice article on responsive design! It’s a whole new world to web design and developement.

  8. / Reply

    Very cool post. There are some great examples here.

  9. / Reply

    It is always a tradeoff. If possible we try to use two images instead. One for each side and the content traditional in the middle. It gives almost the same feeling but speed is less affected.

  10. / Reply

    If you wanna go Responsive take help of Grid960 or such Grid systems.

  11. / Reply

    thanks nice one

  12. / Reply

    Yes, I think responsive web design will stay in this industry. Responsive web design lessens the need to develop a mobile website, however, there’s always pros and cons about this design and one must study it carefully before developing a responsive website

    • Joe,
    • July 22, 2012
    / Reply

    Nice article. More responsive webdesign examples http://www.responsiveteam.com/responsive-web-design-coding-examples.html

  13. / Reply

    Nice collection! Here’s another example (my take on responsive web design): http://www.shingokko.com/resource/blog-entry/responsively-design-a-blog/example.html I’ve also rewritten a tutorial on it as well: http://www.shingokko.com/blog-entry/responsively-design-a-blog.html

    • Kev,
    • July 30, 2012
    / Reply

    Another great example of responsive website design is http://templatz.co . You can also find contact forms, login and reg forms, comment boxes, navigation, 5 star rating system and more.

    • Achille,
    • August 2, 2012
    / Reply

    Great collection. Forefathers web looks cool. You should take a look at this as well http://www.dezvolta.com

  14. / Reply

    Krishna thanks for the reminders and overview on responsive web design. I love the flex grid. It rocks.

    • chris,
    • September 12, 2012
    / Reply

    Hi, this is a great article because I believe you showed some of the strongest examples of good responsive web design examples right now.

    My favourites right now are the Boston globe and both of the USA presidential websites are also great top examples of responsive website design examples: We have a created a video of some more examples of a few more really good responsive website examples: http://www.responsivewebdesignblog.com/2012/09/responsive-web-design-examples/

  15. / Reply

    Hey guys, please take a look at this site: http://stronynasmartfony.pl/
    It works very cool on tablet and smartphone. Have fun! :)

    • Bark Golgafrincham,
    • October 5, 2012
    / Reply

    RWD is about methodology, code management, and good design — not just media queries. The RWD you read about is reality only for brochure and news sites, not for web applications.

    http://wp.me/p2brND-8C

    • chutullu,
    • November 1, 2012
    / Reply

    yeah. because so many people surf on those webpages mobile.

    its nice, but please ask yourself before a project if your users use mobile. if there is no mobile user base for your website: DONT do it :)

    • Selva,
    • November 4, 2012
    / Reply

    It helps me to show some examples to my students. Its perfect list to describe what is responsive and good job mate..

  16. / Reply

    Internet traffic originating from mobile devices is rising exponentially each day. As more and more people get used to browsing the web through their smartphones and tablets, it is foolhardy for any website publisher to ignore responsive web design. The “One Site Fits All Devices” approach soon will be the norm.

  17. / Reply

    Hi Krishna,
    Thanks for explaining the process in details. Responsive website design is really a great concept. It improves your website traffic as it can be easily accessible from all devices.

    • Sudip Banerjee,
    • November 26, 2015
    / Reply

    Hi Krishna,
    Thanks for the article in details regarding the responsive website design concept. Its really better technology used to generate traffic and can be easily accessible from all devices.

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals