Отзывчивый веб-дизайн: загружает ли он одинаковое количество данных на каждом устройстве?

Я хочу изменить дизайн своего блога и веб-сайта на WordPress, чтобы учесть постоянно растущих мобильных пользователей и пользователей планшетов.

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

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

Как определил Итан Маркотт в ALA 306 , термин «адаптивный дизайн» относится к технике применения различных правил стиля к вашему HTML в зависимости от размера экрана пользователя. Для более подробного объяснения адаптивного дизайна, вот хорошая колода от Mike Bollinger .

В этой модели вы отправляете клиенту один и тот же HTML-код независимо от того, является ли экран маленьким или большим. Однако, если ресурсы (в первую очередь изображения), на которые имеются ссылки в CSS, не отображаются для определенных разрешений экрана, они могут не загружаться. Например, для больших экранов, которые вы можете использовать high-res.pngв своем CSS, и для маленьких экранов low-res.png- веб-клиент может выбрать загрузку изображения только в активном стиле. (См. Комментарий @ DBUK по крайней мере об одном важном клиенте, который в настоящее время загружает оба! Надеюсь, клиенты умрут!)

Эта техника может иметь смысл в вашем случае, или может иметь смысл создать отдельный мобильный сайт.

Разные устройства могут подразумевать разные контексты использования. Мобильные телефоны всегда в вашем кармане - как бы пользователь использовал ваш сайт в продуктовом магазине? Хотите отправить им весь сайт? Или только несколько функций? Или совершенно разные функции? Что, если они сидят на диване с телевизором и случайно просматривают свой iPad?

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

Рискну предположить, что в целом, чем более статичным, текстовым и управляемым контентом сайтом (например, блогом), тем больше шансов использовать существующий HTML и адаптивный дизайн. Чем больше интерактивных, мультимедийных и управляемых пользователями сайтов (например, магазина), тем больше у вас шансов настроить отдельные сайты для отдельных типов устройств.

Кроме того, не забывайте, что в наши дни возникает вопрос, должен ли мобильный опыт быть сайтом или приложением .

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

Слайд-палетный указатель ссылается на сценарий Responsive Images от Filament Group, который позволяет вам подавать изображение подходящего размера для соответствующего устройства с помощью JavaScript, в идеале без загрузки более одной версии. Для ресурсов макета изображения это обычно делается с помощью медиазапросов, задающих разные стили для разных разрешений экрана.

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

Как упоминалось выше, вы должны использовать изображения в формате lo-res для своего мобильного телефона / устройств с низким разрешением. Медиа-запросы помогут вам нацелить все более низкие разрешения. Тем не менее, я слышал, что мобильное сафари будет игнорировать отображение: нет правил, а также загружать настольные версии изображений. Кроме того, если вы идете по маршруту адаптивного изображения, это оказывает большое давление на мобильный процессор - 3 байта на 1 пиксель ... Я думаю. Есть много решений , чтобы обойти дополнительный контент загружается - некоторые вполне Hacky - https://docs.google.com/spreadsheet/ccc?key=0AisdYBkuKzZ9dHpzSmd6ZTdhbDdoN21YZ29WRVdlckE&hl=en_US#gid=0

Для получения дополнительной информации о недостатках адаптивного веб-дизайна посетите http://www.webdesignshock.com/responsive-design-problems/ . Не позволяйте этому сообщению в блоге отпугнуть вас. A Book Apart написал фантастическую книгу на эту тему - http://www.abookapart.com/products/responsive-web-design . Это определенно стоит взять версию электронной книги.