Мобильная версия сайта и адаптивная вёрстка

Вопрос требует изучения. Поэтому в статье — в чём разница между мобильной версией сайта и адаптивной вёрсткой, когда они нужны и что делать, если их нет.

С вами снова рубрика «Хэндбук заказчика», в которой мы рассказываем, как сделать сайт и не облажаться.

Мы уже выяснили, что контент — самая мякотка сайта, за которой пользователи будут приходить всегда. Теперь научимся его грамотно подавать.

У юзеров интернета в последние годы наблюдается тенденция срастания со смартфоном — доля мобильного трафика перевалила за половину ещё в 2014 году и с тех пор только увеличивается. Это важно учитывать, потому что хорошие сайты делаются в первую очередь для пользователей, а не для выставки, начальства или себя любимого. Всегда думайте о тех 60%, которые променяли компьютер на смартфон и планшет — не дайте им пожалеть о своём выборе.

Если вы настолько суровы, что нужды пользователей вас не беспокоят, сделайте адаптив ради SEO. Гугл теперь учитывает, удобно ли просматривать сайт с мобильных устройств. Если нет (а проверить можно здесь) — отправляет его в поисковой выдаче туда, где не ступает нога человека.

Поэтому перед тем, как делать сайт, подумайте — какое решение для мобильных устройств вам подойдёт?

Есть два решения — адаптивная вёрстка и мобильная версия сайта. Их опишем подробно, но позже. А пока поговорим, что бывает, если не заморачиваться с мобилками.

Вариант 1. Резиновый сайт. Это обычный сайт, любой, кроме самых древних — времён башорга и популярности ЖЖ. Он подстраивается под размеры разных экранов, сохраняя изначальное расположение элементов. Есть побочный эффект — чтобы рассмотреть мелкие детали, придётся поработать пальчиками и увеличить нужное место.

Это приемлемый вариант, если у вас нет сложного функционала на сайте — не нужно много нажимать и писать. Или если делать иначе религия не позволяет.

Вариант 2. Высшая наглость — показывать заглушку, если сайт открыт не на большом экране. А на ней написать «Мы так старались, когда делали супер-эффекты и 3D плюшки. Но ваш убогий экранчик не передаст прелесть нашего дизайна, поэтому посмотрите сайт с компьютера, ок?»

Последний вариант не любят пользователи, и оба не одобряют поисковики. Так что сделать с сайтом, чтобы все были довольны?

Мобильная версия сайта — это отдельный сайт (вот это поворот!), со своим дизайном и функциями. Разрабатывается дополнительно к основному, десктопному.

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

Отсюда же вытекает минус мобильных версий — здесь сложно найти что-то кроме фукционала. Если пользователь плотно подсел на десктопную версию, любит перечитывать раздел «О нас» и узнавать погоду из виджета на главной странице, мобильный вариант сайта его разочарует.

Хотя он почти всегда найдёт кнопку «Показать полную версию». Нажав на неё, увидит любимый сайт — правда, совершенно не предназначенный для просмотра на маленьком экране.

Ещё мобильная версия сайта плоха тем, что не адаптируется под разные экраны. Она может выглядеть прекрасно на смартфоне, под который разрабатывалась, но хаотично расползаться элементами по экрану планшета.

Можно не делать отдельную мобильную версию, а убить всех зайцев вёрсткой основного. При этом выбрать, как именно сайт будет адаптироваться под разные экраны: плавно и дорого или дёргано и подешевле. В первом случае у вас получится отзывчивый сайт, во втором — адаптивный.

Отзывчивый сайт плавно перетекает из десктопной версии в планшетную, а дальше — в мобильную. Всю красоту можно прочувствовать, растягивая окошко браузера.

У адаптивного сайта три варианта — также для десктопа, планшета и телефона в вертикальном положении. Если поиграться с размером окна, можно увидеть, как они переключаются, о ужас! — не плавно. На границе в 768 px и 320 px можно увидеть, как меняются расположение блоков, схлапывается меню, иконки становятся попроще. Но пользователей мобильных девайсов это не коснётся — они видят версию только для своего устройства.

Чтобы сайт был адаптивным, у него должна быть определённая структура. Классика — 12-колоночная сетка и две точки излома. Если у заказчика нестандартное видение — мы открыты для всего эксклюзивного и индивидуального. Но с двумя точками излома.

Если погуглите, в чем разница между мобильной версией и адаптивом — найдёте в топе поросшие мхом статьи, где ругают второй вариант. Там пишут, что адаптивные сайты тяжёлые, неповоротливые, грузятся долго. Сегодня это справедливо только по отношению к массивным сайтам: где картиночки, big data, все дела.

Адаптивный сайт — не листик оригами, который складывается и гнётся, но сохраняет свой вес. Разработчики уже научились делать красиво и не тяжеловесно картинки, таблицы, даже иконки. Последние мы, кстати, сразу делаем в векторе — если заказчик захочет адаптива, ему не придётся платить за их перерисовку.

Если не оговорено другое, мы сразу делаем сайты на основе сетки из 12 колонок — такие в будущем будет легче адаптировать под мобильние устройства. Так, практически сам собой, получился адаптив для Кан-Кана. Но сайты с большим количеством всплывающих окон и промо-сайты со сложным дизайном требуют персональной адаптации — просто сеткой дело не ограничится.

В первую очередь прислушайтесь к себе: так ли вам нужен адаптивный сайт или мобильная версия? Может, хватит резиновой вёрстки?

Посмотрите внимательно. Вдохните. Выдохните. Подумайте о SEO. Загляните в кошелёк. Адаптивная 12-колоночная версия стоит минимум 20% от цены вёрстки плюс работа программистов (16−24 часа). С другим количеством колонок — больше. А стоимость мобильной версии рассчитывается индивидуально.

Если резиновый сайт — не вариант, осталось выбрать между адаптивной вёрсткой и мобильной версией. Последняя подойдёт, если на сайте много данных, которые в маленький экран поместятся только с ритуальными танцами и бубном. Или если его функционал можно урезать до одной-двух кнопок КУПИТЬ/ ЗАКАЗАТЬ.

А в остальных случаях — выбирайте адаптивную вёрстку. И расслабьтесь, дальше мы всё сделаем сами.