Адаптив, мобильная версия — «Что это такое?! Я просто хочу сайт!»
Как водится, информация (контент) — самая важная часть сайта. Даже если дизайн сайта космический, пользователю нужна информация, нужен контент. Отсюда вытекает задача: “Как же лучше подать эту информацию?”
60% процентов пользователей пересаживаются с компьютера на смартфон и планшет. Сейчас уже никто не пойдет в соседнюю комнату, где стоит компьютер, чтобы заказать еду или почитать отзывы о товаре, который только что мелькнул по телевизору. Проще сказать телефону: “Окей, гугл...” или “Привет, Сири...” и получить заведомый ответ в виде загруженного сайта с хорошо читаемой информацией. Это важно учитывать при создании сайта, ведь мы создаем его для посетителей.
Поисковики давно уже поняли это и делят поисковую выдачу в зависимости от того, с какого устройства был введен запрос и насколько целевой сайт пригоден для показа на данном устройстве. Проще говоря, если сайт плохо отображается на смартфоне, а критериев там уйма, то он не будет добавлен в поисковую выдачу.
Представьте: продаете вы зонты с доставкой, а сайт у вас не адаптируется под разрешения смартфонов. Получается, посетитель, который в данный момент находится на улице, под дождем и ищет в поисковике, где можно купить зонт с доставкой, не увидит вашего предложения о продаже зонта. В итоге мы имеем недовольного посетителя, который под дождем пошел по своим делам, а вы потеряли потенциального клиента.
Поэтому важно продумать, как лучше адаптировать сайт для мобильных устройств.
Что можно сделать?
По сути есть два пути решения проблемы: адаптивная верстка и мобильная версия сайта.
Конечно, можно оставить так называемый резиновый сайт. Это по сути любой сайт, кроме самых старых. Он подстраивается под разрешения мобильных экранов, но имеет свою минимальную ширину, поэтому для просмотра какого-то элемента на смартфоне придется поразжимать пальцы для увеличения масштаба.
Можно показывать заглушку на сайте, если он открывается со смартфонов или планшетов: мол, “Не для того цвела наша роза, чтобы вы на нее со смартфона смотрели." Но ведь это неправильно.
Кстати, резиновый сайт и сайт с заглушкой не одобрят ни пользователи, ни поисковики.
Мобильная версия сайта
Мобильная версия сайта, как бы это страшно не звучало, — это отдельный сайт со своим дизайном и функциями. Он разрабатывается как дополнение к основному.
Плюсы этого варианта в легкой и быстрой загрузке, так как из него вырезали все лишнее и мешающее нормальной работе на смартфоне. Остался только функционал, поэтому мобильная версия подойдет для сайта с заказом услуг, те же зонты или пицца, для интернет-магазинов с каталогом и отзывами. И тут же выползают минусы такого решения, хотя минусами их назвать сложно, скорее неудобства, связанные с какими-то мелкими приятностями, которые доступны в десктопной версии сайта: виджеты с погодой, интересной цитатой, мини-игра, которая помогает скоротать время при формировании большого отчета — все то, что цепляло посетителя на десктопной версии сайта. И для этого на мобильной версии сайта обязательно присутствует кнопка “Показать полную версию сайта”.
Еще один момент: мобильная версия сайта верстается под конкретное разрешение и, соответственно, при просмотре мобильной версии с планшета все разъедется.
Отзывчивая (responsive) и адаптивная (adaptive) верстка
Можно забыть о мобильной версии сайта, а учесть все важные моменты для поисковиков и посетителей в верстке основного сайта. Для этого нужно определить, как сайт будет перестраиваться под разрешения смартфонов и планшетов: подешевле и дергано или дорого и плавно. Первый вариант — это адаптивный сайт, второй — это отзывчивый (responsive) сайт.
Отзывчивый сайт плавно и незаметно перестраивается из версии для компьютера в версию для планшета и смартфона. Это можно заметить, изменяя размер окна браузера.
Адаптивный (adaptive) сайт перестраивается дергано, но на то он и адаптивный, т.к. конечный пользователь видит ту или иную версию сайта на своем мобильном устройстве, будь то планшет или смартфон. На границах конкретных разрешений происходит перестраивание блоков, схлопывание меню, изменяются картинки. Все это дерганье заметно лишь при изменении размера окна браузера, пользователей мобильных устройств это не затронет, они видят свою версию сайта.
У адаптивного сайта своя структура, обычно это 12-колоночный вариант с несколькими точками перестроения. Конечно, если это промо-сайт с крутыми фишками, мы делаем адаптацию индивидуально.
Что выбрать?
Прежде всего задайте себе вопрос: “Нужен ли мне адаптив или мобильная верстка? Может, хватит простого резинового сайта.”
Сделайте паузу, выпейте кофе, подумайте о SEO. Посчитайте деньги в кошельке.
Адаптация добавит минимум 30% от верстки всего сайта + работа программистов. Мобильная версия вообще рассчитывается индивидуально.
Если простой сайт вам не подходит, то нужно выбрать между мобильной версией и адаптивом.
Мобильную версию можно использовать, если данные на сайте на маленький экран ну никак не помещаются, или весь функционал сайта можно уместить в одной кнопке “заказать”.
В остальных случаях выбирайте адаптивную верстку, расслабьтесь и предоставьте дело нам!