Если ваши пользователи требуют переключения между настольными и мобильными макетами , возможно, ваш адаптивный веб-дизайн оказался не таким успешным, как вы ожидали. Вот семь соображений, прежде чем прыгнуть на RWD подножку …
1. Зачем использовать адаптивный веб-дизайн?
RWD — дешевый вариант; Вы можете переориентировать существующий макет рабочего стола, чтобы убедиться, что он хорошо работает на меньшем мобильном устройстве. Если вы разрабатываете новый сайт, есть несколько причин не использовать RWD.
Тем не менее, вы рассматриваете RWD, потому что это недорогой способ отметить несколько целей бизнес-стратегии? Конечно, вы можете реализовать мобильную верстку в течение нескольких часов, но будет ли это полезно? Это обычно очевидно, когда отзывчивый дизайн был добавлен в качестве запоздалой мысли. Может быть, лучше придерживаться хорошего макета рабочего стола, чем подрывать ваше присутствие в Интернете.
2. Рассмотрим контекст, но …
… избегать стереотипов.
Исторически дизайнеры считали настольные программы просмотра статичными, а пользователи смартфонов — роумингом. Железнодорожная компания обычно выделяет покупку билетов на настольных устройствах и указание станций на мобильных устройствах. У этого подхода есть пара проблем:
- границы стали размытыми. Люди используют любое практичное устройство, например, они могут путешествовать по сети во время просмотра телевизора.
- RWD ничего не раскрывает в контексте. Разрешение устройства — это грубое предположение, особенно если учесть дисплеи высокой плотности, предлагаемые современными телефонами и планшетами.
Если статические и роуминг-пользователи имеют разные контексты, может быть предпочтительным предоставить отдельные мобильные сайты или приложения, которые имеют выделенные функции.
3. Перегоните ваш контент
Почему люди посещают ваш сайт? Что важно для этих пользователей? Какое их типичное путешествие? Без этих ответов у вас возникнет соблазн выкинуть все на домашнюю страницу. Это может быть возможно на большом дисплее, но вам будет сложно переключиться на мобильную раскладку.
Лучший вариант: сначала подумай о маленьком экране , а потом…
4. Дизайн вверх
Если у вас есть дизайн для самого маленького практического экрана, вы можете работать вверх в серии точек останова медиазапроса.
Хотя строгих правил нет, шаги точки останова не должны быть большими — возможно, не более 200 пикселей. Тем не менее, каждый шаг не должен быть основным повторным потоком, таким как дополнительные столбцы; это может быть изменение размера шрифта, плавающие изображения или другая простая настройка.
5. Держите это жидким
В идеале ваш дизайн должен быть плавным между точками останова, а не фиксированным. В то время как фиксированные макеты легче понять и кодировать, они слишком хрупки для RWD (см. Является ли ваш отзывчивый веб-дизайн слишком хрупким? )
В идеале, даже ваши медиа-запросы должны использовать пропорциональные единицы, такие как%, em и rem вместо пикселей.
6. Никогда не соглашайтесь
RWD никогда не должен использоваться для предоставления разбавленной версии вашего сайта. В некоторых случаях вам следует рассмотреть дополнительные возможности на мобильных устройствах, такие как геолокация и автономная поддержка. Держите это простым и легким в использовании:
- не используйте браузер сниффинг
- не отключайте масштабирование
- не скрывать содержание
7. Только вопросы эффективности
RWD может быть дешевым в реализации, но его следует планировать с самого начала. Применение RWD к сайту, на котором размещаются страницы объемом более 1 МБ, никогда не приведет к оптимальной работе на устройствах, работающих в мобильной сети.
Адаптивный веб-дизайн — одна из самых важных технологий, появившихся в последние годы. Но плохое использование RWD может быть хуже, чем не предлагать его вообще.