В статье разбёремся в плюсах и минусах адаптивной вёрстки и мобильного сайта. Расскажем, почему чаще всё-таки используют адаптив и какие у него преимущества. В конце представим лучшие сервисы для проверки «мобайл-френдли».
Сейчас большая часть пользователей заходят в сеть со смартфонов и планшетов. В связи с этим сайт, который планируется развивать и продвигать, необходимо оптимизировать под мобильные девайсы. Это важно не только для удобства посетителей, но и для поискового продвижения. Оптимизировать ресурс можно с помощью адаптивной вёрстки или создания мобильной версии. Рассмотрим особенности каждого варианта.
При адаптивном дизайне веб-страницы автоматически меняют вид в зависимости от размера экрана, ориентации устройства, поведения пользователей. Параметры картинок, шрифтов задаются в процентах от ширины экрана, таким образом, сайт легко подстраивается под любой девайс. Чтобы текст не вылезал за границы, его делят на несколько блоков, которые при необходимости переносят текстовый материал вниз страницы.
Есть и другие правила создания адаптивного дизайна. В основном они связаны с корректировками в таблицах CSS и HTML-коде. Это удобный, несложный способ оптимизации, вот главные плюсы:
- нет необходимости делать отдельный сайт;
- благодаря единому URL страницы не конкурируют друг с другом, не нужны дополнительные редиректы;
- SEO-продвижение одновременно настроено на десктопный и мобильный поиск;
- трафик направляется на один сайт.
Адаптивная вёрстка сайта удобна для пользователей, не доставит больших хлопот разработчикам и оптимизаторам. Но недостатки у этого способа тоже есть. Прежде всего такой сайт может долго грузиться на телефоне, т.к. весит больше, чем упрощённый мобильный. Чтобы избежать долгой загрузки, постарайтесь минимизировать код, сократить редиректы, упростить дизайн.
Но в целом трудности со скоростью возникают при выходе в сеть со старых устройств или при использовании устаревших технологий 2G. На современных смартфонах при скоростном интернете такие проблемы редки. Проверить время загрузки можно в сервисах pr-cy.ru, mainspy.ru и других подобных.
Ещё один минус связан с юзабилити. При адаптиве самая важная информация иногда оказывается в неудобном для пользователя месте прокрутки экрана. Кроме этого, адаптивную вёрстку сложно реализовать на flash-сайтах. Также бывают проблемы с необычно оформленными проектами. Есть риск, что картинка изменится так, что потеряется вся дизайнерская концепция, а это опять же негативно отразится на юзабилити.
Мобильная версия – копия основного ресурса, адаптированная под мобильные устройства. Другими словами, это отдельный проект, для которого специально разрабатывается дизайн и юзабилити. Чаще всего создаётся на поддомене (m.site.ru) или в папке (site.ru/m). Перечислим плюсы такого сайта:
- быстрая загрузка: поработав с кодом, можно максимально облегчить ресурс;
- обеспечение хорошего юзабилити: возможно добавить полезные для пользователей функции, которых не было в десктопной версии;
- внесение изменений в мобильную версию без последствий для десктопа.
Последний пункт относится также и к минусам, т.к. при изменениях в проекте приходится делать двойную работу: корректировать десктоп и мобильный ресурс. Необходимо дублировать и контент, а это трудозатратный процесс, особенно если речь идёт о новостной площадке, которая ежедневно обновляется. Кроме этого, важно следить, чтобы мобильная версия не конкурировала с десктопной.
Но главная проблема мобильных сайтов – это увеличение объёма SEO-работ, т.к., по сути, приходится продвигать в поиске две площадки. Снижается и эффект от внешней оптимизации: пользователи иногда ссылаются на разные версии сайта. Также могут быть сложности с мобильной ссылкой. Если посетители не заметят её, то будут сидеть с мобильного в десктопной версии, а это неудобно – возникает вероятность роста отказов.
В 90 случаях из 100 мы рекомендуем клиентам адаптивный дизайн. Это проще и менее затратно: не нужно разрабатывать второй сайт, решать проблемы нескольких URL-адресов. Продвижение не усложняется созданием второй площадки, все усилия направляются на один домен – можно получить более быстрый и качественный результат, для SEO это намного лучше.
Проблемы адаптивов несложно устранить: оптимизировать скорость, наладить юзабилити. Да и администрировать такой сайт проще. Например, чтобы изменить стоимость товара, достаточно скорректировать цену в одном месте, и она будет отображаться везде. В мобильной версии пришлось бы делать двойную работу, как мы уже писали.
Но в некоторых случаях лучше сделать отдельную мобильную площадку. Например, когда вы работаете со сложным высоконагруженным проектом. На старые сайты также иногда сложно внедрить адаптив, проще создать отдельный мобильный.
Какой бы вариант вы ни выбрали, важно проверять удобство использования сайта. Ресурс и его версии должны корректно индексироваться поисковыми ботами, загружаться за 2 сек., правильно отображаться на телефонах и планшетах. Для аудита этих критериев используйте следующие сервисы:
- Mobile-Friendly Test. Инструмент от Google позволяет оценить, насколько удобно просматривать страницу на разных устройствах.
- Adaptivator. Сервис выявит проблемные страницы, составит техническое задание по устранению недочётов.
- Mobile SERP Test. Проверяет корректность ранжирования в поиске мобильных страниц.
- Mobile First Index Checker. Программа покажет, насколько согласованы мобильный сайт и десктопный, найдёт несоответствия.
Отслеживайте и оценивайте мобильность ресурса. Неадаптированный по правилам веб-проект теряет часть пользователей. Выбирайте подходящий способ оптимизации и делайте сайт удобным. После успешного внедрения «мобайл-френдли» многие владельцы отмечали рост поискового трафика и улучшение позиций в выдаче.
