1. Главная
  2.  
  3. Статьи
  4.   5 отличий хорошей верстки от плохой

5 отличий хорошей верстки от плохой

Как отличить хорошую верстку от плохой? Краткая инструкция ниже.

Кроссбраузерность

Кроссбраузерность – способность сайта отображаться одинаково во всех браузерах.

Плохая верстка. Сайт отображается по-разному в зависимости от браузера. В самых худших вариантах верстка «разъезжается» на старых версиях. Хуже всего дела обстоят с браузером Internet Explorer.

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

Продуманная структура каркаса сайта

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

Хорошая верстка. Сначала разрабатывают общий каркас для сайта, правильно разделяют глобальные элементы header, content, sidebar и footer. Только после этого размещают вложенные элементы внутри родительских. Количество кода значительно сокращается, что ускоряет загрузку страницы. Структура прозрачна и легка для работы с сайтом в будущем.

Блочная верстка против табличной

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

Хорошая верстка. Применяют блочную верстку (верстку на div-ах). Такой подход позволяет существенно уменьшить количество кода и увеличить скорость загрузки содержимого страниц. Увеличение скорости достигается за счет того, что div-ы загружаются поочередно, пользователю сразу прорисовывается верхние блоки сайта, пока он начнет прокручивать страницу вниз, уже будут прорисованы и все остальные.

Семантика кода

Плохая верстка. Html-теги используют не по назначению: блочные элементы помещают в строчные, заголовок h2 находится внутри заголовка h3, для оформления визуального вида страницы используют html-теги, код javascript и css размещают прямо в файле. Это все ведет к увеличению времени загрузки страниц сайта, появлению ошибок и предупреждений валидатора.

Хорошая верстка. Полное разделение контента и оформления. Html-теги используют только для логического разделения текста (заголовки, абзацы, списки). Для визуализации подключают файлы таблиц стилей css и скрипты. Это профессиональный подход к верстке.

Оптимизация изображений

Изображение слева занимает 63 Кб, справа - 15 Кб. Для человеческого глаза разница совершенно не видна. Сократить размер файла в 4 раза удалось с помощью правильной оптимизации.

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

Хорошая верстка. Сохраняют изображения специально для web-устройств, где убирают всю лишнюю информацию и можно регулировать качество: в большинстве случаев можно сократить вес изображения в 2-3 раза без потери качества заметного для глаза. Для повторяющихся фонов применяют паттерны, это небольшие изображения, которые при соединении не оставляют швов.

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

Добавить комментарий

Пункты, отмеченные *, являются обязательными к заполнению