Как адаптировать адаптивный дизайн собственного сайта бренда для экранов смартфонов?

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

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

Сначала определите, какую информацию важно показать на телефоне в первую очередь

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

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

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

Используйте гибкую верстку для экранов разного размера, а не только для одной модели телефона

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

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

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

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

Обеспечьте возможность отправить запрос или оформить покупку с телефона

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

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

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

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

Включите производительность и доступность в требования к сдаче проекта

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

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

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

Включите проверку мобильной версии в этапы проекта

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

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

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

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