Веб–дизайн для мобильных устройств: все, что надо знать при разработке

Совсем недавно разработка дизайна мобильного сайта воспринималась владельцами бизнеса как небольшое дополнение к основной, десктопной версии. В лучшем случае, пользователи, предпочитающие просматривать Интернет-страницы с экранов планшетов и смартфонов, получали «урезанную» версию основного портала, предназначенного для ПК, а в худшем – были вынуждены мириться с адаптивным вариантом ресурса, который не всегда был удобен для взаимодействия.

С течением времени меняются приоритеты, которые и задают тренды в веб–разработке. Согласно последним исследованиям, на мобильный трафик приходится более 60% от общего количества глобального трафика, а число покупок, совершаемых со смартфонов, уже превысило отметку в 45%. Это выводит создание удобного приложения для мобильных устройств на первый план, ставя перед разработчиками совсем иные задачи.

 В статье поговорим о том, как не отстать от конкурентов, сделавших ставку на мобильный UX/UI, и создать сайт, пользоваться которым со смартфона будет одно удовольствие.

Полноценный дизайн мобильной версии сайта или адаптивная версия: что выбрать?

Существует два способа адаптировать сайт для небольших экранов. Начнем с более сложного пути.

Создание мобильной версии сайта

Под этим подразумевается разработка уникального портала, дизайн которого копирует основную версию, но, при этом, сохраняет функциональность на устройствах с небольшим экраном. По сути, перед разработчиками стоит задача создать два отдельных проекта, привязанные к разным доменным именам. Когда посетитель входит на основной сайт со смартфона, система перенаправляет его на URL c префиксом «m», который и обозначает мобильную версию.

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

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

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

Наиболее логичной и менее затратной стратегией является выбор в пользу адаптивного дизайна основного портала, который часто называют респонсивным. Это позволяет сайту при изменении размера окна браузера плавно подстраиваться под экран, с которого пользователь просматривает страницу. Отдельные элементы веб–ресурса, включая текст или визуальный контент, остаются читаемыми и удобными для взаимодействия вне зависимости от диагонали.

Использование адаптивного дизайна облегчает обновление контента и управление ресурсом в целом: и мобильная, и основная версии имеют единый код. Кроме того, роботы поисковых систем воспринимают адаптивность как еще один «плюс в карму» сайта: портал остается удобным пользователям, которые предпочитают смартфоны, а значит – получает более высокое положение в выдаче.

Однако адаптивный дизайн мобильной версии сайта может вызвать сложности при верстке: при изменении размера отдельные элементы могут не всегда корректно работать, а отображение на всех устройствах требует более тщательной настройки медиазапросов. Кроме того, реализовать некоторые визуальные эффекты на устройствах с небольшим экраном возможно не всегда.

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

Мобильная адаптация: основные принципы, которые должны стать аксиомой

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

Иерархия контента

Это структурирование всей информации, представленной на веб–ресурсе таким образом, чтобы она была понятной и логичной для посетителя, и, в конце концов, вела к выполнению определенного целевого действия. К основным принципам выстраивания иерархии контента относится:

• Логика. Путь к целевому действию должен быть привычным для посетителя площадки. Так, если речь идет об интернет-магазине, то у пользователя сначала должна быть возможность ознакомиться с характеристиками товаров, и только потом – перейти к оформлению покупки;
• Визуальная структура. Длинные тексты не всегда удобно читать с мобильного, а если речь идет о поиске нужной информации – сделать это с небольшого экрана смартфона и вовсе проблематично. Выделяйте заголовки и подзаголовки, выносите отдельными начертаниями (например, жирным или курсивом) главные тезисы, используйте маркированные и нумерованные списки, чтобы привлечь внимание посетителя к самому важному.

Управление пространством

Умение использовать все полезное пространство даже на небольшом экране – ключевой момент при создании положительного пользовательского опыта. Для этого необходимо:

• Использовать «отзывчивые» элемента дизайна. Убедитесь, что размер каждой формы, кнопки и другого элемента дизайна, с которым будет взаимодействовать юзер, удобен для сенсорных экранов. Не забывайте, что для кликов и других действий пользователь будет применять не тачпад или мышь, а пальцы. Нажатия, прокрутка, заполнение полей не должно вызывать сложностей.
• Применять Flexbox и резиновую верстку. Для того чтобы адаптировать портал под устройства с разной диагональю, учитывайте особенности разных типов верстки. Это значительно ускорит процесс работы над проектом.
• Скрывать ненужное. Чтобы не мешать просмотру основного контента, на устройствах с небольшим экраном можно скрывать отдельные элементы интерфейса, оставляя только самое важное.

Производительность

Скорость загрузки всех элементов сайта, «отзывчивость» ресурса играют не последнюю роль в создании положительного пользовательского опыта. Более 50% посетителей закрывают площадку, если ее загрузка занимает свыше 3 секунд. Как улучшить этот показатель, особенно в мобильной версии?

• Использовать «чистый код». Минимальная длина и отсутствие ошибок сокращают время отклика сервера.
• Оптимизировать тяжелый контент. Сжимайте изображения без потери качества, чтобы страницы загружались быстрее.

Тестирование и оптимизация работы

После разработки макета важно проверить, как отдельные элементы сайта ведут себя в «полевых условиях», особенно если вы использовали адаптивный дизайн, а не разрабатывали отдельное приложение.

• Проверьте кроссбраузерность. Проект должен корректно отображаться в разных программах для интернет–серфинга.
• Загрузите портал с разных устройств. Протестируйте сайт со смартфонов и планшетов с разной диагональю устройства.
• Собирайте обратную связь от пользователей. Провести А/В тестирование или «коридорный» тест до полноценного запуска экономически выгодней, чем исправлять ошибки, найденные в уже готовом проекте. Покажите свой макет нескольким группам пользователей, состоящих из представителей вашей целевой аудитории, чтобы понять, как доработать дизайн и что следует исправить на этапе предварительной подготовки.

Топ-5 удачных мобильных дизайнов

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

VK

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

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

Яндекс

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

Сбербанк

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

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

Avito

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

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

Lamoda

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

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

Taptop: оптимальное решение для любой бизнес–ниши

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

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

Зачем тратить время, силы и средства на поиск оптимальных решений, если все уже придумано за вас? Не нужно «изобретать велосипед»: выбирайте Taptop для воплощения в жизнь своих идей в веб–дизайне, а технические вопросы мы возьмем на себя, чтобы вы могли сосредоточиться на более важных задачах.