Introduction to Responsive Web Design

Posted in Tips, Web Design3 years ago • Written by 16 Comments

After writing about the Defensive Web Design approach a few weeks ago, I thought of presenting you with another type of approach, called Responsive Web Design, and the challenges a designer encounters throughout the working process of a product developed with these considerations.

Responsive Web Design is another important concept which can be called “planning”, but it has a name of its own because it is widely used nowadays. A few years back we didn’t need to think about mobile phones, tablets and different screens, because there were not too many of them – or not at all. Well, the IT world has changed since then and now there are a bunch of screen sizes and platforms designers need to deliver for. Responsive Web Design is the concept of a website which should adapt to fit any device that chooses to display it. Not only mobile devices, but also stationery computers and tablets.

According to Ethan Marcotte, who wrote an interesting book, Responsive Web Design after starting this whole concept, there are three parts to this kind of approach: a flexible grid, flexible images and media queries.

This means old fixed-width layouts do not fit the new web anymore and the way we work needs to be changed. This is why, today, we will review the most important parts of the new approach and talk about each of them. As a designer, the faith of a project is always in your hands. You need to understand how the layout will work and what Responsive Web Design means in order to be able to take on this approach.

Grid system and background images

The grid system used in magazines, for example, needs to be used in Responsive Web Designs as well. It is impossible to design with this approach without having a grid system. Now, in order for the layout to be flexible, you need to give the measurements in percent, not pixels. This means that a 50% width will always be half of the screen the website is shown on, regardless of its size. This is where flexible and responsive web design starts from.

If you wish to use background images, it is OK, but you will have to properly select the right one. Photographs, illustrations or any other images that can’t be tiled are not proper for fluid grid systems. Therefore do not use horizontal gradients either, because they do not scale well horizontally. The texture borders will also suffer and look quite awful. If there is something you could use, then textures easy to tile are good, such as grunge, grain and so on.

Scale everything down

When you design with the responsive approach you have to scale everything down. This means the fixed-width approach you used until now has to disappear, exactly like the horizontal scroll. Instead, try to insert every information or web element in such a way that if you resize the browser width you will still be able to see every piece of information. With a flexible  wrapper made in percent instead of pixels this is possible. Most of today’s webpages are not flexible and this damages their chances of being properly shown on a mobile device.

Working in percent is the same as in pixels, there is not much of a difference and you don’t need to learn other properties or CSS selectors. Working in percent is also simpler, because it is quite clear what width: 100% means. Regardless of the dimensions of the screen, the mentioned div will always be at a maximum width. If instead of percent you would have had pixels, then regardless of how the big the screen would be, the div will always be at 100 pixels. On an iPhone this is a lot. On my computer with a screen of 1600×900 resolution this is nothing. You see the difference? It is just more logic to work this way.

Consider the media queries

I am sure you all know what these media queries mean. But to explain the concept of modules better, you can take a look at the following image.

Media Queries for desktop, iPhone and iPad

Media Queries for desktop, iPhone and iPad

This basically means that you have to consider the way your layout is going to be, by thinking of the platform you design for. The main problem on the internet today is that designers and developers do not think of more than the queries for desktop and, maybe, for iPad. Nobody thinks of the iPhone screen when designing a webpage for desktop use.

These modules need to be resized and moved when an iPhone browses through them, therefore the design has to be flexible. By using the media queries properly this is possible. In the end of the article you will see a list of further resources and by reading those you will find out more about the media queries and how to use them. The main idea behind this concept is that the modules change their place and size based on the screen size that the website is shown on.

You can learn more about Media Queries and everything you need to know about the topic to get you started by reading our E-Book “Responsive Website Design“.

It covers all the basics along with great examples and advice that you will need to make your website ready for any screen size and mobile device. Grab your copy now!

What to do now?

The reason behind the internet not having flexible designs is the designer’s lack of knowledge about this issue. Therefore I always believed a designer should also be able to code HTML & CSS, because by knowing all the potential problems, you can also design in such a way that you avoid them.

I hope that by reading this article the graphic designers will understand there is a big need of flexible layouts on the web nowadays, as this changes and will continue to change and grow for many years to come. With the addition of HTML5 and CSS3 coding flexible layouts just got a bit easier, although the new mark-up language is still in development and experts say it will always be, so we can’t count on it to be done too soon.

The amount of information given is also something to think about, because a desktop website should have way more information and elements than a website designed for portable devices. There are very many things to think about before going responsive on the web, but it is also therefore the internet grows and becomes more and more important. With such a big amount of decisions to take before even starting to design, it should be clear to everybody that designing responsive is a challenge for even the finest experts out there.

Examples of responsive design

1. CSS Tricks

CSS Tricks full-sized

CSS Tricks resized

2. Simon Collision

Simon Collision full-sized

Simon Collision resized

3. Hardboiled Web Design

Hardboiled Web Design full-sized

Hardboiled Web Design resized

Further reading

To find out more on this topic, simply follow these recommendations. You can also see more examples by accessing the last link.

Beginners Guide to Responsive Web Design on Think Vitamin

CSS Media Queries on CSS Tricks

Fluid Grids on A List Apart

Responsive Web Design on Smashing Magazine

Showcase of Outstanding Responsive Web Designs on Line25

69 Written ArticlesWebsite

Christian Vasile is an enthuziastic Romanian web designer currently living in Denmark. He is passionate for the industry and writes about design, usability, coding and freelancing and is a regular publisher here at 1WD. You can follow him on Twitter at @christianvasile or visit his web portfolio by clicking on the link above.

16 Comments Best Comments First
  • Andrew Groat

    Wednesday, October 5th, 2011 13:51

    9

    This is something that I think is incredibly important. Considering the huge rise in mobile browsing I think every designer should be taking this into consideration. Great article!

    +5
  • Joseph Buarao

    Wednesday, January 18th, 2012 10:35

    15

    Great tutorial.. really help in to start with responsive design thansk a lot mate :)

    +2
  • Bilal Irfan

    Wednesday, October 5th, 2011 17:58

    10

    Thanks for so much great information.

    Thanks

    +1
  • Aldo

    Wednesday, October 5th, 2011 11:36

    7

    nice share :) this trick and tips can be useful for me:)
    great!

    +1
  • Junior

    Thursday, March 8th, 2012 05:13

    16

    The concept of responsive design is not anything new, only the terminology is trendy because of the popularity of mobile devices. Fact is, I can recall 10+ years ago having to create numerous css files each with different screen resolutions in mind when designing a website.

    +1
  • Jonas

    Wednesday, October 5th, 2011 15:34

    6

    Hi, please link to my page if you’re using my images. thank you.

    0
  • Nicholas

    Tuesday, October 4th, 2011 22:34

    5

    Your examples are based on css and patterns. However what about sites which should contain bigger images (like architecture offices with their works)? There is no simple solution for them.

    0
    • Christian

      Wednesday, October 5th, 2011 13:14

      8

      For those it is a total other discussion. Images should be optimized for internet and narrowed down as much as possible, and it should be a link towards the full-sized webpage. If you want to see all the pictures, go to the big page.

      -1
  • Simon W. Jackson

    Tuesday, October 4th, 2011 21:02

    4

    I’ll be sure to incorporate this method into my next design! Great article!

    0
  • Thomas Kupon

    Tuesday, October 4th, 2011 13:19

    3

    Cool tricks useful when designing a web site, thanks for creating the extra article.

    0
  • Paul Underwood

    Tuesday, October 4th, 2011 12:25

    1

    Media queries are so useful. The way CSS-tricks use them is awesome.

    0
  • Joseph Buarao

    Wednesday, January 18th, 2012 15:45

    14

    thank you so much for this post now I know what is the secret behind Responsive web design.. it media query I’m I right? hehehe :)

    0
  • Chris

    Tuesday, October 4th, 2011 12:42

    2

    Thank you Christian for the Responsive Web Design tips. Well said. We need to rethink and relearn a great many things when it comes to website layout. Much has changed in the 10 years since I first started to design and code websites.

    0
  • Sean

    Thursday, October 6th, 2011 22:50

    11

    Great article! I found the information I was looking for :)

    0
    • Dweezil

      Tuesday, December 13th, 2011 08:52

      13

      That really captreus the spirit of it. Thanks for posting.

      +1
  • Lee Agosila

    Wednesday, October 12th, 2011 14:33

    12

    Thanks! another great article!, the future of web design….

    -2
  • Junior

    Thursday, March 8th, 2012 05:13

    16

    The concept of responsive design is not anything new, only the terminology is trendy because of the popularity of mobile devices. Fact is, I can recall 10+ years ago having to create numerous css files each with different screen resolutions in mind when designing a website.

    +1
  • Joseph Buarao

    Wednesday, January 18th, 2012 10:35

    15

    Great tutorial.. really help in to start with responsive design thansk a lot mate :)

    +2
  • Joseph Buarao

    Wednesday, January 18th, 2012 15:45

    14

    thank you so much for this post now I know what is the secret behind Responsive web design.. it media query I’m I right? hehehe :)

    0
  • Lee Agosila

    Wednesday, October 12th, 2011 14:33

    12

    Thanks! another great article!, the future of web design….

    -2
  • Sean

    Thursday, October 6th, 2011 22:50

    11

    Great article! I found the information I was looking for :)

    0
    • Dweezil

      Tuesday, December 13th, 2011 08:52

      13

      That really captreus the spirit of it. Thanks for posting.

      +1
  • Bilal Irfan

    Wednesday, October 5th, 2011 17:58

    10

    Thanks for so much great information.

    Thanks

    +1
  • Andrew Groat

    Wednesday, October 5th, 2011 13:51

    9

    This is something that I think is incredibly important. Considering the huge rise in mobile browsing I think every designer should be taking this into consideration. Great article!

    +5
  • Aldo

    Wednesday, October 5th, 2011 11:36

    7

    nice share :) this trick and tips can be useful for me:)
    great!

    +1
  • Jonas

    Wednesday, October 5th, 2011 15:34

    6

    Hi, please link to my page if you’re using my images. thank you.

    0
  • Nicholas

    Tuesday, October 4th, 2011 22:34

    5

    Your examples are based on css and patterns. However what about sites which should contain bigger images (like architecture offices with their works)? There is no simple solution for them.

    0
    • Christian

      Wednesday, October 5th, 2011 13:14

      8

      For those it is a total other discussion. Images should be optimized for internet and narrowed down as much as possible, and it should be a link towards the full-sized webpage. If you want to see all the pictures, go to the big page.

      -1
  • Simon W. Jackson

    Tuesday, October 4th, 2011 21:02

    4

    I’ll be sure to incorporate this method into my next design! Great article!

    0
  • Thomas Kupon

    Tuesday, October 4th, 2011 13:19

    3

    Cool tricks useful when designing a web site, thanks for creating the extra article.

    0
  • Chris

    Tuesday, October 4th, 2011 12:42

    2

    Thank you Christian for the Responsive Web Design tips. Well said. We need to rethink and relearn a great many things when it comes to website layout. Much has changed in the 10 years since I first started to design and code websites.

    0
  • Paul Underwood

    Tuesday, October 4th, 2011 12:25

    1

    Media queries are so useful. The way CSS-tricks use them is awesome.

    0

Comments are closed.

23.20.112.161 - unknown - unknown - US