Веб-разработчик
11,2
рейтинг
21 июля 2012 в 23:46

Разработка → Адаптивный веб-дизайн vs. Отзывчивый веб-дизайн, в чем разница? перевод

Адаптивный веб-дизайн vs. Отзывчивый веб-дизайн

С тех пор, как вышли книги «Adaptive Web Design» Аарона Густафсона и «Responsive Web Design» Итана Маркотта (русское издание называется «Отзывчивый веб-дизайн»), в сообществе веб-дизайнеров и разработчиков ведутся споры о том, чем отличаются эти 2 подхода. Одни считают, что эти 2 понятия являются синонимами, а другие, что это совершенно разные понятия. Но, как известно, истина всегда где-то посередине, поэтому предлагаю вашему вниманию перевод статьи финского веб-дизайнера и разработчика Вильями Салминена (Viljami Salminen) «Adaptive vs. Responsive, what’s the difference?»:

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

«Отзывчивый веб-дизайн» (Responsive Web Design) является частью более широкого понятия, которое называется «Адаптивный веб-дизайн» (Adaptive Web Design). Когда идет речь об отзывчивом веб-дизайне, то мы имеем в виду только макет веб-страницы (Итан Маркотт, «резиновый» макет, гибкие изображения и медиазапросы).

С другой стороны, «Адаптивный веб-дизайн» включает в себя гораздо больше, чем просто «резиновый» макет. На практике это почти одно и то же, что и прогрессивное улучшение (progressive enhancement), если говорить кратко, то это понятие означает, что мы стремимся предоставить лучшие возможности для максимально широкой аудитории. Также: нельзя смешивать понятия «Адаптивный веб-дизайн» и «Адаптивный макет» (Adaptive layout), т.к. это совершенно разные вещи.

И, наконец, «Адаптивный макет» означает макет, сделанный путем сочетания множества фиксированных горизонтальных размеров (ширины). Сейчас, мне кажется, если все сделано правильно и блоки фиксированной ширины сочетаются с «резиновыми» блоками, то Адаптивный макет можно считать одной из форм отзывчивого веб-дизайна, а не просто его альтернативой. Зельдман уже высказывал немного похожую идею в 2011 году в одной из записей своего блога.
Примечание переводчика. К сожалению, из текста Вильями Сальминена сложно понять, что такое «Адаптивный макет», поэтому я постараюсь объяснить, что это означает своими словами. Подход Итана Маркотта предусматривает использование «резинового» макета (ширина, отступы и поля задаются в процентах), а адаптивный макет предполагает, что для каждого размера экрана у нас используются свои стилевые правила, в которых жестко заданы фиксированные размеры элементов (в пикселях). Более развернутое описание данного подхода вы можете найти в статье «Switchy McLayout: An Adaptive Layout Technique» (перевод).

Структура адаптивного веб-дизайна

Ссылки



Update v1. Если моя статья сделала эти 2 понятия более сложными для восприятия, чем они есть на самом деле, то постараюсь объяснить все в двух словах: отзывчивый веб-дизайн является частью адаптивного. Отзывчивый веб-дизайн = «резиновый» макет, в то время как адаптивный веб-дизайн = «резиновый» макет + прогрессивное улучшение.
Перевод: Viljami Salminen
Андрей Тарицын @Taritsyn
карма
12,7
рейтинг 11,2
Веб-разработчик
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (24)

  • +3
    (ширина, отступы и поля задаются в процентах), а адаптивный макет предполагает, что для каждого размера экрана у нас используются свои стилевые правила, в которых жестко заданы фиксированные размеры элементов (в пикселях).

    Возможно речь должна идти о скрытых дублирующих элементах макета отображающихся на разных размерах экранов, например: два разных меню отображаются на компе и смарте, как о существенной разнице, нежели px vs %.

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

    Ну и личный вопрос: что дает статья?
    • +1
      Эта статья дает ответ на вопрос, который возник при обсуждении моей предыдущей статьи «Книга Итана Маркотта «Отзывчивый веб-дизайн».

      А вообще, иногда в жизни бывает полезным разложить все по полочкам.
      • 0
        На мой взгляд вопрос возник в переводе, а не в термине, несмотря на то, что и разницу вы вроде как нашли.
  • 0
    Напомнило вопрос, который будучи в общем-то несложным, сильно путал в студенческое время: чем отличаются аппроксимация и интерполяция?
  • +51
    • 0
      По-моему термин «responsive» вообще не надо переводить. Отзывчивый это сочувственно относящийся к нуждам других. Responsive это реагирующий быстро и с готовностью. То есть даже если в словаре эти слова даются как перевод друг друга, то по значению они всё же совсем различные.
      • +7
        Дизаин сочувственно относится ко всех разрешениям и размерам окна.
      • 0
        а Вы ни когда не слышали про омонимы?
        • 0
          В данном случае это не омонимы, а многозначное слово.
    • 0
      А каким, на ваш взгляд, был-бы правильный перевод для Inception? Поглощение?
      • +2
        внедрение или проникновение.
      • +1
        В самом фильме перевели как «Внедрение».
      • +4
        «Внедрение», однозначно. То, чем они там занимались — «extraction» (извлечение), и им надо было провести обратную процедуру — «inception» (внедрение).

        «Начало» там и правда вообще не к месту, несмотря на дословность перевода.
  • +6
    Яснее не стало как ни странно. Лучше бы эти понятия вообще не возникали никогда.
  • +10
    Осталось понять — что такое прогрессивное улучшение.
    • +5
      Progressive enhancement — техника в веб-дизайне подразумевающая процесс создания веб-сайта изначально предоставляя пользователям как можно более простое представление контента на странице и прогрессивно улучшая внешний вид и функционал в зависимости от железа, браузера и скорости соединения.

      Progressive enhancement идеально сочетается с техникой Mobile First, когда высший приоритет отдается мобильной платформе. Таким образом на мобильных платформах получаем самый простой и удобный интерфейс наращивая его функционал для более мощных систем.

      Graceful degradation — противоположная по смыслу техника, то есть начинаем с полноценного веб-сайта (сложный дизайн, миллион скриптов и т.д.) и отключаем по компоненту по мере возможностей устройств.
      • 0
        Правильно ли я понимаю:
        • PE — начали с простого layout'a, но если браузер поддерживает, добавляются всякие плюшки.
        • GD — начали со сложного (с плюшками), если браузер не поддерживает, получается простой layout.

        В итоге получаем одно и то же, только разными путями? Если фичи поддерживаются браузером, то они есть, если не поддерживаются — то нет.

        То есть в чем разница, если все равно верстается полный макет (по-максимуму, с плюшками), потом уже оживляется с помощью server-side'a. Или при PE верстается простой макет, создается сайт и потом уже постепенно наращиваются плюшки?

        В общем кто действительно понимает — можете описать подробнее, с примерами, или дать ссылку на действительно хорошую статью на русском/английском?
        • +1
          Разница в том, что пользуясь техникой Graceful Degradation мы делаем сверкающий миллионами лампочек веб-сайт, а потом начинаем мучатся, как же его нормально подогнать под IE.

          Работая по технике Progressive Enhancement начинаем с самого простого, тем самым обеспечивая поддержку того же IE, и постепенно наращиваем функционал вплоть до того, что применяются стандарты, которые еще не поддерживаются всеми браузерами. Так у нас есть возможность постоянно смотреть в будущее. Работать таким образом намного проще.

          Graceful Degradation — техника прошлого, по ней работали всегда. А Progressive Enhancement появилась с приходом новых стандартов (CSS3, HTML5).

          Первая страница выдачи содержит ссылки на статьи, в которых очень хорошо описаны обе техники — ссылка.
          • 0
            Хм. При GD мы делаем сайт, «сверкающий миллионами лампочек», но мы не мучаемся подгонкой под IE. Мы сверстали так, что функциональность сохраняется и под IE, но часть фич не работает — скругленные уголки, тени и т.п. Graceful degradation можно перевести как «изящная деградация», то есть не такого, что пользователь не может что-то сделать, просто некоторые плюшки могут не работать и чтобы сделать это что-то придется кликнуть лишний раз, перезагрузить страничку и т.п.

            То есть получается очень похоже — если браузером не поддерживаются какие-то фичи, то пользователь видит упрощенную версию сайта. И при Progressive Enhancement получается тоже самое — упрощенная версия, если не поддерживаются новые фичи.

            В итоге результат то схожий, только пути достижения разные… Хотя, действительно, попробую почитать конкретные VS-статьи, а то раньше читал только либо про то, либо про другое, в сравнении не смотрел.
  • 0
    Интересно, я всегда был уверен, что Адаптивный дизайн является частью Отзывчивого, а не наоборот. Вот довольно развернутая статья подкрепленная словами авторов указанных здесь книг — Responsive & Adaptive Web Design.

    И я согласен с выводом ее автора. Отзывчивый дизайн состоит из трех компонентов: гибкая сетка, изображения и медиазвпросы. В то время, как Адаптивный дизайн — это всего лишь адаптация статичного лэйаута без использования выше перечисленных составлящих.
  • 0
    Мне кажется, что понятия преследуют одну цель — заставить выглядеть сайт замечательно в не зависимости от разрешения или девайса. А раз так, то какой смысл в спорах? Юзаем то, что лучше подходит/больше нравится… profit!
  • 0
    Так и не понял вот эта подборка это адаптивный или отзывчивый дизайн?
    • 0
      Судя по названию на английском (Responsive Website Templates) – это шаблоны отзывчивых веб-сайтов. Поскольку отзывчивый веб-дизайн является частью адаптивного, то русский перевод вполне обоснован.
  • 0
    Адаптивно-отзывчивый: разбираемся в терминологии — неплохая наглядная статья на эту же тему.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.