Методы и подходы при разработке мобильных версий сайта

Перед началом разработки сайта подумайте, какое решения для мобильных устройств вам подойдет? Есть два решения: адаптивная верстка и мобильная версия сайта. Их плюсы, минусы относительно друг друга чуть позже, а пока давайте ознакомимся с путями разработки, если не заморачиваться с мобильными версиями.

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

Вариант 2. Отображение заглушки на главном экране с текстом. Если сайт открыт не в десктопном виде, выглядит обычно так: “Мы так старались, когда делали супер-эффекты, но ваш убогий экранчик не передаст прелесть нашего дизайна, поэтому смотрите сайт с компьютера, ок?”.

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

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

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

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

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

Если вы захотите самостоятельно подробнее изучить вопрос, то в поисковой выдаче на первых местах будут статьи на тему неудобства использования адаптивной верстки. Мол грузятся такие сайты долго, они тяжелые и неповоротливые. В настоящее время, такие высказывания справедливы только по отношению к массивным сайтам: обилие картинок, big data, все дела.

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

Что выбрать

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