Вопрос о развитии мобильного интернета давно уже не стоит: практически 50% всех пользователей выходят в интернет со смартфонов и планшетов. Компании, идущие в ногу со временем и не желающие терять половину поискового трафика, начали задумываться над адаптацией сайта для мобильных устройств. Но теперь возникла новая проблема: что выбрать? мобильную версию или адаптивную верстку? Давайте разбираться вместе.
Мобильная версия
Мобильная версия – это копия вашего сайта по адресу m.vash-site.ru, адаптированная под размер экрана мобильного устройства и, как правило, «очищенная» от тяжеловесного контента и многих элементов полноценного сайта. Мобильная версия предназначена для экранов шириной менее 620 пикселей и отлично подходит для ресурсов с высоким и регулярным трафиком: информационных сайтов, социальных сетей, сайтов банков и площадок, где используется авторизация и функции личного кабинета. Так, например, выглядит мобильная версия Википедии:
Преимущества мобильной версии
- Высокие позиции в поисковой выдаче на смартфонах и планшетах
- Возможность создавать контент, предназначенный только для мобильных пользователей
- Все элементы дизайна и навигации (даже меню) можно подстроить отдельно под мобильную версию
- Вносить изменения можно только на мобильную версию
- Быстрая загрузка, благодаря которой экономно расходуется батарея и интернет-трафик мобильного устройства, достигается как раз за счет удаления тяжелых медиафайлов и элементов дизайна
- Если есть проблемы с отображением сайта в мобильной версии, пользователь может перейти на основной сайт
Недостатки мобильной версии
- Необходимость управлять двумя сайтами одновременно: пополнять контент и менять цены, если у вас интернет-магазин.
- Проблемы с уникальностью контента: если вы дублируете на мобильную версию новости или статьи, то придется позаботиться об атрибутах rel=alternate и rel=canonical, иначе один из ваших сайтов будет пессимизирован за размещение неуникального контента. Кроме того, сайты с одинаковым содержимым могут конкурировать друг с другом в поисковой выдаче, пока один не вытеснит другой.
- Урезанная функциональность: отсутствие на мобильной версии функций, доступных на десктопной версии. Например, калькулятор расчетов стоимости.
- Дополнительные трудо- и деньгозатраты на поддержку и продвижение двух сайтов.
Адаптивный дизайн
Адаптивный дизайн (или верстка) – адаптация вашего сайта целиком под различные типы мобильных устройств, включая меню, изображения, тексты и функции.
Адаптивная верстка обеспечивает корректное отображение сайта на любом гаджете. Специальный метатег сообщает браузеру, что сайт открыт на мобильном устройстве, и его необходимо масштабировать под размер экрана. Это если говорить простым языком.
Такой вариант адаптации сайта для удобства мобильных пользователей подходит коммерческим сайтам и некоторым интернет-магазинам.
Преимущества адаптивного дизайна
- Высокие позиции в поисковой выдаче на смартфонах и планшетах, как и в случае с мобильной версией, так как наличие любой адаптации под мобильные устройства положительно влияет на результаты поисковой выдачи
- Создание адаптивной верстки обходится дешевле, чем создание мобильной версии, ее обслуживание и продвижение
- Нет необходимости настраивать редиректы, чтобы уберечь сайт от аффилирования
- Не нужно размещать контент 2 раза: на мобильной версии и десктопной. В случае с адаптивной версткой посетители с различных устройств видят одну и ту же версию сайта
- Легкость реализации: даже если вы или подрядчик плохо разбирается в коде, создать адаптивный дизайн можно с помощью специальных плагинов и приложении для CMS сайта
- Возможность сохранить оригинальный дизайн и функционал сайта
Недостатки адаптивного дизайна
Наряду с большим количеством плюсов, у адаптивной верстки есть и свои недостатки. Правда, многие из них объясняются плохой реализацией.
- Медленная загрузка, которая обусловлена одинаковым контентом для десктопной и мобильной версий. То есть смартфон или планшет выполняет такой же набор действий и получает такую же нагрузку, как и компьютер. Из-за этого быстрее расходуется интернет-трафик и батарея устройства.
- Нет возможности вернуться к полной версии сайта, в отличие от мобильной версии. Поэтому, если есть какие-то проблемы в отображении сайта, пользователю придется смириться с ними.
- Чтобы сделать действительно качественный адаптив, необходимо затратить много времени и сил. Настроить показ всех элементов с учетом размера мобильного устройства: ведь на экране смартфона некоторые кнопки могут выглядеть хорошо, а вот на экране планшета уже не очень.
Динамический показ: что за зверь?
Динамический показ можно назвать улучшенной версией адаптивного дизайна. Основное отличие заключается в том, что при открытии сайта сервер получает информацию о типе мобильного устройства и дает команду браузеру открыть страницу именно для определенного гаджета. Проще говоря, все происходит как и в случае с адаптивным дизайном, но html-код страниц, открытых на разных устройствах, отличается, хотя информацию пользователь видит одинаковую. Адаптация не только под размер экрана, но и под тип мобильного устройства, решает проблему медленной загрузки и неэкономного расходования трафика.
Основное преимущество в том, что вы можете настроить страницу под нужды пользователей разных операционных систем. Например, если у вас есть приложение, вы можете оставить разные ссылки на его скачивание: в Google Play или в App Store.
Несмотря на усовершенствования, не все спешат внедрять динамический показ для своего сайта. Это связано с большей стоимостью внедрения такой технологии, дополнительной нагрузкой на сервер и расходами на хостинг.
Выводы:
Какой вариант выбрать? Зависит от типа вашего сайта. Если у вас регулярная высокая посещаемость и полезный функционал, то есть смысл задуматься о мобильной версии сайта. Если вы владелец корпоративного сайта, адаптивная верстка подойдет как нельзя лучше. Чтобы еще раз сравнить для себя возможные варианты, посмотрите нашу таблицу.
