Вёрстка
Верстка сайта — это создание HTML/CSS версии дизайна. При вёрстке веб-страниц специалист создаёт html-код, размещающий в окне браузера элементы веб-страницы (это изображения, текст и т. д.). Делается это в соответствии с макетом, разрабатываемым заранее.
Разница между вёрсткой веб-страницы и полиграфической состоит в том, что верстальщик должен учитывать, что в различных браузерах элементы будут отображаться по-разному. Также он должен учитывать разницу, неизбежную из-за различий размеров рабочего пространства устройств.
Это сложный творческий процесс, поэтому как таковая единая формула у него отсутствует. И, как следствие, каждый из способов вёрстки имеет свои сильные и слабые стороны.
Вёрстка проходит в несколько этапов.
В первую очередь верстальщик получает дизайн-макет страницы, который утверждён и выполнен дизайнером. Для успешного выполнения задания верстальщик проводит анализ этого макета. Разделив его на так называемые "этажи" (горизонтальные линии, или полосы), он анализирует каждый из них по отдельности и снова разбивает: уже на прямоугольные блоки.
Типы вёрстки
Фиксированная или статичная верстка
Фиксированная верстка, её ещё называют статичной - подобный тип дизайна (он бывает табличным либо блочным), отличается тем, что у него ширина столбцов и рисунков задаются в пикселях, а это подразумевает, что они обозначены конкретно.
Плюсы:
Разработка такого дизайна достаточно проста, а это даёт возможность прогнозировать внешний вид будущего сайта. Это можно делать уже на начальных этапах работы. Дизайнер может отслеживать размер строки. Соответственно цена такой вёрстки будет меньше чем при других типах.
Минусы:
Так как ширина сайта фиксирована, то комфортно просматривать его можно только на мониторах такого же размера или больше. Если ширина сайта 1280 пикселей, а его откроют на мониторе, разрешение которого 1024, то внизу окна браузера появится полоса прокрутки и пользователю придётся отвлекаться на неё, что бы смотреть сайт.
Примеры статичной верстки
Наглядный пример фиксированной вёрстки
2013г
Вёрстка этого сайта имеет фиксированные размеры
2012г
Фиксированная вёрстка
2011г
Интернет магазин товаров длшя дачи и сада
2011г
Парфюмерный интернет магазин
2011г
Интернет магазин итальянской мебели. Первый в коллекции
2010г
Резиновая вёрстка
Резиновая вёрстка отличается от статичной тем, что ширина блоков и элементов задаётся не в пикселях, а в процентах. В своё время такой метод помог на пару лет решить проблему отображения сайта на различных мониторах. Но потом появились мобильные устройства, такие как телефон или планшет и резиновая верстка перестала радовать глаз. Пришлось искать новые способы качественно отображать содержимое сайта. В итоге вместе с развитием технологий HTML5 и CSS3 появилась адаптивная вёрстка.
Плюсы и минусы те же, что и у статичной. Правда подходит для немного большего количества различных мониторов.
Примеры резиновой верстки
Современное канализационное оборудование
2012г
Электронный гипермаркет «Ранта»
2012г
Адаптивная вёрстка
Адаптивная вёрстка - это адаптируемый под размер экрана дизайн, в котором есть возможность менять местами блоки, либо заменить их блоками, которые отображаются только при каком-то конкретном разрешении. Подобный тип вёрстки заменил собой идею о создании специальных версий сайта для мобильных устройств, которые "живут" на обособленных поддоменах (как в случае с m.wikipedia.org).
Адаптивная вёрстка открыла массу возможностей в создании и отображении сайтов. И сегодня практически все интернет ресурсы разрабатываются с условием, что вёрстка будет адаптивной. Те же сайты, которые были созданы давно, постепенно перевёрстываются и предстают перед нами в новом виде. К слову сказать, Apis Studio с 2015 полностью перешла на адаптивную вёрстку и теперь создаёт сайты только на её основе.
Плюсы:
При смене размеров экрана сайт не будет доставлять пользователю неудобств.
Минусы:
Требует времени на проработку и тестирование на различных устройствах. Но оно того стоит.
Примеры адаптивной вёрстки
Интернет магазин компании Мир Матизов
2015г
Сусальное золото и товары для позолотчиков
2015г
Серебрянные издели оптом от производителя
2015г
Ювелирные изделия на заказ
2014г
Как видно, каждый из этих видов вёрстки предполагает наличие у него как достоинств, так и недостатков. При выборе следует опираться от той задачи, которую предстоит решить. Также есть возможность использования и смешанного типа вёрстки, когда некоторые столбцы табличного дизайна задаются в процентах, а другие прописываются в пикселях.
ВНИМАНИЕ! Адаптивной можно сделать только блочную вёрстку. Если у вас сайт свёрстан с помощью таблиц, то вам придётся перевёрстывать весь сайт.
Профессионально выполненная верстка очень важна для достижения ваших целей, будь то продажи вашего продукта, привлечение внимания к вам как к специалисту в какой-либо области, или объединение единомышленников.
И, разумеется, как и у любого товара, у верстки есть набор каких-то определённых характеристик, которым она должна отвечать в том случае, если она выполнена профессионально. Например, ваш готовый сайт должен открываться в абсолютно любом браузере, а не только в каких-то определённых. Называется это кроссбраузерностью, и является очень ярким признаком профессиональности работы верстальщика. Плохо свёрстанные сайты не могут этим качеством похвастаться. Зачастую на них попросту не работают какие-то функции или, например, налезает друг на друга содержимое сайта. Хотя, конечно, на кроссбраузерности может отражаться не только качество верстки.