club762.ru
Отзывчивый дизайн – это самый ценный игрок в команде, королева бала и член зала славы в одном лице. Это такой веб-феномен, который позволяет владельцам WordPress-сайтов легко и недорого расширять доступность сайта для мобильных платформ.
Отзывчивый дизайн так быстро распространяется, что даже клиенты, которых можно вполне обвинить в информационном невежестве, просят сделать им отзывчивый сайт, даже не зная, что это означает.
В связи с этим мы подошли к следующему вопросу: приносит ли отзывчивый дизайн больше пользы, чем вреда? Препятствует ли он внедрению инноваций? Не сдерживает ли он развитие WordPress?
Мы одержимы отзывчивым дизайном. Практически каждая новая тема WordPress является отзывчивой; записи, демонстрирующие от 20 до 250 «крутых» отзывчивых тем для WordPress, публикуются с завидным постоянством. Mashable определил 2013 год как «год отзывчивого веб-дизайна».
Однако эта навязчивая идея попросту ослепила нас, в результате чего мы даже не задумываемся о том, что отзывчивый дизайн, каким бы умным он не был, имеет свои недостатки.
- Фокус на размерах экрана негативно сказывается на опыте взаимодействия
- Когда отзывчивый подход «всех под одну гребенку» может быть оптимальным?
- Отзывчивость убивает внедрение инноваций в WordPress-темы?
- Зачем быть реактивным, если можно быть просто проактивным?
- Так что, отзывчивость – это зло?
- Отзывчивый дизайн – это всего лишь один компонент
Фокус на размерах экрана негативно сказывается на опыте взаимодействия
Отзывчивый дизайн исходит из предположения, что единственная проблема – это размеры, и единственное решение – это сделать дизайн «адаптируемым» к различным устройствам, предложив всем людям положительный опыт взаимодействия.
Наши ожидания очень важны, поскольку между настольными компьютерами и планшетами имеется значительная разница. На десктопах наши ожидания были сформированы (зачастую) длительным опытом пользования. Это было постепенное путешествие, движимое растущими технологиями в сфере просмотра сайтов.
Планшеты – совсем другое дело. Взаимодействие с ними, молодое и дерзкое, будет выполняться скорее через приложение, нежели через браузер. Это оказывает заметное влияние на ожидания пользователей планшетов: люди ожидают увидеть интерфейс, близкий к приложениям, а также навигацию при помощи жестов.
Пользователи планшетов не хотят получить урезанный десктопный веб-сайт, но все же именно к этому приводит использование отзывчивого дизайна и фокусировки на размерах.
Когда отзывчивый подход «всех под одну гребенку» может быть оптимальным?
Отзывчивый дизайн зачастую идет по одному из двух путей: приоритет настольным компьютерам, т.е. все компоненты будут постепенно убираться, менять свое расположение при уменьшении размеров экрана; приоритет мобильным устройствам, т.е. добавление компонентов при увеличении размеров экрана.
Вне зависимости от того, какой подход выбран, эффективная оптимизация касается лишь одного типа устройств, и чем дальше устройство удалено от стартовой точки, тем менее оптимизированным будет взаимодействие.
Однако как быть, если издатели хотят поставить совершенно иной продукт пользователям планшетных устройств, используя тот же самый контент? Подход «всех под одну гребенку» сильно ограничивает данную возможность. Это именно то влияние, которое отзывчивость оказывает на инновации.
Отзывчивость убивает внедрение инноваций в WordPress-темы?
Новые WordPress-темы появляются буквально каждый день; CSS3 дизайн может быть великолепным, но он не является инновационным.
Все мы ценим то, что разработка тем отнимает время, деньги и ресурсы, однако близорукий фокус на отзывчивом дизайне и том предположении, что дизайн должен работать на всех устройствах, одновременно и сдерживает, и ухудшает дизайн тем.
А пока издатели стараются выпускать цифровые журналы, в которых сногсшибательные темы по типу H5Mag используются для публикации материалов с помощью WordPress. В каком месте этой темы спрятан мой опыт работы с приложениями? Почему для таких онлайн-публикаций выбран именно WordPress?
Зачем быть реактивным, если можно быть просто проактивным?
Один из самых значительных недостатков отзывчивого дизайна – это реактивный клиентский подход, который в контексте серверной системы управления контентом, такой как WordPress, выглядит совершенно лишним.
Если мы должны работать с одной темой, которая будет удовлетворять всем нашим требованиям, то тогда эта тема должна быть проактивной, она должна адаптироваться к серверной стороне в зависимости от устройств, выполняющих запрос, отправляя только те данные (HTML, CSS, Javascript и т.д.), которые будут необходимы пользователям.
Конечно, обнаружение устройств — это не то же самое, что расстановка контрольных точек в дизайне, однако разве будет небольшое смещение в том, как «отзываться» на изменение размеров, таким уж важным?
Возможно, проактивная адаптация должна проходить на более высоком уровне. В WordPress уже существует определение устройств, а также возможность замены тем, потому вместо адаптации отдельной темы можно просто взять тему, уже оптимизированную под устройство, совершающее запрос.
Разработчики могли бы даже предлагать «пакеты тем» с отдельными настраиваемыми темами для разных платформ.
Так что, отзывчивость – это зло?
Естественно, нет. Отзывчивый дизайн – это очень полезная техника, однако она должна использоваться в определенном контексте.
Здесь не подойдут споры о том, что лучше – адаптивная техника или отзывчивая, проактивная или реактивная. Самое лучшее решение – использовать обе техники. Адаптивное решение гарантирует то, что тема будет максимально близко подходить к оптимальному виду, но также будет включать в себя и отзывчивые элементы, позволяющие улучшить взаимодействие.
К примеру, мне нравится то, что когда я просматриваю таблицу английской премьер-лиги на сайте BBC со своего iPhone, я получаю краткие данные в портретном режиме и полную версию таблицы в ландшафтном режиме. Лично мне это кажется полезным. Сервер передает мне мобильную версию сайта (адаптивную) с дополнительными данными, которые, вероятнее всего, будут мною просмотрены (отзывчивые элементы). Сайт комбинирует в себе два подхода, чтобы улучшить мой опыт взаимодействия.
Это надлежащий контекстуальный отзывчивый дизайн.
Отзывчивый дизайн – это всего лишь один компонент
Неправильно говорить, что отзывчивый дизайн никому не выгоден. Уже один тот факт, что он используется многими владельцами сайтов, чтобы сделать сайты доступными на планшетах и смартфонах с минимальными затратами сил и средств, позволяет оправдать обман.
Доминирование отзывчивого дизайна вредит. Оно убивает инновации и позволяет владельцам сайтов, а также разработчикам тем самодовольно почивать на лаврах. Это простой обман пользователей, останавливающий эволюцию их опыта взаимодействия.
Обманутые пользователи обычно уходят в другое место. И владельцы сайтов, издатели последуют за ними.
Теперь давайте глубоко вдохнем, перестанем тешить себя иллюзиями об отзывчивом дизайне и дадим разработке тем WordPress новые перспективы. Давайте смешаем отзывчивый дизайн с некоторыми другими подходами; давайте в действительности использовать эти ниши; давайте создадим экосистему WordPress, которая предоставит оптимальный опыт посетителям и оптимальные возможности владельцам сайтов.
Давайте помешаем отзывчивому дизайну ставить палки в колеса WordPress.
Источник: wpmu.org
Имхо «отзывчивый» как-то режет слух. Я бы переводил как «адаптивный».
http://ru.wikipedia.org/wiki/Адаптивный_веб-дизайн
А по поводу статьи, я что-то не понял основной посыл и к чему призывают. Мол давайте то и это, а что именно?
В контексте данной статьи понятия отзывчивого (responsive) и адаптивного (adaptive) дизайна разделяются, а призывают их объединить, а также дать ход и другим нововведениям, чтобы не зацикливаться только на одной лишь отзывчивости, которая в итоге приводит к таким глупостям, как, к примеру, создание цифровых журналов, которые бы работали для разных устройств.
А в чём разница между отзывчивыми и адаптивным? Прочел вот habrahabr.ru/post/148224/ но яснее не стало ) По-моему никто толком не знает.
Ну вот в комментах дали одно объяснение:
«Отзывчивый дизайн состоит из трех компонентов: гибкая сетка, изображения и медиазапросы. В то время, как Адаптивный дизайн — это всего лишь адаптация статичного лэйаута без использования выше перечисленных составлящих.»
На подсознательном уровне я понимаю, в чем отличие, но так объяснить очень трудно. Да и видно, что пользователи тоже плохо понимают…
Я так понимаю отзывчивый это просто старый добрый резиновый шаблон, типа табличной вёрстки яндекса, где все размеры указаны в процентах. А адаптивный — под несколько определенных и заранее чётко заданных разрешений, и размеры каждого блока указаны в пикселях под каждое разрешение.
Напомните, как код в комментарии вставлять?
не знаю, получится ли вставить у посетителей, но вообще через [ php ] [ /php ] (без пробелов)
Ок, попробуем:
Отзывчивый дизайн (responsive):
.container { width: 90%; max-width: 1200px; margin: 0 auto; }Адаптивный (adaptive):
.container { width: 700px; } @media only screen and (max-width: 767px) and (min-width: 480px) { .container { width: 420px; } } @media only screen and (max-width: 767px) { .container { width: 300px; } }Из примера выше видно, что по сути отзывчивый дизайн можно назвать старым известным нам словом — резиновый дизайн, резиновая вёрстка, когда содержимое растягивается на весь экран, каким бы он ни был. Это еще в 2000-е, когда на таблицах верстали, делали резиновую вёрстку. Так что ничего в этом нового нет, обычный резиновый макет, который сегодня отчего-то стали звать responsive, хотя резиновый он был и есть.
На том же хабре комментаторы сами насоздавали лишней путаницы. В Википедии все хорошо описано.
Адаптивный дизайн — более широкое понятие по сравнению с отзывчивым дизайном, то бишь включает в себя все то, что характерно для отзывчивого дизайна, плюс добавляет, как это отмечено в википедии, «постепенное улучшение».
Что за постепенное улучшение, надо уже будет прочитать в первоисточнике, который предлагается в вики.
А еще вычитал, что «адаптивный дизайн» и «адаптивный макет» — разные вещи, и не стоит их смешивать.
Словом, нужно читать у Маркотта, который и ввел понятие отзывчивого дизайна.
Думаю, что вы правильно привели стили. На то и слово «адаптироваться», т.е. подстраиваться — добавление медиа-запросов, использование фиксированных значений и т.д.
Постепенное улучшение в том состоит, что он не тупо масштабируется при ресайзе экрана как резиновая таблица, а уже умеет скрывать определенные блоки в зависимости от размера экрана и даже менять дизайн вообще, в отличие от резиновой верстки которая выглядит всегда одинаково на всех разрешениях. Например размер экрана 1024, показываем блоки 1,2,3 (2,3 допустим сайдбары). Экран 800, показываем только 1 и 3. Экран 240, показываем только 1, а 2 и 3 меняют размер и идут под ним. Ну и так далее.
Да, собственно, такой подход и используется на том же wpmu.org.
По сути я так понимаю, адаптивный дизайн, это когда вместо одного CSS, прописаны стили для каждого разрешения, допустим для 3-х, 4-х разрешений и в зависимости от экрана выбирается нужное. В примере выше там для трех разрешений CSS прописан разный для одного и того же элемента «container».
Правда, в оригинальной статье Маркотта:
http://alistapart.com/article/responsive-web-design
также говорится об использовании CSS медиа-запросов. А статья носит название «Responsive Web Design», т.е. отзывчивый веб-дизайн.
При этом сам автор в своей статье проводит параллели с архитектурой, ссылаясь на новомодную дисциплину «Responsive architecture». В Википедии ее название перевели, как это несложно догадаться: http://ru.wikipedia.org/wiki/Адаптивная_архитектура.
Опять же, все это создает только лишнюю путаницу.
Даже если судить с точки зрения лингвистики, как архитектура может «адаптироваться»? Она может лишь отзываться на какие-либо внешние факторы, но никак не адаптироваться под них. Это лично мое мнение.