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

Категория: Дизайн
Нажмите для полного просмотра!
Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №1Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №2Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №3Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №4Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №5Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №6Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №7Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №8Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №9Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №10Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №11Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №12Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №13Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №14Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №15Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №16Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №17Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №18Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №19Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №20Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №21Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №22Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №23Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №24Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №25Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №26Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №27Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №28Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №29Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №30Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №31Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №32Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №33Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №34Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №35Responsive web design.  Что это и как использовать  Никита Лукьянец UX evangelist, nikital@microsoft.com  skype:nikiluk, слайд №36

Содержание

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

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


Слайд 1





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

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

Слайд 2





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


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

Слайд 5





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

Слайд 6





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

Слайд 7





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

Слайд 8


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

Слайд 9





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

Слайд 10





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

Слайд 11





target ÷ context = result

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

Слайд 12





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

Слайд 13





Flexible Media
img,embed,object,video {
max-width: 100%;
} 

overflow: hidden

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

Слайд 14





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

Слайд 15





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

Слайд 16





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

Слайд 17





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

Слайд 18


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

Слайд 19





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

Слайд 20





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

Слайд 21





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

Слайд 22





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

Слайд 23





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

Слайд 24





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

Слайд 25





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

Слайд 26





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

Слайд 27


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

Слайд 28





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

Слайд 29





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

Слайд 30





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

Слайд 31





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

Слайд 32





ПРИМЕРЫ САЙТОВ
HTTP://MEDIAQUERI.ES
ПРИМЕРЫ САЙТОВ
HTTP://MEDIAQUERI.ES
Описание слайда:
ПРИМЕРЫ САЙТОВ 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">
Описание слайда:
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/
Описание слайда:
HTTP://CSSWIZARDRY.COM/FLUID-GRIDS/ HTTP://CSSWIZARDRY.COM/FLUID-GRIDS/

Слайд 35





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

Слайд 36





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

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



Похожие презентации
Mypresentation.ru
Загрузить презентацию