Создание мобильного сайта: 7 советов по дизайну

По данным Google мобильные устройства генерируют около половины всего интернет-трафика, и эта цифра продолжает расти. Что это значит для тех, кто ведет бизнес или продвигает свою компанию в сети? Всё просто — мобильный сайт превращается в абсолютный must have. Создать сайт для мобильных устройств можно тремя способами:

• Адаптивный дизайн

Использует один и тот же код для мобильной и для обычной версий. У сайта единый URL, который выдает одинаковый HTML-код, но разный CSS-код, в зависимости от используемого устройства.

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

• Динамический вывод

Сервер выдает разный CSS и HTML код на одном URL. Выдача зависит от агента пользователя, отправляющего запрос на страницу. Именно так определяется код, который следует выводить.

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

• Мобильная версия

Специально “заточенный” под просмотр на устройствах эквивалент вашего сайта, выводится на отдельном URL.

Разработать отдельную мобильную версию проще, она содержит только нужный мобильный контент и быстро загружается на устройствах. Однако при дублировании текстов могут возникнуть проблемы с ранжированием в поиcковой выдаче из-за разных URL.

[Tweet «Что важно учесть в дизайне мобильного сайта»]

Вы можете выбрать любой вариант реализации в зависимости от имеющихся ресурсов и поставленных задач, однако для всех случаев есть общие советы по дизайну. Именно дизайн обеспечивает комфортное взаимодействие пользователя с системой, привлекает или отталкивает. И здесь речь идет вовсе не об абстрактной и субъективной “красоте”.

Дизайн существует по своим законам, управляет вниманием и поведением посетителя. Формат мобильного сайта имеет свою специфику. Мы обобщили опыт нашей команды по созданию и поддержке мобильных сайтов и выбрали 7 актуальных советов, которые помогут создать эффективное решение, не допустив распространенных ошибок.

1. Размер экрана имеет значение

Главная особенность экранов мобильных устройств — их небольшой размер. Это может звучать банально, но помнить об этом необходимо. В вашем распоряжении мобильные редакторы и сервисы подобные Wix. Они позволяют увидеть, как будет выглядеть сайт на экранах разного размера. Не ленитесь лишний раз проверить и убедиться, что дизайн не превратился в хаос.

Также при оптимизации для мобильных устройств размер изображений лучше указывать не в пикселях (абсолютный), а в процентах (относительный). Так вы не рискуете «поломать» дизайн сайта, и будете уверены, что картинки не займут всю площадь небольшого экрана.

2. Информация должна быть доступной

Помните, что мобильный сайт создается для тех, кто пользуется интернетом не в самых комфортных условиях: в общественном транспорте, на полпути до вашего офиса или магазина. Сделайте просмотр информации как можно более простым — используйте крупный текст, хорошо читаемые шрифты, отображайте информацию при помощи картинок, создайте удобное навигационное меню и добавьте кнопки для быстрой связи.

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

3. Минимализм — ваше всё

Мы точно знаем, что не нравится вашим мобильным пользователям — прокрутка. Маленький экран, неудобная прокрутка при помощи пальцев, с которой легко пропустить что-то важное одним неловким движением — минимизируйте это.

Уберите из мобильной версии всё лишнее — громоздкие текстовые блоки (например, историю компании) и картинки. Если вы хотите корректно отобразить объемный материал, лучше всего разбить его на блоки и разместить на отдельных страницах.

4. Помните о сенсорных экранах

Еще одно важное различие между версиями для настольных ПК и мобильных устройств — способ взаимодействия пользователя со страницей. Практически все смартфоны и планшеты оснащены сенсорными экранами, потому мобильный сайт должен легко управляться жестами.

Пользователи переходят от раздела к разделу, нажимая на кнопки, так что сделайте их большими и заметными, используйте выпадающие меню, — изучите гайдлайны от производителей устройств, где можно найти информацию о рекомендованной величине тач-области, и будьте тачскрин-френдли.

5. Дайте ссылку на десктопную версию

Большинство пользователей приходят на ваш сайт, чтобы получить необходимую информацию максимально оперативно. Однако, не стоит игнорировать потребности тех, кто имеет больше времени и хочет узнать подробнее о вашей компании, товарах или услугах.

Не создавайте страниц-404 только для мобильного сайта. Перенаправляйте пользователя на аналогичные страницы основной версии, если они есть. И не забудьте дать ссылку на основной сайт в контактах или на продуктовых страницах для получения более подробной информации.

6. Используйте дополнительные опции

Здесь всё зависит от потребностей вашего бизнеса: полезными могут оказаться кнопки соцсетей, возможность получения скидки по QR-коду вместо стандартных купонов или встроенные приложения. Например, если при помощи десктопной версии вашего сайта пользователи заказывали услуги, делали покупки или проверяли календарь событий — масштабируйте и перенесите эти опции в мобильную версию.

Если же вам требуется более сложный и специфичный функционал для мобильных устройств, такой как игры, трекинг доставки, управление личными данными пользователя и т.д. — лучше разработать отдельное мобильное приложение, о чем мы подробно расскажем в своих следующих материалах.

7. Разместите призыв к действию правильно

Если ваша конечная цель — продажи, и вы хотите добавить на свой сайт призыв к действию, подумайте о том, как лучше размещать его на страницах для мобильных устройств различного типа. Он должен отлично читаться, а потому стандартное расположение справа внизу может не сработать. Попробуйте гармонично вписать необходимые призывы и кнопки в верхнюю левую часть.

Однако что касается призывов к действию — не будьте слишком навязчивы. В мобильной версии всплывающие окна, помощники и слишком настойчивое приглашение скачать приложение или приобрести продукт выглядят раздражающе.

Конечно, это далеко не все приемы, которые позволяют повысить эффективность мобильного сайта. В будущих статьях мы подробно рассмотрим проблемы оптимизации сайтов для просмотра на мобильных устройствах в соответствии с новыми требованиями Google и другие важные вопросы. Однако проследив за тем, что минимум необходимых требований к мобильному дизайну соблюден, вы получите рабочее решение. Потенциал для дальнейшего развития есть всегда — запустите сайт, изучайте активность посетителей, находите моменты, на которых мобильный пользователь “теряется” и совершенствуйте свой ресурс!