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

Адаптивный дизайн

Антон Паймышев

Studio 38

Итан Маркот

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

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

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

• Использование специального CSS для формирования специального отображения сайта в зависимости от размеров экрана;

• Грузится весь сайт со всей информацией;• Страницы загружаются дольше, один адрес у всех

версий;• Применение гибкого макета на основе сетки (flexible,

grid-based layout);• Использование гибких изображений (flexible images);• Работа с медиа-запросами (media queries).

http://studio38.ru

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

• Серверное определение устройства, на котором отображается сайт;

• Отправка специальных файлов для специальных устройств;

• Отдельные шаблоны для каждого из устройств;• Страницы грузятся быстрее и часто располагаются

по специальным адресам;• применение постепенного улучшения (progressive

enhancement);• проектирование для мобильных устройств с самых

ранних этапов.

http://irk.ru

Выходим за «рамки» браузера

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

www.enjoyyourprivacy.com

http://www.youtube.com/watch?v=LjUz1C_bN5g

www.chrome.com/campaigns/rollit

http://www.youtube.com/watch?v=xspBgkxlrFQ

Вопросы?

@offinga • anton@studio38.ru • studio38.ru • offinga •  studio38.ru • anton@studio38.ru •  @offinga • anton@studio38.ru • studio38.ru • @offinga • anton@studio38.ru • studio38.ru • @offinga • anton@studio38.ru • studio38.ru • @offinga • anton@studio38.ru • studio38.ru • @offinga • anton@studio38.ru • studio38.ru •