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

Question

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

Контекст

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

Есть несколько удивительных сайтов, которые создаются.Взгляните на mediaqueri.es (измените размер вашего браузера)

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

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

Вопрос (ы)

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

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

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

Answer 1

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

См:

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/

Answer 2

Я бы определенно рекомендовал RedFilters Answer (+1).

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

http://www.modernizr.com/

http://yepnopejs.com/

Answer 3

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

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

1. Размеры экрана
2. Визуализация ошибок

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

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

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