Разработка мобильной версии сайта
Что такое мобильная версия сайта
Мобильная версия сайта — это ещё один сайт, на который пользователи попадают при посещении основного ресурса с мобильного телефона или планшета. Адрес мобильного сайта обычно начинается с “m.” Например, сайт расположен по адресу: site.com. Открыв этот сайт с телефона, пользователь попадёт на поддомен: m.site.com.
Отличия мобильной версии сайта от адаптивной
Отдельный мобильный сайт может сильно отличаться от главного сайта. При создании мобильной версии можно полностью изменить структуру сайта, уменьшить или увеличить количество страниц, заменить их другими и даже разместить совершенно другой контент. Чаще всего так делают, чтобы отображение сайта на мобильных устройствах было более удобным, страницы быстрее загружались и с ними было проще взаимодействовать через экран телефона.
Например, на сайте размещены 3d-элементы или анимация, которая долго загружается при низкой скорости мобильного интернета. В мобильной версии эти объекты можно заменить на изображения или совсем убрать.
На главной странице десктопной версии сайта Кинопоиска есть анимированные элементы: реклама и баннер фильма. В мобильной версии сайта этих элементов нет
Адаптивный сайт — это тот же сайт, что и на десктопе, с единым URL. Он автоматически подстраивается под размер экрана пользователя. При этом можно менять расположение элементов, скрывать второстепенные блоки и оптимизировать загрузку контента для разных устройств, но архитектура сайта остаётся такой же.
Плюсы и минусы мобильной версии
Плюсы
✅ Можно оставить только элементы, уместные на экране смартфона.
Например, в основной версии сайта есть большой текстовый блок с историей компании. Но на мобильном устройстве пользователю придётся долго листать до информации, ради которой он перешёл на страницу. Это неудобно, поэтому блок можно убрать или перенести на другую страницу.
✅ Ускоряет загрузку страницы.
Сайты с большим количеством элементов долго загружаются, когда скорость интернета низкая, а пользователи не хотят ждать слишком долго и уходят со страницы. Мобильная версия сайта решает эту проблему: скорость загрузки можно увеличить, если, к примеру, убрать большую часть анимации и оставить только статичные картинки.
✅ Удобна для пользователей. Меню, разделы и кнопки размещают так, чтобы на них было легко кликать одной рукой на экране смартфона.
✅ Экономит трафик.
Рекламные кампании можно запускать отдельно на пользователей мобильных устройств.
Минусы
❌ Увеличивает расходы.
Мобильная версия — это дополнительный сайт. Нужно много ресурсов на его создание, настройку и поддержку. Например, даже на сайте небольшого магазина, в котором продаётся 50–100 товаров, нужно постоянно следить за актуальностью позиций.
❌ Закрывает не все потребности пользователей.
Иногда упрощение мобильной версии снижает её эффективность.
Например, если на сайте онлайн-магазина есть 3d-примерка, а в мобильной версии от неё отказались для скорости загрузки страниц. Пользователь будет разочарован, если не найдёт функции, которая привлекла его в этот онлайн-магазин.
❌ Плохо влияет на ранжирование в поисковых системах.
Основной сайт и мобильная версия — это два ресурса с разными адресами, поэтому продвигаться в поисковиках они будут отдельно друг от друга. При этом контент обоих сайтов будет не уникальным, что негативно влияет на ранжирование.
❌ Подходит не всем.
Делать мобильную версию стоит в том случае, если пользователи заходят на сайт только с компьютера и телефона. Например, на сайт ресторана гости заходят с домашнего компьютера или с мобильного уже сидя за столиком, чтобы посмотреть меню по QR-коду.
Сайт онлайн-кинотеатра часто открывают на телевизоре. В этом случае для комфортного просмотра контента нужно большое разрешение. Когда потенциальных устройств много, лучше использовать адаптивную вёрстку.
Способы создания мобильной версии сайта
Отдельную мобильную версию можно создать несколькими способами. Выбор зависит от технических ограничений и задач бизнеса.
- Разработка отдельной мобильной версии в коде. Самый распространённый вариант для сложных проектов. В этом случае для мобильных устройств создают отдельную версию сайта, часто со своей структурой и интерфейсом. Веб-дизайнер продумывает пользовательские сценарии, проектирует структуру страниц, создаёт макеты и передаёт их разработчикам.
- Мобильная версия на базе CMS или существующего сайта. Если основной сайт работает на CMS, для мобильных устройств можно настроить отдельные шаблоны или упрощённое отображение страниц без разработки проекта с нуля. Задача веб-дизайнера — определить, какие элементы стоит сохранить, изменить или убрать, чтобы сайтом было удобно пользоваться со смартфона.
- Мобильная версия в конструкторе сайтов. Такой вариант подходит для небольших проектов, лендингов или MVP, когда важно быстро запустить мобильную версию без полноценной разработки. В этом случае веб-дизайнер собирает структуру страниц, настраивает интерфейс и адаптирует пользовательский путь под мобильный сценарий.
- PWA. Некоторые компании вместо отдельной мобильной версии выбирают прогрессивное веб-приложение (Progressive Web App, PWA) — сайт, который по интерфейсу и взаимодействию напоминает мобильное приложение. В этом случае веб-дизайнер проектирует интерфейс с учётом мобильных паттернов взаимодействия (например, упрощённая навигация, крупные элементы управления и быстрые пользовательские сценарии).
Чтобы сделать мобильную версию сайта, дизайнер, как правило, самостоятельно анализирует опыт конкурентов и общается с потенциальными пользователями сайта. Затем продумывает структуру будущего сайта: что должно быть на каждой странице, как страницы будут связаны между собой. После этого создаёт в графическом редакторе макеты и согласовывает с теми, кто принимает решение со стороны заказчика или компании.
Создание мобильного сайта не отличается от работы над десктопной версией или приложением. В классическом дизайн-процессе пять стадий
1. Погружение (от англ. discovery).
На этой стадии дизайнер получает задание на разработку мобильной версии сайта от заказчика или стейкхолдера — сотрудника, который руководит процессом разработки и принимает решения. Дизайнер оценивает задачу и выясняет, какие планируются результаты, например, какие метрики поможет увеличить продукт.
Потом дизайнер вместе с командой или продакт-менеджером формулируют гипотезы и определяются с планом исследования.
2. Описание (от англ. define).
У этой стадии три этапа: исследование, анализ результатов и презентация.
Для исследования дизайнер использует опросы, интервью, фокус-группы с потенциальными пользователями будущего продукта. Для организации исследования можно воспользоваться, например, клиентской базой компании. Ещё дизайнер может обратиться к специалисту по Data Science и бизнес-аналитику, чтобы разобраться в данных аналитических систем, например Яндекс Метрики.
Анализ результатов исследования и собранных данных подтверждает или опровергает гипотезы. На этом этапе появляются идеи и решения для будущего дизайна сайта и его отображения на мобильных устройствах.
Для презентации результаты исследования и идеи визуализируют схемами, картами, графиками. Её проводят для стейкхолдера, который принимает решения по проекту.
3. Создание.
Процесс работы над интерфейсом мобильного сайта делится на четыре этапа:
● Разработка общей концепции
Дизайнер уточняет у заказчика метрики, на которые планируется влиять, например конверсию в регистрации, и создаёт первые черновики.
● Дизайн макетов
Дизайнер переходит от общей концепции к работе над конкретными визуальными образами, отрисовывает страницы и разделы, создаёт интерактивный прототип — имитацию готового сайта, но без кода. Прототип делают в графических редакторах типа Фигма: на макетах страниц можно нажимать на кнопки и открывать экраны.
Прототип делают в графических редакторах типа Фигма.
● Юзабилити-тестирование прототипа
Участникам тестирования дают задание и просят комментировать каждое действие вслух. Например, на тестировании прототипа мобильного сайта для магазина уходовой косметики пользователей просят найти и заказать шампунь для кудрявых волос.
В зависимости от того, как участники будут взаимодействовать с прототипом, станет понятно, насколько удачно сайт отображается на мобильных устройствах, удобен ли интерфейс, помогают ли фильтры, легко ли найти нужный раздел, нет ли проблем при оформлении заказа.
На макетах страниц можно нажимать на кнопки и открывать экраны. Если пользователи запутались, значит, мобильную версию сайта нужно редактировать.
● Финализация дизайн-решений
Дизайнер собирает всю информацию по проекту в один документ и прописывает требования. После обсуждения с командой вопросов и технических ограничений, которые могут повлиять на дизайн, проект забирают в работу. Участие дизайнера на этом не заканчивается: пока пишут код и настраивают мобильный сайт, дизайнер взаимодействует с программистами, дорабатывает детали макетов.
4. Коридорное тестирование
Готовый сайт передают не только тестировщикам, но и дизайнеру. Он вручную тестирует бета-версию продукта, чтобы выявить возможные ошибки разработчиков, и проверяет, соблюдена ли логика макета, правильно ли реализованы элементы дизайна в мобильной и десктопной версиях сайта.
5. Доработка
После запуска дизайнер может провести исследование и при необходимости доработать продукт. Например, если после обновления сайта пользователи стали реже подписываться на рассылку, нужно проверить, не связано ли это с дизайном и расположением формы подписки. Для этого можно провести юзабилити-тестирование или другое качественное исследование.
Какими должны быть современные мобильные страницы
Современные мобильные страницы должны быть в первую очередь удобными для пользователей. Люди будут открывать сайт не только в помещении с искусственным светом, но и на улице в солнечный день, на ходу или в темноте с низкой яркостью экрана. Внешние условия сильно влияют на то, как будет восприниматься информация на сайте.
Перечислим некоторые особенности, которые стоит учитывать дизайнеру при создании макетов мобильного сайта:
1. Шрифт
Текст должен считываться без усилий, поэтому лучше выбирать шрифты с чётким начертанием букв. Витиеватые стили можно оставить для баннеров, заголовков или других акцентов, а для блоков с основным текстом выбрать классические варианты.
Если шрифты в Google Fonts отсортировать по популярности, в верху списка будут Roboto и Open Sans — прямые, без засечек, оптимальной толщины. Часто встречаются в продуктах, потому что они гармоничны в начертании и легко читаются
2. Размер текста
Если текст будет слишком мелкий, пользователю придётся увеличивать экран, а если слишком крупный — долго листать, чтобы дочитать. Для мобильных версий сайта рекомендуется устанавливать размер текста в диапазоне от 16 до 18 пикселей.
Чтобы не ошибиться с размером текста, можно воспользоваться методическими рекомендациями от Apple и Google для мобильных устройств на iOS и Android: Human interface guidelines от Apple и Material Design от Google.
3. Заголовки
Заголовки должны быть большего размера. Для них можно выбрать необычный шрифт, не забывать про считываемость.
Лучше уместить заголовок максимум в три строчки, иначе его будет неудобно читать. Оптимальный размер заголовка — 28 пикселей. Если заголовок получается слишком длинным, его лучше сократить или сделать частью основного текста.
Чтобы выбрать шрифт заголовка, можно воспользоваться специальными сервисами по подбору шрифтовых пар типа Fontjoy или составить пару самостоятельно. Шрифты в паре должны иметь что-то схожее, но при этом отличаться друг от друга.
Проще всего подобрать пару из одной семьи, тогда шрифты будут дополнять друг друга. Например, к основному тексту применить Roboto, а заголовки сделать Roboto Slab
4. Расстояние между строчками
Чтобы сайт удачно выглядел на мобильных устройствах, при выборе отступов нужно соблюдать правило внутреннего и внешнего — объекты, которые находятся близко друг к другу, воспринимаются единым целым. Если на сайте будет несколько текстовых блоков с заголовками, то расстояние между текстом и заголовком внутри блока должно быть в 2–3 раза меньше, чем между блоками.
К примеру, расстояние между заголовком и основным текстом — 10 пикселей, тогда между двумя блоками оно должно быть 20–30 пикселей. Так блоки будут визуально отделяться друг от друга без дополнительных разделительных элементов типа линий.
В мобильной версии сайта использовали простые шрифты, преимущественно чёрно-белую гамму и разделители ― небольшие иконки или увеличенный интервал между блоками. Так текст хорошо считывается в любых условиях
5. Цветовая тема
При создании мобильного сайта нужно учитывать, в каких условиях и в какое время суток на него будут заходить — дома, в офисе, на улице, ночью или днём.
Например, сайт такси пользователи часто открывают на улице. Тёмная цветовая тема в солнечный день будет выглядеть на экране смартфона как одно большое пятно, в котором сложно разглядеть нужные кнопки.
Для мобильных страниц важна контрастность текста по отношению к фону — не меньше 7:1 для основного текста и 3:1 для заголовков. Проверить контрастность можно с помощью сервиса Webaim.
Текст на сайте слишком маленького размера и плохо считывается из-за низкой контрастности. С экрана компьютера можно прочитать информацию, а на экране мобильного телефона сделать это на улице в солнечный день будет сложно
Цветовую палитру выбирают до того, как рисовать макеты. Лучше не использовать в мобильной версии сайта много цветов, чтобы не создавать дополнительную когнитивную нагрузку для пользователя во время просмотра экрана.
6. Прокрутка
Основной пользовательский сценарий в мобильной версии лучше строить вокруг вертикальной прокрутки — это привычный паттерн взаимодействия со смартфоном. Горизонтальную прокрутку обычно используют точечно, например в карточках товаров, галереях или подборках контента.
7. Всплывающие окна
Всплывающие окна в мобильной версии стоит использовать осторожно: они занимают значительную часть экрана и могут мешать взаимодействию с сайтом. Если без них не обойтись, важно сделать их удобными для закрытия и не перекрывать ключевой контент.
Подборка сервисов для создания
Для работы над мобильной версией сайта веб-дизайнеры используют разные инструменты: от графических редакторов для создания макетов и прототипов до конструкторов сайтов, CMS и ИИ-сервисов для быстрого тестирования идей.
- Figma — онлайн-редактор, в котором можно создавать прототипы и проводить тестирование юзабилити. В России инструментом можно пользоваться с личных аккаунтов, корпоративные подписки недоступны.
- Sketch — графический редактор для macOS, в котором создают интерактивные прототипы. Из минусов: нет возможности командной работы над проектом.
- Lunacy — бесплатный графический редактор, доступный для Windows, Linux и macOS. Есть встроенные элементы графики: иконки, иллюстрации, стоковые фотографии и наборы готовых решений пользовательских интерфейсов. Работать над проектом можно вместе с командой в режиме реального времени.
- Tilda — конструктор сайтов для быстрого запуска мобильной версии без полноценной разработки. В нём есть автоматическая адаптация блоков под мобильные устройства, а отдельные элементы можно настраивать вручную.
- 1С-Битрикс — CMS, которую используют многие российские компании для корпоративных сайтов и интернет-магазинов. На её базе можно создавать отдельные мобильные версии сайта или настраивать мобильные шаблоны.
- ChatGPT и другие ИИ-помощники — помогают веб-дизайнерам быстрее продумывать пользовательские сценарии, структуру мобильных страниц, тексты для интерфейсов и первые концепции экранов. Такие инструменты не заменяют полноценного проектирования, но ускоряют рутинные задачи и этап поиска решений.
Со многими повседневными задачами дизайнера: от генерации идей до создания визуалов и ускорения рутины — могут помочь различные AI-инструменты, которые можно освоить на курсе «Нейросети для дизайна». Вы научитесь встраивать нейросети в рабочий процесс и использовать их так, чтобы делать проекты быстрее, качественнее и увереннее.
