Как сделать так, чтобы на сайте было удобно всем: и скучающим на парах студентам, и вечно занятым бизнесменам, везде таскающим с собой ноутбук? Правильный ответ: адаптировать его под все типы и разрешения экранов. Сделать это можно несколькими путями: сделать сайт с адаптивной версткой или отдельную страничку для мобильных устройств. И у первого, и у второго решения есть свои плюсы и минусы. В левом углу ринга – адаптивный дизайн, в правом – мобильные версии. Разберемся, кто тут фаворит и на кого стоит поставить.
Какие есть варианты?
Как мы уже сказали, сделать сайт удобным для пользователей смартфонов и планшетов можно двумя способами:
- Адаптировать существующую страницу под разные размеры экрана.
- Разработать отдельную мобильную версию.
В первом случае внешний вид страничек не меняется. а просто «ужимается» до нужных габаритов, а во втором условный владелец «Айфона» видит совершенно другую версию портала, которая располагается на отдельном поддомене (обычно это http://m.yourcoolsite.ru/).
Оба варианта имеют право на существование, но не лишены недостатков. Разбираемся, какой вариант создания мобильной версии сайта лучше подходит в разных ситуациях.
Мобильная версия сайта с адаптивной версткой
Наименее затратный способ адаптировать сайт под «Айфоны», «Айпэды» и прочие классные девайсы. У него есть и преимущества, и недостатки – разберемся в них.
Плюсы:
- Универсальность. Элементы сайта почти всегда выглядят одинаково на всех устройствах – меняется только их размер и расположение на странице. Если «обычная» версия состоит из трех колонок, то владелец «айпэда» увидит две, а пользователь телефона вообще одну, но длиннющую.
- Можно не заморачиваться с настройкой метрик. Дополнительных настроек вносить не нужно, поэтому анализировать данные из «Яндекс.Метрики» и Google Analytics проще.
- Просто сделать. Адаптивный дизайн сайта для мобильных устройств помогает сократить расходы на разработку ресурса и временные затраты на его поддержку.
- Никаких редиректов и дублей страниц. Весь контент располагается по тому же адресу, что и основная версия страницы.
- Просто управлять. Достаточно один раз сверстать страницу, а всю остальную работу сделает сам сайт.
Кажется. что все прекрасно и хорошо. Но недостатки у адаптивной верстки сайтов для мобильных тоже есть:
- Все под одну гребенку. Нужды и потребности пользователей десктопов и мобильных девайсов – это две большие разницы. Им нужны разные функции и разный контент, да и оформление страницы с разных экранов воспринимается по-разному. Мобильным пользователям нужны иконки, крупные кнопки, и всякие другие штуки, удобные исключительно им. На больших экранах все это смотрится немного странно.
- Тяжеловато. Страница в любом случае весит одинаково. Одинаково много. Поэтому загрузка в браузере смартфона занимает больше времени – программа сначала загружает весь код и графические элементы страницы (которые сделаны под десктоп) и только потом адаптирует под конкретный размер дисплея. Поэтому просмотр мобильной версии сайта с адаптивной версткой через 3/4G превращается в жутко неудобный ритуал. Пока смартфон или планшет загрузит всю эту красоту можно забыть, зачем вообще открывал страницу.
- Нельзя переключиться на полную версию сайта. Потому что то, что видит пользователь – это и есть полная версия. Для владельцев смартфонов это не так актуально, а для пользователей планшетов с большими экранами – весьма.
Пример:
Сайт «Медузы». Все аккуратно растягивается и стягивается обратно.
Создание мобильной версии сайта – панацея?
В этом случае разрабатывается два отдельных ресурса. Один – для пользователей стационарных ПК, а другой – для мобильных пользователей. С какого устройства вы заходите на сайт определяет сервер.
Плюсы:
- Разделяй и публикуй. Можно адаптировать контент специально под мобильных пользователей. То же самое с дизайном и навигацией – они разрабатываются с учетом потребностей владельцев смартфонов и планшетов.
- Оптимизация под «железо» гаджетов. Мобильные версии сайта не так сильно загружают ресурсы устройства, а значит с сайтом проще и быстрее работать. Объем страницы тоже сокращается, а значит пользователю не нужно загружать громоздкую полную версию.
Создание отдельной мобильной версии сайта помогает сделать ресурс удобнее и учесть все потребности пользователей смартфонов и планшетов. Но и она не лишена недостатков:
- Проблемы на больших экранах. Большинство мобильных версий сайта очень плохо смотрятся на экранах планшетов: крупные кегли шрифтов, кнопки и элементы дизайна мешают воспринимать информацию – чтобы добраться до нужной информации приходиться скроллить. Много скроллить.
- Отдельный сайт – отдельные проблемы. Время на публикацию контента увеличивается минимум вдвое – это в том случае, если информация на странице полностью совпадает с основной версией сайта. А если специально адаптировать контент под смартфоны, то времени уйдет еще больше. Кроме того, придется настраивать редиректы, разбираться с доменами и поддерживать обе версии ресурса.
- Урезанный функционал. Обычно из мобильной версии выкидывается все, что не нужно пользователям гаджетов. Но иногда им требуется как раз полный функционал сайта и чтобы он стал доступен нужно зайти на ресурс и потратить время на включение полной версии сайта. При этом вожделенная кнопка чаще всего находится в футере, а после нажатия нужно еще загрузить основную страницу. Очень. Долго.
Пример:
На экране смартфона мобильная версия mail.ru выглядит нормально...
![335ca46a9e[1]](http://semantica.in/wp-content/uploads/2016/09/335ca46a9e1.jpg)
... а на более крупном дисплее – не очень.
А есть ли золотая середина?
Да и он называется RESS (Responsive Design + Server Side). В этом случае сервер сам определяет размер экрана вашего устройства и загружает нужную версию сайта: с подходящим объемом страницы, элементами дизайна, и всем остальным.
К недостаткам RESS относят трудоемкость. Чтобы сервер определил, что вы пользуетесь «Айфоном», а не Samsung, информация об обоих устройствах (и версиях браузера) должна быть на сервере. Необязательно загружать все вручную, для этого есть специальные сервисы вроде NetBiscuits, но они все равно стоят денег. К тому же придется разбираться с версткой сайта для владельцев разных гаджетов и повышенной нагрузкой на сервер.
Пример:
Сайт «Тинькофф Банка». RESS в действии –сервер думает, что я зашел с Android-устройства и сразу предлагает скачать приложение в Google Play. Наивный.
Что выбрать: адаптивную верстку или создание мобильной версии сайта
Выбор конкретной модели зависит от типа ресурса и целей пользователей. Если вы хозяин интернет-магазина и продаете часы/смартфоны/кроссовки, то нужно максимально упростить покупку и сравнения цен на разные модели. Для этого лучше подойдет отдельная мобильная версия. А если люди заходят на ваш сайт чтобы просто узнать контактный телефон или оставить заявку на обратный звонок, то достаточно будет и обычного адаптивного дизайна – пользователи мобильных устройств не сильно пострадают.
