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

Категория: Дизайн


500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500

Вы можете ознакомиться и скачать Responsive web design. Что это и как использовать Никита Лукьянец UX evangelist, nikital@microsoft.com skype:nikiluk. Презентация содержит 36 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.


Слайды и текст этой презентации

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

Слайд 2
Описание слайда:
ETHAN ETHAN MARCOTTE

Слайд 3
Описание слайда:
Что почитать 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

Слайд 4
Описание слайда:

Слайд 5
Описание слайда:
ЭТО - ДА ЭТО - ДА

Слайд 6
Описание слайда:
А ТАК? А ТАК?

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

Слайд 8
Описание слайда:

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

Слайд 10
Описание слайда:
Fluid Grid http://alistapart.com/articles/fluidgrids

Слайд 11
Описание слайда:
target ÷ context = result max-width: 61.75em; /* 988px / 16px = 61.75em */

Слайд 12
Описание слайда:
Flexible media

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

Слайд 14
Описание слайда:
@media http://w3.org/TR/css3-mediaqueries

Слайд 15
Описание слайда:
Media queries

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

Слайд 17
Описание слайда:
ЕСЛИ НЕТ ПРОЦЕССА ЕСЛИ НЕТ ПРОЦЕССА

Слайд 18
Описание слайда:

Слайд 19
Описание слайда:
+ КОНТЕНТ + КОНТЕНТ

Слайд 20
Описание слайда:
The absence of a media query is in fact, the first media query. Bryan Rieger, Rethinking the Mobile Web

Слайд 21
Описание слайда:
БЕЗ MEDIA QUERY БЕЗ MEDIA QUERY

Слайд 22
Описание слайда:
ДОПОЛНЯЕМ ДОПОЛНЯЕМ

Слайд 23
Описание слайда:
И ЕЩЕ РАЗ И ЕЩЕ РАЗ

Слайд 24
Описание слайда:
УСТРОЙСТВА ПРОДОЛЖАЮТ ГРУЗИТЬ ЛИШНЕЕ УСТРОЙСТВА ПРОДОЛЖАЮТ ГРУЗИТЬ ЛИШНЕЕ

Слайд 25
Описание слайда:
УСТРОЙСТВА ПРОДОЛЖАЮТ ГРУЗИТЬ ЛИШНЕЕ УСТРОЙСТВА ПРОДОЛЖАЮТ ГРУЗИТЬ ЛИШНЕЕ

Слайд 26
Описание слайда:
Как правильно определить?

Слайд 27
Описание слайда:

Слайд 28
Описание слайда:
БРАУЗЕРЫ ПРИТВОРЯЮТСЯ БРАУЗЕРЫ ПРИТВОРЯЮТСЯ

Слайд 29
Описание слайда:
Фиксируем viewport <meta name=”viewport” content=”width=device-width, initial-scale=1.0” />

Слайд 30
Описание слайда:
Пару инструментов

Слайд 31
Описание слайда:
КАК ВАРИАНТ КАК ВАРИАНТ

Слайд 32
Описание слайда:
ПРИМЕРЫ САЙТОВ HTTP://MEDIAQUERI.ES ПРИМЕРЫ САЙТОВ HTTP://MEDIAQUERI.ES

Слайд 33
Описание слайда:
JS, flexible images http://filamentgroup.com/examples/responsive-images/ <img src="small.r.jpg" data-fullsrc="large.jpg">

Слайд 34
Описание слайда:
HTTP://CSSWIZARDRY.COM/FLUID-GRIDS/ HTTP://CSSWIZARDRY.COM/FLUID-GRIDS/

Слайд 35
Описание слайда:
Поддержка старых браузеров css3-mediaqueries.js или respond.js

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



Похожие презентации

Mypresentation.ru

Загрузить презентацию