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

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 технология можно познакомиться здесь  [censored]

    В общих чертах, RESS технология сводится к побору нужной альтернативы компоненты сайта на стороне сервера.
    +
    0
    -
    Ответить
  • Михаил Гордеев
    1
    комментарий
    0
    читателей
    Михаил Гордеев
    больше года назад
    Правильно ли я понимаю: в зависимости от отданных браузером параметров подгружается в общем случае разный контент. В этом случае возникает вопрос - как к этому относятся поисковики? Если конечно же аккуратно все делать проблем быть не должно, но тем не менее.
    +
    0
    -
    Ответить
    • Евгений Фонталин
      5
      комментариев
      0
      читателей
      В текущей реализации передача условий для выбора необходимого шаблона осуществляются с помощью js, что не оказывает вдияние на поисковики и им предоставляется полная версия сайта.
      +
      0
      -
      Ответить
  • Евгений Быковский
    больше года назад
    интересная технология. а сменить шаблон вручную по ссылке можно?
    +
    0
    -
    Ответить
    • Евгений Фонталин
      5
      комментариев
      0
      читателей
      Думаю, что оставлять возможность выбора шаблона пользователю - это хорошая идея, дающая определенную свободу, спасибо за идею, следите за ее релизацией в наших будующих проектах.
      +
      1
      -
      Ответить
    • Евгений Фонталин
      5
      комментариев
      0
      читателей
      Если вы говорите о принудительном переходе на шаблон полной версии сайта из мобильного шаблона, то это довольно просто реализовать, но в наших примерах этого нет.
      +
      0
      -
      Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА ЛАЙКНИ
ВКонтакте рассказал, что случилось с музыкой в соцсети
Гостьsdf - sdf
В помощь SMM-щику: как автоматизировать работу
Иван Серышев
8
комментариев
0
читателей
Полный профиль
Иван Серышев - ага, вон как агрятся)))) Написал правду ак бомбануло. РУБЛЬ за офера в ОК. Ппц!!! Да конечно не плохо так зарабатывать. Лям на раскрутку вложил - офферы через месяц вышли - сидишь со своим трафиков в 100 уников в сутки и толку)))) Вот и кэшбокс. Я их потом еще выведу на чистую воду на ютубе)))
Спасибо, что живой: как написать интересный пост для SMM
Иван Серышев
8
комментариев
0
читателей
Полный профиль
Иван Серышев - Один мой учитель по SMM говорила - контент должен быть секси))))
25 Telegram-каналов по SEO и SMM
Fiodor Gheorghienco
1
комментарий
0
читателей
Полный профиль
Fiodor Gheorghienco - А где самый лучший канал со статьями проSMM SMMplanner? :)
4 причины, почему аналитика не нужна вашему бизнесу
Михаил Кирилин
1
комментарий
0
читателей
Полный профиль
Михаил Кирилин - Соглашусь с вашим комментарием - сравнение очень показательное. На самом деле, планируем серию материалов о работе нашего отдела аналитики, в которых будем более детально углубляться в процессы и компетенции.
Пользователи ВК потеряли возможность слушать музыку в старых приложениях соцсети
Александр Петровский
1
комментарий
0
читателей
Полный профиль
Александр Петровский - Зачем пользоваться официальными приложениями? Пользуйтесь Kate Mobile например
Кейс: Мой «первый раз» в SMM: этапы, инструменты, статистика, итоги
Мария Фомина - Спасибо, Александр! По поводу совершенно другого вида деятельности есть очень много историй успеха, например, на хабре есть интересная статья от хирурга, который в свои 40 вдруг решил стать программистом. И, судя по его словам, действительно смог :) Поэтому еще раз убеждаюсь - все зависит только от нашего желания. Удачи вам!
Компания в соцсетях есть, а толку нет? Проверьте себя на возможные ошибки
Геннадий Кожемякин
1
комментарий
0
читателей
Полный профиль
Геннадий Кожемякин - Вопросы поставлены правильно, но ответы вялые
Музыка во ВКонтакте: бесплатно только 30 минут в сутки
Мария - Как ни странно, посещаемость не изменилась.
Практическое руководство для сержантов digital-агентств: 14 правил
Дарья Кошелева
1
комментарий
0
читателей
Полный профиль
Дарья Кошелева - Спасибо и за руководство к действию, и просто за поддержку. По-человечески стало легче жить, прочитав, что все утыкаются носом в одни проблемы. Мур!
ТОП КОММЕНТАТОРОВ
Комментариев
152
Комментариев
139
Комментариев
126
Комментариев
109
Комментариев
88
Комментариев
67
Комментариев
64
Комментариев
60
Комментариев
60
Комментариев
52
Комментариев
45
Комментариев
41
Комментариев
40
Комментариев
39
Комментариев
38
Комментариев
32
Комментариев
25
Комментариев
23
Комментариев
19
Комментариев
19
Комментариев
18
Комментариев
18
Комментариев
18
Комментариев
17
Комментариев
17

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