Современные подходы к верстве сайтов

Современные подходы к верстке сайтов

Михайлина В.М.

Верстка сайта представляет собой описание программным кодом визуальной части веб-сайта. Независимо от того, какой браузер использует пользователь, сайт должен выглядеть и работать корректно при любом разрешении монитора.

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

Валидная верстка веб-сайта — написание HTML и CSS кода, который соответствует стандартам W3C и успешно проходит тест на валидаторе.

Вёрстка обязательно должна быть кроссбраузерной для Firefox, Opera, Safari, Google Chrome и Internet Explorer, который в последнее время теряет актуальность. Сайт должен быть протестирован на разных разрешениях монитора, начиная от 1024 на 768;
Вёрстка абсолютно всех страниц сайта должна пройти валидацию. Использование различных CMS, модулей и готовых скриптов, вставка на интернет-ресурс содержимого разных форматов зачастую затрудняют достижение валидности;
Внешний вид свёрстанной страницы должен по максимуму соответствовать дизайну: размеры шрифтов, расстояния между строками, отступы должны соответствовать параметрам psd макета. Достичь пиксельной точности зачастую затруднительно, поэтому допускается отклонение отдельных элементов в пределах 3-6 пикселей;
CSS стили должны быть вынесены в отдельный документ. В HTML коде допустимо только присутствие идентификаторов и классов;
Логотип веб-сайта должен являться ссылкой на главную страницу;
HTML страницы должны содержать комментарии к основным элементам, таким, как меню, заголовок, шапка, контент, футер и т.п.

Имена идентификаторов и классов должны соответствовать назначению и быть понятными интуитивно (menu, footer, header и т.д.);
В таблицах стилей настоятельно рекомендуется использовать одинаковые единицы измерения для всех величин;
Надписи на кнопках должны быть написаны на одном языке и либо прописными буквами, либо начинаться с заглавной;
Кнопки должны иметь стандартное оформление и быть либо графическими элементами, либо быть настроенными с помощью таблиц стилей;
HTML и CSS код должен быть минимизирован. Следует избегать лишних классов и идентификаторов и использовать свойства наследования;
Заголовки должны быть написаны исключительно с помощью специальных тегов h1, h2 и т.д;
Атрибуты всех тегов должны быть заключены в кавычки.

Фиксированная верстка. При изменении размера окна браузера блоки не поменяют свою ширину, а на мониторах с низким разрешением экрана появится полоса прокрутки;
Резиновая верстка. В зависимости от размера окна браузера, блоки изменят свою ширину;
Адаптивная верстка. Воплощается в жизнь благодаря различным скриптам и заточена под определённые разрешения (320, 768, 1024 и т.д.). Изменение размера происходит рывками после того, как определённый уровень достигнут;
Отзывчивая верстка. Представляет собой слияние адаптивной и резиновой верстки. Является самой сложной с технической точки зрения, но в то же время самой эффективной;
Версия сайта для мобильных устройств. Фактически является созданием другого сайта с другим дизайном, версткой и URL адресом.

Типы верстки

Табличная верстка
Суть такой вёрстки заключается в применении сетки таблиц с невидимой границей, в которых удобно размещать разнообразные элементы.
Совсем недавно до появления блоков и слоёв это был самый популярный тип вёрстки, имеющий множество преимуществ:
Лёгкость в создании колонок, что положительно влияет на поведение при изменении размера окна браузера и позволяет создавать многоколоночные макеты сайта;
Склейка изображений. Зачастую рисунки делят на несколько отдельных фрагментов для уменьшения объёма файлов, создания эффекта анимации и т.д. Каждый рисунок помещается в отдельную ячейку таблицы, параметры которой задаются таким образом, чтобы стыков между ячейками видно не было;
Поскольку высоту и ширину таблицы можно задавать в процентах, табличная верстка широко применяется при создании резинового макета;
В отличие от некоторых CSS параметров, таблицы в разных браузерах отображаются практически идентично, что упрощает создание страниц;
Из-за одновременного выравнивания содержимого ячеек таблицы и по вертикали, и по горизонтали, возможности по размещению различных элементов дизайна относительно друг друга и на странице в целом расширяются.

Минусы:

Для того чтобы содержимое таблицы корректно отображалось браузером, она не будет показываться до тех пор, пока не будет загружена полностью. Если таблица массивная, загрузка сайта займёт довольно много времени;
Слишком громоздкий код из-за иерархической структуры тегов, что повышает сложность внесения изменений в отдельные параметры;
Плохая индексация поисковыми роботами. Контент сайта с табличной вёрсткой находится относительно далеко друг от друга, что затрудняет попадание сайта в топ поисковой выдачи.

Слои, которые создаются с помощью тега div, представляют собой крайне удобные структурные элементы, оформление которых задаётся с помощью таблиц стилей CSS.
Блочная верстка сайта имеет следующие преимущества:
Блочная верстка образует гораздо меньший объём кода, в отличие от верстки таблицами, что не только увеличивает скорость загрузки страницы, но и уменьшает нагрузку на сервер;
Удобство изменения дизайна путём правки файла стилей;
Преимущества в сфере SEO. Вместо кода в первую очередь распознаётся контент и семантически правильно размечается.
Повышенная читабельность кода, что способствует соответствию стандартам валидности;
Задачи по нестандартному оформлению и расположению элементов веб-сайта могут быть с лёгкостью реализованы;
Возможность создать адаптивный дизайн, который будет корректно отображаться как на стационарных, так и на мобильных устройствах.

Минусы:

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

Верстка слоями

Слои – это такие элементы HTML кода, которые внедряются в страницу сайта наложением друг на друга с пиксельной точностью. Изменение параметров слоёв происходят с помощью JavaScript и VBScript, что позволяет использовать различные эффекты.
Достоинствами вёрстки слоями являются:
Высокая скорость обработки страниц браузерами;
С помощью позиционирования различных слоёв относительно друг друга можно создавать живые и интересные анимационные эффекты;
Свойства слоёв настраиваются с помощью CSS;
Благодаря поддержке системы декартовых координат, местоположение слоёв на странице сайта можно указать с предельно возможной точностью.

К недостаткам вёрстки слоями можно отнести:
Необходимость наличия довольно глубоких познаний языков и технологий веб-программирования (VBScript, CSS, JavaScript);
Отображение сайта в различных браузерах может также быть различным;
С технической точки зрения верстка слоями похожа на позиционирование, однако во избежание проблем с браузерами, тег следует заменять на

Источник:

https://www.internet-technologies.ru/articles/verstka-sayta-shpargalka-dlya-nachinayuschih.html