Design, CG Graphics & Inspiration
How to Make a Website for All Devices (Responsive Web Design)

How to Make a Website for All Devices (Responsive Web Design)

Nobody can predict what devices your visitors use. It’s better to focus on resolution and not on devices. If you are not Facebook or Google corporation, most likely you won’t be able to carry the creation and maintenance of different versions of the site for each device on one’s shoulders. And it doesn’t make much sense, because the situation is similar to the realities of fifteen years ago. At that time the sites were created “for the browser” and now someone offers to do a site “for the device.”

How to create a website for all devices

Now you can make a site with only one layout, which will run on devices starting with phones, and finishing with large TV sets. For example, yiibu.com or alistapart.com (zoom out the browser window):

It is called “Responsive Web Design”

Responsive Web Design consists of the following techniques:

Fluid grid

The basic idea is a formula for calculating the percentage proportions «target / context = result». For example, we have a psd layout with a width of 1000px. It has two parts: one on the left width 270px, another right 730px. We’ll code them in such a way:

.leftcolumn {
width: 27%; /* 270px / 1000px = 0,27 */
float: left;
}

rightcolumn {
width: 73%; /* 730px / 1000px = 0,73 */
float: right;
}

If inside of the left column will be one more block, and on the grid it will have a width of 170px, then its purpose and context will change, and the code will look like this:

.leftcolumn .some-div {
width: 62,962963%; /* 170px / 270px = 0.62962963 */
float: left;
}

Fluid Images

Adjust their size for a block parent. The main idea in non-obvious use of the properties of {max-width: 100%}. Image with img {max-width: 100%} will never come out of its block-parent. If the parent block is smaller than the size of img, the image will decrease proportionally. This principle applies as for the img, and to embed, object, video.

See the article «Fluid Images» with some interesting details.

Media queries

We need them to show the layout that is optimized for resolution. This is part of CSS standard, which allows you to apply styles based on the information on the resolution of the device. For example:

/* beginning css */

Here are the basic styles for ‘stupid browsers’. For example, for mobile phones that are not of a high-end level. Pocket Internet Explorer for Windows Mobile 6.5 is the same.

@media only screen and (min-width: 480px) 

Here are styles of more reasonable, but still of mobile devices such as Android, iPhone and so on.

@media only screen and (min-width: 768px) {

Tablets in portrait mode.

}

@media only screen and (min-width: 768px) {

Tablets in landscape mode, netbooks, notebooks, desktop.

}

@media only screen and (min-width: 992px) {

Desktop with high resolution, TV sets.

}

/* ending css */

Media queries are understood by all the reasonable browsers. For ie there is Respond.js.

Mobile First

This is a technique with the help of which the site is being coded for devices with fewer opportunities first, and then features are added using the media queries. That’s how the ‘stupid browsers’ without media queries will get the easiest content (eg, on mobile phones). And more ‘advanced’ will understand and draw the page, taking into account the media queries.

More about Mobile first

The only good book on this subject is “Responsive Web Design” written by Ethan Marcotte, who is actually the founder of adaptive layouts. Everything gets clearer after reading it.

SHARE THIS POST

I'm freelance front-end developer and ux designer from Moscow, Russia.

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.

  • Just got a copy together with Erin Kissane’s “Elements of Content Strategy” – Ridiculously cheap for such rich relevant content. A must for all web enthusiasts. 

  • Nice Post.

  • Prodyot

    Great tutorial.
    Thanks.

  • samir

    nice tutorials

  • Gary

    Hi can I ask is it possible to find the Fluid plug in?

  • Just got a copy together with Erin Kissane’s “Elements of Content Strategy” – Ridiculously cheap for such rich relevant content. A must for all web enthusiasts. 

  • Nice Post.

  • Prodyot

    Great tutorial.
    Thanks.

  • samir

    nice tutorials

  • Gary

    Hi can I ask is it possible to find the Fluid plug in?