Embed Size (px)
DESCRIPTION
Андрей Терёхин — директор по развитию AGENTE выступил с презентацией на конференции WUD (World Usabillity Day) в Минске. В презентации вы найдете информации о: — эволюции типов сайтов и устройств — факты о растущей мобильной аудитории — поймете как отличать адаптивный и отзывчивый дизайн — познакомитесь с процессом и кейсами агентства. Enjoy!
Citation preview
АДАПТИРУЙСЯ ИЛИ УМРИ!
Андрей Терёхин — директор по развитию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
www.agente.ru
agentestudio agentestudio
