Способы верстки: начальный этап воплощения дизайн-макета
В зависимости от построения макета, верстка сайта делится на несколько видов.
- Страницы с фиксированной шириной. Такие решения предполагают независимость размера от индивидуальных особенностей устройства вывода, он всегда остается в рамках предопределенной разработчиком ширины. В том случае, когда содержимое не вмещается на экран монитора, внизу появляется горизонтальный скроллинг – штука крайне неудобная для использования. Этот вид верстки широко применялся в конце 90-х и начале 2000-х, когда компьютерная техника еще не поражала воображение разнообразием. Справедливости ради отметим, что способ и сегодня живет в практике создания сайтов и ничуть не выглядит устаревшим.
- Резиновая верстка. Если в первом случае отображаемая ширина прописывается с фиксированной точностью, то в «резиновых» макетах сайт масштабируется в процентах под существующее разрешение экрана. Это позволяет создать проект, пропорционально одинаково отображающийся и на декстопах с различающимися размерами дисплея, и на всех видах мобильных гаджетов. Естественно, что отладка и тестирование такой страницы занимает больше времени. Ведь нужно проверить, как живая ткань верстки ложится на каждое из устройств.
- Адаптивные приемы. Здесь все сложнее – страница способна перестраиваться и менять элементы местами, в зависимости от технических характеристик устройства вывода. Адаптивный (отзывчивый) способ верстки позволил отказаться от практики создания отдельных версий сайтов для мобильных платформ. «Умная» кодировка страниц самостоятельно ориентируется в размерах и выстраивает структуру в оптимальном порядке.
Отдельно вспомним про комбинированные возможности верстки сайтов, в которых одновременно используются несколько технических приемов.
В практике создания продающих лендингов редко пользуются первым из перечисленных способов – фиксированной версткой. Причина кроется в статистике действий пользователей, которые привыкли к гаджетам для серфинга в интернете и просмотра предложений в интересующих тематиках. Фиксированные размеры статичного сайта не позволяют добиться равнозначного отображения веб-страницы на всей линейке мобильных устройств. К тому же количество людей, использующих две платформы, имеет примерно равную пропорцию, при которой действия с товаром зачастую комбинируются: знакомство, сравнение и выбор делаются при помощи гаджета, а заказ и оплата на стационарном компьютере. Таким образом, актуализируется необходимость добиваться одинаково выгодного представления landing page на всех устройствах.
Верстка лендингов: чего не видят клиенты
Когда говорим о верстке сайтов, самое верное сравнение приходит из области совершенно посторонней – то, что видит пользователь на странице является лишь верхушкой айсберга. Вся кодированная начинка, обеспечивающая бесперебойную и быструю работу страницы, скрыта в недрах сайта и при корректной кодировке никогда не показывается на поверхности. Об этом в следующей статье.