Заказчик приходит к верстальщику и слышит непонятное: «Вам адаптивную делать или резиновую? А может, комбинированную?» И стоит, как на приёме у врача, который сыплет терминами, — кивает, но не понимает, какой ответ правильный и не разводят ли его на лишние деньги. А ведь от этого выбора зависит, как сайт будет выглядеть на телефоне у его клиентов и сколько вообще будет стоить работа.
Хорошая новость: за страшными словами прячутся простые идеи, и разобраться в них может любой человек без всякого программирования. По сути речь всего о том, как сайт ведёт себя, когда меняется ширина экрана — растягивается, перестраивается или остаётся жёстким. Поняв это, вы перестанете кивать вслепую и сможете осознанно выбрать тип вёрстки под свою задачу и бюджет. Разберём каждый подход на пальцах, без кода и заумных терминов.
Эта статья — часть раздела про вёрстку. Смежные темы: сколько стоит вёрстка, кроссбраузерность, как составить ТЗ.
Что вы узнаете из статьи
- Чем резиновая, адаптивная и фиксированная вёрстка отличаются простыми словами
- В чём сильные и слабые стороны каждого подхода
- Какой тип подходит под лендинг, магазин, корпоративный сайт
- Почему чаще всего подходы комбинируют, а не выбирают один
- Как не переплатить за лишнее и не сэкономить на нужном
Резиновая вёрстка: сайт, который тянется
Представьте резиновую плёнку с рисунком. Растягиваете её шире — рисунок растягивается вместе с ней, сжимаете — сжимается. Резиновая вёрстка устроена так же: блоки сайта заданы не в жёстких пикселях, а в долях от ширины экрана. Экран шире — все блоки пропорционально шире, экран уже — все уже. Макет один-единственный, он просто плавно тянется вслед за окном.
Плюс такого подхода — простота и цена. Делать одну растягивающуюся раскладку быстрее и дешевле, чем рисовать несколько разных под каждый тип устройства. Сайт более-менее сносно подстраивается под любую ширину сам, без специально продуманных вариантов.
Минус выползает на крайностях. На очень широком мониторе строки текста растягиваются так, что их неудобно читать — глаз теряет начало следующей строки. На очень узком телефоне, наоборот, всё сжимается до нечитаемой каши, картинки мельчают, кнопки становятся крошечными. Резиновая вёрстка хорошо ведёт себя в середине диапазона и хуже — по краям. Для простых страниц этого часто достаточно, для серьёзного проекта с большим мобильным трафиком — уже маловато.
Адаптивная вёрстка: сайт, который перестраивается
Адаптивная вёрстка работает хитрее. Вместо одной тянущейся раскладки верстальщик готовит несколько разных и переключает их на заданных точках ширины. На большом мониторе сайт показывает, скажем, три колонки. Экран сужается до планшета — и на определённой точке макет перестраивается в две колонки. Сужается до телефона — и блоки выстраиваются в одну колонку, меню прячется под кнопку-гамбургер, картинки занимают всю ширину.
Это как костюм, сшитый отдельно под несколько размеров, вместо одной растягивающейся футболки. На каждом устройстве пользователь видит не просто сжатую или растянутую версию десктопа, а осознанно собранную раскладку, удобную именно для этого экрана. На телефоне крупные кнопки под палец, читаемый текст, ничего не разъезжается.
Плата за это — больше работы и, соответственно, выше цена, и в разборе того, сколько стоит вёрстка, адаптив как раз один из главных множителей. Верстальщику нужно продумать и собрать поведение сайта на каждой точке перестроения, проверить, что нигде ничего не ломается. Но для большинства современных проектов эта доплата окупается с лихвой: трафик с мобильных огромен, и удобный телефонный опыт напрямую конвертируется в заявки и продажи.
Фиксированная вёрстка: почему её почти не осталось
Был и третий подход, исторически первый, — фиксированная вёрстка. Сайту задавали жёсткую ширину в пикселях, и она не менялась никогда. На мониторе той же ширины всё выглядело идеально, но на широком экране по краям зияла пустота, а на телефоне сайт просто не помещался — приходилось двигать его пальцем влево-вправо, чтобы прочитать строку.
В эпоху, когда в интернет заходили почти только с десктопов одинаковой ширины, это работало нормально. Сегодня, когда добрая половина, а то и больше посетителей приходит с телефонов самых разных размеров, фиксированная вёрстка устарела. Её ещё встретишь на старых сайтах или в очень узких специфичных задачах, но как осознанный выбор для нового проекта она почти не имеет смысла. Упоминаем её, чтобы вы понимали весь расклад, а не чтобы советовать.
Что выбрать под вашу задачу
На практике чистого «или-или» почти не бывает — хорошие верстальщики комбинируют. Часто внутри адаптивных точек блоки ведут себя резиново: между точками перестроения они плавно тянутся, а на точках — перестраиваются в новую раскладку. Так берут лучшее от обоих подходов: и гибкость, и осмысленность на каждом размере.
Если у вас лендинг под рекламу, адаптивность под мобильный почти обязательна — реклама гонит много телефонного трафика, и сайт, который на телефоне разъехался, сжигает рекламный бюджет впустую. Если интернет-магазин — тем более адаптив, потому что покупки с телефона давно норма, и неудобная мобильная версия — это прямая потеря заказов. Для простой визитки или внутренней страницы, куда заходят редко и в основном с компьютера, можно обойтись резиновой — переплачивать за сложный адаптив там незачем.
Главный ориентир — откуда приходят ваши люди. Много мобильного трафика — адаптив не обсуждается. Почти весь трафик десктопный и страница простая — резиновой хватит. Этот выбор полезно зафиксировать заранее, когда будете составить ТЗ на вёрстку, вместе с требованием по кроссбраузерная вёрстка — чтобы потом не выяснилось, что сайт отлично выглядит на мониторе верстальщика и разваливается на телефоне клиента.
Как платформа помогает выбрать правильную вёрстку
На Где.Эксперт верстальщиков видно по сделанным проектам и отзывам, и легко найти тех, кто уже собирал адаптивные сайты под мобильный трафик. В отзывах заметно, у кого вёрстка хорошо ведёт себя на телефонах, а у кого мелькают жалобы на разъехавшиеся блоки.
Можно начать с обсуждения задачи: специалист посмотрит на ваш проект, прикинет, откуда идёт трафик, и подскажет, нужен ли полноценный адаптив или хватит резиновой раскладки — то есть поможет не переплатить за лишнее. Оплата идёт по факту выполнения, а отзывы прошлых заказчиков страхуют от выбора вслепую.
Часто задаваемые вопросы
Чем адаптивная вёрстка отличается от резиновой?
Резиновая плавно тянет один макет вслед за шириной экрана. Адаптивная перестраивает раскладку на точках: три колонки на мониторе, одна на телефоне. Резиновая проще и дешевле, адаптивная дороже, но удобнее на каждом устройстве.
Какая вёрстка лучше для сайта?
Для большинства современных сайтов — адаптивная, из-за большого мобильного трафика. Резиновую берут для простых страниц. На практике подходы чаще комбинируют.
Что такое фиксированная вёрстка?
Жёсткая неизменная ширина. На большом экране пустота по краям, на телефоне сайт не помещается. Устарела с приходом мобильного трафика, для новых проектов почти не используется.
Адаптивная вёрстка дороже?
Да, это больше работы — несколько раскладок вместо одной. Но если много мобильного трафика, плохой телефонный опыт стоит дороже, чем доплата за адаптив.
Нужна ли адаптивность лендингу?
Почти всегда да. Лендинги крутят в рекламе, реклама гонит мобильный трафик. Сайт, который на телефоне разъехался, сжигает рекламный бюджет.
Заключение
За тремя страшными словами стоят три простые идеи. Резиновая вёрстка — один макет, который тянется. Адаптивная — несколько раскладок, которые сменяют друг друга на разных размерах. Фиксированная — жёсткая ширина, сегодня почти музейная. Резиновая дешевле, адаптивная удобнее на телефонах, а на практике их обычно смешивают, беря лучшее от обеих.
Выбор сводится к одному вопросу: откуда приходят ваши люди. Много мобильного трафика — берите адаптив, он окупится заявками. Простая страница для редких десктопных визитов — хватит резиновой, и переплачивать незачем. Зафиксируйте тип вёрстки в ТЗ заранее, добавьте требование по кроссбраузерности — и не получите сайт, который красив на мониторе верстальщика и развалился на телефоне клиента. А выбирать того, кто умеет в адаптив, проще там, где видны проекты и отзывы.
Найдите верстальщика на Где.Эксперт — выбирайте по реальным отзывам, обсуждайте задачу до старта и платите по факту выполнения.