У Вас есть сайт — а мобильная версия есть? Внимание на картинку:
Слева резиновая версия — это плохо, справа мобильная — это хорошо.
Что такое хорошо, что такое плохо?
Резиновая версия выглядит лучше, чем кусок Вашего сайта на экране (примерно 15%), однако взаимодействовать с ним неудобно.
Давайте представим: Вы приехали отдыхать, и не успели забронировать номер в гостинице либо бронь сорвалась, нужно срочно искать новую!
Достаем телефон и начинаем искать, и вот оно — чудо! Есть гостиницы со свободными номерами рядом, открываем сайт:
Вариантов немного, напрягаем зрение и тренируем координацию пальцев (отличное упражение по развитию мелкой моторики — все как велела Монтессори)
Наконец-то получилось нажать «Бронирование», выбираем дату заезда и выезда с отеля:
А где кнопка «Забронировать»?
Она в самом низу экрана, ищите ее на всех ноутбуках страны 🙂
Надеюсь, я убедил тех, кто не имеет мобильной версии — завести ее.
Как должна выглядеть мобильная версия сайта?
По сути, это просто тот же самый контент сайта, только картины масштабируются под экран, а элементы располагаются друг под другом.
Если блоки раньше были параллельно, то теперь они по порядку: сверху-вниз, слева-направо.
Помимо этого в мобильной версии некоторые блоки отсутствуют, чтобы не перегружать страницу.
Посетители используют связь 3G/4G/LTE, поэтому трафик или скорость могут оставлять лучшего.
Тяжелые сайты в большом проигрыше. И возникает следующий вопрос: может рисовать отдельный дизайн?
А нужен ли для мобильной версии свой дизайн?
В большинстве случаев — нет. При правильной верстке, сайт сам «складывается» в удобную мобильную версию (см. подробнее про технологию Bootstrap).
Таким образом, остается убрать лишнее, что не пригодится пользователям смартфонов.
Давайте остановимся на тех, случах где он нужен:
- при использовании баннеров, которые некрасиво смотрятся при адаптации под мобильные устройства
- при наличии больших таблиц: прайс-лист, технические параметры и т.п.
- если есть онлайн-калькулятор, форма обратной связи с большим количеством полей
Все это решаемо с помощью операции «упрощения»:
- сокращаем количество элементов
- оставляем только самое важное
- формы должны помещаться в 1 экран
Перейдем к общим правилам оформления.
Алгоритм по созданию/проверке мобильной версии сайта
Это вещь индивидуальные, но общие каноны никто не отменял.
Идем по порядку, берите смартфон в руки, открывайте свой сайт и проверяйте.
Мало знать — надо делать 🙂
#1 Шапка, меню
В шапке должен быть расположен слева-направо: логотип, название компании (как вариант), кнопка меню.
#2 Содержимое первого экрана
Первый экран содержит:
- заголовок/текст, который отвечает на вопрос пользователя: «Куда я попал?»
- видео-ролик выступает альтернативой заголовку/тексту (однако лучше оставить текст, вдруг человек в том месте, где смотреть видео ему неудобно)
- УТП или преимущества продукта, которые отвечают на вопрос: «Почему клиенты выбирают вас?»
- контрастная кнопка с призывом к действию: «забронировать», «записаться на консультацию», «вызвать замерщика» и т.п.
Идем дальше…
#3 Содержимое последующих блоков
Не буду разделять их по номерам, т.к. это аргументы для принятия решения и для каждой сферы они свои.
Вот Вам список того, что здесь может быть, а по степени важности для своих клиентов расположите сами:
Отзывы
Выгоды для клиентов
Список клиентов
Портфолио/кейсы
Схема работы (важно для интернет-заказов, оформления онлайн-подписок)
Награды, лицензии
Не забывайте использовать регулярно призыв к действию, соотношение примерно 1:2 или 1:3
#4 Подвал
Блок содержит ссылки на социальные сети, скачивание приложения и дублирует пункты меню.
#5 Проверяем наиболее частые ошибки
В каких случах посетителю приходится уйти с сайта к Вашим конкурентам:
- при нажатии на телефон не происходит вызов
- форма обратной связи закрывает весь экран
- при попадании на блок с картами: листаются только карты, а не сайт
- слишком мелкий шрифт или близкое расположение элементов
- сайт загружается более 3-х секунд
Это проверяется вручную, а теперь проверим программой.
#5 Проверка в Google PageSpeed Insights.
Ссылка на инструмент от Google: PageSpeed Insights.
Помимо полученной информации, Вы также можете видеть рекомендации по улучшению сайта:
Хорошая вещь, попробуйте сами!
Надо ли создавать мобильную версию на поддомене?
Здесь мнение разделяются… Я лично считаю: и да, и нет. Только для сайтов-исключений.
Как писал ранее в мобильной версии некоторые блоки отсутствуют, т.к. они удобны только в полной версии сайта.
Давайте посмотрим на примере сайта Авито:
Ищет человек недвижимость, очень удобно это делать при поиске по карте:
А в мобильной версии его нет, а вдруг хочется ночью посерфить по сайту, а сидя за ноутбуком всех разбудишь:
Но тут на помощь, к нам приходить «Перейти на полную версию»
И все, проблема решена, моя любимая карта вернулась!
А Вы часто возвращаетесь на полную версию?
Теперь сами догадайтесь: нужно ли делать моб.версию на поддомене или нет? 🙂
