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

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
      -
      Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА ЛАЙКНИ
Influence-маркетинг: 5 способов бюджетно влиять на аудиторию
Гость - realinsta точка ru
Пользователи ВК потеряли возможность слушать музыку в старых приложениях соцсети
Александр Петровский
1
комментарий
0
читателей
Полный профиль
Александр Петровский - Зачем пользоваться официальными приложениями? Пользуйтесь Kate Mobile например
ВКонтакте рассказал, что случилось с музыкой в соцсети
Сергей Александров
1
комментарий
0
читателей
Полный профиль
Сергей Александров - Люди просто жадные. За все нужно платить.
Facebook позволил связывать страницы и группы
Гость - Мария Мирабелла мне тоже не до конца понятно нововведение...теперь можно писаnь личные сообщения от лица группы? можно добавлять друзей от лица группы? И не понятно, как связать существующую группу со страницей ее создателя и администратора. Также буду очень благодарна за любые комменты от тех, кто понял всю суть новшества
Как увеличить количество заказов через Instagram в 6 раз
Александр Смирнов
3
комментария
0
читателей
Полный профиль
Александр Смирнов - Самый быстрый и качественный способ это добавить живых подписчиков к себе в Инстаграм, через сервис: realinsta точка ru
Как мы получили 7000 целевых действий с помощью ремаркетинга myTarget
Cookie Cookie
1
комментарий
0
читателей
Полный профиль
Cookie Cookie - Евгений, формат "карусели" в mytarget позволяет размещать в рамках одного объявления сразу несколько изображений с товарами. Так пользователю напоминают о просмотренных ранее товарах (динамический ремаркетинг) или о товарах, на которые сейчас скидка (классический ремаркетинг)
Email-воронка и CPC: концепт digital-стратегии для сети пиццерий
Андрей
1
комментарий
0
читателей
Полный профиль
Андрей - Игорь, добрый день! Спасибо за мнение. Некоторые ваши уточнения справедливы, некоторые, видимо, стоит прояснить. Вы правы: разделять, дополнять и уточнять, можно много чего. Ведь это концепт, цель – показать, как автоматические воронки продаж могут решать конкретную задачу. Точнее, здесь их две: запуск пиццерий и поиск партнёров. Если кому-то поможет, значит что-то полезное, да сделали:) Для кого говорим – владельцам франшиз, например. И здесь же кроется ответ на вопрос о дороговизне системы. В данном случае фишка в том, что решение создается на уровне франшизы. То есть техническая реализация воронок для пиццерий выходит копеечная, не нужно каждый раз строить новую систему. В этом вся суть франшизы Додо. А рекламные бюджеты - сами написали, все зависит от того, куда выходим. Насчет предзапуска – в Додо есть его отголоски на уровне соц. сетей. И это работает. Про бюджеты и траты пападжонс – скорее всего, тут у нас с вами просто недопонимание случилось. Мы это не из головы взяли, об этом Додо сами пишут. Это их цель, вырасти до масштабов крупных игроков на нашем, российском рынке. Кто-то тратит миллиарды, кто-то миллионы, кто-то сотни тысяч. Если Додо ставит перед собой большие задачи, где многие крутят пальцем у виска – они уже молодцы. Нам интересно с такими людьми работать, которые ломают голову, когти и зубы, а идут вперед, и у них рано или поздно получается. Не про Додо, а про малый и средний бизнес в принципе.
Facebook завысил данные прогноза по числу пользователей в разных странах
Sergei Krolikov
2
комментария
0
читателей
Полный профиль
Sergei Krolikov -
Компания в соцсетях есть, а толку нет? Проверьте себя на возможные ошибки
Александр Погребной
2
комментария
0
читателей
Полный профиль
Александр Погребной - "И напоследок. Призыв «Не жадничайте!» нужно трактовать не как призыв выделять больше денег на маркетинг и пиар. А как напоминание о простой истине: чтобы получать, нужно и отдавать."
Кейс: Мой «первый раз» в SMM: этапы, инструменты, статистика, итоги
Мария Фомина
1
комментарий
0
читателей
Полный профиль
Мария Фомина - Спасибо, Екатерина! Тут уже вопрос личных предпочтений и приоритетов. :) у меня вот рука не поднимается публиковать подобное. А учитывая, что частично эксперимент just for fun - я могла это себе позволить :)
ТОП КОММЕНТАТОРОВ
Комментариев
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
ВКонтакте
Партнеры проекта [Уи лав ю соу мач!]
Наверх