Блог

Что такое верстка сайта? Самое важное, что надо знать о верстке.  13.04.2016 17:31

Вёрстка веб - страниц - это создание структуры html-кода, который позволяет размещать различные элементы (изображения, видео, текст и т.д.) в браузерах так, как это было задумано на макете.

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

Этапы веб - верстки.

После разработки макета сайта и прорисовки его дизайнером, к работе приступает специалист по веб – верстке. Сейчас большинство программистов знакомо с технологией верстки и поэтому можно сэкономить на затратах, обратившись к мастеру два в одном. Однако с каждым днем становится все больше нюансов, которые требуют специализированного специалиста – верстальщика. Получив макет, как правило в формате фотошоповского файла, верстальщик разбивает его на горизонтальные строки, а затем их на столбцы. Далее идет верстка этих строк и столбцов. После верстки проверяется на кросс – платформенность, то есть одинаково ли идет отображение страницы в различных браузерах и на разных операционных системах (Windows, Mac Os, Linux).

Типы верстки

В конечном итоге, какая же выходит верстка?

Она может быть фиксированной, адаптивной, резиновой или отзывчивой.

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

Адаптивная верстка подстраивает дизайнерский макет под размер экранов выбранных устройств (чаще всего популярных форматов). Этот тип верстки перестраивает содержимое, блоки, с горизонтального на вертикальный формат, а иногда и заменяет другими, с меньшим размером для удобного использования на более маленьких экранах. Сложность заключается в том, что нужно создавать отдельный дизайн как для полноценного сайта, так и для мобильной версии. Сейчас популярный тип верстки, на который переходят большинство сайтов, особенно там, где требуется взаимодействие с клиентами (интернет – магазины, лендинг пейдж, интернет банки).

В резиновой верстке, содержимое веб – страниц меняет ширину, в зависимости от размера окна браузера. Тут задается минимальное и максимальное значение по отображению. Преимущество такой верстки в возможности заполнить все пространство браузера и улучшить вид сайта, плюс к этому сайт будет одинаково смотреться на разных разрешениях экрана. Недостаток в том, что нельзя быть уверенным, что станет со структурой сайта в тот или иной момент. А на больших разрешениях могут появится длинные строки, которые затрудняют их чтение.

Отзывчивая верстка объединяет резиновую и адаптивную. Сложная, но стабильно и согласно дизайну будет отображаться на любом устройстве и в любом браузере.

Кроссбраузерность – сложный процесс, но позволяющий одинаково отображать дизайн на любом браузере.

Какой же тип верстки выбрать для своего сайта?

Все зависит от целей и Вашей целевой аудитории. Коммерческий сайт, с современной, технологичной, и молодой аудиторией должен быть адаптирован к просмотру на мобильных устройствах, значит вам необходима адаптивная верстка. Информационный, развлекательный портал – аудитория тоже молодая, современная, любящая почитать новости с мобильного телефона. Ответ один – выбирайте адаптивную верстку и обязательно уточняйте кроссбраузерность.