Семантическая разметка документа. Вопросы о семантической разметке

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

Не стали исключением и мобильные лендинги, которые махровым цветом расцвели после всеобщего распространения смартфонов и планшетов с HD-экранами. Сегодня наблюдается два основных способа сделать посадочную страницу для переносимых гаджетов.

1 способ: адаптированная верстка . Принцип достаточно примитивный – смысл его в том, чтобы обеспечить корректное отображение страницы с любого устройства. Таким образом, вне зависимости от того, с какого устройства клиент зашел на Ваш сайт, он «растянется» соответствующим образом.

Так он выглядит на ноутбуке:

А так отображается на дисплее смартфона:

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

2 способ: адаптивная верстка и дизайн. Этот способ есть смысл применять, если пользователи, которые посещают Ваш сайт, делают это по большей части с мобильных устройств. Например, если Вы занимаетесь доставкой суши, процент пользователей, осуществляющих заказ с мобильника – более 50%. При разработке таких версий сайта используются такие технологии, как HTML 5, jQuery и т. д. Они позволяют обойтись без использования множества «оптимизирующих» плагинов, на деле перегружающих страницу.

Адаптивный дизайн предполагает не «ужимание» страницы до размеров экрана смартфона, а изменение структуры сайта при отображении на различных устройствах. Таким образом, по сути, дизайнер рисует Вам не один сайт, а сразу несколько – отдельную версию для мобильного телефона и планшета. Это позволяет представить ту же самую информацию, не уменьшая шрифты, видимый размер изображений и других элементов, то есть оставляя юзабилити страницы на высоком уровне. Одновременно происходит оптимизация отображения сайта на мобильных устройствах. Благодаря этому прогрузка страницы происходит быстро, а это очень важно, так как владельцы смартфонов и планшетов менее терпеливые, чем ПК-пользователи, и время для них играет очень большую роль.

Пример адаптивного дизайна landing page : сайт http://getdirections.es/

Так он выглядит на ноутбуке:

А так он приспособился к экрану смартфона:

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

Особенно это актуально для компаний сегмента e-commerce, которые делают ставку на продажи через лендинги. Номером один в списке дел для руководителя такого бизнеса, очевидно, должна стать адаптация лендинга под мобильные устройства. А чтобы она была максимально эффективной, стоит оценить фронт работ.

Итак - что и как адаптируем?

• Картинки. Как правило, десктопные изображения весят неприлично много и загружаются на мобильных целую вечность. Их нужно либо делать меньше - подгонять по размеру к экранам смартфонов и планшетов, уменьшать качество для снижения веса, либо можно воспользоваться плагином/скриптом Adaptive Images, который сам выбирает размер и качество картинки в зависимости от устройства. Первое решение стратегически вернее и позволит эффективнее оптимизировать лендинг под мобильные устройства.

• Меню. Упростите навигацию по меню - избавьтесь от не самых важных опций, многоступенчатых вкладок и мелкого шрифта.

• Таблицы. Любой интернет-магазин состоит из таблиц с товаром, да и на других сайтах они встречаются часто. Для того, чтобы эти данные отображались корректно при адаптации лендинга для мобильных устройств, предусмотрите возможность горизонтальной прокрутки - так, чтобы основной контент при этом оставался неподвижным.

• Формы ввода. Их нужно сделать крупнее и оптимизировать для использования правильных типов полей. Отключите также автокорректировку, ввод с заглавной буквы и исправление - они мешают вводу данных с телефона.

• Контент. Не используйте шрифт меньше 16 пунктов, не забывайте про отступы между строками и от края экрана - и не упрощайте контент настолько, чтобы клиенту приходилось идти на десктопный сайт в поисках нужной информации.

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

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

Все эти сложные на первый взгляд вещи легко укладываются в простые решения. На российском рынке представлен выбор вариантов адаптации landing page под мобильные устройства на любой вкус и кошелёк: можно нанять целую веб-студию или воспользоваться онлайн-сервисами Например, в MoAction представлено более 100 готовых решений, которые имеют наивысшую оценку по мобильности от Google и являются профессиональными.

Выбор за вами!

Что такое семантика в HTML

Слово «семантики» пришло в HTML из обычных лингвистических (языковедческих) дисциплин. Там, под понятием «семантика» понимаются разделы, изучающие значение и назначение человеческих языковых единиц. В отличие от реальных человеческих языков, в HTML языковые единицы изучать не нужно. В HTML, языковые единицы называются «тегами» и их назначение уже прописано в спецификации HTML - едином для всех веб-разработчиков документе. На данный момент, существует несколько вариаций на тему спецификации HTML (в зависимости от версии языка), но суть не в этом. Сейчас, нас и этой статьи - важно другое. Это наличие чёткого и внятного объяснения для каждой языковой единицы - тега HTML, в соответствующей спецификации HTML. Таким образом, если в реальной лингвистике человеческих языком, семантика - это изучение назначения непонятных слов и понятий, то в HTML наоборот, семантика - это правильное применение и использование уже готовых и объяснённых тегов.

Семантическая вёрстка веб-документа

Семантическая вёрстка веб-страницы или семантический код HTML-документа - это вёрстка с правильным использования HTML-тегов в соответствии с их предназначением (семантикой). Кроме этого, семантическая вёрстка предполагает логичную и последовательную иерархию для построения всей веб-страницы, в соответствии с законами HTML-документа.

Чем отличается семантическая вёрстка от обычной
Семантическая вёрстка веб-документа противопоставляется обычной, при котором написание HTML-кода определяется только внешним видом веб-страницы. При семантической вёрстке, ряд элементов страницы имеют свои собственные теги, которые прямо отображают их назначение. Это и есть «семантика» в HTML. Так, например, структура простейшей веб-страницы при обычной вёрстке может выглядеть так:

Тогда, как при семантической вёрстке, структура той же самой веб-страницы будет иметь вид:

Шапка сайта

Содержимое веб-страницы

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

Зачем нужна семантическая вёрстка

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

Семантическая вёрстка в HTML5

Полный фурор и переворот понятия веб-семантики произошёл с появлением HTML5.

В HTML4 всё было довольно просто. Для оформления веб-страниц, написанных в соответствии с семантикой, достаточно было использовать внешние каскадные таблицы стилей (CSS) да пару нехитрых нововведений, вида замены тегов и на и . HTML5 - не в пример «семантичней» и это видно из приведённого примера.

Новые популярные семантические теги HTML5

Прежде всего, - простой и понятный всем доктайп.