Существует миф, что самое легкое в веб-разработке — это верстка. Исходя из этого, часть разработчиков решает не тратить время на изучение грамотного подхода к верстке. И очень зря. В верстке есть много неоднозначных моментов, на которые стоит обратить внимание и от которого зависит ваш проект.
В данной статье вы узнаете, как хорошая верстка влияет на качество веб-приложения, его продвижение в поисковых запросах и конверсию. Мы рассмотрим следующие актуальные вопросы: семантическая верстка, доступность, изображения в вебе и как это все влияет на выбор пользователя.
Начнем с неполного списка того, каким образом валидная и семантичная верстка может улучшить проект:
- Пользователь складывает свое первое впечатление по внешнему виду сайта, то есть по дизайну и верстке. Если на странице поехали блоки, или страница загружается слишком долго — вряд-ли такое первое впечатление будет позитивным. Это важно, потому что первое впечатление влияет на то, как долго пользователь останется на странице, будет ли он совершать целевые действия и платить за продукт.
- Улучшение показателей SEO сайта. На то, какую позицию займут страницы в результатах поиска влияет много факторов: семантика, доступность, оптимизация. Верстка является основой для SEO.
- Важно оптимизировать скорость загрузки страниц. Пользователи все меньше готовы ждать, пока сайт загрузится. А еще скорость загрузки влияет на ранжирование страниц в поисковой выдаче.
Как видите, верстка имеет большое значение для качества продукта. Давайте рассмотрим лучшие практики, которые помогут сделать верстку лучше.
Семантическая верстка
Что такое семантическая верстка? Википедия приводит популярное определение семантической верстки — “это подход к созданию веб-страниц на языке HTML, основанный на использовании HTML-тегов в соответствии с их семантикой (предназначением), а также предполагающий логичную и последовательную иерархию страницы”.
Но можно дать другое определение, которое понятно объясняет, для чего нужен этот подход. Семантическая верстка — это инструмент, с помощью которого можно объяснить поисковым алгоритмам, как анализировать контент страницы. Специальные теги и приемы в семантической верстке показывают алгоритмам о чем страница и как ее части связаны между собой. На основе этой информации формируются поисковые запросы для сайта. Именно для этого нужны десятки специфичных тегов вместо одного универсального.
Кроме этого, код читают не только поисковые роботы, но и другие разработчики. А семантический код читать удобнее.
Поисковые алгоритмы
Давайте разберемся, что такое поисковые алгоритмы, которые решают, когда и кому показывать страницы.
Когда пользователь вводит какой-либо запрос в поисковую строку, происходит следующее:
- Анализ и интерпретация слов в запросе. На данном этапе применяются последние исследования в области понимания естественного языка — от исправления орфографических ошибок до определения правильного значения слова из возможных.
- После интерпретации запроса происходит подбор и ранжирование подходящих страниц из индекса на основании ключевых слов и заголовков. Индекс — это хранилище просканированных ботами страниц. Там содержится информация о расположении и контенте страницы. При сканировании и индексации страницы учитывается много факторов: содержимое метатегов, навигация по сайту, доступность, скорость загрузки страниц, актуальность контента, кроссбраузерность и оптимизация страницы для мобильных устройств. Если страница не соответствует рекомендациям для веб-мастеров, она может не попасть в поисковой индекс, а значит не будет показана пользователям в результатах поиска. Больше о сканировании, индексации и ранжировании страниц читайте здесь и здесь.
- Далее пользователю показываются наиболее релевантные результаты. Также при подборе страниц учитываются различные сведения: местоположение, страна, интересы, поисковая история пользователя.
Итак, чтобы повысить позицию своих страниц при ранжировании, важно думать об удобстве пользователей, актуальности контента и следовании рекомендациям для создания веб-страниц. Семантическая верстка решает много проблем, в том числе помогает алгоритмам подобрать правильный пул запросов для сайта.
POSH (Plain Old Semantic HTML)
Принцип — POSH (Plain Old Semantic HTML), или «старый добрый семантический HTML») звучит так: используйте элементы HTML по их прямому назначению.
В HTML5 появилось много новых семантических тегов. Прежде, чем использовать <div> подумайте, какой HTML тег можно использовать, чтобы объяснить поисковой машине как интерпретировать этот элемент. Но важно понимать для чего используются конкретные теги.
Например, вы скорее всего знакомы с тегом aside. Его представляют как специальный тег для верстки сайдбара. Но здесь произошла путаница— тег aside нужен (согласно документации)в первую очередь для размещения контента, не относящегося к основной теме страницы. Таким образом, поисковые алгоритмы понимают, что не нужно учитывать контент в теге aside, как часть основного контента при индексации страницы. Поэтому такой тег чаще всего используют для размещения рекламы, и помещать туда важную и связанную с основным контентом информацию будет большой ошибкой.
Также для кого-то может стать открытием то, что такие теги, как header и footer могут быть на странице не в единственном экземпляре. А footer не обязательно должен быть последним элементом в секции.
Итак, важно использовать HTML теги по назначению. Они являются удобным инструментом для манипулирования вниманием поисковых алгоритмов. Но важно изучать и понимать, какие теги в каком случае использовать.
Заголовки
Заголовки — это одна из наиболее важных вещей, на которые опираются поисковые алгоритмы при индексации страницы. По ним роботы понимают, о чем ваша страница.
Даже если вы недавно в веб-разработке, то наверняка слышали правило “Нельзя использовать больше одного тега h1 на странице”. Но, если мы обратимся к документации, то узнаем, что это не совсем так. На странице может быть сколько угодно тегов h1. Важно соблюдать одно правило — “один заголовок на одну секцию”. Также можно пользоваться заголовками других уровней для указания на более специфичный контент. Согласно документации, эти два варианта являются идентичными с точки зрения семантики. Важно понимать, что заголовок 2-го уровня h2 будет считаться наиболее специфичным, чем заголовок 1-го уровня h1. Заголовок 3-го уровня h3— более специфичный, чем заголовок 2-го уровня h2, и так далее.
Ссылки и кнопки
Ссылки и кнопки — это важные интерактивные элементы интерфейса. Но часто возникает вопрос: когда использовать ссылки (<a>), а когда кнопки (<button>)? Иногда бывает сложно определиться, ведь внешний вид этих элементов может быть очень похож. Обращайте внимание не на внешний вид, а на функцию этих элементов. Спросите себя, что происходит, после взаимодействия с элементом? Если элемент направляет пользователя на другую страницу или отправляет к конкретному фрагменту текущей страницы — значит это ссылка. У ссылки есть атрибут href, который хранит в себе адрес. У кнопки нет этого атрибута, потому что кнопка никуда не отправляет пользователя. Кнопка нужна для других взаимодействий со страницей — отправки формы, вызова модальных окон и так далее.
Доступность
При разработке веб-приложения нужно учитывать, что часть пользователей имеют ограничения, такие как нарушения зрения, низкоскоростной интернет, отсутствие мыши и так далее.
Доступность — это забота об удобстве максимального количества пользователей. Приятно пользоваться приложением, где видно, что разработчик подумал о пользователях.
Как уже говорилось раньше, доступность сайта имеет значение при сканировании и индексации страниц. А значит, соблюдение принципов доступности поможет поднять сайт в топе поисковой выдачи.
Скринридеры
Есть специальные программы, помогающие слабовидящим людям взаимодействовать с интерфейсом — скринридеры. Как и поисковым роботам, им легче считывать структурированный и семантически верный код.
Также важно наличие атрибута alt у изображений, тегов label для элементов формы и в целом валидная верстка. Проверяйте доступность страницы в процессе разработки и прогоняйте страницу через скринридер (например, NVDA).
Альтернативный текст для изображений
Всегда добавляйте альтернативный текст для изображений. Атрибут alt считывается скринридерами и используется для SEO оптимизации изображений.
Навигация страницы с клавиатуры
Важный показатель доступности — возможность взаимодействия с интерфейсом с помощью одной только клавиатуры. Многие люди перемещаются по веб-страницам, не используя мышку. Им должны быть доступны основные интерактивные элементы — ссылки, кнопки, формы и навигация.
Проверьте навигацию вашей страницы с помощью клавиши tab. Не убирайте свойство outline для важных интерактивных элементов.
Доступность при низкоскоростном интернете
К принципам доступности также относится забота о пользователях с низкоскоростным интернетом. Важно понимать, что не все пользователи имеют доступ к быстрому интернету. Проверяйте и оптимизируйте скорость страниц. На что стоит обратить внимание при оптимизации:
- Изображения. Выбирайте правильный формат (более подробно об этом ниже), подключайте ленивую загрузку изображений. Подробнее здесь.
- Шрифты. Используйте современные форматы (WOFF2, WOFF), link rel=«preload» и CSS-свойства font-display. Подробнее здесь.
- Критический путь рендеринга. Оптимизируйте критический путь рендеринга(Critical Rendering Path) — это минимальный набор ресурсов, необходимый для начала отрисовки страницы (файлы HTML, CSS, JS). Как правило, оптимизация CRP достигается путем отложения тех ресурсов, которые не нужны для отрисовки. Подробнее здесь.
Доступность для мобильных устройств
Согласно статистике более 50% пользователей используют мобильные устройства для доступа в интеренет. Причем только часть из них имеют доступ к высокоростному интернету. Что важно для оптимизации страницы под мобильные устройства:
- Быстрая загрузка;
- Удобная навигация;
- Простота взаимодействия с интерфейсом.
Графика
Работа с изображениями в верстке — обширная тема. Глобальная проблема с графикой в верстке — она много весит. Это влияет на скорость загрузки страниц. Ниже будет перечень основных рекомендаций, направленных на решение этой проблемы.
Формат изображений
Какой формат изображений использовать? JPEG, PNG, SVG? Здесь важно понимать различия форматов и использовать подходящий к конкретной ситуации. Графика бывает растровая (JPEG, PNG) и векторная (SVG). Растровую графику следует использовать для фотографий. Она поддерживает возможность создавать более сложные изображения с большим количеством цветов и переходов. Из минусов — не масштабируется без потерь и больше весит. Для остальных случаев (иконки, логотипы, простые иллюстрации) подходит векторная графика. Она масштабируема и обладает относительно небольшим размером.
WebP
WebP — формат графики от Google, созданный как замена JPEG и PNG. Имеет меньший размер при таком же качестве. Поддерживает сжатие с потерями и без, прозрачность и анимации. Минусы — поддерживается не всеми браузерами. Но эту проблему можно решить, применив следующий пункт.
Адаптивные изображения
Чтобы сделать изображения адаптивными можно использовать теги picture и source. Это позволяет использовать разные изображения в зависимости от условий. Например, можно загрузить два разных изображения для разных разрешений экрана. Или загрузить два одинаковых изображения. Одно — в формате WebP, другое — в PNG, для тех браузеров, которые не поддерживают WebP.
Lazy loading
Lazy loading, или ленивая подгрузка изображений позволяет не загружать изображения, пока они не понадобятся пользователю. Раньше для реализации lazy loading использовали сторонние библиотеки. В Chrome 76 появился атрибут loading="lazy" для изображений, а также для iframe. Хотя его поддерживают пока не все браузеры, свою работу он выполняет отлично.
Тег <img> и background-image
Используйте тег img только для иллюстраций и смысловых изображений. Для презентационных материалов (фон, иконки) лучше использовать CSS свойство background-image. Этим вы, во-первых, избавляетесь от одного HTML элемента (и это хорошо), а во-вторых, улучшаете доступность.
Работа с браузером
Responsive mode
Responsive mode в DevTool — это инструмент разработки, позволяющий предположить, как будет выглядеть страница на разных устройствах. К сожалению, он может не показать баги, специфичные для конкретной платформы. Поэтому всегда проверяйте верстку на реальных девайсах на заключительных этапах разработки.
Аудит страницы
Отдельного внимания стоит вкладка Lighthouse в Chrome. Там вы сможете получить аудит страницы. Lighthouse проанализирует страницу и составит отчет, где можно увидеть сильные и слабые стороны сайта, обнаружить проблемы и решить их. Отчет приводится по таким параметрам, как производительность, доступность, SEO, использование лучших практик, корректное использование PWA.
Lighthouse поможет как в общем сориентироваться, насколько страница соответствует стандартам веб-разработки, так и укажет на конкретные ошибки. Больше о метриках Lighthouse можно узнать здесь.
Поддержка браузерами
Новые технологии это всегда хорошо — все любят удобные инструменты. Но применяя новые технологии, нужно не забывать проверять поддержку браузерами. Это можно сделать на сайте caniuse.com.
Итог
Конечно, это далеко не полный список практик, как сделать верстку лучше. Мир веб-разработки постоянно меняется. Меняются инструменты и алгоритмы. Но одно неизменно — забота о пользователях.
С помощью семантической верстки вы поможете пользователям найти нужную информацию. Применяя принципы доступности вы даете возможность людям с ограниченными возможностями пользоваться продуктом. Оптимизируя свои страницы, вы заботитесь о пользователях, не имеющих доступа к высокоскоростному интернету.
При разработке важно помнить, что продукты делаются для людей, а не для коней.
Руководствуйтесь этим правилом, и вы никогда не сделаете херню!