Верстка вебсайтов значительно отличается от аналогичного процесса для печатных изданий.
Во-первых, содержимое страницы отображается не на фиксированном размере бумаги, а в окне браузера.
Во-вторых, в оформлении вебсайтов к использованию доступны только прямоугольные модули. То есть расположение элементов на странице нужно проводить с учетом этого фактора.
Кроме того, важной проблемой является со относимость html-кода с различными браузерами. То есть созданный сайт может по-разному воспроизводиться в зависимости от используемой программы, нередко могут возникать искажения.
Основной характеристикой, которую необходимо учитывать при верстке сайтов – ширина страницы. Заранее нельзя сказать, каким будет размер устройства, на котором она будет просматриваться, поэтому сложились два типа доступных макетов: фиксированный и «резиновый».
Фиксированный макет определяется четко заданными параметрами. В большинстве случаев ориентируются на стандартный размер монитора в 1024х768 пикселей. Этот способ достаточно простой, он не требует значительной работы для верстальщика.
Плюс: можно быть уверенным, что общее оформление сайта сохраняется в изначальном варианте. Однако для посетителей страницы такой вид организации страницы может быть не совсем комфортен. Помимо возникающих несоответствий размера шрифта и иных элементов окну устройства, страница используется нерационально. Сайт уже не производит такого эффектного впечатления, как задумано, ибо остаются пустые места на странице, а при приближении или удалении теряется большая часть бокового контента.
На данный момент большей популярностью пользуется более гибкая форма веб-страниц – «резиновый» макет. Основной принцип подобного макета – определение параметров не в пикселях, а в процентном соотношении. То есть в зависимости от разрешения экрана будет меняться и формат сайта. Таким образом, достигается адекватное отображение веб-страниц. Этот макет, тем не менее, сложнее реализовать на практике, однако и произведенный эффект, без сомнения, будет большим.
Необходимо обратить внимание и на высоту веб-страницы. Хотя по факту она может достигать любых размеров, не стоит допускать слишком большого растяжения информации по вертикали, иначе посетитель просто не сможет найти нужные себе сведения.
После формирования избранного шаблона необходимо провести проверку работы сайта. Обратите внимание, верно ли отображаются страницы на экранах различных мобильных устройств и персональных компьютеров, как работает механизм уменьшения и увеличения шрифта, как функционирует сайт в режиме отключенного просмотра изображений. Если в качестве фона выступает конкретное изображение, то верстальщик должен позаботиться о том, чтобы оно адекватно отображалось при масштабировании сайта и прокрутке его вниз.