Хабр Курсы для всех
РЕКЛАМА
Большая витрина: от крупнейших школ до частных авторов. Сравнивайте по цене, длительности, формату и выбирайте самый подходящий курс!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 24
(ширина, отступы и поля задаются в процентах), а адаптивный макет предполагает, что для каждого размера экрана у нас используются свои стилевые правила, в которых жестко заданы фиксированные размеры элементов (в пикселях).
Возможно речь должна идти о скрытых дублирующих элементах макета отображающихся на разных размерах экранов, например: два разных меню отображаются на компе и смарте, как о существенной разнице, нежели px vs %.
Несмотря на возможность разделить эти два понятия, по мне так это одна из тех тем для бесконечных и бестолковых семинаров по переливанию из пустого в порожнее и конвертирования айтишников в очереди за халявным кофе с печеньками.
Ну и личный вопрос: что дает статья?
Эта статья дает ответ на вопрос, который возник при обсуждении моей предыдущей статьи «Книга Итана Маркотта «Отзывчивый веб-дизайн».
А вообще, иногда в жизни бывает полезным разложить все по полочкам.
А вообще, иногда в жизни бывает полезным разложить все по полочкам.
Напомнило вопрос, который будучи в общем-то несложным, сильно путал в студенческое время: чем отличаются аппроксимация и интерполяция?
По-моему термин «responsive» вообще не надо переводить. Отзывчивый это сочувственно относящийся к нуждам других. Responsive это реагирующий быстро и с готовностью. То есть даже если в словаре эти слова даются как перевод друг друга, то по значению они всё же совсем различные.
Дизаин сочувственно относится ко всех разрешениям и размерам окна.
а Вы ни когда не слышали про омонимы?
А каким, на ваш взгляд, был-бы правильный перевод для Inception? Поглощение?
Яснее не стало как ни странно. Лучше бы эти понятия вообще не возникали никогда.
Осталось понять — что такое прогрессивное улучшение.
Progressive enhancement — техника в веб-дизайне подразумевающая процесс создания веб-сайта изначально предоставляя пользователям как можно более простое представление контента на странице и прогрессивно улучшая внешний вид и функционал в зависимости от железа, браузера и скорости соединения.
Progressive enhancement идеально сочетается с техникой Mobile First, когда высший приоритет отдается мобильной платформе. Таким образом на мобильных платформах получаем самый простой и удобный интерфейс наращивая его функционал для более мощных систем.
Graceful degradation — противоположная по смыслу техника, то есть начинаем с полноценного веб-сайта (сложный дизайн, миллион скриптов и т.д.) и отключаем по компоненту по мере возможностей устройств.
Progressive enhancement идеально сочетается с техникой Mobile First, когда высший приоритет отдается мобильной платформе. Таким образом на мобильных платформах получаем самый простой и удобный интерфейс наращивая его функционал для более мощных систем.
Graceful degradation — противоположная по смыслу техника, то есть начинаем с полноценного веб-сайта (сложный дизайн, миллион скриптов и т.д.) и отключаем по компоненту по мере возможностей устройств.
Правильно ли я понимаю:
В итоге получаем одно и то же, только разными путями? Если фичи поддерживаются браузером, то они есть, если не поддерживаются — то нет.
То есть в чем разница, если все равно верстается полный макет (по-максимуму, с плюшками), потом уже оживляется с помощью server-side'a. Или при PE верстается простой макет, создается сайт и потом уже постепенно наращиваются плюшки?
В общем кто действительно понимает — можете описать подробнее, с примерами, или дать ссылку на действительно хорошую статью на русском/английском?
- PE — начали с простого layout'a, но если браузер поддерживает, добавляются всякие плюшки.
- GD — начали со сложного (с плюшками), если браузер не поддерживает, получается простой layout.
В итоге получаем одно и то же, только разными путями? Если фичи поддерживаются браузером, то они есть, если не поддерживаются — то нет.
То есть в чем разница, если все равно верстается полный макет (по-максимуму, с плюшками), потом уже оживляется с помощью server-side'a. Или при PE верстается простой макет, создается сайт и потом уже постепенно наращиваются плюшки?
В общем кто действительно понимает — можете описать подробнее, с примерами, или дать ссылку на действительно хорошую статью на русском/английском?
Разница в том, что пользуясь техникой Graceful Degradation мы делаем сверкающий миллионами лампочек веб-сайт, а потом начинаем мучатся, как же его нормально подогнать под IE.
Работая по технике Progressive Enhancement начинаем с самого простого, тем самым обеспечивая поддержку того же IE, и постепенно наращиваем функционал вплоть до того, что применяются стандарты, которые еще не поддерживаются всеми браузерами. Так у нас есть возможность постоянно смотреть в будущее. Работать таким образом намного проще.
Graceful Degradation — техника прошлого, по ней работали всегда. А Progressive Enhancement появилась с приходом новых стандартов (CSS3, HTML5).
Первая страница выдачи содержит ссылки на статьи, в которых очень хорошо описаны обе техники — ссылка.
Работая по технике Progressive Enhancement начинаем с самого простого, тем самым обеспечивая поддержку того же IE, и постепенно наращиваем функционал вплоть до того, что применяются стандарты, которые еще не поддерживаются всеми браузерами. Так у нас есть возможность постоянно смотреть в будущее. Работать таким образом намного проще.
Graceful Degradation — техника прошлого, по ней работали всегда. А Progressive Enhancement появилась с приходом новых стандартов (CSS3, HTML5).
Первая страница выдачи содержит ссылки на статьи, в которых очень хорошо описаны обе техники — ссылка.
Хм. При GD мы делаем сайт, «сверкающий миллионами лампочек», но мы не мучаемся подгонкой под IE. Мы сверстали так, что функциональность сохраняется и под IE, но часть фич не работает — скругленные уголки, тени и т.п. Graceful degradation можно перевести как «изящная деградация», то есть не такого, что пользователь не может что-то сделать, просто некоторые плюшки могут не работать и чтобы сделать это что-то придется кликнуть лишний раз, перезагрузить страничку и т.п.
То есть получается очень похоже — если браузером не поддерживаются какие-то фичи, то пользователь видит упрощенную версию сайта. И при Progressive Enhancement получается тоже самое — упрощенная версия, если не поддерживаются новые фичи.
В итоге результат то схожий, только пути достижения разные… Хотя, действительно, попробую почитать конкретные VS-статьи, а то раньше читал только либо про то, либо про другое, в сравнении не смотрел.
То есть получается очень похоже — если браузером не поддерживаются какие-то фичи, то пользователь видит упрощенную версию сайта. И при Progressive Enhancement получается тоже самое — упрощенная версия, если не поддерживаются новые фичи.
В итоге результат то схожий, только пути достижения разные… Хотя, действительно, попробую почитать конкретные VS-статьи, а то раньше читал только либо про то, либо про другое, в сравнении не смотрел.
Интересно, я всегда был уверен, что Адаптивный дизайн является частью Отзывчивого, а не наоборот. Вот довольно развернутая статья подкрепленная словами авторов указанных здесь книг — Responsive & Adaptive Web Design.
И я согласен с выводом ее автора. Отзывчивый дизайн состоит из трех компонентов: гибкая сетка, изображения и медиазвпросы. В то время, как Адаптивный дизайн — это всего лишь адаптация статичного лэйаута без использования выше перечисленных составлящих.
И я согласен с выводом ее автора. Отзывчивый дизайн состоит из трех компонентов: гибкая сетка, изображения и медиазвпросы. В то время, как Адаптивный дизайн — это всего лишь адаптация статичного лэйаута без использования выше перечисленных составлящих.
Мне кажется, что понятия преследуют одну цель — заставить выглядеть сайт замечательно в не зависимости от разрешения или девайса. А раз так, то какой смысл в спорах? Юзаем то, что лучше подходит/больше нравится… profit!
Так и не понял вот эта подборка это адаптивный или отзывчивый дизайн?
Адаптивно-отзывчивый: разбираемся в терминологии — неплохая наглядная статья на эту же тему.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Адаптивный веб-дизайн vs. Отзывчивый веб-дизайн, в чем разница?