Адаптируйся или умри! Адаптивный и отзывчивый дизайн.
-
Upload
agente -
Category
Technology
-
view
453 -
download
0
description
Transcript of Адаптируйся или умри! Адаптивный и отзывчивый дизайн.
![Page 1: Адаптируйся или умри! Адаптивный и отзывчивый дизайн.](https://reader033.fdocuments.us/reader033/viewer/2022052909/5599a1a01a28abdb758b4869/html5/thumbnails/1.jpg)
АДАПТИРУЙСЯ ИЛИ УМРИ!
Андрей Терёхин — директор по развитиюAGENTE
agentestudio agentestudio
www.agente.ru
![Page 2: Адаптируйся или умри! Адаптивный и отзывчивый дизайн.](https://reader033.fdocuments.us/reader033/viewer/2022052909/5599a1a01a28abdb758b4869/html5/thumbnails/2.jpg)
Факты
www.agente.ru
![Page 3: Адаптируйся или умри! Адаптивный и отзывчивый дизайн.](https://reader033.fdocuments.us/reader033/viewer/2022052909/5599a1a01a28abdb758b4869/html5/thumbnails/3.jpg)
Рост мобильного трафика на 61% к 2018
Источник: Cisco VNI Global Mobile Data Traffic Forecast, 2013–2018
Факты agentestudio agentestudio
www.agente.ru
![Page 4: Адаптируйся или умри! Адаптивный и отзывчивый дизайн.](https://reader033.fdocuments.us/reader033/viewer/2022052909/5599a1a01a28abdb758b4869/html5/thumbnails/4.jpg)
Факты
Мобильные устройства будут составлять 54% в 2018
Источник: Cisco VNI Global Mobile Data Traffic Forecast, 2013–2018
agentestudio agentestudio
www.agente.ru
![Page 5: Адаптируйся или умри! Адаптивный и отзывчивый дизайн.](https://reader033.fdocuments.us/reader033/viewer/2022052909/5599a1a01a28abdb758b4869/html5/thumbnails/5.jpg)
Эволюция сайтов
www.agente.ru
![Page 6: Адаптируйся или умри! Адаптивный и отзывчивый дизайн.](https://reader033.fdocuments.us/reader033/viewer/2022052909/5599a1a01a28abdb758b4869/html5/thumbnails/6.jpg)
Устройства
Cайты
Эволюция сайтов agentestudio agentestudio
www.agente.ru
WAPHTML Мобильныесайты
Адаптивныесайты
wapwmlwap 2.0
httphtml
opera miniopera mobile
HTML5CSS3...
![Page 7: Адаптируйся или умри! Адаптивный и отзывчивый дизайн.](https://reader033.fdocuments.us/reader033/viewer/2022052909/5599a1a01a28abdb758b4869/html5/thumbnails/7.jpg)
Война терминов
www.agente.ru
![Page 8: Адаптируйся или умри! Адаптивный и отзывчивый дизайн.](https://reader033.fdocuments.us/reader033/viewer/2022052909/5599a1a01a28abdb758b4869/html5/thumbnails/8.jpg)
Война терминов
Responsive Web Design
Adaptive Web Design
Май 25, 2010 Май 25, 2011
Aaron GustafsonEthan Marcotte
agentestudio agentestudio
www.agente.ru
![Page 9: Адаптируйся или умри! Адаптивный и отзывчивый дизайн.](https://reader033.fdocuments.us/reader033/viewer/2022052909/5599a1a01a28abdb758b4869/html5/thumbnails/9.jpg)
Война терминов
Responsive Web Design
Adaptive Web Design
Стратегия основывается на:
— Резиновые макеты— Медиа запросы— Резиновый контент
Стратегия основывается на:
— Подход «Сначала мобильные»— Подход «Прогрессивное улучшение»— Отзывчивый дизайн является частью
«Термин «Адаптивный веб-дизайн», как я его использую, означает создание интерфейсов, которые адаптируются к возможностям пользователя (с точки зрения формы и функции.»
Aaron Gustafson
«Резиновые макеты, гибкие изображения и медиа запросы являются тремя техническими ингредиентами для отзывчивого веб-дизайна.»
Ethan Marcotte
agentestudio agentestudio
www.agente.ru
![Page 10: Адаптируйся или умри! Адаптивный и отзывчивый дизайн.](https://reader033.fdocuments.us/reader033/viewer/2022052909/5599a1a01a28abdb758b4869/html5/thumbnails/10.jpg)
Война терминов
Адаптивный веб-дизайн
Прогрессивное улучшение
Улучшенная разметка подключается при помощи внешних CSS
Основное содержание и функциональностьдолжны быть доступны для всех веб-браузеров
Отзывчивый веб-дизайн
Адаптивный макет / гибридный
Отзывчивый макет
Резиновые и фиксированные макеты
Гибкие и фиксированные изображения
Медиа запросы
Резиновые макетыГибкие изображения
Медиа запросы
Улучшаем функциональность в зависимости от возможностей устройств
agentestudio agentestudio
www.agente.ru
![Page 11: Адаптируйся или умри! Адаптивный и отзывчивый дизайн.](https://reader033.fdocuments.us/reader033/viewer/2022052909/5599a1a01a28abdb758b4869/html5/thumbnails/11.jpg)
Война терминов
Адаптивный макет Адаптивный дизайн
Отзывчивый макет Отзывчивый дизайн
Adaptive Template Adaptive Design
Responsive Template Responsive Design
agentestudio agentestudio
www.agente.ru
![Page 12: Адаптируйся или умри! Адаптивный и отзывчивый дизайн.](https://reader033.fdocuments.us/reader033/viewer/2022052909/5599a1a01a28abdb758b4869/html5/thumbnails/12.jpg)
Война терминов
RWDAWD
Медиа-запросыформируютстраницу
Cерверноеили браузерноеопределение устройства
Загружается подготовленный,и оптимизированный контент конкретно под ваше устройство.
Один и тот же контент используется для всех типов устройств. (Резиновый контент)
Имеет один и тот же шаблон для всех устройств. Используются одни и те же блоки, модули, медиа файлы.
Загружается уникальный шаблон под конкретное устройство. Изменяется поведение сайта в зависимости от типа устройства.
Требуется переработка основного сайта, если он существует.
Не требуется переработка существующего сайта, все шаблоны создаются отдельно.
agentestudio agentestudio
www.agente.ru
![Page 13: Адаптируйся или умри! Адаптивный и отзывчивый дизайн.](https://reader033.fdocuments.us/reader033/viewer/2022052909/5599a1a01a28abdb758b4869/html5/thumbnails/13.jpg)
Война терминовПроцесс / Кейсы
www.agente.ru
![Page 14: Адаптируйся или умри! Адаптивный и отзывчивый дизайн.](https://reader033.fdocuments.us/reader033/viewer/2022052909/5599a1a01a28abdb758b4869/html5/thumbnails/14.jpg)
Процесс / кейсы
UX design UI design
Web версия
iPad версия
iPhone версия
Web версия
iPad версия
iPhone версия
Front-end Back-end
Резиновые макеты
Медиа запросы
Резиновый контент
Отзывчивые
шаблоны страниц
agentestudio agentestudio
www.agente.ru
![Page 15: Адаптируйся или умри! Адаптивный и отзывчивый дизайн.](https://reader033.fdocuments.us/reader033/viewer/2022052909/5599a1a01a28abdb758b4869/html5/thumbnails/15.jpg)
Процесс / кейсы
UX design
agentestudio agentestudio
www.agente.ru
![Page 16: Адаптируйся или умри! Адаптивный и отзывчивый дизайн.](https://reader033.fdocuments.us/reader033/viewer/2022052909/5599a1a01a28abdb758b4869/html5/thumbnails/16.jpg)
Процесс / кейсы
UI design
agentestudio agentestudio
www.agente.ru
![Page 17: Адаптируйся или умри! Адаптивный и отзывчивый дизайн.](https://reader033.fdocuments.us/reader033/viewer/2022052909/5599a1a01a28abdb758b4869/html5/thumbnails/17.jpg)
Процесс / кейсы
UX design
agentestudio agentestudio
www.agente.ru
![Page 18: Адаптируйся или умри! Адаптивный и отзывчивый дизайн.](https://reader033.fdocuments.us/reader033/viewer/2022052909/5599a1a01a28abdb758b4869/html5/thumbnails/18.jpg)
Процесс / кейсы
UI design
agentestudio agentestudio
www.agente.ru
![Page 19: Адаптируйся или умри! Адаптивный и отзывчивый дизайн.](https://reader033.fdocuments.us/reader033/viewer/2022052909/5599a1a01a28abdb758b4869/html5/thumbnails/19.jpg)
Спасибо!www.facebook.com/terexin
www.agente.ru
agentestudio agentestudio