Мобильная версия: зачем нужен ещё один сайт и как его создать

На главной странице десктопной версии сайта Кинопоиска есть анимированные элементы: реклама и баннер фильма. В мобильной версии сайта этих элементов нет

В адаптивной версии содержимое сайта нельзя изменить. Это тот же сайт с тем же адресом, контент которого можно только адаптировать под мобильную версию. Это называется адаптивная вёрстка. При такой вёрстке веб-дизайн динамично подстраивается под размер экрана пользователя, но облегчить сайт и ускорить его загрузку на мобильном устройстве не получится.

1. Погружение (от англ. discovery).
На этой стадии дизайнер получает задание на разработку мобильной версии сайта от заказчика или стейкхолдера — сотрудника, который руководит процессом разработки и принимает решения. Дизайнер оценивает задачу и выясняет, какие планируются результаты, например, какие метрики поможет увеличить продукт.

Потом дизайнер вместе с командой или продакт-менеджером формулируют гипотезы и определяются с планом исследования.

2. Описание (от англ. define).
У этой стадии три этапа: исследование, анализ результатов и презентация.

Для исследования дизайнер использует опросы, интервью, фокус-группы с потенциальными пользователями будущего продукта. Для организации исследования можно воспользоваться, например, клиентской базой компании. Ещё дизайнер может обратиться к специалисту по Data Science и бизнес-аналитику, чтобы разобраться в данных аналитических систем, например Яндекс Метрики.

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

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

3. Создание.
Процесс работы над интерфейсом мобильного сайта делится на четыре этапа:

● Разработка общей концепции
Дизайнер уточняет у заказчика метрики, на которые планируется влиять, например конверсию в регистрации, и создаёт первые черновики.

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

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

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

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

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

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

Сайт для мобильных устройств можно сделать не только на коде. Некоторые компании вместо мобильной версии выбирают прогрессивное веб-приложение (от англ. Progressive Web App, PWA). PWA-версия — это не приложение, а сайт, который при открытии на мобильном устройстве выглядит как приложение.

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

● Тильда
Для работы в конструкторе не нужны навыки вёрстки и программирования. Сайт собирается из готовых блоков. Есть автоматическая адаптация для мобильных устройств, но можно настроить мобильный сайт вручную, отключив некоторые блоки.

● Glide
Конструктор для PWA-версий.

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

Тильда позволяет не только собрать сайт из готовых шаблонов, но и создать собственный дизайн. Студенты курса «Веб-дизайнер» учатся создавать макеты в Фигме, переносить их в Тильду и адаптировать сайт для мобильных устройств.

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

Перечислим некоторые особенности, которые стоит учитывать дизайнеру при создании макетов мобильного сайта:

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

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

Если текст будет слишком мелкий, пользователю придётся увеличивать экран, а если слишком крупный — долго листать, чтобы дочитать. Для мобильных версий сайта рекомендуется устанавливать размер текста в диапазоне от 16 до 18 пикселей.

Чтобы не ошибиться с размером текста, можно воспользоваться методическими рекомендациями от Apple и Google для мобильных устройств на iOS и Android: Human interface guidelines от Apple и Material Design от Google.

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

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

Чтобы выбрать шрифт заголовка, можно воспользоваться специальными сервисами по подбору шрифтовых пар типа Fontjoy или составить пару самостоятельно. Шрифты в паре должны иметь что-то схожее, но при этом отличаться друг от друга.

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

К примеру, расстояние между заголовком и основным текстом — 10 пикселей, тогда между двумя блоками оно должно быть 20–30 пикселей. Так блоки будут визуально отделяться друг от друга без дополнительных разделительных элементов типа линий.

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

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

Для мобильных страниц важна контрастность текста по отношению к фону — не меньше 7:1 для основного текста и 3:1 для заголовков. Проверить контрастность можно с помощью сервиса Webaim.

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

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

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

● Sketch — графический редактор для macOS, в котором создают интерактивные прототипы. Из минусов: нет возможности командной работы над проектом.

● Lunacy — бесплатный графический редактор, доступный для Windows, Linux и macOS. Есть встроенные элементы графики: иконки, иллюстрации, стоковые фотографии и наборы готовых решений пользовательских интерфейсов. Работать над проектом можно вместе с командой в режиме реального времени.