Responsive Layout Types

    Every day there are more and more sites with adaptive layout. When designing such a design, the first thing a developer thinks about is a general presentation of content on devices with different screen sizes. In this article, I described some types (layouts) of adaptive layouts.


    A simple to implement and user-friendly type of presentation of content. The main blocks are compressed to the width of the screen of the mobile device, where this is not possible - they are rebuilt into one long tape. This layout is very simple to implement using responsive CSS frameworks such as Twitter Bootstrap.


    Block Migration

    An obvious way for a multi-column site: when the screen width is reduced, additional blocks (sidebars) are transferred to the bottom of the layout.


    Switch layouts

    This method is most convenient when reading a site from various devices: a separate layout is developed for each screen resolution. The method is time-consuming, therefore less popular than the previous two.


    Small blood adaptability

    A very simple way that is suitable for simple sites. Achieved by elementary scaling of images and typography. Not very popular because not flexible.



    A method that came from mobile applications, where an additional menu may appear with horizontal or vertical tapas. The main drawback is the non-obviousness of actions for the user: it is very unusual to see mobile navigation on a website. But I think that over time the method will become quite popular.

    An example of panels in a mobile application:

    An example of panels on sites:

    The above mock-ups are not universal solutions, for each project it is necessary to choose the most suitable method for the needs and possibilities.

    Useful sites:

    Also popular now: