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

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

 

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

 

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

 

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

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

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

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

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

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

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

 

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

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

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

Мало знать - надо делать :)

 

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

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

 

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

 

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

Идем дальше...

 

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

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

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

 

Отзывы

 

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

 

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

 

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

 

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

 

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

 

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

 

#4 Подвал

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

 

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

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

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

 

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

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

 

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

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

 

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

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

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

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

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

 

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

 

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

 

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

 

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

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

 

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

Понравилось? Поделитесь с друзьями или добавьте в закладки:

Рекомендуем к прочтению:

Секретный сарафан маркетолога

Как сарафанное радио помогает Вашему сайт увеличить узнаваемость бренда и объем продаж?

13/09/2018

Какие тексты нужны для сайта?

6 дельных советов, подходящих почти для каждого сайта: раскрываем секрет продающих текстов.

18/09/2018

Какой сайт нужен для бизнеса?

Когда зарождается идея о создании сайта, следует начинать с ответа на вопрос «Зачем он нужен?».

11/09/2018

Оставьте заявку прямо сейчас,
и мы перезвоним Вам
в течение 15 минут

персональных данных