Адаптивный дизайн: как создать мобильную версию сайта

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

А каждый 3-й имеет мобильную версию, которая отображается некорректно.

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

Почему мобильная версия сайта так важна?

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

Но на что это влияет?

Многие даже не задумываются, насколько это важно.

Использование смартфонов возрастает, и сайты испытывают прирост трафика именно с мобилок, а в процентном соотношении идет постепенное отвоевывание доли у десктопа:

Это подтверждают все мировые исследования.

Как видно из графика, мобильный трафик превысил компьютерный еще в 2013 году и растет большими темпами.

По данным сomScore мобильный трафик вырос на 36% в период с 2011 по 2014 гг., а компьютерный – только на 10%.

Трафик с мобилок растет, и это неоспоримый факт.

Соответственно, владельцы сайтов стараются реализовать на своих сайтах максимальную мультиплатформенность – поддержку на своих сайтах как мобильных устройств, так и десктопных.

Например, на этом графике вы можете увидеть, что в США сайты преимущественно посещаются одновременно с разных платформ – мобилок и десктопов, а в Индии, например, есть ряд ресурсов, которые пользователи в основном посещают с мобильных устройств!

Это же коснулось рынка E-commerce – тенденция трафика сказывается и на количестве продаж, и на сумме сделок.

Сумма проданных товаров, покупки которых совершаются с мобильных устройств, уже перевалила за 2 триллиона долларов в год по всему миру, и тенденция говорит напрямую: в 2021 году более 72% продаж и сделок будет совершаться не с десктопа, а именно с мобилок!

Ранее я работал в розничной торговле.

У моих партнеров был прекрасный сайт по оптовой торговле мобильными аксессуарами – революционный по технологиям.

Они продвинули свой сайт в 2016 году, и он занимал ТОП-позиции по нужным ключевым словам.

Но недавно я решил проверить его позиции по SEO – и ужаснулся: у сайта было всего 170 ключей в ТОП-100 в Google!

Я подумал, как это возможно?

Решил проверить, вдруг сайт не работает.

Взял свой айфон, вбил URL и сразу все понял.

Оказалось – его вебмастер не реализовал мобильную версию.

И апдейт Google в июле 2018 года прилично «покосил» его позиции.

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

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

Как так вышло?

Как оказалось, эта проблема не нова.

Google в июле 2018 года запустил mobile-first index – это алгоритм ранжирования в выдаче, который отмечает сайты на более высоких позициях, обладающие более удобной и легковесной мобильной версией своего контента.

Что это означает?

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

Во-вторых, мобильные версии часто имеют контент в отдельных вкладках, скрытых от пользователя.

Мы знаем уже, что если контент скрыт, Google его или не ранжирует вовсе или отдает ему гораздо меньший приоритет.

Но не стоит волноваться – Гэри Илш из Google подтвердил, что если пользователи будут просматривать Ваш контент во вкладках (то есть когда он создан для удобства, а не для SEO), он также будет участвовать в ранжировании сайта.

Когда я работал с нашим сайтом SEOquick, у нас была очень медленная мобильная версия сайта.

Согласно PageSpeed, скорость загрузки была почти 12 секунд!

И лишь после ее реализации и исправления органический трафик подскочил в разы!

Хотите, чтобы Ваша органика также начала активно расти?

Напишите мне, и я выясню ошибки Вашей мобильной версии и вышлю Вам список критичных ошибок на почту!

Способы реализации мобильной версии

Вы думаете, что Ваш сайт и так хорошо отображается на мобилках.

Но все же существуют определенные стандарты, которые приемлемы для поисковиков.

И некоторые уже устарели.

А какая версия мобильной верстки у Вас?

Google предпочитает три способа реализации мобильной версии – адаптивный дизайн, динамический показ и наличие отдельной мобильной версии.

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

Адаптивный дизайн

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

Google рекомендует реализовать именно этот вариант.

Как создать сайт на адаптивном дизайне?

Как говорит Google, у Вас есть два шага:

1. Сначала пропишите тег meta name viewport.
2. Затем изучите основы веб-дизайна в техподдержке.

Если с первым тегом все просто, то информацию о мобильной верстке с примерами можно узнать на сайте техподдержки Google.

Мы не будем расписывать, как верстать конкретно каждый элемент, а сосредоточимся на главном.

Какие удобства у адаптивной мобильной версии сайта?

• Контентом проще делиться – URL одинаковый и не требует настройки редиректов.
• Google воспринимает контент на одной версии страниц (не нужно делать несколько версий контента) и индексирует страницы одинаково.
• Создать адаптивную страницу проще, чем создавать множество ее версий (не так затратно для Вас).
• Нет редиректов – это сказывается на скорости загрузки. Она может быть на порядок выше.
• Нет проблем с работой сканирования поисковым роботом. Если бы на Вашем сайте были тысячи страниц, роботу пришлось бы в несколько раз дольше обходить каждую мобильную версию Вашего сайта.

В адаптации контента принимает участие код Javascript.

Сегодня существует два популярных способа реализации адаптивного дизайна через JS:

• Адаптация при помощи JS. В данном случае (его рекомендует Google) используется единый код HTML, JS и CSS. Механизм отображения и работы сайта уже прописывается непосредственно в JS.
• Комбинированный тип JS. В зависимости от использования разных устройств пользователю отправляется разный HTML-контент. JS определяет разрешение экрана и отправляет пользователям разные версии HTML-страницы. Для этих целей используется HTTP-заголовок Vary: User-agent.

Динамический показ

Этот вид мобильной версии работает немного иначе.

В данном случае пользователи, заходя на мобильную версию основного сайта, получают другой HTML-контент в зависимости от своего User-Agent.

Такой метод мобильной версии чаще всего встречается на новостных порталах и у интернет-магазинов.

Если коротко, он работает по следующему принципу:

• Распознается параметр Vary от конкретного User-Agent. Как только он распознан, нужная версия HTML отправляется пользователю.
• Для удобства загрузки используются куки (при повторном посещении страниц сразу грузится нужная версия).
• Важно правильно распознавать нужные User-Agent для корректной загрузки.
• Данный заголовок сканируется Googlebot и позволяет просканировать контент, который может быть показан.

Например, в этом скрине описан метод определения User-Agent и выбора HTML-контента, который нужно показать в зависимости от User-Agent.

Какие ошибки могут ждать вас?

• Актуальный список User-Agent. Всегда нужно поддерживать список версий и актуализировать контент HTML.
• Часто из-за ошибки отображения HTML-контента мобильная версия может быть выведена на десктоп, или планшетная версия – на мобилку.
• Использование технологии маскировки.

Маскировка (или клоакинг) – это технология, когда пользователь видит один контент, а поисковый робот – другой.

На самом деле поисковый робот должен видеть тот же контент – вне зависимости, какой User-Agent дополнительно используется.

Если Вас уличат в клоакинге, это может стоить Вашему сайту позиций.

Мобильная версия сайта на разных URL

Наиболее старая версия мобильных версий сайта.

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

Мобильные версии традиционно располагали на поддоменах, и каждая страница находилась на разных версиях URL:

Стратегия по созданию такой мобильной версии сайта строится на следующих принципах:

• На десктопной версии используйте атрибут Link с параметром rel=”alternate”, который будет указывать на аналогичную мобильную версию страницы.
• На мобильной версии пропишите атрибут Link с параметром rel=”canonical”, который будет указывать на соответствующую десктопную страницу.

Например, так выглядит фрагмент кода на десктопе:

Google поддерживает возможность указания кода Alternate непосредственно в файлах карты сайта sitemap.xml.

При этом для мобильной версии страницы код выглядит так:

И в карту сайта мобильные версии страниц не добавляются.

Что нужно учесть?

В первую очередь редиректы:

• Вы должны реализовать редирект пользователя автоматически на нужную версию страницы.
• Редирект можно прописать на уровне JS или в HTML.
• Редирект с десктопной версии страницы А должен вести на такую же страницу А в мобильной версии (как указано в иллюстрации):

Почему такая технология устаревает?

Потому что по факту Вам нужно верстать обе версии сайта, проделывать работу редиректов – а они имеют обыкновение слетать.

Да и сайты устаревают, поэтому если Ваш сайт выглядит так, обновите его.

Мобильные страницы AMP

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

По факту они аналогичны предыдущей стратегии, но имеют ряд преимуществ.

• AMP-страницы используются на уровне адаптивного дизайна и динамических мобильных версий.
• AMP-страницы могут отображаться в расширенных результатах выдачи (в каруселях, карточках).
• Такие страницы загружаются напрямую пользователю из кеша Google AMP. Страницы данного типа можно определить по характерному значку ⚡.

Google активно популяризирует AMP-контент, отдавая в мобильной выдаче предпочтение именно AMP-страницам.

Также Google ранжирует равные версии Ваших страниц по скорости загрузки, а так как AMP-страницы грузятся гораздо быстрее, в мобильной выдаче их легче всего встретить:

Какой тип контента может выводиться и как?

1. Материалы следующего формата: новостные статьи, записи в блоге, видеоматериалы. Если Вас интересует продвижение новостного сайта почитайте этот гайд.
2. Рецепты.
3. Меню ресторанов.

На примере – карусель для одного хоста по категории «Рецепты­».

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

Как реализовать AMP для своего сайта?

• Выберите нужные типы страниц.
• Настройте микроразметку (Инструкция по структурированным данным от Google).
• Консолидируйте AMP-страницы при помощи тега Rel=”Canonical” с целью избежания дублирования контента.

На ранжирование в Яндексе технология AMP не влияет.

У Яндекса реализован аналогичный функционал турбо-страниц.

Документацию по турбо-страницам можно изучить на сайте Вебмастера Яндекс.

Как проверить мобильную версию сайта

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

Но все ли из них являются информативными и достаточными?

Часто причиной, по которой мобильная версия может быть недоступна, может быть проблема с ее версткой – отсутствие необходимых тегов, неверная конфигурация элементов.

Поэтому существует несколько сервисов, где Вы можете проверить мобильную версию своего сайта.

Search Console – Google Вебмастер

Всю информацию можно изучить в Вебмастере Google – просто вставьте в поисковую строку URL страницы и изучите ошибки (если они есть).

В нашем случае их нет.

Проверьте ошибки кода, а также отображение непосредственно в Вебмастере.

Также важно, как Ваша страница отображается на скриншоте.

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

То есть для исправления мобильной версии непосредственно SEO-специалист Вам не нужен – необходимо лишь дать доступ на просмотр страниц Вашему программисту, чтобы он нашел ошибки в коде и закрыл их.

Проверка мобильной версии сайта

Есть и более простые способы проверить, оптимизирована ли Ваша страница под мобилку.

Для этого необязательно иметь доступ к Вебмастеру.

Используйте бесплатную утилиту проверки мобильной версии сайта от Google.

Сервис простой и понятный.

Просто вставьте ссылку на анализируемую страницу, дождитесь результатов сканирования и изучите те ошибки, которые будут отображены.

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

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

Проверка загрузки по мобильному трафику

Следует помнить, что мобильная версия должна быть не просто правильно сверстана.

Она также должна быть легковесной.

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

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

Проверить этот показатель поможет утилита TestMySite With Google (русская версия).

Утилита простая и понятная, работает в стиле минимализма и сканирует постранично.

То есть в ней нельзя проверить весь сайт – поэтому проверяйте каждую страничку отдельно.

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

Второй скрин более интересен – он определяет отрасль Вашего бизнеса, проводит сравнение между сайтами-конкурентами по собственной базе и выдает Вашу среднюю позицию по скорости загрузки.

Очень полезно: если Ваши конкуренты грузятся долго, Вы можете быть в ТОПе и с 6-7 секундами, но иногда и 3 секунды – это мало.

Третий скрин предложит исправить ошибки на более простом и понятном для Вас  (не для программиста, для него тут мало инфы) языке и даст рекомендации.

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

Google Pagespeed Insights

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

Из минусов – он учитывает загрузку Вашего сайта в режиме WI-FI, не дает никаких сравнительных анализов и обычно показывает случайные результаты.

С недавних пор его API перешло с 4-й версии на 5-ю, и он совместил функционал сервиса Lighthouse (который был доступен в Chrome по умолчанию по комбинации клавиш Shift+CTRL+I).

Поэтому теперь Lighthouse использовать отдельно нет смысла.

Работает он достаточно просто.

Исследование производится постранично – просто вставьте URL и дождитесь результата.

В итоговом окне выберите вкладку «Мобильные устройства» и изучите обнаруженные ошибки:

Сервис проводит полную имитацию загрузки первой страницы, нагрузку на ЦП для ее обработки, а также выводит список ошибок и рекомендации для оптимизации кода.

Что очень удобно – он обозначает, сколько секунд загрузки Вы сможете выиграть при оптимизации.

Любой раздел (оптимизации, диагностики) кликабелен и позволяет программисту изучить конкретные ошибки и понять, что нужно исправить.

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

Эту ошибку подтвердил Джон Мюллер в своем твиттере:

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

С сервисами по проверке мобильной версии у нас теперь проблем нет.

А какие же нас могут ждать ошибки?

Рекомендуем для чтения:

1. Yoast – SEO-плагин для WordPress сайта: установка и настройка
2. 5 секретов быстрой настройки рекламы в Google AdWords

Технические ошибки в мобильной версии

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

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

Многие ошибки можно категоризировать по группам.

Закрыт доступ к JS/CSS/изображениям

Самой распространенной ошибкой может являться некорректная настройка файла Robots.txt.

Многие программисты могут по ошибке закрыть доступ к файлам стилей CSS, Javascript и изображениям Вашего сайта.

Это скажется на том, что робот GoogleBot сканирует Ваш сайт аналогично текущей версии Chrome – и тем самым увидит Вашу мобильную версию с ошибками.

Всегда проверяйте корректность настройки файла роботс.

Неподдерживаемые плагины

Мобильные устройства к 2019 году массово отказались от Flash.

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

И преуспел в продвижении более новой и революционной технологии – HTML5.

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

Не прописан viewport

Типичная ошибка, которая может повлечь некорректное отображение Вашего сайта.

Реализация адаптивной версии происходит при помощи метатега viewport.

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

Неверно задана ширина отображаемой области device-width

Задайте ширину экрана согласно максимальному разрешению мобильного устройства.

Для этого определите переменную максимальной ширины.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width

Контент шире экрана

Четвертой ошибкой может быть неверное использование абсолютных значений размеров элементов.

Во всех прорисовках элементов старайтесь не использовать абсолютные значения ширины, а применяйте относительные значения в процентах (например width: 100% – ширина по всей области).

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

Также используйте CSS для корректного отображения текстов и стилей.

• Применяйте медиазапросы для определения максимальных значений отображаемых элементов (min-width, max-width, min-height и max-height).
• Применяйте различные стили CSS в зависимости от разрешения экрана и ориентации (портретной и десктопной).

Также применяйте для масштабирования контрольные точки.

Для масштабирования изображений используйте элемент <picture>.

При корректной настройке изображение будет масштабироваться вне зависимости от поворота экрана и его размера.

Как его настроить – можно изучить в разделе Техподдержки.

Слишком мелкий шрифт

Есть общепринятая норма у веб-дизайнеров и верстальщиков, которая гласит: оптимальная длина строки на мобильном устройстве – 70 символов (8–10 слов).

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

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

Интерактивные элементы слишком близко

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

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

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

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

Между нажимаемыми элементами также старайтесь выдерживать минимальное расстояние.

Для удобства используют минимальный размер в 8 пикселей.

ВЫВОДЫ

Мобильная версия сайта – важный фактор ранжирования.

Алгоритм Mobile First прилично подпортил выдачу в Google большинства сайтов, а недавнее введение AMP-страниц изменило отображение мобильной выдачи в корне.

Мы рекомендуем придерживаться этих простых принципов, и гарантируем, что Ваш сайт будет хорошо ранжироваться в поиске:

• Используйте адаптивную верстку для реализации мобильной версии. Если у Вас ее еще нет, привлеките верстальщиков и программиста.
• Если Ваша CMS устарела, рекомендуем присмотреться к более новым.
• Не используйте технологию Flash на своем сайте.
• Старайтесь меньше скрывать текстовые области от пользователя.
• Не используйте технологию клоакинга. Вы рискуете потерять позиции своего сайта (отображая для гуглбота другой контент).
• Используйте тег viewport для реализации отображения устройства на всех версиях мобильных гаджетов. Старайтесь придерживаться относительных размеров ширины областей.
• Текстовые блоки старайтесь размечать по контрольным точкам чуть меньше ширины страницы. Оптимальная ширина строки для мобилок: 80 символов.
• Старайтесь использовать отступы для кликабельных элементов страниц.
• Старайтесь уйти от устаревших мобильных версий на отдельных URL.
• Проверяйте наличие мобильной версии в индексе в Вебмастере Google. Изучайте ошибки, почему мобильные версии выводятся некорректно.
• Для сканирования скорости загрузки в 3G и в WI-FI мобильных страниц, а также выявления ошибок в верстке Вам помогут три бесплатные утилиты от Google.
• Обязательно уделяйте внимание показателю отказов в Google-аналитике с мобильных устройств. Выделяйте плохие страницы и проверьте, где проблемы с отображением контента на мобилках.

А какие способы реализации мобильной версии сайта используете Вы на своем сайте?

Делитесь в комментариях!