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

Слева резиновая версия – это плохо, справа мобильная – это хорошо.
Что такое хорошо, что такое плохо?
Резиновая версия выглядит лучше, чем кусок Вашего сайта на экране (примерно 15%), однако взаимодействовать с ним неудобно.
Давайте представим: Вы приехали отдыхать, и не успели забронировать номер в гостинице либо бронь сорвалась, нужно срочно искать новую!
Достаем телефон и начинаем искать, и вот оно – чудо! Есть гостиницы со свободными номерами рядом, открываем сайт:

Вариантов немного, напрягаем зрение и тренируем координацию пальцев (отличное упражение по развитию мелкой моторики – все как велела Монтессори)
Наконец-то получилось нажать “Бронирование”, выбираем дату заезда и выезда с отеля:

А где кнопка “Забронировать”?
Она в самом низу экрана, ищите ее на всех ноутбуках страны 🙂
Надеюсь, я убедил тех, кто не имеет мобильной версии – завести ее.
Как должна выглядеть мобильная версия сайта?
По сути, это просто тот же самый контент сайта, только картины масштабируются под экран, а элементы располагаются друг под другом.
Если блоки раньше были параллельно, то теперь они по порядку: сверху-вниз, слева-направо.
Помимо этого в мобильной версии некоторые блоки отсутствуют, чтобы не перегружать страницу.
Посетители используют связь 3G/4G/LTE, поэтому трафик или скорость могут оставлять лучшего.
Тяжелые сайты в большом проигрыше. И возникает следующий вопрос: может рисовать отдельный дизайн?
А нужен ли для мобильной версии свой дизайн?
В большинстве случаев – нет. При правильной верстке, сайт сам “складывается” в удобную мобильную версию (см. подробнее про технологию Bootstrap).
Таким образом, остается убрать лишнее, что не пригодится пользователям смартфонов.
Давайте остановимся на тех, случах где он нужен:
- при использовании баннеров, которые некрасиво смотрятся при адаптации под мобильные устройства
- при наличии больших таблиц: прайс-лист, технические параметры и т.п.
- если есть онлайн-калькулятор, форма обратной связи с большим количеством полей
Все это решаемо с помощью операции “упрощения”:
- сокращаем количество элементов
- оставляем только самое важное
- формы должны помещаться в 1 экран
Перейдем к общим правилам оформления.
Алгоритм по созданию/проверке мобильной версии сайта
Это вещь индивидуальные, но общие каноны никто не отменял.
Идем по порядку, берите смартфон в руки, открывайте свой сайт и проверяйте.
Мало знать – надо делать 🙂
#1 Шапка, меню

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

Первый экран содержит:
- заголовок/текст, который отвечает на вопрос пользователя: “Куда я попал?”
- видео-ролик выступает альтернативой заголовку/тексту (однако лучше оставить текст, вдруг человек в том месте, где смотреть видео ему неудобно)
- УТП или преимущества продукта, которые отвечают на вопрос: “Почему клиенты выбирают вас?”
- контрастная кнопка с призывом к действию: “забронировать”, “записаться на консультацию”, “вызвать замерщика” и т.п.
Идем дальше…
#3 Содержимое последующих блоков
Не буду разделять их по номерам, т.к. это аргументы для принятия решения и для каждой сферы они свои.
Вот Вам список того, что здесь может быть, а по степени важности для своих клиентов расположите сами:
Отзывы

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

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

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

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

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

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

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

#5 Проверяем наиболее частые ошибки
В каких случах посетителю приходится уйти с сайта к Вашим конкурентам:
- при нажатии на телефон не происходит вызов
- форма обратной связи закрывает весь экран
- при попадании на блок с картами: листаются только карты, а не сайт
- слишком мелкий шрифт или близкое расположение элементов
- сайт загружается более 3-х секунд
Это проверяется вручную, а теперь проверим программой.
#5 Проверка в Google PageSpeed Insights.
Ссылка на инструмент от Google: PageSpeed Insights.

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

Хорошая вещь, попробуйте сами!
Надо ли создавать мобильную версию на поддомене?
Здесь мнение разделяются… Я лично считаю: и да, и нет. Только для сайтов-исключений.
Как писал ранее в мобильной версии некоторые блоки отсутствуют, т.к. они удобны только в полной версии сайта.
Давайте посмотрим на примере сайта Авито:
Ищет человек недвижимость, очень удобно это делать при поиске по карте:

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

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

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

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