Адаптивная верстка в веб-дизайне

Адаптивная верстка в веб-дизайне

Мазалецкий А. В.

Адаптивная верстка в веб-дизайне

Использование

мобильного интернета

удваивается

с каждым днем

Адаптивная верстка в веб-дизайне

График роста мобильного интернета

Адаптивная верстка в веб-дизайне

Мобильные браузеры

Адаптивная верстка в веб-дизайне

 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

Спасибо за внимание!

Александр Мазалецкий <alexander.mazaletskiy@gmail.com>