О верстке сайтов

Мы рассказываем о видах верстки страниц, вы — делаете выбор

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


Табличная верстка

При такой верстке страница строится из табличных элементов (<table>, <tr>, <td> и т.д.), что задает своеобразную жесткость конструкции. С помощью таблиц довольно просто реализовать кроссбраузерную верстку.

Способ достаточно прост в использовании, но имеет ряд недостатков:
— излишняя массивность кода;
— невысокая скорость обработки браузером;
— вероятность ошибок в коде из-за множественной вложенности таблиц;
— необходимость использования «распорок» (прозрачные GIF изображения).
Кроме того, далеко не все макеты можно сверстать с помощью таблиц.

Табличная верстка считается устаревшим методом и не используется большинством веб-разработчиков (в нашей компании мы ее не используем). Однако это не значит, что сами таблицы нельзя или нежелательно использовать. Таблицы хорошо подходят для вывода каких-то статистических данных, для демонстрации и сравнения цифр. Здесь без них не обойтись.


Блочная верстка 

Блочная верстка на данный момент является основным и самым популярным способом верстки. В данной верстке применяются блочные элементы (в основном тег <div>), которые возможно размещать на странице путем наложения друг на друга.

Основные преимущества такой верстки:
— небольшое количество кода;
— понятная структура кода;
— высокая скорость обработки браузером;
— возможность реализации сложных структурных элементов.
В связке с JavaScript и CSS данный вид верстки позволяет создавать сайты с различными интерактивными элементами.


Адаптивная верстка

Данный тип верстки в  последнее время становится все более популярным. Основное преимущество заключается в том, что сайт будет одинаково отлично выглядеть на различных устройствах и разных разрешениях.

Основные принципы:
— макет на основе пропорций;
— «резиновые» изображения, которые меняют свои размеры, подстраиваясь под родительский блок;
— использование разных стилей для разных разрешений; — отображение того или иного контента в зависимости от разрешения (устройства).

Проектирование здесь начинается с мобильной версии сайта, так называемый принцип mobile first — то есть в первую очередь создают дизайн-макеты, предназначенные для мобильных устройств с  небольшим разрешением экрана. На этих макетах указывают только самую необходимую информацию. Далее проектируют макеты под устройства с большим разрешением экрана, добавляя на них блоки с информацией. Таким образом получается, что независимо того, с какого устройства пользователь зашел на сайт, он будет видеть весь материал в удобном для восприятия виде.

Конечно, такой вид дизайна и верстки требует больше времени для реализации, нежели блочная верстка, но результат стоит ожидания и затраченных усилий ;)


Использованы материалы: htmlbook.ru.