Почему «отзывчивый» веб-дизайн не должен рассматриваться?


9

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

Концепция «отзывчивого» веб-дизайна вращается вокруг использования медиазапросов в CSS3 для определения размера устройства просмотра и соответствующей корректировки правил CSS - по сути, динамического CSS. Это заполняет пустоту во многих случаях развертывания - в частности, мобильных.

Я думаю, что медийные запросы появляются медленно (я обнаружил, что многие люди не знают об этом), но мне интересно, есть ли причина для медленного принятия. Это непрактично для веб-приложений? Я что-то упускаю, что может быть фундаментальной ошибкой?


2
Многие люди просто невежественны и не изучают новые методы.
Райнос

@Raynos, но учиться так весело!
Nic

1
Может быть потому, что со временем скорость интернета увеличивается, а адаптивность перестает быть реальной проблемой, а усилия больше не оправданы? Может быть, я ошибаюсь, потому что эта идея выглядит круто!
WinW

1
Мигрировать на webmasters.SE?
Питер Тейлор

Ответы:


9

Вы должны прыгать через обручи, чтобы заставить его действительно работать. Для сайта, который я разрабатываю, я использовал @media (max-width:800px)для определения таблицы стилей для телефонов и других небольших экранов. Но он не использовался, например, iPhone.

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


Так что и Zurb Foundation, и Twitter Bootstrap справляются с этим довольно хорошо. Требуется немного JavaScript для обработки переключения по требованию. Также есть настройки DPI и т. Д. Использование этих CSS-фреймворков делает это действительно простым делом. Или, по крайней мере, их части.
Берин Лорич,

Стоит отметить, что этот вопрос и ответ возникли 6 лет назад и могут не отражать текущие показатели усыновления.
Питер Тейлор

Ах, прости. Это было в главной ленте вчера по некоторым причинам. Не думал проверить дату.
Берин Лорич,

4

Я не могу говорить за всех, но из моего собственного опыта время и деньги были решающим фактором. Мои коллеги и я всегда следим за последними новостями, но разработка и реализация различных макетов для устройств разного размера является большой проблемой. Особенно с учетом того, что на моем 3-летнем Nokia 5800 все наши сайты выглядят нормально - полоса, которую мне приходится прокручивать, чтобы получить содержимое боковой панели. Мы разрабатываем и внедряем сайты для небольших компаний и самозанятых людей.

Другая причина, которая может быть действительной, заключается в том, что обслуживание совершенно отдельного веб-сайта для мобильных версий с отдельной картой сайта ( http://www.google.com/support/webmasters/bin/answer.py?hl=ru&answer=34648 ), простой и начальный способ поддержки сайта.


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

Что ж, я должен добавить, что в нашем случае клиент фактически передал мобильную версию конкуренту :( Я бы лично использовал шаблоны, а не другой сайт.
Pelshoff

2

Если вы можете гарантировать надежное восстановление данных, все в порядке.

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

Как насчет браузера телефона, который переключает альбомный / портретный режим при повороте телефона? А как насчет браузера, у которого просто слишком маленькое разрешение, и люди обычно используют увеличение, но вы уже адаптировались к заявленному, слишком маленькому разрешению, и страница становится нечитаемой?

Просто следуйте стандартным рекомендациям по созданию достойного универсального, масштабируемого CSS и позвольте браузеру обрабатывать масштабирование страницы до нужного разрешения.


9
В CSS3 появилась новая функция, которая позволяет динамические правила для разных размеров экрана, которые изменяются автоматически.
Штефан Донал

@Ruirize Точно - используйте статический CSS, который имеет правила, которые динамически адаптируют контент - хорошо. Запросить динамически сгенерированный CSS с правилами, статически устанавливающими контент для вашего размера экрана - нет.
SF.

2
ОП говорит об использовании медиазапросов, которые динамически настраивают на основе (помимо прочего) размера экрана. Не загружены дополнительные файлы.
Трэвис Норткатт

1
@SF .: попробуйте изменить размер окна Календаря Google (новая красная тема, а не старая синяя), это ужасно круто, как они справляются с этим.
Ли Райан

2
@SF: в оригинальном сообщении говорилось о медиа-запросах, а не об использовании различных CSS на основе заголовков или без.
Pewpewarrows
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.