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

Увеличение трафика с мобильных девайсов — тенденция, которая ежегодно только усиливается. Большая часть заходов на порталы, блоги, в интернет-магазины и другие веб-ресурсы происходит со смартфонов или планшетов. Это значит, что веб-ресурс, еще не являющийся mobile-friendly, проигрывает соперникам, которые позаботились о разработке адаптивной версии под мобильные устройства.

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

Почему важно, чтобы сайт был mobile-friendly?

Mobile-friendly веб-сайт хорошо открывается не только с персональных компьютеров, но и с мобильных устройств. Есть три ключевых причины обеспечить интернет-ресурс адаптивной версией:

• улучшение ранжирования — поисковые системы с большой вероятностью разместят на первых страницах выдачи веб-сайты, которые являются mobile-friendly;
• снижение процента отказов — например, когда пользователь переходит на веб-ресурс по ссылке из социальных сетей (где большая часть подписчиков сидит с мобильного) и видит, что дизайн прост и понятен, больше вероятность, что юзер не уйдет с сайта;
• повышение конверсии — причина вытекает из предыдущих двух, так как больше людей посещают ресурс и дольше на нем задерживаются.

Наличие mobile-friendly версии — характеристика современного успешного веб-сайта. Это способ проявить заботу о пользователях, что в дальнейшем спровоцирует не только увеличение посещений, но и рост продаж и заявок.

Признаки mobile-friendly ресурса

Мобильный вариант сайта считается полноценным проектом со специально разработанным дизайном, проработкой юзабилити и оптимизацией контента. Главные признаки онлайн-площадки, которую можно назвать mobile-friendly, включают следующие характеристики:

• быстрая загрузка — в версии для мобильных устройств вы не встретите тяжеловесных фото, лишних графических элементов, так как учитывается, что на ресурс часто заходят при помощи мобильного интернета, имеющего относительно низкую скорость;
• комфортная навигация — вертикальная прокрутка, удобные модули поиска, быстрый возврат на главную страницу и опция звонка одним нажатием говорят о том, что разработчики позаботились о посетителях;
• адаптированные формы и элементы — при создании мобильного варианта учитывается, что пользователям должно быть удобно нажать пальцем на любой кликабельный элемент (то есть разработаны корректные размеры кнопок);
• читабельность — в идеале юзеры не предпринимают дополнительных действий, чтобы прочитать текст на страницах;
• переход на основную версию — использование мобильного варианта веб-ресурса не может быть принудительным, потому важно, чтобы была возможность быстрого перехода к полной версии;
• удобство при совершении конверсионных действий — так как часто покупки совершаются именно с мобильных устройств, необходимо, чтобы при оформлении заказа, добавлении в корзину или подписке на email-рассылку не возникало сложностей.

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

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

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

Мобильная версия

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

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

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

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

В этом случае в зависимости от особенностей девайса применяются разные HTML и СSS. Фактически элементы десктопного варианта скрываются при переходе с мобильного устройства, и наоборот: при просмотре с персонального компьютера не виден мобильный контент.

Канонические AMP-страницы

Accelerated Mobile Pages стали инициативой Google, запущенной в 2016 году. Оперативное решение по оптимизации можно получить благодаря фреймворкам и библиотекам AMP. Хотя такой возможностью изначально пользовались преимущественно информационные агентства и другие интернет-СМИ, сейчас данный вариант также актуален и для e-commerce.

Разные URL

Чтобы отображать мобильную версию, просто применяется другой URL, как правило, в виде поддомена (например, m.). Однако такой метод называют устаревшим, а его внедрение приводит к сложностям в администрировании интернет-ресурса. Например, когда нужен перенос сайта на другой хостинг, наличие разных URL может спровоцировать дополнительные трудности. Поэтому созданию мобильной версии на поддомене лучше предпочесть более современные конфигурации.

Мобильная версия: преимущества и недостатки

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

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

Тем не менее, у мобильных версий также есть ряд недостатков:

• неуниверсальность — в разном разрешении девайса онлайн-ресурс будет выглядеть по-разному;
• стоимость и время — цена создания мобильной версии достаточно высока и требует серьезных временных затрат.

Еще одна проблема, которая может возникнуть после разработки варианта для мобильных устройств, — появление дублей страниц. Это негативно сказывается на отображении в поисковых системах и провоцирует некорректную работу. Чтобы исключить дублирование, необходимо прописать теги alternate и canonical. При помощи этих обозначений поисковым системам сообщают, какая страница является основной, а какая — второстепенной. Благодаря этому сайт не будет понижаться в выдачах поисковиков.

Адаптивная мобильная версия: способы оптимизации

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

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

• адаптация с помощью Javascript — применяется единый код HTML, JS и CSS, механизмы работы и отображения прописаны в JS (именно такой способ предусматривают рекомендации Google);
• комбинированный тип Javascript — пользователи получают разный HTML-контент в зависимости от того, какое устройство используют.

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

Динамически подгружаемая версия разметки

При использовании динамически подгружаемой версии разметки распознается параметр Vary от определенного User-Agent. Далее необходимая HTML-версия отправляется пользователю. Чтобы загрузка была более удобной, задействуются куки, благодаря которым при повторном посещении веб-ресурса нужная версия загружается автоматически. Для корректной загрузки надо правильно распознать User-Agent.

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

Технология ускоренных мобильных страниц (AMP)

Как указывалось выше, мобильные страницы AMP являются технологией, разработанной Google. Несколько лет назад компания внедрила политику Mobile-First Indexing, которая предусматривает, что во время индексирования сначала будут оцениваться мобильные, а не десктопные версии веб-сайтов.

Проект Accelerated Mobile Pages предполагает формат максимального ускорения загрузки на любых мобильных устройствах (даже при достаточно медленном интернет-соединении). В основу страниц заложен АМР HTML, представляющий урезанный HTML с Javascript-библиотекой и специальным набором тегов. В кэше Google сохраняются AMP-страницы, которые подгружаются в случае медленного соединения.

Сервисы для проверки, насколько сайт mobile-friendly

Так как с 2017 года все поисковые системы начали ставить в приоритет выдачу для мобильных устройств, характеристика mobile-friendly стала основой успешного продвижения сайта. Чтобы убедиться в адаптивности веб-ресурса, необязательно обращаться за помощью в специальные компании. Есть ряд сервисов, которые осуществляют соответствующую проверку:

• Google Mobile Friendly — одна из самых распространенных программ, является инструментом в Google Search Console, оценивает не весь сайт полностью, а каждую страницу по отдельности;
• Яндекс Вебмастер — программа, позволяющая проверить не только свой, но и любой другой веб-ресурс, выставляет общую оценку на основе шести пунктов соответствия, также проверяет страницы по отдельности;
• Bing — сервис от Microsoft, анализирующий адаптивность на мобильных устройствах Android и Windows, дает аналитическую информацию по поводу сайтов конкурентов, проверку осуществляет без подтверждения владения веб-сайтом;
• Mobile Checker — сервис проверки, помогающий проанализировать сайт на предмет адаптивности и повысить качество ПО, тестирование происходит посредством загрузки файла;
• Responsinator — сервис, который не отображает общую оценку, однако показывает, как именно будет выглядеть веб-ресурс на разных устройствах.

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