Разработка сайта — многоэтапный и долгий процесс, который включает в себя создание прототипа, макета и вёрстку. В материале расскажем, что такое вёрстка, из чего она состоит, и поделимся примерами кодов для начала работы.
Что такое вёрстка
Вёрстка — это структурирование гипертекстового формата и разработка визуального (графического) пользовательского интерфейса с использованием HTML, скриптов и стилей.
Основной задачей вёрстки является перемещение прототипа сайта в код, который будет отображать работу дизайнера. Делается это для облегчения восприятия информации конечным пользователем.
От того насколько профессионально выполнена вёрстка будет зависеть:
-
скорость загрузки сайта;
-
корректность отображения графического и текстового контента;
-
корректность открытия сайта с различных устройств.
Этапы вёрстки сайта
Этапы вёрстки зачастую зависят от типа задачи и уровня её сложности. Однако в большинстве случаев выглядит следующим образом:
-
Перенос структуры предварительного макета в HTML-документ. Это позволяет демонстрировать страницы и контент в заданном порядке.
-
Процесс задания глобальных настроек CSS по заданным параметрам прототипа.
-
Настройка интерактивных компонентов страниц сайта. В процессе могут использоваться различные технологии (JQuery и JS).
-
Перенос предварительного шаблона в систему управления контентом.
-
Тестирование результата и выявление ошибок. Например, некорректное отображение страниц в зависимости от браузера или съезд блоков на разных мобильных устройствах.
Виды вёрстки
На сегодняшний день чаще всего используют два вида вёрсики: блочную и табличную.
Блочная
Современный вид вёрстки, который основан на теге <div>, что позволяет создавать блоки в которых размещается весь контент страницы или его отдельная часть. Например, с помощью таких блоков можно разделить сайт на разделы: экран о компании, контакты, каталог. Такой подход к вёрстке позволяет быстро создать адаптивный сайт.
Табличная
Простейший вид вёрстки с которого всё начиналось. Верстальщик делит страницу на ячейки, которые напоминают стандартную таблицу в Excel. Минус этого вида состоит в том, что из-за необходимости создавать под каждый элемент дополнительную строку таблицы утяжеляется весь сайт. Это ведёт к более долгой загрузке. В чистом виде этот вид уже не используется, но до сих пор применяется для вёрстки электронных писем.
Валидная
Этот вид соответствует стандартам W3С, которые отвечают за корректное отображение сайта на любых пользовательских устройствах. Это достигается за счёт строгого соблюдения правил построения кода и его оптимизации. Как итог — высокий уровень репутации сайта в поисковых системах.
Основные инструменты вёрстки сайта
Для корректной вёрстки сайта специалисты используют множество инструментов, которые отличаются функционалом и возможностями. Ряд программ помогает в работе с текстовым контентом, другие — адаптировать визуал. Основными инструментами в вёрстке считаются:
-
Программы для работы с визуалом. Например, Adobe Photoshop, Gimp, Krita и другие приложения, которые помогают переносить элементы из макета и адаптировать их под запрос.
-
Программы для работы с кодами. Основными редакторами на сегодняшний день являются: Notepad++, Adobe DreamViewer, CSS3 Generator, UltraEdit, SublimeText, CoffeeCup HTML Editor, Winless, Firebug, WinMerge.
-
Программы для тестирования результатов и выявления ошибок. Популярными у верстальщиков приложениями считаются: CrossBrowserTesting, Markup Validator, IETester, Validator.w3, Dr Watson, CSS Validator.
Мы перечислили лишь самые популярные программы для вёрстки. Во многом выбор того или иного приложения зависит от поставленных задач и целей. Также немаловажно учитывать уровень профессионализма верстальщика.
Сложности в процессе вёрстки
В процессе вёрстки необходимо учитывать ряд факторов, которые могут испортить результат. Например:
-
Уровень понимания вёрстки дизайнером. Это необходимо для того, чтобы работа в тандеме оказалась результативной. Если дизайнер не имеет представления о процессе вёрстки, то для верстальщика может оказаться проблематичным реализация некоторых нестандартных решений. Поэтому так важно, чтобы дизайнер умел сопоставлять свои идеи с возможностями и спецификой вёрстки.
-
Особенности браузеров. Отображение различных элементов в разных браузеров может существенно отличаться. Этот момент необходимо учитывать и контролировать отображение элементов на различных платформах.
-
Адаптивность элементов. Например, ряд элементов анимации не могут поддерживать определённые устройства, а применение некоторых шрифтов вызывает определенные сложности у верстальщика. Чтобы добиться корректного отображения всех элементов, необходимо такие нюансы учитывать.
Это лишь основные факторы, которые необходимо учитывать при вёрстке сайта. Чтобы не тратить время на кропотливую работу по разработке и вёрстке сайта, можно воспользоваться функционалом платформы inSales, которая поможет не только быстро собрать сайт-визитку, но и значительно облегчит процесс продаж и сбора аналитики.
Способы проверки корректности вёрстки
Вёрстка сайта — процесс не быстрый и требующий высокой концентрации и внимательности. Но даже профессионалы могут ошибаться, поэтому в любом случае перед сдачей работы, необходимо тестирование.
Например, требуется ручной прогон сценариев в разных браузерах и с различных устройств, чтобы убедиться в корректности отображения информации. Проверить вёрстку можно воспользовавшись встроенным отладчиком, который есть в каждом браузере. Вызвать его можно с помощью кнопки F12.
Также необходимо убедиться, что результат соответствует макету. Сделать это можно с помощью сервиса welldonecode.com/perfectpixel. А проверить в пикселях размеры шапок, форм и логотипов поможет программа Page Ruler.
В целом алгоритм тестирования вёрстки сайта выглядит следующим образом:
-
1. Проверка соответствия вёрстки дизайну макета.
-
2. Проверка кроссбраузерности
-
3. Проверка отображения всех элементов в разных браузерах.
-
4. Проверка адаптивности сайта на разных устройствах.
-
5. Выявление ошибок в JavaScript.
-
6. Валидация HTML и CSS.
-
7. Проверка скорости загрузки сайта.
-
8. Проверка шрифтов
-
9. Проверка интерактивности элементов.
-
10. Проверка корректности работы ссылок.
-
11. Проверка на орфографию и грамматику.
Как ускорить вёрстку
Ускорить процесс вёрстки поможет соблюдение нескольких правил:
-
Анализ макета до старта работ. Прежде чем приступать к работе необходимо представить будущую страницу в виде HTML-разметки и только после этого начинать работать над кодом. Это поможет избежать множества ошибок.
-
Навык быстрой печати. В идеале необходимо уметь печатать вслепую. Это поможет набирать код не отвлекаясь на макет.
-
Подготовка и настройка среды обработки. Писать коды можно даже в обычном «Блокноте», но это значительно затянет процесс. Гораздо быстрее процесс пойдёт если установить IDE (интегрированную среду разработки).
-
Использование плагинов в редакторе кода.
Emmet — даёт возможность верстальщику использовать сокращения кода вместо ручного ввода целых конструкций.
AutoFileName — помогает быстрее найти файлы в папке проекта прямо при прописывании пути в атрибут src.
eCSStractor — позволяет выделить участок HTML-кода с написанными классами и вставить в CSS-код готовые селекторы. В итоге это позволяет не писать в CSS селекторы — только нужные свойства.
-
Применение методологии Яндекс БЭМ. Использование БЭМ (блок–элемент–модификатор) помогает создавать расширяемые и повторно используемые компоненты интерфейса. Это значительно сокращает время на продумывание названий классов или зависимости элементов друг от друга.
-
Использование препроцессора. Применение препроцессора Saass существенно облегчает процесс работы над организацией кода, а также помогает сократить код и вынести одинаковые реализации.
-
Работа со сборщиками проекта. Их использование избавляет разработчика от лишнего ручного труда. Например, автоматизирует обновление страницы браузера при сохранении кода и расставляет префиксы для поддержки различных браузеров.
Основные навыки для вёрстки сайта
Верстальщик должен обладать широким спектром навыков, но есть список тех, которыми владеть нужно обязательно:
-
Знание языков. Основные из них — HTML и CSS, JavaScript, их теги и атрибуты. Без этого верстать сайт невозможно.
-
Возможность отличить контентные изображения от декоративных. Это необходимо чтобы знать, что можно сверстать тегом, а что необходимо сделать фоном через CSS.
-
Навык вёрстки с помощью относительных единиц em и rem вместо пикселей. Это позволит добиться правильного реагирования интерфейса на настройки размера шрифта в браузере.
-
Навык работы с базовой палитрой. При работе над макетом сайта нужно уметь заводить базовую палитру цветов и использовать их в компонентах. Если верстальщик заранее задаст переменные с цветами и затем будет использовать их в вёрстке, то это значительно облегчит ему работу.
Главное
-
Вёрстка сайта — это сложный и многоступенчатый процесс, который требует определённых знаний и опыта.
-
Основные инструменты верстальщика: HTML, CSS, JavaScript, Photoshop.
-
На сегодняшний день чаще всего используют блочную вёрстку.
-
Основными шагами вёрстки являются: поиск шаблона, создание файловой структуры, разработка каркаса HTML, нарезка визуала из макета, непосредственно процесс переноса дизайна и тестирование с выявлением и исправлением ошибок.
