Самый эффективный способ обслуживания различных веб-устройств?

Люди, голосующие за закрытие как неконструктивное, прочтите, пожалуйста, полностью. Конкретные вопросы в конце. Ищем реальные примеры и подходы.

Контекст

При большом количестве устройств, таких как смартфоны и планшеты, которые все чаще используются для доступа в Интернет, важно планировать, проектировать (адаптивно) и разрабатывать (особенно ваш интерфейс), чтобы устройства были быстрыми и адаптированными для пользователей.

Строятся удивительные сайты. Взгляните на mediaqueri.es (измените размер браузера)

Мы видим такие подходы, как

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

Вопросы)

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

Вещи, которые я ищу:

  • Это чистый CSS / JS / HTML подход, или на стороне сервера, или их комбинация - почему?
  • Каждое устройство получает только те ресурсы (изображения и т. Д.), Которые ему необходимы, поэтому оно хорошо работает.
  • Сопровождение сайта проще, т.е. добавление / изменение функций не является большой проблемой.
  • Некоторые примеры кода всегда полезны
  • оставим старые дерьмовые браузеры, такие как IE7 и ниже

mobile html css responsive-design media-queries
person Moin Zaman    schedule 25.10.2011    source источник
comment
Я все равно собирался поставить +1, но old shitty browsers like ie7 довел до конца ;-)   -  person Bojangles    schedule 25.10.2011
comment
В отличие от IE ›7, которые просто хреновые, а не старые.   -  person Shai Mishali    schedule 25.10.2011
comment
Мне захотелось сказать, например, ie8 и ниже :)   -  person Moin Zaman    schedule 25.10.2011
comment
Над IE весело смеяться, но давайте не будем отказываться от IE7, если в этом нет необходимости. Многие корпоративные пользователи до сих пор на нем застревают ...   -  person D'Arcy Rittich    schedule 25.10.2011

Ответы (3)


arrow_upward
4
arrow_downward

Я думаю, что вы ищете адаптивный веб-дизайн.

Видеть:

http://www.alistapart.com/articles/responsive-web-design/
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

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

Для обсуждения некоторых недостатков, например, изменения размера изображения в браузере (хотя вы можете обойти это с помощью CSS и / или AJAX), см .:

http://www.webdesignshock.com/responsive-design-problems/

person D'Arcy Rittich    schedule 25.10.2011
comment
+1. Сложной частью адаптивного дизайна является упомянутое требование: Каждое устройство получает только те ресурсы (изображения и т. Д.), Которые ему необходимы, поэтому оно работает хорошо - person Doozer Blake; 25.10.2011
comment
@Doozer. Да, зная это заранее, вы можете смягчить многие проблемы с вашим дизайном. Добавить адаптивный дизайн постфактум намного сложнее. - person D'Arcy Rittich; 25.10.2011
comment
+1. Отличный ответ - несколько отличных статей, которые я прочитал довольно много раз! - person Aaron; 15.11.2011

arrow_upward
0
arrow_downward

Вы захотите использовать такую ​​структуру, как PhoneGap. HTML развивается медленно, но каждый день на рынке появляется около 10 новых устройств с новыми ошибками «функциями» и вы, невинное приложение - у небольшой группы людей просто нет возможности выполнить необходимую работу.

Что касается разных устройств, есть две проблемные зоны:

  1. Размеры экрана
  2. Ошибки рендеринга

Для размеров экрана сегодня есть довольно крутые решения. Например, некоторые фреймворки добавляют стиль CSS «640x400» или «480x800» к элементу body. Это упрощает стилизацию элементов в зависимости от размера экрана. Или вы можете использовать JavaScript в соответствующих таблицах стилей.

Для ошибок рендеринга вам потребуются обходные пути. Как я сказал выше, с этим не справится ни один человек, ни небольшая группа. Каждые несколько месяцев выходит новая версия Android с новым движком рендеринга и новыми «функциями». Вы устраняете проблемы для одного из них и ломаете десять других одновременно. Выберите фреймворк, который хорошо работает со многими устройствами и открыт для изменений (читайте: избегайте чего-либо проприетарного).

Таким образом, вы получите решения для типичных проблем и сможете сами исправить мелкие проблемы.

person Aaron Digulla    schedule 25.10.2011

arrow_upward
0
arrow_downward

Я определенно рекомендую RedFilters Answer (+1).

Я просто хотел добавить несколько библиотек, которые могут быть вам интересны по этой теме. Они включают обнаружение функций браузера и условную загрузку ресурсов. Проверь их:

http://www.modernizr.com/

http://yepnopejs.com/

person Aaron    schedule 15.11.2011