Войти при помощи:
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:
Акива рекламные кампании для вашего бизнеса
лайкни нас в социальных сетях
Сегодня 4 лайков
167 049
Всего лайков на сайте

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 технология сводится к побору нужной альтернативы компоненты сайта на стороне сервера.
    +
    0
    -
    Ответить
    Поделиться
  • Михаил Гордеев
    1
    комментарий
    0
    читателей
    Михаил Гордеев
    больше года назад
    Правильно ли я понимаю: в зависимости от отданных браузером параметров подгружается в общем случае разный контент. В этом случае возникает вопрос - как к этому относятся поисковики? Если конечно же аккуратно все делать проблем быть не должно, но тем не менее.
    +
    0
    -
    Ответить
    Поделиться
    • Евгений Фонталин
      5
      комментариев
      0
      читателей
      В текущей реализации передача условий для выбора необходимого шаблона осуществляются с помощью js, что не оказывает вдияние на поисковики и им предоставляется полная версия сайта.
      +
      0
      -
      Ответить
      Поделиться
  • Евгений Быковский
    больше года назад
    интересная технология. а сменить шаблон вручную по ссылке можно?
    +
    0
    -
    Ответить
    Поделиться
    • Евгений Фонталин
      5
      комментариев
      0
      читателей
      Думаю, что оставлять возможность выбора шаблона пользователю - это хорошая идея, дающая определенную свободу, спасибо за идею, следите за ее релизацией в наших будующих проектах.
      +
      1
      -
      Ответить
      Поделиться
    • Евгений Фонталин
      5
      комментариев
      0
      читателей
      Если вы говорите о принудительном переходе на шаблон полной версии сайта из мобильного шаблона, то это довольно просто реализовать, но в наших примерах этого нет.
      +
      0
      -
      Ответить
      Поделиться
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА ЛАЙКНИ
5 революционных интернет-стартапов 2016 года
Гость - они ни как друг другу не относятся
Facebook запускает таргетинг на посетителей страницы
Гость - И как эти тупицы, которые не знают значений слов, смеют предлагать контент маркетологам и PR-специалистам, которые заведомо на 7 голов умнее этих тупых авторов сайта???
SEO Conference 2016: Не котиками едиными жив SMM
Vasileva К.
1
комментарий
0
читателей
Полный профиль
Vasileva К. - спасибо, возьму на заметку! нужно больше аналогичных статей – так значительно проще в тонкостях SMM разбираться! мне еще вот здесь статьи нравятся положила себе в закладки!
В России появился аналог LinkedIn
Данил Витальевич - Мы на похожем сайте эскорт выбирали, что как говорится было не скучно. Интерфейс тот же самый.
Как оптимизировать проведение конкурсов в Instagram?
Гость - Если вы обратите внимание на охват в статистике конкурса, то станет более понятно, что подписчики - это только одна из целей. В данном примере прирост всего 70 человек - не густо, учитывая затраты на проведение конкурса. А вот кол-во охваченных пользователей (тех, кто видел рекламный пост с проведением конкурса норм:)
ВКонтакте запускает обложки для сообществ
Юлия Швед
1
комментарий
0
читателей
Полный профиль
Юлия Швед - Зайдите в Управление сообществом и в блоке Основная информация выберите "Загрузить обложку")
SMM-октябрь: главные новости прошедшего месяца
Жанна Рожкова
608
комментариев
0
читателей
Полный профиль
Жанна Рожкова - Анна, подробная инструкция по установке виджета и его использованию https://vk.com/dev/AllowMessagesFromCommunity
ВК запускает денежные переводы на Украину
Жанна Рожкова
608
комментариев
0
читателей
Полный профиль
Жанна Рожкова - По правилам русского языка "на"
Реклама ВКонтакте обзавелась кнопками призыва к действию
Настасья Трочук
0
комментариев
0
читателей
Полный профиль
Настасья Трочук - Официальную дату запуска, к сожалению, ВК не указал пока.
В Одноклассниках теперь можно продвигать посты за «ОКи»
Настасья Трочук
0
комментариев
0
читателей
Полный профиль
Настасья Трочук - "Функция будет доступна для всех в ближайшее время" В этой фразе текста, как мне кажется, заключается то, что функция пока ещё не введена и не доступна для всех пользователей :)
ТОП КОММЕНТАТОРОВ
Комментариев
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
Вконтакте
Партнеры проекта [Уи лав ю соу мач!]
Наверх