Download - Адаптивный веб-дизайн
![Page 1: Адаптивный веб-дизайн](https://reader036.vdocuments.pub/reader036/viewer/2022062319/557ee6a7d8b42a34628b48a0/html5/thumbnails/1.jpg)
Адаптивный дизайн
Антон Паймышев
Studio 38
![Page 2: Адаптивный веб-дизайн](https://reader036.vdocuments.pub/reader036/viewer/2022062319/557ee6a7d8b42a34628b48a0/html5/thumbnails/2.jpg)
Итан Маркот
Май 2010 годаВпервые ввел понятие отзывчивого веб-дизайна
![Page 3: Адаптивный веб-дизайн](https://reader036.vdocuments.pub/reader036/viewer/2022062319/557ee6a7d8b42a34628b48a0/html5/thumbnails/3.jpg)
Дизайн веб-страниц, обеспечивающий отличное отображение сайта на различных устройствах, подключённых к интернету.
![Page 4: Адаптивный веб-дизайн](https://reader036.vdocuments.pub/reader036/viewer/2022062319/557ee6a7d8b42a34628b48a0/html5/thumbnails/4.jpg)
![Page 5: Адаптивный веб-дизайн](https://reader036.vdocuments.pub/reader036/viewer/2022062319/557ee6a7d8b42a34628b48a0/html5/thumbnails/5.jpg)
Отзывчивый веб-дизайн
• Использование специального CSS для формирования специального отображения сайта в зависимости от размеров экрана;
• Грузится весь сайт со всей информацией;• Страницы загружаются дольше, один адрес у всех
версий;• Применение гибкого макета на основе сетки (flexible,
grid-based layout);• Использование гибких изображений (flexible images);• Работа с медиа-запросами (media queries).
![Page 7: Адаптивный веб-дизайн](https://reader036.vdocuments.pub/reader036/viewer/2022062319/557ee6a7d8b42a34628b48a0/html5/thumbnails/7.jpg)
Адаптивный веб-дизайн
• Серверное определение устройства, на котором отображается сайт;
• Отправка специальных файлов для специальных устройств;
• Отдельные шаблоны для каждого из устройств;• Страницы грузятся быстрее и часто располагаются
по специальным адресам;• применение постепенного улучшения (progressive
enhancement);• проектирование для мобильных устройств с самых
ранних этапов.
![Page 9: Адаптивный веб-дизайн](https://reader036.vdocuments.pub/reader036/viewer/2022062319/557ee6a7d8b42a34628b48a0/html5/thumbnails/9.jpg)
![Page 10: Адаптивный веб-дизайн](https://reader036.vdocuments.pub/reader036/viewer/2022062319/557ee6a7d8b42a34628b48a0/html5/thumbnails/10.jpg)
Выходим за «рамки» браузера
Десктопные сайты синхронизируются с мобильными версиями, что позволяет пользователю взаимодействовать с открытым на компьютере сайтом посредством мобильного телефона.
![Page 11: Адаптивный веб-дизайн](https://reader036.vdocuments.pub/reader036/viewer/2022062319/557ee6a7d8b42a34628b48a0/html5/thumbnails/11.jpg)
![Page 12: Адаптивный веб-дизайн](https://reader036.vdocuments.pub/reader036/viewer/2022062319/557ee6a7d8b42a34628b48a0/html5/thumbnails/12.jpg)
www.enjoyyourprivacy.com
http://www.youtube.com/watch?v=LjUz1C_bN5g
![Page 13: Адаптивный веб-дизайн](https://reader036.vdocuments.pub/reader036/viewer/2022062319/557ee6a7d8b42a34628b48a0/html5/thumbnails/13.jpg)
www.chrome.com/campaigns/rollit
http://www.youtube.com/watch?v=xspBgkxlrFQ
![Page 14: Адаптивный веб-дизайн](https://reader036.vdocuments.pub/reader036/viewer/2022062319/557ee6a7d8b42a34628b48a0/html5/thumbnails/14.jpg)
Вопросы?
@offinga • [email protected] • studio38.ru • offinga • studio38.ru • [email protected] • @offinga • [email protected] • studio38.ru • @offinga • [email protected] • studio38.ru • @offinga • [email protected] • studio38.ru • @offinga • [email protected] • studio38.ru • @offinga • [email protected] • studio38.ru •