Учитывая распространенность мобильных устройств и их засилие во всех сферах нашей жизни, наличие мобильной версии сайта – это обязательное условие для развития бизнеса в сети.
В 2016 году количество мобильных пользователей впервые превысило количество пользователей ПК. С тех пор разрыв между этими двумя группами только увеличивается: сторонников просмотра мобильного контента становится все больше.
Персональный сайт – это отправная точка для взаимодействия с клиентом, и мобильная версия сайта делает вас на шаг ближе к целевой аудитории, а это значит, что вы повышаете шанс конверсии (продаж).
При разработке полноразмерного сайта вы должны помнить о том, чтобы предусмотреть и мобильную версию. Если у вас уже есть сайт, то вы можете адаптировать его под мобильные устройства.
Мы подготовили для вас простую пошаговую инструкцию по созданию мобильного сайта.
1. Выберите способ мобильной адаптации сайта
Есть несколько способов создать мобильный сайт. Выбор оптимального способа зависит от различных факторов, таких как тип сайта, возраст и характеристики аудитории, ваши пожелания по дизайну, умения и требования.
Самые распространенные способы:
- Адаптивный дизайн (adaptive) или отзывчивый/респонсивный) (responsive) дизайн
Оба понятия схожи и по этой причине создают путаницу в головах пользователей.
Сайт с респонсивным дизайном реагирует на изменение ширины экрана, адаптируя размещение элементов под текущее пространство. Например, на мобильных устройствах сайт анализирует свободное пространство и отображает элементы наилучшим и наиболее удобным образом.
В отличие от респонсивного дизайна, у адаптивного есть несколько фиксированных размеров макета (например, для настольного ПК, планшета и мобильного телефона). Для всех планшетов будет одна версия макета, без учета размера конкретной марки планшета. Аналогично с ПК и мобильными телефонами.
Обе версии дизайна имеют нечто общее: у вас один сайт (под одним адресом), который по-разному отображается на различных устройствах. По мере увеличения/уменьшения окна браузера контент подстраивается и занимает наиболее удачное расположение.
- Отдельная мобильная версия сайта
Здесь у вас две отдельные версии сайта, которые могут функционировать под разными доменами/поддоменами.
Примеры: vk.com и m.vk.com; getresponse.com и m.getresponse.com.
- Мобильное приложение
Казалось бы, этот вариант должен быть на первом месте по популярности среди пользователей, но это не так. По статистике половина пользователей не желает загружать дополнительные приложения для просмотра одного сайта. Добавьте сюда затраты на разработку приложения и техобслуживание, и станет ясно, что овчинка не стоит выделки. Отдельное приложение окупится только у крупных маркетплейсов и серьезных брендов с многомиллионными оборотами.
Преимущества и недостатки различных способов мобильной оптимизации
Примечание: мобильное приложение мы не будем включать в это сравнение из-за его низкой популярности и рентабельности.
| Плюсы | Минусы | |
| Мобильная версия | – Быстрая загрузка и удобство пользования; – Возможность внести изменения, поскольку мобильная версия и основной сайт являются по сути отдельными веб-ресурсами | – Разные домены или URL-адреса, что может повлиять на ранжирование ресурсов (дублирование контента негативно влияет на процесс продвижения сайта); – Технически сложнее вести два отдельных сайта, чем один; – Если в мобильной версии меньше контента, чем в десктопной, это может негативно отразиться на позиции в органической выдаче; – В мобильном сайте, в отличие от полноразмерного, могут отсутствовать некоторые элементы |
| Адаптивный / респонсивный дизайн | – Обе версии сайта под одним адресом, что облегчает его SEO-оптимизацию и продвижение; – Нет необходимости создавать отдельный сайт с нуля | – Сложнее оптимизировать некоторые элементы сайта, например, картинки, которые должны быстро грузиться как на ПК, так и на мобильных устройствах; – Обе версии сайта содержат идентичный контент, что может не совпадать с целями мобильных пользователей и пользователей настольных ПК |
2. Выберите конструктор сайтов или CMS-систему
Конструкторы сайтов
Конструкторы сайтов берут на себя всю сложную работу по продумыванию веб-дизайна и позволяют вам создать полностью настраиваемый сайт с множеством функций всего за несколько минут. Вы можете выбрать тему оформления или шаблон, который наполните нужными функциями, просто перетащив их на рабочее поле в редакторе.
Если у вас еще нет своего сайта, есть смысл выбрать сервис по созданию сайтов, который предусматривает адаптивный дизайн или имеет отдельный редактор мобильной версии. Как правило, в большинстве таких сервисов опция адаптивного дизайна включена по умолчанию, поэтому вам не нужно беспокоиться, как готовый сайт будет выглядеть на мобильных устройствах.
Сравнение возможностей адаптивного дизайна в различных конструкторах
Tilda – все создаваемые сайты адаптивны по умолчанию. Дополнительные возможности: Настройка диапазона видимости, Настройка отступов для мобильных, Собственная адаптивная версия в Zero Block, Отключение адаптивной версии.
GetResponse – все создаваемые сайты адаптивны по умолчанию. Дополнительные возможности: функция Скрывать на мобильном (вы скрываете элементы, которые не хотите включать в мобильную версию), Масштабировать на весь экран мобильных (отображает изображение или видео на всю ширину экранов мобильных устройств), Оптимизация мобильной версии (вы определяете размер шрифта и отступы для мобильной версии сайта).
Wix – в стандартном редакторе есть два варианта разметки: десктопная и мобильная версия. В 2020 году Wix представил новое решение – Editor X. Отличительная особенность этого редактора – возможность создавать респонсивный дизайн.
Weblium – мобильная версия (адаптивный дизайн) предусмотрена в редакторе по умолчанию. Дополнительные возможности: настройка позиционирования сайта на разных устройствах. Позволяет избежать таких ошибок, как текст, наехавший на картинку, или кривой фон.
uCoz – заявлено наличие адаптивной верстки шаблонов и мобильный вид сайта. Можно редактировать код и подстраивать возможности сайта под себя, в том числе отключение адаптивности шаблона.
О том, какой конструктор сайтов выбрать и возможно ли создать сайт бесплатно, читайте здесь.
CMS-системы
CMS-система – это отличная альтернатива конструктору сайтов. Сервисы вроде WordPress предполагают, что пользователь достаточно хорошо разбирается в технологиях, а взамен они предоставляют больше опций, чем конструкторы сайтов. CMS-сервисы предусматривают адаптивный дизайн сайта, а не отдельную мобильную версию.
Если вы выберете CMS-сервис, то вам остается лишь найти и скачать тему, адаптированную под мобильные устройства (бесплатно или за дополнительную плату), и создать сайт. Большинство таких тем идут в комплекте с техподдержкой и постоянно обновляются, поэтому вам не стоит беспокоиться о том, как поддерживать правильное функционирование сайта.
3. Подумайте над дизайном мобильного сайта
После того как вы определились с платформой для построения сайта, самое время заняться дизайном.
Независимо от того, какого типа сайт вы планируете (блог, портфолио, корпоративный сайт или интернет-магазин), все они строятся по одним и тем же правилам дизайна сайтов.
Мобильная версия сайта имеет свои нюансы, которые следует учесть заранее:
- У мобильных пользователей, как правило, ограниченная пропускная способность интернета
Мобильные пользователи пользуются мобильным интернетом с ограниченной пропускной способностью. По этой причине мобильный сайт должен быть легким и не содержать контент, который съест ценные байты трафика.
Также мобильный сайт должен быстро загружаться. Не секрет, что в современном мире из-за обилия информации у человека развился дефицит концентрации внимания, поэтому если сайт грузится более 2 секунд, никто не будет ждать дольше – вы просто потеряете клиента.
- Мобильные пользователи хотят получить релевантную информацию немедленно
Часто мобильные пользователи посещают сайт, чтобы срочно узнать информацию о месте, которое они собираются посетить, например, время работы или контактный телефон. Если они не получают информацию за несколько секунд, то клиенты уходят к конкурентам.
Позаботьтесь о том, чтобы в мобильной версии сайта были быстрые ссылки на контактные данные и другую полезную информацию.
- Мобильные устройства не такие мощные, как настольные ПК
Настольные ПК имеют встроенные графические карты и профессоры, способные справиться с серьезными нагрузками. И хотя мобильные устройства с каждым годом все более совершенны, все же они не могут конкурировать с ПК.
При создании мобильного сайта дважды подумайте, прежде чем добавлять ресурсозатратный контент, будь то видеоролик в HD-качестве или сложная анимация. А флеш-анимация и вовсе не воспроизводится на мобильных устройствах.
4. Продумайте структуру контента
При создании мобильного сайта важно убедиться, что пользователи имеют доступ ко всем функциям полноразмерного сайта и не ощущают дискомфорта при просмотре сайта на небольшом экране.
Есть несколько аспектов, которые следует учесть при добавлении контента.
А. Приоритет – мобильному дизайну (Mobile First)
Это относительно новый тренд в сфере дизайна. Согласно нему вы должны начать разработку сайта c мобильной версии, а уже потом проработать десктопную. Контент, который вы создаете для мобильной версии, без проблем можно загрузить и в полноформатную версию сайта.
Этот способ подходит для адаптивных сайтов, обе версии которых (мобильная и декстопная) содержат идентичный контент.
Подход Mobile First делает акцент на информативности сайта и удобстве пользования. В случае с интернет-магазином главная цель пользователя – выбрать и купить товар максимально быстро и удобно. Он не будет любоваться красивыми изображениями или восхищаться изящным шрифтом.
В. Приоритет – десктопному дизайну (Mobile Second)
Если у вас уже есть десктопный сайт, то адаптация под мобильные устройства будет немного сложнее, чем в первом варианте.
Выясните, какие элементы десктопного сайта следует перенести в мобильную версию.
Используя данные о пользователях, собранные с помощью аналитики, определите:
- какой контент самый важный для ваших пользователей;
- какие части сайта / элементы часто игнорируются ими;
- какие части сайта / элементы и в каком последовательности они обычно просматривают.
Ответив на эти вопросы, вы поймете, что добавлять на мобильный сайт.
С. Навигация
Экраны мобильных телефонов небольшие, а это влечет необходимость минимизировать варианты навигации. Рекомендуем добавить значок лупы или меню (три горизонтальные полоски). После этого протестируйте отображение сайта на популярных устройствах, используемых 90% мобильных пользователей.
D. Удобство пользования
Взаимодействие с экраном мобильного устройства осуществляется путем сенсорного ввода. У него есть недостатки:
- невозможность навести курсор на элемент
- невозможность нажать на элемент правой кнопкой мыши
- необходимость использовать характерные жесты рукой
Размер пальца больше, чем курсор мышки, поэтому точность попадания по ссылкам низкая. По этой причине вы должны оставить вокруг ссылки свободное пространство, чтобы пользователь не нажал ненароком не туда.
Приводим еще несколько рекомендаций, которые сделают взаимодействие с вашим сайтом приятнее:
- После клика на кнопку она должна изменить цвет или дизайн, чтобы пользователь понимал, что ссылка нажата.
- Заголовки в выпадающем меню должны быть написаны крупным шрифтом, чтобы пользователь их видел на экране мобильного устройства.
- Страница должна иметь вертикальную ориентацию, а информация должна быть в форме одной колонки, которую можно прокручивать.
- Если у вас интернет-магазин и большая галерея товаров, следует предусмотреть возможность увеличения изображения одним жестом (например, разведением пальцев).
- Самая важная информация и ссылки должны находиться в верхней части страницы до прокрутки.
- Откажитесь от сложных форм регистрации с большим количеством полей. Сводите к минимуму ввод информации на небольшом экране.
- Уберите сложную анимацию, фоновые видео, которые усложняют восприятие сайта и замедляют загрузку контента.
- Если информации много, добавляйте всплывающие подсказки, которые будут направлять пользователей к нужным разделам.
Отдельный мобильный сайт или адаптивный дизайн – что выбрать?
Мы считаем, что адаптивный дизайн лучше, и на то есть несколько причин:
- В случае адаптивного дизайна вам не нужно создавать еще один сайт с нуля. Это экономия времени, денег и усилий.
- Продвижение и оптимизация сайта с адаптивным дизайном намного эффективнее, чем десктопного и мобильного сайтов, поскольку в случае мобильной версии контент дублируется, а это негативно влияет на ранжирование сайтов.
- В отличие от мобильной версии, сайт с адаптивным дизайном содержит такой же контент, что и полноразмерный.
А вы знали, что в конструкторе сайтов GetResponse по умолчанию работает опция адаптивного дизайна? Помимо того, что каждый создаваемый сайт будет одинаково хорошо смотреться на любых устройствах и без вашего участия, вы можете внести дополнительные изменения в структуру макета, чтобы сделать будущий сайт еще более привлекательным для мобильных пользователей.
Подробные инструкции со скриншотами вы найдете здесь и здесь.
Сайт, не оптимизированный под мобильные устройства – как проверить?
Есть множество сервисов, где вы можете проверить, адаптирован ли ваш сайт для мобильных устройств. Среди них Google Mobile Friendly, Responsinator, Adaptivator и пр.
Давайте возьмем любой десктопный сайт без адаптивного дизайна и на его примере посмотрим, насколько сложно им пользоваться на маленьком экране.
Сложно найти сайт, который не подходит для малого экрана, но нам это удалось 🙂
www.minsk.gov.by
Какие ошибки допустили создатели этого сайта?
- Контент шире экрана – для прочтения предложения необходимо двигать ползунок
- Не задана область просмотра для мобильных устройств
- Ссылки находятся слишком близко к тексту – есть большая вероятность промахнуться
- Слишком маленький шрифт
- Картинки не адаптируются под ширину экрана и “съедают” всю полезную площадь
Пользоваться таким сайтом неудобно. Сомневаемся, что у него есть мобильные пользователи.
Как сделать мобильную версию сайта – заключение
Мы не без основания считаем, что адаптивная / респонсивная версия сайта имеет больше преимуществ, чем мобильный сайт.
Основные моменты были перечислены в сравнительной таблице выше. Со своей стороны добавим еще несколько аргументов:
- Сейчас на рынке все чаще появляются мобильные устройства с большим экраном, поэтому у пользователей больше возможностей при работе с сайтом.
- Клиенты ожидают, что на мобильных устройствах можно делать все то, что можно делать на ПК.
- Основные игроки технологического рынка (например, Google), отдают приоритет стратегии Mobile First с 2019 года, а это значит, что сайтам, созданным без использования Mobile First приемов, будет намного сложнее отвоевывать трафик и внимание пользователей в ближайшем будущем. Нет смысла создавать отдельный мобильный сайт, его задачи отлично перенимают специальные мобильные приложения.
Надеемся, что эта статья поможет вам правильно оценить достоинства и недостатки обоих вариантов и сделать правильный выбор, который положительно отразится на уровне вовлеченности, притоке клиентов и объеме продаж.