Адаптируйся или умри! Адаптивный и отзывчивый дизайн.

АДАПТИРУЙСЯ ИЛИ УМРИ!

Андрей Терёхин — директор по развитиюAGENTE

agentestudio agentestudio

www.agente.ru

Факты

www.agente.ru

Рост мобильного трафика на 61% к 2018

Источник: Cisco VNI Global Mobile Data Traffic Forecast, 2013–2018

Факты agentestudio agentestudio

www.agente.ru

Факты

Мобильные устройства будут составлять 54% в 2018

Источник: Cisco VNI Global Mobile Data Traffic Forecast, 2013–2018

agentestudio agentestudio

www.agente.ru

Эволюция сайтов

www.agente.ru

Устройства

Cайты

Эволюция сайтов agentestudio agentestudio

www.agente.ru

WAPHTML Мобильныесайты

Адаптивныесайты

wapwmlwap 2.0

httphtml

opera miniopera mobile

HTML5CSS3...

Война терминов

www.agente.ru

Война терминов

Responsive Web Design

Adaptive Web Design

Май 25, 2010 Май 25, 2011

Aaron GustafsonEthan Marcotte

agentestudio agentestudio

www.agente.ru

Война терминов

Responsive Web Design

Adaptive Web Design

Стратегия основывается на:

— Резиновые макеты— Медиа запросы— Резиновый контент

Стратегия основывается на:

— Подход «Сначала мобильные»— Подход «Прогрессивное улучшение»— Отзывчивый дизайн является частью

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

Aaron Gustafson

«Резиновые макеты, гибкие изображения и медиа запросы являются тремя техническими ингредиентами для отзывчивого веб-дизайна.»

Ethan Marcotte

agentestudio agentestudio

www.agente.ru

Война терминов

Адаптивный веб-дизайн

Прогрессивное улучшение

Улучшенная разметка подключается при помощи внешних CSS

Основное содержание и функциональностьдолжны быть доступны для всех веб-браузеров

Отзывчивый веб-дизайн

Адаптивный макет / гибридный

Отзывчивый макет

Резиновые и фиксированные макеты

Гибкие и фиксированные изображения

Медиа запросы

Резиновые макетыГибкие изображения

Медиа запросы

Улучшаем функциональность в зависимости от возможностей устройств

agentestudio agentestudio

www.agente.ru

Война терминов

Адаптивный макет Адаптивный дизайн

Отзывчивый макет Отзывчивый дизайн

Adaptive Template Adaptive Design

Responsive Template Responsive Design

agentestudio agentestudio

www.agente.ru

Война терминов

RWDAWD

Медиа-запросыформируютстраницу

Cерверноеили браузерноеопределение устройства

Загружается подготовленный,и оптимизированный контент конкретно под ваше устройство.

Один и тот же контент используется для всех типов устройств. (Резиновый контент)

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

Загружается уникальный шаблон под конкретное устройство. Изменяется поведение сайта в зависимости от типа устройства.

Требуется переработка основного сайта, если он существует.

Не требуется переработка существующего сайта, все шаблоны создаются отдельно.

agentestudio agentestudio

www.agente.ru

Война терминовПроцесс / Кейсы

www.agente.ru

Процесс / кейсы

UX design UI design

Web версия

iPad версия

iPhone версия

Web версия

iPad версия

iPhone версия

Front-end Back-end

Резиновые макеты

Медиа запросы

Резиновый контент

Отзывчивые

шаблоны страниц

agentestudio agentestudio

www.agente.ru

Процесс / кейсы

UX design

agentestudio agentestudio

www.agente.ru

Процесс / кейсы

UI design

agentestudio agentestudio

www.agente.ru

Процесс / кейсы

UX design

agentestudio agentestudio

www.agente.ru

Процесс / кейсы

UI design

agentestudio agentestudio

www.agente.ru

Спасибо!www.facebook.com/terexin

[email protected]

www.agente.ru

agentestudio agentestudio