Адаптивная верстка в веб-дизайне
-
Upload
cit-troya -
Category
Technology
-
view
1.308 -
download
1
Transcript of Адаптивная верстка в веб-дизайне
![Page 1: Адаптивная верстка в веб-дизайне](https://reader033.fdocument.pub/reader033/viewer/2022052621/557f2a88d8b42a46658b48e1/html5/thumbnails/1.jpg)
Адаптивная верстка в веб-дизайне
Мазалецкий А. В.
![Page 2: Адаптивная верстка в веб-дизайне](https://reader033.fdocument.pub/reader033/viewer/2022052621/557f2a88d8b42a46658b48e1/html5/thumbnails/2.jpg)
Адаптивная верстка в веб-дизайне
Использование
мобильного интернета
удваивается
с каждым днем
![Page 3: Адаптивная верстка в веб-дизайне](https://reader033.fdocument.pub/reader033/viewer/2022052621/557f2a88d8b42a46658b48e1/html5/thumbnails/3.jpg)
Адаптивная верстка в веб-дизайне
График роста мобильного интернета
![Page 4: Адаптивная верстка в веб-дизайне](https://reader033.fdocument.pub/reader033/viewer/2022052621/557f2a88d8b42a46658b48e1/html5/thumbnails/4.jpg)
Адаптивная верстка в веб-дизайне
Мобильные браузеры
![Page 5: Адаптивная верстка в веб-дизайне](https://reader033.fdocument.pub/reader033/viewer/2022052621/557f2a88d8b42a46658b48e1/html5/thumbnails/5.jpg)
Адаптивная верстка в веб-дизайне
alistapart.com
![Page 6: Адаптивная верстка в веб-дизайне](https://reader033.fdocument.pub/reader033/viewer/2022052621/557f2a88d8b42a46658b48e1/html5/thumbnails/6.jpg)
Адаптивная верстка в веб-дизайне
Основная идея:
разработка веб-страниц, одинаково корректно
отображающихся на мониторах любого разрешения,
от PC до мобильного телефона
![Page 7: Адаптивная верстка в веб-дизайне](https://reader033.fdocument.pub/reader033/viewer/2022052621/557f2a88d8b42a46658b48e1/html5/thumbnails/7.jpg)
Адаптивная верстка в веб-дизайне
Что получим?
![Page 8: Адаптивная верстка в веб-дизайне](https://reader033.fdocument.pub/reader033/viewer/2022052621/557f2a88d8b42a46658b48e1/html5/thumbnails/8.jpg)
Адаптивная верстка в веб-дизайне
Плюсы и минусы:
![Page 9: Адаптивная верстка в веб-дизайне](https://reader033.fdocument.pub/reader033/viewer/2022052621/557f2a88d8b42a46658b48e1/html5/thumbnails/9.jpg)
Адаптивная верстка в веб-дизайне
Основные принципы:
Использование резинового типа макета
Резиновые изображения
Использование media queries
Необходимо думать о мобильных устройствах с самых ранних этапов проектирования
![Page 10: Адаптивная верстка в веб-дизайне](https://reader033.fdocument.pub/reader033/viewer/2022052621/557f2a88d8b42a46658b48e1/html5/thumbnails/10.jpg)
Адаптивная верстка в веб-дизайне
Особенности технической реализации:
Проектирование и создание дизайна сайта с учетом работы на всем спектре разрешений: от мобильных до широкоформатных дисплеев
Верстка с помощью media-queries
Программирование как на стороне клиента, так и на стороне Сервера для передачи мобильным устройствам изображения меньшего объема и разрешения
![Page 11: Адаптивная верстка в веб-дизайне](https://reader033.fdocument.pub/reader033/viewer/2022052621/557f2a88d8b42a46658b48e1/html5/thumbnails/11.jpg)
Адаптивная верстка в веб-дизайне
Известные сайты, созданные по технологии адаптивного дизайна:
Сайт 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)
![Page 12: Адаптивная верстка в веб-дизайне](https://reader033.fdocument.pub/reader033/viewer/2022052621/557f2a88d8b42a46658b48e1/html5/thumbnails/12.jpg)
Адаптивная верстка в веб-дизайне
Сайт ЦИТ «Троя» (tr35.ru) – мобильная версия
![Page 13: Адаптивная верстка в веб-дизайне](https://reader033.fdocument.pub/reader033/viewer/2022052621/557f2a88d8b42a46658b48e1/html5/thumbnails/13.jpg)
Адаптивная верстка в веб-дизайне
Сайт ЦИТ «Троя» (tr35.ru) – планшетная версия
![Page 14: Адаптивная верстка в веб-дизайне](https://reader033.fdocument.pub/reader033/viewer/2022052621/557f2a88d8b42a46658b48e1/html5/thumbnails/14.jpg)
Адаптивная верстка в веб-дизайне
Сайт ЦИТ «Троя» (tr35.ru) – настольная версия
![Page 15: Адаптивная верстка в веб-дизайне](https://reader033.fdocument.pub/reader033/viewer/2022052621/557f2a88d8b42a46658b48e1/html5/thumbnails/15.jpg)
Адаптивная верстка в веб-дизайне
Responsive Web Design. Ethan Marcotte.
![Page 16: Адаптивная верстка в веб-дизайне](https://reader033.fdocument.pub/reader033/viewer/2022052621/557f2a88d8b42a46658b48e1/html5/thumbnails/16.jpg)
Адаптивная верстка в веб-дизайне
При подготовке презентации использовались материалы:
1.Как сделать сайт для всех устройств http://habrahabr.ru/post/125247/
2.Адаптивный веб дизайн на практике (Егор Епрев) http://www.slideshare.net/profyclub_ru/ss-12246985