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

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 технология сводится к побору нужной альтернативы компоненты сайта на стороне сервера.
    +
    -1
    -
    Ответить
    Поделиться
  • Михаил Гордеев
    1
    комментарий
    0
    читателей
    Михаил Гордеев
    больше года назад
    Правильно ли я понимаю: в зависимости от отданных браузером параметров подгружается в общем случае разный контент. В этом случае возникает вопрос - как к этому относятся поисковики? Если конечно же аккуратно все делать проблем быть не должно, но тем не менее.
    +
    0
    -
    Ответить
    Поделиться
    • Евгений Фонталин
      5
      комментариев
      0
      читателей
      В текущей реализации передача условий для выбора необходимого шаблона осуществляются с помощью js, что не оказывает вдияние на поисковики и им предоставляется полная версия сайта.
      +
      0
      -
      Ответить
      Поделиться
  • Евгений Быковский
    больше года назад
    интересная технология. а сменить шаблон вручную по ссылке можно?
    +
    0
    -
    Ответить
    Поделиться
    • Евгений Фонталин
      5
      комментариев
      0
      читателей
      Думаю, что оставлять возможность выбора шаблона пользователю - это хорошая идея, дающая определенную свободу, спасибо за идею, следите за ее релизацией в наших будующих проектах.
      +
      1
      -
      Ответить
      Поделиться
    • Евгений Фонталин
      5
      комментариев
      0
      читателей
      Если вы говорите о принудительном переходе на шаблон полной версии сайта из мобильного шаблона, то это довольно просто реализовать, но в наших примерах этого нет.
      +
      0
      -
      Ответить
      Поделиться
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА ЛАЙКНИ
9 бесплатных инструментов для управления репутацией
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Вообще, инструментов гораздо больше... По мониторингу - не упомянуты Крибрум, IQBuss. Достойные новые сервисы появляются - Соцредактор, например. Бесплатные есть еще babkee.ru И далее...
ВКонтакте запустил счетчик просмотров записей
Гость
1
комментарий
0
читателей
Полный профиль
Гость - бредятина! как товарищ пояснил, что таким образом станет понятно что вызывает наибольший интерес. чувак, открою тебе маленькую тайну, когда я захожу на страницу к кому то, непроизвольно получается просмотр записей, а эта считалочка только покажет до каких записей дошел гость)
Как получить пользу от негатива в комментариях
Step
7
комментариев
0
читателей
Полный профиль
Step - Примеры бомба! повеселили ))))) а если серьезно, то я считаю, что негатив в отзывах – это очень полезно! помогает выявить тонкие места в компании. и, кроме того, он говорит о том, что люди к вам небезразличны! А это уже хорошо. просто нужно уметь этот негатив превращать в позитив: отвечать умело на него, выводы соответствующие делать. На этом поприще можно оглушительных успехов добиться и своих недоброжелателей в преданных друзей превратить )))))
Одноклассники вводят плату за пересылку GIF-картинок в сообщениях
Гость - Кто та самая ''избранная'' аудитория на которой эксперементируют ?
Когда френдзона – это ваша цель! Или как найти клиентов, не потратив ни копейки?
Alexandr Kuzmenko
1
комментарий
0
читателей
Полный профиль
Alexandr Kuzmenko - Аня, не молчи)
Официальные страницы ВКонтакте теперь могут создавать прямые трансляции
Артур Антреей
1
комментарий
0
читателей
Полный профиль
Артур Антреей - нето прихня
Инфографика: 139 фактов об Instagram
Валерия Россохина
505
комментариев
0
читателей
Полный профиль
Валерия Россохина - Да, к сожалению, редакция не успевает следить за личной жизнью Бейонсе, но в будущем мы обязательно исправимся :)
Facebook объявил о запуске нового инструмента Advanced Measurement
Тирион Ланнистер
2
комментария
0
читателей
Полный профиль
Тирион Ланнистер - уииии
Как бренды создают новогоднее настроение в Twitter
Мария Шиманкевич
1
комментарий
0
читателей
Полный профиль
Мария Шиманкевич - Даже в Польше уже есть Дед Мороз)) https://www.youtube.com/watch?v=ia7UOGjHGY0
Самые популярные видеоролики ВКонтакте за 2016 год
хм - хоть бы оригинал грибов вставили
ТОП КОММЕНТАТОРОВ
Комментариев
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
Вконтакте
Партнеры проекта [Уи лав ю соу мач!]
Наверх