Типы адаптивных макетов



    С каждым днем появляется все больше сайтов с адаптивной версткой. При проектировании такого дизайна первое, о чем задумывается разработчик — это общее представление контента на устройствах с разным размером экранов. В этой статье я описал некоторые типы (layouts) адаптивных макетов.

    Резиновый


    Простой в реализации и очевидный для пользователя тип представления контента. Основные блоки сжимаются до ширины экрана мобильного устройства, где такое невозможно — перестраиваются в одну длинную ленту. Такой макет очень просто реализовать с помощью адаптивных CSS-фреймворков, например Twitter Bootstrap.



    Примеры:


    Перенос блоков


    Очевидный способ для многоколоночного сайта: при уменьшении ширины экрана дополнительные блоки (сайдбары) переносятся в нижнюю часть макета.



    Примеры:


    Переключение макетов


    Этот способ наиболее удобен при чтении сайта с различных устройств: под каждое разрешение экрана разрабатывается отдельный макет. Способ трудоемок, поэтому менее популярен, чем предыдущие два.



    Примеры:


    Адаптивность «малой кровью»


    Очень простой способ, который подходит для несложных сайтов. Достигается элементарным масштабированием изображений и типографики. Не очень популярен, т.к. не обладает гибкостью.



    Примеры:


    Панели


    Способ, пришедший из мобильных приложений, где дополнительное меню может появляться при горизонтальном или вертикальном тапе. Главный недостаток — неочевидность действий для пользователя: очень непривычно видеть мобильную навигацию на веб-сайта. Но думаю, со временем способ станет достаточно популярным.



    Пример панелей в мобильном приложении:



    Пример панелей на сайтах:

    Представленные выше макеты не являются универсальными решениями, для каждого проекта необходимо выбирать наиболее подходящий под нужды и возможности способ.

    Полезные сайты:
    Метки:
    • +52
    • 50,9k
    • 8
    Поделиться публикацией
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 8
    • +19
      Не мешало бы указать автора оригинала и дать ссылку на пост Off Canvas Multi-Device Layouts
      • +3
        И указать, что это перевод, а не плагиат.
      • +1
        Ох уж этот Bootstrap, без его упоминания нигде не обходится.
        • +10
          Хорошую вещь можно и упомянуть.
          • +1
            Среди многих, заметьте.
          • +2
            Тап (пока) не работает в пределах мобильных браузеров, это чисто ОС-ное действие. То есть если тапать, то не панели сайта будут перемещаться, а весь экран. Надеюсь, скоро это изменится, потому что многие интересные идеи сайта мы сейчас не можем реализовать, а хочется.
            Мы используем резиновую адаптивную вёрстку вместе с переносом блоков.
            Кирилл, спасибо за обзор.
            • +1
              Спасибо большое. В данный момент первый раз работаем над адаптивным дизайном. Информации в интернете много, но новая статья на хабре, это всегда +1
              • –1
                не вижу значимой разницы между первым и вторым.

                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.