Документ описывает концепцию отзывчивого веб-дизайна, впервые введённую Итоном Маркотом в 2010 году, которая обеспечивает корректное отображение веб-сайтов на различных устройствах. Рассматриваются различные аспекты адаптивного дизайна, включая использование специального CSS, медиа-запросов и гибких макетов. Также упоминается, как десктопные и мобильные версии сайта могут синхронизироваться для лучшего взаимодействия пользователей.

1. Адаптивный
дизайн
Антон Паймышев
Studio 38

2. Итан Маркот
Май 2010 года
Впервые ввел
понятие отзывчивого
веб-дизайна

3. Дизайн веб-страниц, обеспечивающий
отличное отображение сайта на
различных устройствах, подключѐнных
к интернету.

5. Отзывчивый веб-дизайн
• Использование специального CSS для
формирования специального отображения сайта в
зависимости от размеров экрана;
• Грузится весь сайт со всей информацией;
• Страницы загружаются дольше, один адрес у всех
версий;
• Применение гибкого макета на основе сетки
(flexible, grid-based layout);
• Использование гибких изображений (flexible images);
• Работа с медиа-запросами (media queries).

6. http://studio38.ru

7. Адаптивный веб-дизайн
• Серверное определение устройства, на котором
отображается сайт;
• Отправка специальных файлов для специальных
устройств;
• Отдельные шаблоны для каждого из устройств;
• Страницы грузятся быстрее и часто располагаются
по специальным адресам;
• применение постепенного улучшения (progressive
enhancement);
• проектирование для мобильных устройств с самых
ранних этапов.

8. http://irk.ru

10. Выходим за «рамки» браузера
Десктопные сайты синхронизируются с
мобильными версиями, что позволяет
пользователю взаимодействовать с
открытым на компьютере сайтом
посредством мобильного телефона.

12. www.enjoyyourprivacy.com
http://www.youtube.com/watch?v=LjUz1C_b
N5g

13. www.chrome.com/campaigns/rollit
http://www.youtube.com/watch?v=xspBgkxlr
FQ

14. Вопросы?
@offinga • anton@studio38.ru • studio38.ru
offinga • studio38.ru • anton@studio38.ru
• @offinga • anton@studio38.ru • studio38.r