Embed Size (px)
Citation preview
Адаптивная верстка в веб-дизайне
Мазалецкий А. В.
Адаптивная верстка в веб-дизайне
Использование
мобильного интернета
удваивается
с каждым днем
Адаптивная верстка в веб-дизайне
График роста мобильного интернета
Адаптивная верстка в веб-дизайне
Мобильные браузеры
Адаптивная верстка в веб-дизайне
alistapart.com
Адаптивная верстка в веб-дизайне
Основная идея:
разработка веб-страниц, одинаково корректно
отображающихся на мониторах любого разрешения,
от PC до мобильного телефона
Адаптивная верстка в веб-дизайне
Что получим?
Адаптивная верстка в веб-дизайне
Плюсы и минусы:
Адаптивная верстка в веб-дизайне
Основные принципы:
Использование резинового типа макета
Резиновые изображения
Использование media queries
Необходимо думать о мобильных устройствах с самых ранних этапов проектирования
Адаптивная верстка в веб-дизайне
Особенности технической реализации:
Проектирование и создание дизайна сайта с учетом работы на всем спектре разрешений: от мобильных до широкоформатных дисплеев
Верстка с помощью media-queries
Программирование как на стороне клиента, так и на стороне Сервера для передачи мобильным устройствам изображения меньшего объема и разрешения
Адаптивная верстка в веб-дизайне
Известные сайты, созданные по технологии адаптивного дизайна:
Сайт The Boston Globe был модернизирован с использованием технологии адаптивного веб-дизайна в конце 2011 года. (http://www.bostonglobe.com/)
Известный англоязычный сайт для дизайнеров Smashing Magazine стал адаптивным в начале 2012 года. (http://www.smashingmagazine.com/)
Сайт французского часа земли WWF (http://earthhour.fr/)
Сайт университета Ланкастера. (http://www.lancs.ac.uk/)
Сайт мобильного браузера Nokia. (http://browser.nokia.com/) Сайт Центра Информационных Технологий «Троя» (http://tr35.ru)
Адаптивная верстка в веб-дизайне
Сайт ЦИТ «Троя» (tr35.ru) – мобильная версия
Адаптивная верстка в веб-дизайне
Сайт ЦИТ «Троя» (tr35.ru) – планшетная версия
Адаптивная верстка в веб-дизайне
Сайт ЦИТ «Троя» (tr35.ru) – настольная версия
Адаптивная верстка в веб-дизайне
Responsive Web Design. Ethan Marcotte.
Адаптивная верстка в веб-дизайне
При подготовке презентации использовались материалы:
1.Как сделать сайт для всех устройств http://habrahabr.ru/post/125247/
2.Адаптивный веб дизайн на практике (Егор Епрев) http://www.slideshare.net/profyclub_ru/ss-12246985
