How to make one site for all devices (Responsive Web Design)

    Yesterday a good article was published “ Web Design. Each device has its own idea . ” Despite the good thoughts, unfortunately, the conclusion in it is rather stupid. Namely:

    “You need to determine what devices your visitors can use, work out and create a representation of your site for these devices, determine the device by checking the headers of the browsers , and send the most suitable presentation .”

    Why is this stupid


    Firstly, no one can predict which devices your visitors will use. You need to focus not on devices, but on permissions.



    This is a screenshot from the presentation “ Beyond the mobile web by yiibu ” (highly recommend).

    Secondly, if you are not facebook or yandex, most likely you will not pull the creation and support of different versions of the site for each device. Yes, and it does not make much sense. Because the situation is becoming similar to the realities of fifteen years ago. Then they made the site “for the browser”, and now the author suggests making the site “for the device”.

    How to make one site for all devices


    The questions raised by the author of the above article have been considered in the civilized world for quite some time, and, moreover, they have already been resolved.

    Now you can make 1 site with a single layout that will work on devices, starting with phones, ending with huge TVs. For example, yiibu.com or alistapart.com (reduce the browser window):





    This is all called Responsive Web Design.


    Responsive consists of the following techniques:

    Proportional rubber layout (fluid grid)


    The main idea is a formula for calculating the proportions in percent “target / context = result”. For example, we have a psd layout with a width of 1000px. It has two blocks: one on the left with a width of 270px, the other on the right with 730px. We make them like this:

    .leftcolumn {
    width: 27%; / * 270px / 1000px = 0.27 * /
    float: left;
    }
     
    .rightcolumn {
    width: 73%; / * 730px / 1000px = 0.73 * /
    float: right;
    }


    If there is another block inside the left column and, say, on the layout it is 170px wide, then the target and context will change for it, and the code will look like this:

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


    On habr there was a translation of the original article by Ethan Marcotte "Fluid Grids" .

    Rubber images (fluid images)


    Adjust their sizes to the parent unit. The main idea in the non-obvious application of the {max-width: 100%} property. An image with img {max-width: 100%} will never crawl out of its parent block.

    If the parent block is smaller than the img size, then the image will be proportionally reduced. This principle applies to both img and embed, object, video.

    Detailed original article "Fluid Images" .

    Media queries


    We need to display a layout optimized for the resolution from which this site currently looks. This is part of the CSS standard, which allows you to apply styles based on device resolution information.

    For example, like this:

    / * start css * /
     
    Here are the basic styles for silly browsers. For example, for phones not a high-end level. Pocket Internet Explorer for Windows Mobile 6.5 is here :).
     
    @media only screen and (min-width: 480px) {
     
    The styles here are more reasonable, but still mobile devices. Android, iPhone and so on.
     
    }
     
    @media only screen and (min-width: 768px) {
     
    Tablets in portrait mode.
     
    }
     
    @media only screen and (min-width: 992px) {
     
    Tablets in landscape mode, netbooks, laptops, desktop.
     
    }
     
    @media only screen and (min-width: 1382px) {High-resolution desktop
     
    , TVs.
     
    }
     
     
    / * end of css * /


    All media browsers understand media queries . For ie, there is Respond.js

    Mobile first


    This is a technique in which the site is first compiled for devices with less features, and then features and buns are added using media queries.

    So stupid browsers without media queries will get the simplest content (for example, on mobile phones). And more advanced ones will understand and draw the page, taking into account media queries.

    Learn more about Mobile first

    References


    1. Russian-language blog about Responsive Web Design

    2. The only good book on this topic is “ Responsive Web Design ”. Written by Ethan Marcotte, which in general laid the foundation for adaptive layouts. After reading it, much will become clear.

    responsive web design book

    Also popular now: