Как чувствует себя турист, забывший горелку перед недельным походом? Правильно, чертовски неподготовленным.
То же чувство вы испытаете, узнав, что 5, 10 или 25 процентов посетителей вашего сайта откровенно плюются на него и не лестно отзываются о всей вашей компании. Конечно, я говорю о мобильных пользователях, столь быстро привыкших к удобству и отзывчивости таких сайтов, как Тинькофф или Слон. Каждый день таких юзеров все больше и, если вы их игнориуете, рискуете очень скоро остаться в меньшинстве.
Фиксированная верстка — тип верстки, при котором ширина контента жестко задана в пикселях и не меняется в зависимости от размеров окна браузера.
На данный момент такой тип верстки уже устарел и является пережитком прошлого, когда ширина контента страницы была строго продиктована разрешением самых распространенных экранов (800 на 600, 1024 на 768 и так далее). Но даже сейчас в сети легко можно встретить сайты с фиксированной шириной контента.
Плюсы: Возможность быстрой реализации и простота, результат всегда выглядит предсказуемо.
Минусы: На разрешениях, которые довольно сильно отличаются от целевого, сайт может выглядеть некрасиво.
Пример: http://ok.net.ua
Резиновая верстка сайта отличается от фиксированной верстки относительными размерами элементов веб-страницы (в процентном соотношении). То есть, при резиновой верстке веб-страница изменяет свои размеры в зависимости от ширины окна браузера. В результате получается, что при увеличении ширины контейнера-родителя происходит увеличение ширины элемента страницы, а при уменьшении ширины контейнера-родителя происходит уменьшение ширины элемента страницы. Отсюда и появилась ее название «резиновая».
Данный тип верстки в чистом виде также является устаревшим, так как учитывает только один тип устройств и не заботится о том, как контент будет выглядеть на экранах со слишком большим или маленьким разрешением.
Плюсы: Позволяет адаптировать шаблон под любой тип и разрешение монитора, в отличие от фиксированной.
Минусы: Сложнее реализовать, чем фиксированную. Нестабильность дизайна сайта.
Пример: http://mymediacompany.ru
Адаптивная верстка является очень близкой к отзывчивой (см. ниже) и основана на использовании медиа-запросов для адаптации контента под различные устройства и параметры экранов. Причем, делается это динамически, без действия пользователя.
Основное отличие данной верстки от отзывчивой заключается в том, что при данном типе верстки страница «прыгает» по заранее заданным (контрольным) точкам, адаптируя контент каждый раз к наиболее подходящей и ближайшей из них. Другими словами, медиа-запросы описывают фиксированные положения контента для каждой из этих точек. В конечном итоге получается набор из нескольких фиксированных макетов которые работают с различными разрешениями экранов.
Плюсы: при комбинировании данного типа верстки с резиновой, можно настроить отображение сайта, начиная от самых маленьких разрешений мобильных устройств, и заканчивая самыми большими мониторами.
Минусы: Довольно трудно предугадать как будет выглядеть сайт абсолютно на всех устройствах, учитывая что расстояния между контрольными точками могут быть достаточно большими.
Пример: http://www.smashingmagazine.com/
Данный тип верстки, часто путают с адаптивным, но в отличие от последнего, основывается на принципе «резины», но так же как и он используют медиа-запросы для адаптации сайта под ширину устройства. Если в адаптивной верстке при изменении размеров окна внешний вид сайта изменяется несколько раз в зависимости от контрольных точек, то в респонсивной верстке он изменяется постоянно.
Получившаяся в результате страница не «прыгает» по контрольным точкам, как в адаптивной версте, а плавно изменяется между ними.
Плюсы: Не имеет значения то, как сильно растягивается размер окна, отзывчивый макет сайта всегда будет адекватно подстраиваться под это разрешение.
Минусы: Сложнее реализовать, чем адаптивную верстку.
Пример: http://superfriend.ly/
Однозначного ответа на этот вопрос нет. Все способы по-своему хороши, главное правильно их использовать. Если говорить о применимости того или иного способа верстки, то тут обычно все зависит от задач, бюджета, структуры сайта, его содержимого, ну и от здравого смысла. Ну и конечно же глупо следовать одному подходу к верстке, всегда можно комбинировать или создавать собственные для каждой задачи. Комбинирование является оптимальным вариантом.
Если же говорить о последних двух типах, как о наиболее современных и популярных, то респонсивная верстка является решением более безопасным, в отличие от адаптивной, т.к. здесь нет строгой привязки к конкретным разрешениям экрана и с появлением новых ваш сайт будет правильно отображаться даже на них. Однако, для некоторых сайтов адаптивная верстка тоже может быть наиболее оптимальным вариантом. в зависимости от поставленной задачи, например, если вам нужен сайт работающий на каких-то определенных разрешениях или если вам нужна отдельная мобильная версия вашего сайта.
