Introduction to responsive web design

Responsive web design is another very important concept that is usually called “planning”, however for being widely used today it’s got its own name. Some time ago, we didn’t even have to think about mobile phones, different screen sizes, etc. because there was no such abundance of them. Today, the situation has massively changed. The IT world has greatly expanded and now web developers and designers have much more work to deliver for various platforms and screen sizes. Thus, responsive web design is the concept that should be applied to fit any device that a customer chooses to use. Here we’re talking not only about mobile devices but also tablets, laptops, stationary computers, etc. Ethan Marcotte, an author of the book “Responsive web design” has defined three parts of this sort of approach and they are flexible images, media queries and flexible grid.

What it all means is that all existing old fixed-width layouts that were used in the past cannot be sure anymore. Now we are going to view those important parts of the new approach and talk about each of them in details.

Grid system and background images

The grid system that’s usually used in the magazines has to be used in Responsive web designs as well. You won’t be able to design with this approach and without a grid system. Now, talking about flexibility, it’s the percents that you need to consider when giving the measurements and not the pixels. It means that a 50 % width of the layout will display in the same way regardless of the screen size. That’s where a responsive web design originates.

You can use background images as well, but you should make sure you use the right ones. The pictures that can’t be tiled are not appropriate. The use of horizontal gradients has proved to be a bad practice too, for the reason they do scale well horizontally. The borders of the text would look distorted and terrible. However, such textures as grain, grunge, etc. that can be tiled would be a great solution.

Scale everything down

Designing with the responsive approach the fixed-width layouts as well as a horizontal scroll have to disappear. Instead, carefully place each of the elements in a way so that they can be seen regardless whether your browser has been resized or not. The web pages that are not flexible don’t give their owners a chance to properly be displayed on the mobile devices, for example. Besides, working in percent is much simpler than working in pixels. A 100% width will always be at a maximum regardless of the size of the screen.

The media queries

This part basically means that you have to consider the way your layout is going to look like. To do that, you need to think of the platform you will design for. It’s important to think of all the media queries, for desktop, iPad and iPhone when designing a web page.

Related posts:

• A mobile website
• Interactive and compatible website
• Why mobile development?
• What will 2013 bring for WordPress development?
• Web design of the previous years: analysis