Верстка сайта

Верстка сайта — наиболее важный вопрос, ведь именно от этого этапа зависит работа вашего сайта и его скорость. Разберем данный вопрос.

Тип верстки:

Фиксированная верстка — блоки не меняют свою ширину. На мониторах с маленьким разрешением появляется горизонтальная полоса прокрутки.

Табличная верстка — совсем недавно была самым популярным вариантом. Она обеспечивала удобство создания структуры сайта и приемлемое качество отображения. Поисковые системы не «любят», когда структура самой страницы создается таблицами. Уже не используется.

Блочная верстка — самая популярная на данный момент. Верстается блоками. Каждый может убедиться в этом, зайдя на свой любимый сайт и вызвав его исходный код или меню разработчика — скорее всего, структура на нем будет сформирована из множества элементов и с указанными классами.

Респонзивная верстка (резиновая верстка) — блоки меняют свою ширину в зависимости от размера окна браузера. Она может принимать максимальное и минимальное значение. Но нельзя по мере уменьшения экрана из 50% сделать 100%.

Адаптивная верстка —  Воплощается с помощью медиа запросов или благодаря скриптам . Заточен под конкретные известные устройства (может быть от 3 до 6 разрешений — от 2048 px до 375 px). Любое изменение происходит рывками, после достижения одного из указанных уровней. Однозначно подходит для создания версии для печати. При уменьшениях экрана, контент идеально подстраивается, в отличии от респонзивного варианта.

Отзывчивая или гибридная верстка — это смесь адаптивного и респонзивного дизайна. Такой тип используют большинство проектов, для удешевления стоимости разработки. Разрабатывается только десктопная имобильная версия, планшетная версия делается респонзивной, или может иметь 1 — 2 точки пересечения для экранов.

Какие виды верстки есть?

• Табличная верстка
• Верстка блочная на div
• Верстка с использованием фреймыорка (например, Bootstrap)
• Методология БЭМ
• Pixel Pirfect 
• Верстка на Flex’ах
• Верстка на Grid’ ах
• Верстка на препроцессорах Less и Sass

Мы выделили самые востребованные и те, с которыми мы работаем в последнее время.

Как проверить качество верстки, на что обращать внимание — требования к верстке?

Основные требования

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

• Необходимо смотреть на размеры и расположение блоков, внешнее сходство с макетом.
• Необходимо проверить работу анимации, если такая имеется.
• Допускаются небольшие отличия в отображениях шрифтов.
• Вёрстка должна идентично отображаться в последних стабильных версиях браузеров Chrome, Firefox, Safari, если иное не указано в технического задании проекта.

Технологии

Проект должен быть сделан на HTML и CSS без использования сторонних библиотек и фреймворков. Допускаются скрипты бибилиотек, которые не конфликтуют с остальными скриптами и не выдают критических ошибок. может повысить нагрузку сайта при загрузке в браузере. А это в любом случае слайдеры, галереи. видео, медиа элементы, сложная анимация и так далее.

Размеры страницы

• У каждой страницы есть минимальная ширина по фрейму.
• При ширине окна больше минимальной страница центрируется.
• Горизонтальная прокрутка появляется только при ширине, меньше минимальной.

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

Переполнение

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

Размеры элементов

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

Количество элементов

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

Шрифты

Следующие текстовые параметры должны соответствовать параметрам из макета:

• семейство шрифта font-family;
• насыщенность шрифта font-weight;
• начертание шрифта font-style;
• размер шрифта font-size;
• высота строки line-height;
• цвет текста color.

Pixel Perfect

При наполнении контентом, как в макете, элементы каждой страницы соответствуют макету.

Допускаются:

• различия в 5 пикселей по высоте при расстояниях более 30 пикселей и 2 пикселя по ширине;
• различия в отображении шрифтов, связанные со сглаживанием на различных платформах.

Взаимодействие

При взаимодействии с элементами (наведение, нажатие) ни сам элемент, ни окружающие его блоки не меняют своего положения, если такое поведение не предусмотрено макетом.

Имена атрибутов и классов, а так же файлов и папок

Названия папок, файлов, атрибутов, классов должны состоять из английских слов.

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

Понятные имена папок и файлов верстки

Закомментированный код

В проекте не должно быть закоментированных фрагментов кода без осмысленного текстового пояснения.

Неиспользуемые файлы

В проекте не должно быть неиспользуемых файлов:

• Файлы, не подключённые на страницы.
• Подключённые файлы, которые ничего не делают.

Файлы svg-изображений, которые заинлайнены в разметку, могут остаться в папке проекта.

HTML

HTML Ориентиры

На странице, при их наличии, должны быть обозначены структурные ориентиры:

• <header> для вводной части, повторяющейся на других страницах;
• <main> для основного содержимого, не повторяющегося на других страницах;
• <nav> для важных навигационных элементов по сайту;
• <aside> для дополнительного содержимого;
• <footer> для закрывающей, дополнительной информации о странице.

Ориентиры могут быть обёрнуты или вложены в другие теги, использоваться для стилизации или просто служить смысловыми обёртками.

Как можно сэкономить на верстке?

Заголовки

• На странице должен быть <h1>, который описывает содержимое страницы.
• Уровни заголовков должны идти последовательно от большего к меньшему без пропусков.

Исключения, касающиеся наличия одного <h1> на странице или изменения сквозной структуры заголовков, возможны для тега <article>, так как внутри него может находиться свой собственный <h1> и собственная структура заголовков.

Кнопки и ссылки

Ссылки <a href> должны использоваться для перехода между страницами, а кнопки <button> должны использоваться только для действий на странице.

• У ссылок должен быть атрибут href. Ссылки, которые ведут на самих себя, могут быть без атрибута.
• Для ссылок, адрес которых неизвестен, можно использовать атрибут href с решёткой href=»#».
• Адреса почты и телефоны должны быть размечены ссылками с соответствующими схемами внутри href.
• У кнопок должен быть явно указан тип действия в атрибуте type.

Работоспособные формы

• Формы должны быть работоспособными и отправлять данные всех полей.
• Поля формы должны находиться внутри тега <form>.
• У формы должен быть указан атрибут action.
• У обязательных полей должен быть атрибут required.

Подписи полей форм

Подписи полей форм должны быть привязаны к своим полям.

Лишние элементы

В разметке не должно быть лишних обёрток и элементов, которые используются для оформления и могут быть заменены на псевдоэлементы.

Валидация HTML

• Разметка должна проходить валидацию в валидаторе W3C без ошибок (error).
• В проверке могут быть предупреждения (warning).

Фавиконки

К каждой странице должны быть подключены иконки с помощью <link rel=»icon»> с указанием размера иконки.

• В корне проекта должен быть файл favicon.ico, но подключать его к странице необязательно.
• Фавиконки должны быть в размере 32×32 и в формате PNG.

CSS

Подключение стилей

• Все стилевые файлы должны быть подключены с помощью тега <link rel=»stylesheet»>.
• Собственные стили проекта должны быть подключены одним файлом в <head>.
• Сторонние стили должны быть подключены в <head> отдельными файлами.
• Сторонние стили должны быть подключены до собственных стилей проекта.
• В разметке не должно быть инлайновых стилей в атрибуте style=»» или в теге <style>.
• В разметке допускаются стили для демонстрации поведения JS.

Глобальный селектор

Глобальные селекторы запрещены, кроме исключений, приведённых ниже.

Глобальный селектор — это селектор по типу элемента или универсальный селектор. Например:

* {}

body {}

img {}

:root {}

Исключения:

• Универсальный селектор, используемый для изменения боксовой модели одновременно элементов и псевдоэлементов.
• Нормализация тега <img>.
• Уникальные теги документа: <html> и <body>.
• :root, в котором использованы только кастомные свойства.

ID в селекторах

В селекторах не должно быть #id.

Использование !important

Ключевое слово !important не должно использоваться для борьбы со специфичностью.

Использование шрифтов

• Начертания шрифтов, подключенных с помощью @font-face, должны меняться с помощью font-weight и font-style и не должны меняться с помощью подключения отдельного семейства шрифтов.
• При указании шрифт должен дополняться общим семейством: serif, sans-serif, monospace и другие.

Изображения

Контентная и декоративная графика

• Контентная графика должна вставляться в разметке.
• Декоративная графика должна вставляться в стилях.
• Декоративная SVG-графика может использоваться в разметке, если её внешний вид нужно менять стилями.

Форматы графики

Выбран подходящий формат изображений. Например:

• JPEG для фотографий;
• SVG для векторных изображений;
• PNG для всех прочих.

Размеры графики в разметке

Для всех изображений, размеченных при помощи <img> и <svg>, размеры должны быть заданы с помощью атрибутов width и height.

Контент

Текстовые переносы

Текст не должен переноситься с помощью двойного <br>.

Интерактивные элементы

Описание графики

Контентная графика должна иметь описание.

Чтобы описание элемента попало в дерево доступности, нужно использовать один из способов:

• добавить изображению alt;
• добавить скрытый текст с помощью visually-hidden;
• добавить атрибут aria-label.

Предпочтительно увеличивать доступность в первую очередь с помощью HTML и только потом — aria-ролей.

Подпись в конце описания должна иметь точку. Точка нужна для интонационной паузы при чтении скринридером.

Подписи интерактивных элементов

Интерактивные элементы должны быть подписаны. Подпись должна быть связана с элементом и отображаться в дереве доступности.

Предпочтительно реализовывать подпись с помощью HTML: тегом с классом visually-hidden или атрибутом alt у изображений, и только потом — aria-атрибутами.

Подпись в конце описания должна иметь точку. Точка нужна для интонационной паузы при чтении скринридером.

Видимое состояние элементов

• Все интерактивные элементы должны иметь видимое состояние фокуса.
• Элементы должны иметь стандартный браузерный фокус, если это состояние не описано в дизайне.

Область интерактивных элементов

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

Область клика у интерактивных элементов может быть больше, чем их контент, но область клика не должна накладываться на окружающие элементы.

Область клика можно определить из макета. Если в макете область клика не определена, то можно сделать её на своё усмотрение, руководствуюсь примерами ниже.

Фоновый цвет у фоновых картинок

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

Порядок фокуса

Порядок фокуса на интерактивных элементах не должен изменяться стилями.

_

Полный перечень с примерами применения данной верстки вы можете посмотреть здесь

Можно ли сэкономить на верстке:

1 вариант

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

2 вариант

Сделать респонзивную верстку, или с применением фреймворка Bootstrap (чего я не рекомендую, так как данный фрейворк тянет все свои компоненты в ядро верстки, это утяжеляет страницу). При респонзивной верстке у вас мобильная версия будет до 480 px шириной минимум, но размеры элементов будут уменьшаться пропорционально и возможно мобильная версия будет не такой отзывчивой. как при адаптивной или отзывчивой верстке.

Как рассчитывается цена верстки страницы

Правильно считается так, количество элементов умножается на курс доллара + каждый скрипт от 20 до 30 $. Во внутренней странице считаются только те элементы, что не входят в другие страницы. Такой подход используются в студиях как российских, так и в зарубежных. Но верстка по такому прайсу выходит очень дорогой, понятно, что такую верстку верстают только специалисты уровня senior. Но позволить такую верстку могут только большие компании.

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