'

Responsive web design. Что это и как использовать

Понравилась презентация – покажи это...





Слайд 0

Responsive web design. Что это и как использовать Никита Лукьянец UX evangelist, nikital@microsoft.com skype:nikiluk


Слайд 1

ETHAN MARCOTTE


Слайд 2

Что почитать http://www.abookapart.com/products/responsive-web-design http://mattkersley.com/responsive/ http://webdesignerwall.com/tutorials/css-elastic-videos http://csswizardry.com/fluid-grids/ http://mediaqueri.es/ http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/ http://css-tricks.com/css-media-queries


Слайд 3


Слайд 4

ЭТО - ДА


Слайд 5

А ТАК?


Слайд 6

Что:подход Проектирование и разработка должны отвечать пользовательскому поведению и контексту на основании размера экрана, платформы и ориентации.


Слайд 7


Слайд 8

Как:адаптация Гибкая сетка и разметка Медиа Разумное использование CSS


Слайд 9

Fluid Grid http://alistapart.com/articles/fluidgrids


Слайд 10

target ? context = result max-width: 61.75em; /* 988px / 16px = 61.75em */


Слайд 11

Flexible media


Слайд 12

Flexible Media img,embed,object,video { max-width: 100%; } overflow: hidden JS для загрузки подходящего контента


Слайд 13

@media http://w3.org/TR/css3-mediaqueries


Слайд 14

Media queries


Слайд 15

Процесс Создание идеальных макетов(px) делает тяжелым невозможным рассуждения об «отзывчивости» интерфейса.


Слайд 16

ЕСЛИ НЕТ ПРОЦЕССА


Слайд 17


Слайд 18

+ КОНТЕНТ


Слайд 19

The absence of a media query is in fact, the first media query. Bryan Rieger, Rethinking the Mobile Web “


Слайд 20

БЕЗ MEDIA QUERY


Слайд 21

ДОПОЛНЯЕМ


Слайд 22

И ЕЩЕ РАЗ


Слайд 23

УСТРОЙСТВА ПРОДОЛЖАЮТ ГРУЗИТЬ ЛИШНЕЕ


Слайд 24

УСТРОЙСТВА ПРОДОЛЖАЮТ ГРУЗИТЬ ЛИШНЕЕ ГЛАВНОЕ РАЗБИЕНИЕ ВТОРОСТЕПЕННОЕ РАЗБИЕНИЕ


Слайд 25

Как правильно определить?


Слайд 26

Статистика Контент


Слайд 27

БРАУЗЕРЫ ПРИТВОРЯЮТСЯ


Слайд 28

Фиксируем viewport <meta name=”viewport” content=”width=device-width, initial-scale=1.0” />


Слайд 29

Пару инструментов


Слайд 30

КАК ВАРИАНТ


Слайд 31

ПРИМЕРЫ САЙТОВ HTTP://MEDIAQUERI.ES


Слайд 32

JS, flexible images http://filamentgroup.com/examples/responsive-images/ <img src="small.r.jpg" data-fullsrc="large.jpg">


Слайд 33

HTTP://CSSWIZARDRY.COM/FLUID-GRIDS/


Слайд 34

Поддержка старых браузеров css3-mediaqueries.js или respond.js


Слайд 35

Вопросы? Никита Лукьянец UX evangelist, nikital@microsoft.com skype:nikiluk


×

HTML:





Ссылка: