Адаптивная вёрстка


    В чём разница между резиновой, адаптивной и отзывчивой вёрсткой? Как правильно их применять?

    Давайте разберёмся в отличиях подходов и попробуем сформулировать один общий вместо трёх.


    Когда мобильного веба не было даже в самых смелых фантазиях, весь интернет был на десктопных компьютерах с небольшими экранами. Оптимизирован для разрешения 1024 на 768 и браузера Internet Explorer 5! — гордо писали тогда на сайтах. Но прошло время, экраны подросли и пришлось к этому как-то подстраиваться. Сначала это были просто резиновые таблицы: колонки по 25%, содержимое 50%, а в отдельной строке colspan=3 и распорка для минимальной ширины. Надеюсь, вы не поняли о чём я сечас говорил.


    Резиновая вёрстка — это когда вы задаёте всему макету и отдельным его частям не фиксированную ширину, а эластичную — в процентах. За исключением минимальной и максимальной ширины. Высоту в вебе в принципе не принято задавать — обычно она подстраивается под содержимое. Фикс или резина? — спрашивали верстальщики 2000-х про макет и втайне надеялись на второе, поинтереснее. Сейчас сложно представить, но когда-то это было прорывной идеей, которая усложнила вёрстку, но сделала первый шаг в правильном пути.


    Таблицы для раскладки ушли, а резиновая вёрстка осталась. Если у вас эластичные флоаты, флексы… да хоть гриды! — это всё равно резиновая вёрстка. Но если ширина внешнего контейнера зафиксирована — это уже фикс, сколько бы ни было резины внутри. Чуть более универсальный фикс, но всё равно. В общем, главное чтобы сайт двигался так или иначе вместе с окном, а не торчал кирпичом где-то в центре или с краю.


    Когда расширился круг устройств с интернетом и появились первые мобильные браузеры — встала задача как-то подстраиваться под них. Простая резина здесь уже не справлялась — нужно было переписывать стили. Одной из первых, в 2006 году появилась техника адаптивной раскладки Марка ван ден Доббельстина. В статье на A List Apart Марк предложил добавлять классы при загрузке или ресайзе окна и на каждый диапазон вешать стили. До первой реализации медиавыражений в Safari оставалось два года.


    Когда в начале десятых годов появилось для чего адаптировать и чем адаптировать — мобильные браузеры и медиавыражения — вышли книги, давшие названия подходам: «Адаптивный веб-дизайн» Аарона Густавсона и «Отзывчивый веб-дизайн» Итана Маркота. Подходы Аарона и Итана продолжали идеи Марка, но с более современными технологиями и несколько отличались направлением мысли.


    «Адаптивный веб-дизайн» Аарона предлагал гибко адаптировать сайты к возможностям устройств и браузеров. Важной частью этой философии был ненавязчивый JavaScript с прогрессивным улучшением — и всё это поверх семантической разметки. Хотя Аарон писал не совсем об этом, сегодня принято считать, что главное в адаптивной вёрстке — привязка к конкретным разрешениям и устройствам. Стили переключаются от одного брейкпоинта к другому, то есть у вас есть фиксированные макеты для iPad и iPhone, а то, что между ними вас не волнует.


    «Отзывчивый веб-дизайн» Итана ставил во главу три вещи: резиновый макет, гибкие картинки и медиавыражения. Все размеры и отступы Итан предлагал указывать в процентах с сумасшедшими дробями для точности. Отличительной чертой подхода стало плавное изменение сайта, с ориентацией не на конкретные устройства, а на содержимое. То есть ваш резиновый макет хорошо выглядит не только на iPhone и iPad, но и в любой точке между ними.


    Чуть позже Итан сформулировал ещё один важный принцип в книге «Сначала мобильные». Если до тех пор отправной точкой для адаптации вёрстки служила десктопная версия, то он предложил перевернуть схему и начинать с мобильной версии, а потом её улучшать. Почему так? Потому, что усложнять простое проще, чем упрощать сложное. Вдуматесь! А ещё потому, что нет соблазна просто спрятать сложно адаптируемое и обделить мобильных пользователей.


    Ну как, стало понятно? Вот адаптивная, вот отзывчивая… М-м, нет, не очень. Из-за путаницы между техникой адаптивной раскладки и философией адаптивного веб-дизайна, из-за того, что все эти подходы прекрасно сочетаются и уже не проследить чёткую границу между ними — из-за всего этого, я плюнул на терминологическую чистоту и стал называть всё это адаптивным дизайном или адаптивной вёрсткой. Это понятие всегда было достаточно широким, чтобы вместить все остальные способы.


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


    Ну и как теперь верстать? Просто! Сначала делаете мобильный резиновый макет, который хорошо вписывается в небольшие устройства. А когда размеры экрана или окна начинают расти — начинаете использовать появившееся пространство для улучшения интерфейса. Появляется боковая колонка, вторая, растут размеры картинок и подгружаются новые разрешения и так далее. То есть медиавыражения меняют стили не когда вы дошли до экрана самого модного телефона, а когда это нужно для содержимого сайта и удобства пользователя. Мы именно так и учим делать на интенсиве по продвинутой вёрстке.


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


    Видеоверсия



    Вопросы можно задавать здесь.

    HTML Academy 59,25
    Интерактивные онлайн-курсы
    Поделиться публикацией

    Вакансии компании HTML Academy

    Комментарии 12
    • +4
      А ещё потому, что нет соблазна просто спрятать сложно адаптируемое и обделить мобильных пользователей.

      Ну да, только вот вместо этого теперь просто не усложняют, оставляя пользователей десктопов с мобильными обрезками, зато на весь экран, да.
      • +2
        Верно. Microsoft предлагает в Windows-10 новый Skype — который есть мобильная версия на декстопе. — один раз я повёлся… один раз.
        • 0
          Пора ввести новый термин вместо адаптивной верстки, т.к. она уже прочно укрепилась в виде пихания повсюду этого долбанного гамбургера, даже на FullHD.
          Пусть новый термин, например «нормализованная верстка», будет обозначать, что пользователи десктопов будут получать нормальную версию сайта, где не надо вызывать меню сайта, потому что оно спокойно помещается на экран и доступно в один клик.
          • 0
            Полностью согласен, но есть одно НО.
            Ничего менять в типах верстки не надо, а надо это сообщение до всех ux-ui донести. И иногда до заказчиков.
        • –2
          Что за дебильная мода верстать «снизу-вверх»? Заказчик по вашему сначала утверждает макеты на 320-е смартфоны? Или предлагайте дизайнеру прорисовывать каждый макет? Что было и что появилось потом… Да он вас пошлет на 3 буквы и будет прав.
          • 0
            Вид, в котором предоставлены моки заказчику может отличаться от того, как он разрабатывался. В тексте сказано про разработку, что это даст бонус к скорости разработки, и, соот-но, удобству; и они правы.
            • 0
              Адаптивная версия с готового дизайна делается за день-полтора, а сколько нужно времени чтобы разрабатывать «снизу-вверх»? Я серьезно.
              • 0
                Адаптивная версия с готового дизайна делается за день-полтора, а сколько нужно времени чтобы разрабатывать «снизу-вверх»?


                Нужно иначе считать время. — Сколько делается простой дизайн для смартфона и сколько сложный дизайн для ноута?
                • 0
                  В 99% случаев мне (да и думаю большинству разработчиков) никто не дает адаптивные версии для смартфонов, делается просто адаптивная верстка через медиа-запросы. Зачем из мухи раздувать слона?
                  • 0
                    В 99% случаев мне (да и думаю большинству разработчиков) никто не дает адаптивные версии для смартфонов, делается просто адаптивная верстка через медиа-запросы.

                    Так в том то и цель — перевернуть эту практику с головы на ноги! (С)
          • 0
            Спасибо, интересно.
            Надеюсь, вы не поняли о чём я сечас говорил.

            Простите… но понял :-(
            • 0
              Фикс или резина? — спрашивали верстальщики 2000-х про макет и втайне надеялись на второе, поинтереснее. Сейчас сложно представить, но когда-то это было прорывной идеей…

              Я не большой знаток истории верстки, но всегда считал, что прорывной идеей это было на Западе. В России так верстали с самого начала, и никакого специального названия у этого не было. Просто у нас с самого начала был зоопарк разных разрешений, примерно от 640×480 до 1600×1200. Потом вариантов на десктопах стало поменьше, но стали появляться лэптопы, нетбуки, смартфоны… В общем число вариантов скорее росло. Не думаю, что вообще был сколько-нибудь продолжительный период, когда какое-то одно разрешение полностью доминировало.
              Сам термин «резиновая верстка» появился вместе с концепцией фиксированной верстки из-за тлетворного влияния Запада :) В верстку хлынуло много новичков, которые тащили в рот всякую гадость читали первые попавшиеся руководства, разумеется западные, потому что они там вона какие умные, куда нам до них, какой смысл читать наши учебники. А во всех адекватных российских руководствах фиксированная верстка под конкретное разрешение всегда оценивалась однозначно как грубейшая ошибка.

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

              Самое читаемое