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

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


М. Симаков - Август 14, 2018 - 0 comments

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

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

Что такое хорошо, что такое плохо?

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

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

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

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

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

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

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

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

Как должна выглядеть мобильная версия сайта?

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

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

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

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

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

А нужен ли для мобильной версии свой дизайн?

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

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

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

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

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

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

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

Алгоритм по созданию/проверке мобильной версии сайта

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

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

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

#1 Шапка, меню

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

#2 Содержимое первого экрана

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

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

Идем дальше…

#3 Содержимое последующих блоков

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

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

 

Отзывы

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

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

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

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

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

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

#4 Подвал

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

#5 Проверяем наиболее частые ошибки

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

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

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

#5 Проверка в Google PageSpeed Insights.

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

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

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

Надо ли создавать мобильную версию на поддомене?

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

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

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

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

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

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

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

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

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

 

Спасибо за внимание!

Читать нас в соцсетях:

Поделиться статьей:

Related posts