Сайт – это отправная точка для взаимодействия с клиентами. Здесь они знакомятся ближе с вами, с вашей продукцией, получают нужную информацию вроде адреса, времени работы, регистрационных данных и пр.
В эпоху тотального распространения мобильных телефонов важно, чтобы сайт не только нормально загружался на мобильных устройствах, но и выглядел привлекательно на маленьком экране.
Десктопная версия сайта непригодна для мобильных устройств, взаимодействовать с элементами сайта неудобно, текст приходится увеличивать. Все это резко снижает шансы вашего бизнеса на то, что у него появится много почитателей среди мобильных пользователей.
Как создать мобильную версию сайта – пошаговая инструкция
1. Выберите способ мобильной адаптации сайта
А) Адаптивный / респонсивный дизайн
Вы работаете с одним сайтом, который имеет несколько версий, загружающихся в зависимости от ширины экрана. Сайт функционирует под одним URL-адресом, поэтому любые изменения вы вносите в обе версии сайта сразу.
В) Мобильный сайт
Мобильный сайт существует отдельно от полноразмерного десктопного. Зачастую у них разные URL-адреса (например, getresponse.com и m.getresponse.com). С одной стороны, у вас больше гибкости, поскольку вы можете наполнять оба сайта разным контентом и элементами, адаптированными под тип устройства, но с другой стороны, все действия по оптимизации и продвижению вы будете выполнять дважды, что означает дополнительные затраты времени и денег.
С) Мобильное приложение
Мобильное приложение, на первый взгляд, удобнее всего, поскольку создано специально для мобильных устройств, но исследования показывают, что пользователи неохотно скачивают приложения. Исключением являются глобальные бренды и маркетплейсы (например, Aliexpress).
2. Выберите платформу для создания сайта
CMS или конструкторы сайтов
Преимущество конструкторов сайтов состоит в том, что они пригодны для новичков и не требуют от вас знаний кода, а также методик настройки и публикации, SEO-оптимизации и продвижения сайтов. Большинство конструкторов сайтов предлагают готовые шаблоны, уже адаптированные под мобильные устройства. В некоторых редакторах есть дополнительные настройки (например, функция Скрывать на мобильном или Оптимизация мобильной версии в GetResponse).
CMS-системы могут предоставлять более продвинутые опции, чем конструкторы сайтов, но взамен предполагается, что пользователь хорошо разбирается в технологиях и может базовые настройки выполнить сам. То есть это не сервис «под ключ», как в первом случае. Здесь от вас требуется некоторая самостоятельность. В CMS-системах есть темы, адаптированные под мобильные устройства, и выбрав такую тему, вы можете не переживать, как ваш сайт будет выглядеть на маленьком экране.
3. Разработайте дизайн
Пользование мобильным устройством отличается от работы с ПК, и эти особенности необходимо учитывать при разработке дизайна.
- У мобильных пользователей ограниченная пропускная способность интернета
Решение: не перегружайте мобильный сайт элементами, которые замедляют загрузку и поглощают ценный трафик (это анимация, фоновое видео, спецэффекты и пр.)
- Мобильные пользователи хотят получить нужную информацию сразу, без промедления
Решение: размещайте нужную информацию в самом верху страницы, делайте ее заметной, добавляйте быстрые ссылки
- Мобильные устройства не такие мощные, как ПК
Решение: упрощайте структуру сайта, навигацию.
4. Продумайте структуру контента и функционал
Есть два принципа, которым создается дизайн:
А) Вначале создается мобильная версия сайта, затем десктопная (Mobile First). Плюсом такого подхода является то, что вы можете не переживать, что элементы полноразмерной версии сайта буду неадекватно отображаться в мобильной версии.
В) Вначале появляется десктопная версия сайта, а затем на ее основе создается мобильная (Mobile Second). Здесь контент и навигация могут отличаться, поскольку не все в полноразмерной версии будет нормально отображаться в мобильной.
Хотите узнать конкретные рекомендации по оптимизации мобильного сайта? Например, какой должна быть CTA-кнопка или формы регистрации? Читайте все это в нашей статье.