При создании корпоративного сайта адаптивные страницы чаще всего страдают не из-за технической невозможности реализации, а из-за недостаточно продуманной организации контента. Многие страницы выглядят полноценно на десктопе, но на телефоне превращаются в длинную вереницу stacked-модулей, и посетителю приходится долго прокручивать, чтобы найти контакты. Чтобы избежать этого, при планировании страницы следует сначала определить контрольные точки, затем выстроить порядок модулей и в конце проверить каждый экран на реальных устройствах.
Сначала определите контрольные точки, а не рисуйте мобильную версию
Контрольная точка — это ширина экрана, при которой изменяется макет страницы. В корпоративных сайтах обычно используют несколько основных контрольных точек, ориентируясь на три типа устройств: телефон, планшет и десктоп, а затем добавляют одну-две промежуточные точки в зависимости от фактического контента. Чем больше контрольных точек, тем выше затраты на поддержку и проверку, поэтому не стоит стремиться к их увеличению.
При определении контрольных точек рекомендуется сначала посмотреть данные о посещениях: если в панели администратора видно распределение устройств посетителей, в первую очередь обеспечьте удобство просмотра для самой многочисленной категории; если данных пока нет, можно начать с приоритета мобильных устройств, а затем десктопа. После определения контрольных точек зафиксируйте их в дизайн-документе или документации по разработке, чтобы разные страницы не использовали разные стандарты.
Выстраивайте модули по приоритету контента, а не по визуальному порядку десктопной версии
Десктопные страницы обычно имеют двухколоночную или многоколоночную компоновку, а на мобильных они могут располагаться только вертикально. В этом случае真正 нужно решить: какой блок контента должен появиться первым. Практичный метод — составить список модулей страницы и задать себе вопрос: что посетитель хочет увидеть в первую очередь, открыв эту страницу?
Рассмотрим несколько типовых страниц корпоративного сайта:
- Главная: краткое описание бренда или деятельности, вход в основные продукты или услуги, контакты или форма обращения — в начале; информация о компании, новости и т.д. — далее.
- Страница продукта или услуги: название продукта и ключевая информация, сценарии применения или спецификации, вход для консультации; подробная таблица параметров может быть размещена ниже, при необходимости в раскрывающемся виде.
- Страница кейсов: отрасль или тип кейса, проблемы клиента, ключевые решения, затем изображения и детали.
- Страница «О нас»: позиционирование компании, основные направления деятельности, информация о команде или квалификации, контакты в легкодоступном месте.
Этот порядок не является фиксированным шаблоном, но критерий оценки един: первый экран на мобильном должен дать посетителю понять, о чём эта страница и что можно сделать дальше.
Работа с изображениями, таблицами и длинными текстами
Проблемы адаптивных страниц чаще всего сосредоточены в трёх типах контента.
Изображения: одно и то же изображение на телефоне и десктопе отображается в сильно разных размерах. При планировании обратите внимание, не обрезаются ли ключевые части изображения на узких экранах, особенно баннеров с текстом. Если изображение содержит важный текст, рекомендуется заменить его на реальный текст на странице, а не встраивать в картинку.
Таблицы: широкие таблицы сложно полностью отобразить на телефоне. Заранее решите: сделать таблицу с горизонтальной прокруткой или разбить столбцы на отдельные элементы, расположенные вертикально. Если столбцов много, разбивка на элементы обычно удобнее для чтения. Это решение нужно согласовать с разработчиком до вёрстки страницы, а не менять после запуска.
Длинные тексты: на десктопе в строке помещается много символов, на телефоне — мало, и абзацы становятся длиннее. При планировании контролируйте длину абзаца, разбивайте большие блоки на несколько маленьких, при необходимости используйте подзаголовки — это снижает нагрузку на чтение с мобильных.
Навигация и точки действий на узких экранах
Горизонтальная навигация на десктопе на телефоне обычно сворачивается в кнопку меню. Здесь нужно проверить: понятна ли иерархия разделов после раскрытия меню, может ли посетитель найти нужную страницу без возврата на уровень выше. Если иерархия глубокая, можно уменьшить количество уровней в мобильном меню и вынести часто используемые разделы вперёд.
Точки действий включают кнопки консультации, телефон, отправку формы и т.д. На мобильных они должны оставаться кликабельными и не перекрываться другими элементами. Область нажатия кнопки должна быть достаточно большой, чтобы соседние кнопки не располагались слишком близко и не вызывали ошибочных нажатий.
Проверка по экранам на реальных устройствах перед запуском
После завершения страницы рекомендуется проверить её в следующем порядке:
- Откройте страницу на телефоне, планшете и десктопе, прокрутите от начала до конца, зафиксируйте содержимое каждого экрана.
- Проверьте, объясняет ли первый экран тему страницы и есть ли на нём доступные точки действий.
- Проверьте, не обрезана ли ключевая информация на изображениях, нормально ли отображается таблица.
- Проверьте, полностью ли раскрывается меню навигации, соответствуют ли названия разделов содержанию страницы.
- Проверьте, доступны ли на узких экранах входы для консультации, телефона, формы.
- Зафиксируйте найденные проблемы по страницам, после исправления проверьте ещё раз на тех же устройствах.
Если на сайте несколько шаблонов страниц, например главная, страница раздела, страница детали, рекомендуется проверить хотя бы по одному представителю каждого шаблона, а не только главную.
Включите адаптивную организацию в повседневную практику
Адаптивная страница не является неизменной после запуска. При последующем обновлении контента новые изображения, таблицы и тексты также должны проверяться по указанным выше критериям. Удобный подход — добавить в процесс публикации контента шаг: перед официальной публикацией нового модуля посмотрите его на мобильной ширине, убедитесь в отсутствии переполнения, перекрытий или нарушения порядка. Это позволит отсеять большинство проблем до публикации и сократить последующие доработки.
