[Перевод] Адаптивный дизайн как антипаттерн
Анимированная гифка показывает, что происходит на Invidious, когда я сужаю окно браузера на пару пикселей.
Полностью меняется компоновка элементов на странице: исходный трехколоночный макет вдруг меняется на одноколоночный, причем, первым делом идет содержимое того маленького столбца, что располагался с левого края и содержал совершенно не важную информацию.
Уверен, не я один часто сталкиваюсь с подобным. Лично мне нравится, когда окна моего браузера достаточно узкие, но в последние лет десять веб-страницы стали реагировать на такое предпочтение так, будто мне нужна мобильная, функционально урезанная версия страницы. Здесь кроется большая проблема, и не одна.
Пространственный газлайтинг
Одна из фундаментальных концепций, на которых основан дизайн Macintosh, первый по-настоящему клиент-ориентированный графический пользовательский интерфейс — это идея о пространственном упорядочивании человеко-машинных взаимодействий при работе с компьютером. Пользователя избавили от необходимости запоминать текстовые команды, чтобы обустраивать файлы на диске, а предоставили возможность тасовать файлы так, чтобы это было наглядно и — вот оно, озарение — запоминать их положение, как будто в пространстве. Пользователь мог вспомнить, куда положил файл, и не столь важно, как этот файл называется. Точно так мы запоминаем, куда положили кошелек, ключи или важный документ.
Такая идея пространственной ориентации фундаментальна для проектирования любых пользовательских интерфейсов и для веб-дизайна в частности. Когда пользователь снова и снова посещает ваш сайт, он постепенно разбирается, как здесь все устроено. Чем больше времени вы уделяете дизайну вашего сайта, тем эффективнее пользователи могут с ним управляться, и тем больше им будет нравиться ваш сайт. Задумывались когда-нибудь, почему так много громких скандалов в Вебе связано с редизайном? Вот вам и ответ. Пользователям не нравится, когда усилия, вложенные ими в осваивание сайта, перечеркиваются по прихоти дизайнера, что старый сайт дизайнеру просто наскучил.
Именно такова проблема, которая возникла у меня из-за адаптивного дизайна. Большинство реализаций адаптивного дизайна по сути напоминают редизайн вашего сайта всякий раз, когда пользователь меняет размер окна. Самый вопиющий пример такого рода — когда горизонтальная панель меню превращается в вертикальную. В трубу вылетает все то, что пользователь успел зрительно запомнить о расположении ссылок на панели! Думали, эта опция спрятана здесь? Нет же, она там!
Межсайтовая непоследовательность
Но даже если пользователям не нравится адаптивный дизайн, от него особо никуда не денешься. Масса примеров так называемого адаптивного дизайна реализуется при помощи медиа-запросов с применением CSS — по сути, это условные операторы, приказывающие браузеру ввести в дело набор правил CSS, если выполняются определенные условия, например, если ширина окна браузера превышает или не превышает заданное количество пикселов. Точное число в данном случае выбирает веб-дизайнер; соответственно, два разных веб-дизайнера почти никогда не выбирают одинаковую ширину.
Думаю, все согласятся, что на настольном ПК мы предпочитаем просматривать большинство веб-страниц в компоновке на всю ширину экрана. Есть исключения, в которых суженная версия страницы оказывается удобнее, но они редки, если не сказать — единичны. Как правило, работать с веб-страницей, развернутой на всю ширину, гораздо приятнее и легче.
Чтобы не иметь дела с суженными версиями веб-страниц, пользователю приходится самому регулировать ширину окна браузера, добиваясь, чтобы страница уместилась в окне целиком. Но, поскольку двое веб-дизайнеров почти никогда не укажут одну и ту же ширину в своих медиа-запросах, пользователю невозможно подобрать для окна такую ширину, в которую будут гарантированно укладываться полные версии любых веб-страниц, если только пользователь не сдастся и не удовлетворится полноэкранным режимом либо чрезмерно широким окном. Однако пользователю важно не только иметь доступ к полным версиям веб-страниц, но и удерживать в области видимости сразу множество окон, и именно по этой причине ширину отдельного окна приходится ограничивать.
Казалось бы, почему пользователь просто не отрегулирует размер окна, если попадет на веб-страницу, для просмотра которой требуется окно пошире. В конце концов, именно так приходилось действовать пользователю до появления адаптивного дизайна, когда была возможность просто переключаться между веб-страницами с заданной фиксированной шириной. Но на самом деле не все так просто: на неадаптивных страницах совершенно ясно, нужно ли изменить размер окна, чтобы в нем поместилась вся страница. А на адаптивной веб-странице пользователю ничто не подсказывает, «эй! В такое окно, как у тебя сейчас, вся страница не влезет». Нет ни полосы прокрутки, ни обрезки содержимого; в лучшем (или, полагаю, в худшем) случае есть меню-гамбургер или какой-нибудь другой странный «как бы мобильный» интерфейс.
Что делать пользователю?
Напрашивается мысль, что пользователь мог бы решить эту проблему, отключив поддержку медиа-запросов в браузере. Если бы все было так просто! Корень проблемы в том, что среди веб-дизайнеров распространена практика закреплять за медиа-запросом полноширинный вариант дизайна и по умолчанию выдавать мобильную версию. Отключив медиа-запросы, мы получим на таких страницах результат, ровно противоположный желаемому.
Рациональнее было бы каким-то образом заставить браузер придавать единую задаваемую пользователем ширину таблицам стилей и скриптам на всех веб-страницах. Это желательно хотя бы из соображений приватности.
Идеальное решение — предусмотреть возможность выявить медиа-запрос (при наличии такового), который включал бы для сайта полную ширину, и активировать его, при этом отключив все прочие медиа-запросы, связанные с выбором ширины окна. Потенциально такая возможность реализуема как браузерное расширение, при помощи JavaScript, который разбирал бы все медиа-запросы в таблице стилей, выборочно удаляя их по мере необходимости.
Что делать веб-дизайнеру?
Я оставил этот раздел напоследок, поскольку он самый важный. Все вышеизложенное подводит нас к простому выводу: веб-дизайнерам нужно долго и крепко обдумывать, как именно реализовать адаптивный дизайн.
Правда, на более высоком уровне следует задаться вопросом, а в чем вообще смысл адаптивного дизайна. Определенно, такой дизайн очень полезен: современные пользователи выходят в Интернет с самых разных устройств с различной шириной экрана, и эта проблема решается при помощи адаптивного дизайна. Но, возможно, проблема адаптивного дизайна в чрезмерной обобщенности такого решения. Он призван поддерживать работу с любыми мыслимыми размерами экрана, но на самом ли деле экраны столь разнообразны? Скорее, они, напротив, стандартизируются и подразделяются на немногочисленные, легко выделяемые категории. Вот такие:
- Настольный ПК/ноутбук
- Планшет
- Смартфон
Не будет ли пользователю гораздо удобнее, если бы дизайне сайта выполнялся отдельно для каждого из этих размеров экрана? Тогда пользователь мог бы с пользой потратить время на изучение интерфейса сайта, поскольку он выглядел бы единообразно на всех устройствах одного типа.
Поверить не могу, что говорю это, но, может быть, было бы лучше вернуться к обнаружению пользовательского агента, в той или иной форме:
let mobile = navigator.userAgent.match(/Mobi/);
let ipad = navigator.userAgent.match(/iPad/);
let android = navigator.userAgent.match(/Android/);
if (mobile && !ipad)
this is a phone
else if (ipad || android)
this is a tablet
Возможно, вышеприведенный код неполон, но, думаю, он покрывает многие базовые вещи. Просто убедитесь, что по умолчанию выдается версия сайта, рассчитанная на ПК, поскольку не все браузеры для ПК единообразно поддерживают JavaScript, а вот все смартфоны и планшеты — поддерживают.
Наши серверы можно использовать для разработки и хостинга сайтов.
Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!
