Чек-лист по созданию мобильной версии сайта

У Вас есть сайт — а мобильная версия есть? Внимание на картинку:

Слева резиновая версия — это плохо, справа мобильная — это хорошо.

Резиновая версия выглядит лучше, чем кусок Вашего сайта на экране (примерно 15%), однако взаимодействовать с ним неудобно.

Давайте представим: Вы приехали отдыхать, и не успели забронировать номер в гостинице либо бронь сорвалась, нужно срочно искать новую!

Достаем телефон и начинаем искать, и вот оно — чудо! Есть гостиницы со свободными номерами рядом, открываем сайт:

Вариантов немного, напрягаем зрение и тренируем координацию пальцев (отличное упражение по развитию мелкой моторики — все как велела Монтессори)

Наконец-то получилось нажать «Бронирование», выбираем дату заезда и выезда с отеля:

А где кнопка «Забронировать»? 

Она в самом низу экрана, ищите ее на всех ноутбуках страны 🙂

Надеюсь, я убедил тех, кто не имеет мобильной версии — завести ее.

По сути, это просто тот же самый контент сайта, только картины масштабируются под экран, а элементы располагаются друг под другом.

Если блоки раньше были параллельно, то теперь они по порядку: сверху-вниз, слева-направо.

Помимо этого в мобильной версии некоторые блоки отсутствуют, чтобы не перегружать страницу.

Посетители используют связь 3G/4G/LTE, поэтому трафик или скорость могут оставлять лучшего.

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

В большинстве случаев — нет. При правильной верстке, сайт сам «складывается» в удобную мобильную версию (см. подробнее про технологию Bootstrap).

Таким образом, остается убрать лишнее, что не пригодится пользователям смартфонов.

Давайте остановимся на тех, случах где он нужен: 

• при использовании баннеров, которые некрасиво смотрятся при адаптации под мобильные устройства
• при наличии больших таблиц: прайс-лист, технические параметры и т.п.
• если есть онлайн-калькулятор, форма обратной связи с большим количеством полей

Все это решаемо с помощью операции «упрощения»:

1. сокращаем количество элементов
2. оставляем только самое важное
3. формы должны помещаться в 1 экран

Перейдем к общим правилам оформления.

Это вещь индивидуальные, но общие каноны никто не отменял.

Идем по порядку, берите смартфон в руки, открывайте свой сайт и проверяйте.

Мало знать — надо делать 🙂

В шапке должен быть расположен слева-направо: логотип, название компании (как вариант), кнопка меню.

Первый экран содержит:

• заголовок/текст, который отвечает на вопрос пользователя: «Куда я попал?»
• видео-ролик выступает альтернативой заголовку/тексту (однако лучше оставить текст, вдруг человек в том месте, где смотреть видео ему неудобно)
• УТП или преимущества продукта, которые отвечают на вопрос: «Почему клиенты выбирают вас?»
• контрастная кнопка с призывом к действию: «забронировать», «записаться на консультацию», «вызвать замерщика» и т.п.

Идем дальше…

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

Вот Вам список того, что здесь может быть, а по степени важности для своих клиентов расположите сами:

Отзывы

Выгоды для клиентов

Список клиентов

Портфолио/кейсы

Схема работы (важно для интернет-заказов, оформления онлайн-подписок)

Награды, лицензии

Не забывайте использовать регулярно призыв к действию, соотношение примерно 1:2 или 1:3

Блок содержит ссылки на социальные сети, скачивание приложения и дублирует пункты меню.

В каких случах посетителю приходится уйти с сайта к Вашим конкурентам:

• при нажатии на телефон не происходит вызов
• форма обратной связи закрывает весь экран
• при попадании на блок с картами: листаются только карты, а не сайт
• слишком мелкий шрифт или близкое расположение элементов
• сайт загружается более 3-х секунд

Это проверяется вручную, а теперь проверим программой.

Ссылка на инструмент от Google: PageSpeed Insights.

Помимо полученной информации, Вы также можете видеть рекомендации по улучшению сайта:

Хорошая вещь, попробуйте сами!

Здесь мнение разделяются… Я лично считаю: и да, и нет. Только для сайтов-исключений.

Как писал ранее в мобильной версии некоторые блоки отсутствуют, т.к. они удобны только в полной версии сайта.

Давайте посмотрим на примере сайта Авито:

Ищет человек недвижимость, очень удобно это делать при поиске по карте:

А в мобильной версии его нет, а вдруг хочется ночью посерфить по сайту, а сидя за ноутбуком всех разбудишь:

Но тут на помощь, к нам приходить «Перейти на полную версию»

И все, проблема решена, моя любимая карта вернулась!

А Вы часто возвращаетесь на полную версию?

Теперь сами догадайтесь: нужно ли делать моб.версию на поддомене или нет? 🙂