Войти при помощи:
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:
лайкни нас в социальных сетях
Сегодня 20 лайков
171 748
Всего лайков на сайте

RESS: Эволюция адаптивного дизайна

12 февраля 2013, 14:43 | 

Об авторе
Евгений Фонталин
Евгений Фонталин
Совладелец и генеральный директор веб-студии "Бюро Пирогова", совладелец рекламного интернет-агентства "Primax"
Совсем недавно, всего лишь год назад, мы все пели торжественные дифирамбы новой технологии адаптивного дизайна, которая должна была наконец-то решить эволюционную проблему «мобилизации» доступа к Интернету. Однако, несмотря на все очевидные достоинства responsive web design, очень скоро вскрылись существенные сложности при его проектировании. 

Да, мы пришли к новому «стандарту качества» при проектировании сайтов и теперь можем забыть про такое понятие, как мобильная версия сайта. Адаптивный дизайн позволил сделать универсальное решение как для мобильных устройств, так и для стационарных компьютеров. Отпала проблема правильного отображения контента, мы далеко продвинулись в вопросах мобильного юзабилити - в условиях сокращения площади экрана мы научились определять приоритетность информации и способы ее оптимального представления. Новые, нетривиальные макеты сайтов в буквальном смысле разрывали шаблоны восприятия традиционного веба. Вроде бы, эпоха future friendly наступила, но…

То, что безусловно хорошо для пользователей, не всегда легко выполнить разработчикам. К числу «тонких моментов» при проектировании адаптивного дизайна можно отнести следующие:

1. Некорректное изменение размера изображений

2. Обработка стороннего контента, используемого на сайте

3. Совместимость с более ранними технологическими решениями (старые браузеры и т.д.)

4. Баги устройств

5. Сложный менеджмент такого рода проектов.

Разрешение всех этих проблем естественным образом увеличивает сроки сдачи проекта и удорожает его стоимость. Но давайте посмотрим на результат.

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

Адаптивный дизайн представляет собой не что иное, как совокупность нескольких шаблонов страниц, каждый из которых «заточен» под определенное разрешение экрана. Как правило, разработчики предлагают 3 основных шаблона: для полноразмерной версии сайта (например, от 1280 пикселей по ширине), для планшетов (1024) и для смартфонов (640). При первоначальной загрузке страницы вы будете загружать ВСЕ три шаблона, со всеми соответствующими им скриптами, но на экран будет выводиться только тот, который максимально удовлетворяет текущему разрешению экрана или ширине окна браузера.

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

Неудачный пример использования адаптивного дизайна, сайт The Boston Globe;

обилие элементов существенно утяжеляет загружаемые «по умолчанию» шаблоны

На сегодняшний день адаптивного дизайна уже мало. На повестку дня выходит оптимизация работы с ним, и, в частности, технология, получившая название RESS (аббревиатура, соединившая в себе Responsive Web Design и Server Side Components).

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

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

Использование подхода RESS позволяет запускать версии сайта последовательно: основная, под планшеты, под смартфоны, - в то время как полностью адаптивный макет требует верстки сразу всего сайта. Последний вариант может быть гораздо дольше, дороже и сложнее в поддержке и обслуживании.

Рассмотрим технологию RESS на примере 2-х проектов: оба представляют собой сайты, использующие в той или иной форме технологию адаптивной верстки.

Адаптивный сайт компании «Пластика Окон»

Сайт компании Saiwala

Сайт «Пластики Окон» автоматически загружает все разработанные шаблоны и ситуативно использует тот из них, который соответствует экрану просмотрщика.

Сайт «Saiwala» демонстрирует нам пример использования компонентов Server Side – загружается только тот шаблон страницы, который актуален для устройства доступа. При изменении размеров окна на стороне клиента изменений не происходит, для загрузки нового шаблона при изменении размеров окна браузера требуется перезагрузка. Этот сайт более «легкий» для мобильного доступа, но – формально – он может даже не считаться адаптивным, поскольку технически адаптация происходит не на сайте, а на стороне сервера, который в ответ на запрос пользователя передает ему нужный шаблон. Тем не менее, визуально это выглядит также как адаптивный дизайн.

Шаблон для мобильного устройства, растянутый до полноформатного размера

Шаблон для планшетов сочетает в себе элементы адаптивной верстки

Принцип Server Side позволяет осуществлять на серверной части как хранение данных, так и частичное исполнение процессов, что экономит ресурсы клиентской части. В том, что касается мобильного доступа, это может существенно экономить пользовательский трафик и ускорить обработку запросов. На стороне сервера может происходить декодирование мультимедийной информации, контроль верстки, стилей CSS и JS, - и, как итог, пользователь получит только тот контент, который ему нужен, и именно в том виде, который оптимален для его устройства.

По сути дела, RESS – это адаптация адаптивного дизайна к техническим особенностям взаимодействия устройства доступа и сервера, к которому осуществляется доступ. В этом подходе нет ничего принципиально нового, однако он расширяет наше понимание возможностей адаптивного дизайна и способов его практического использования.

Комментарии
6 комментариев
Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Поделиться 
Поделиться дискуссией:
Отправить отзыв
Войти
  • Гость
    больше года назад
    В деталях, что такое RESS технология можно познакомиться здесь  www.cotonti.mobi

    В общих чертах, RESS технология сводится к побору нужной альтернативы компоненты сайта на стороне сервера.
    +
    -1
    -
    Ответить
    Поделиться
  • Михаил Гордеев
    1
    комментарий
    0
    читателей
    Михаил Гордеев
    больше года назад
    Правильно ли я понимаю: в зависимости от отданных браузером параметров подгружается в общем случае разный контент. В этом случае возникает вопрос - как к этому относятся поисковики? Если конечно же аккуратно все делать проблем быть не должно, но тем не менее.
    +
    0
    -
    Ответить
    Поделиться
    • Евгений Фонталин
      5
      комментариев
      0
      читателей
      В текущей реализации передача условий для выбора необходимого шаблона осуществляются с помощью js, что не оказывает вдияние на поисковики и им предоставляется полная версия сайта.
      +
      0
      -
      Ответить
      Поделиться
  • Евгений Быковский
    больше года назад
    интересная технология. а сменить шаблон вручную по ссылке можно?
    +
    0
    -
    Ответить
    Поделиться
    • Евгений Фонталин
      5
      комментариев
      0
      читателей
      Думаю, что оставлять возможность выбора шаблона пользователю - это хорошая идея, дающая определенную свободу, спасибо за идею, следите за ее релизацией в наших будующих проектах.
      +
      1
      -
      Ответить
      Поделиться
    • Евгений Фонталин
      5
      комментариев
      0
      читателей
      Если вы говорите о принудительном переходе на шаблон полной версии сайта из мобильного шаблона, то это довольно просто реализовать, но в наших примерах этого нет.
      +
      0
      -
      Ответить
      Поделиться
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА ЛАЙКНИ
Одноклассники вводят плату за пересылку GIF-картинок в сообщениях
Гость - Кто та самая ''избранная'' аудитория на которой эксперементируют ?
ВКонтакте реформирует систему размещения рекламы
Step
6
комментариев
0
читателей
Полный профиль
Step - а что? в этом что-то есть. в целом-то неплохое предложение. особенно для любителей халявы )))))) думаю, этот пункт многим по душе придется: «администратору группы не надо совершать никаких действий для получения выручки» ))))))))) но я бы на этом не зацикливался. Хочется ведь и свое что-то делать. пусть реклама и не сразу удастся, но зато знания и опыт будут нарабатываться. А там, глядишь, и до вершин успеха недалеко. Вот есть информация об эффективной рекламе вконтакте http://socialair.ru/articles/effective_ad_vkontakte/ можно просто такие статьи поизучать, опыт успешных коллег перенять и сделать своё и хорошее!
ВКонтакте вошел в черный список печально известных рынков
Александр Гаврилов
1
комментарий
0
читателей
Полный профиль
Александр Гаврилов - Вы случаем вот эту книжку не читали ?
16 сервисов для отложенного постинга в соцсетях
Гость - Для постинга по расписанию я использую сервис https://smmplanner.com/p/activate (по ссылке 30 постов бесплатно) Удобно задается график постов, подходит как новичкам так и профессионалам.
Официальные страницы ВКонтакте теперь могут создавать прямые трансляции
Артур Антреей
1
комментарий
0
читателей
Полный профиль
Артур Антреей - нето прихня
Инфографика: 139 фактов об Instagram
Валерия Россохина
456
комментариев
0
читателей
Полный профиль
Валерия Россохина - Да, к сожалению, редакция не успевает следить за личной жизнью Бейонсе, но в будущем мы обязательно исправимся :)
ВКонтакте закроет доступ к аудиозаписям для сторонних приложений
Oleg Litvin
1
комментарий
0
читателей
Полный профиль
Oleg Litvin - КЕЙТ Мобайл все?
Instagram анонсировал четыре масштабных функции
Газиз Исмаил
1
комментарий
0
читателей
Полный профиль
Газиз Исмаил - Хорошие нововведения. Особенно понравилась возможность удалять подписчика и уведомлять о суициде. В последнем случае интересно, что будет делать команда, получившее подобное сообщение?
Шоу мыльных пузырей: продвижение фиктивного бизнеса
Гость - Ох, уж эти ваши интернеты
Как с помощью реалити-шоу повысить лояльность к бренду
Гость1 - Выйграл Ник Черников. Исправьте, пожалуйста, информацию.
ТОП КОММЕНТАТОРОВ
Комментариев
152
Комментариев
139
Комментариев
126
Комментариев
109
Комментариев
88
Комментариев
67
Комментариев
64
Комментариев
60
Комментариев
60
Комментариев
52
Комментариев
45
Комментариев
41
Комментариев
40
Комментариев
39
Комментариев
38
Комментариев
32
Комментариев
25
Комментариев
23
Комментариев
19
Комментариев
19
Комментариев
18
Комментариев
18
Комментариев
17
Комментариев
17
Комментариев
17

Отправьте отзыв!
Будь в курсе




Рассылка
Facebook
Вконтакте
Партнеры проекта [Уи лав ю соу мач!]
Наверх