30
Web Design Responsivo Reflexões

Front in sampa2014

Embed Size (px)

Citation preview

Web Design

ResponsivoReflexões

Maurício Samy Silva

O dinossauro das CSS

v Maujor v

“Uma longa viagem começa com um único passo”

Lao-Tsé

Tao Te Ching

Livro do caminho e da virtude

81 capítulos

link

April 07, 2000

linkl

controle da página

Tao Te Ching - cap2fluxo e refluxo

Ethan MarcotteEsse cara é o Ethan!

Web design responsivo nos oferece uma maneira de, finalmente, "projetar para o fluxo refluxo das coisas."

gr

id fl

uído

imagens flexíveis

media queries

Ingredientes

Pilares

Mobile first

Luke Wroblewski

explosão

supérfluos

funcionalidades nativas

link

Mobile first

Imagens flexíveis

22/07/2014

26/02/2013

<picture></picture>

link

<picture></picture>

38 25 34

estudo ??

<picture>

</picture>

<source>

<img src alt>

[ 0 ou + ]

[ 1 ]

Sintaxe

<source srcset=“” sizes=“” media=“” type=“”>

Sintaxe

<img src="small.jpg" alt="descrição da imagem">

<picture>

<source srcset=“large.jpg” media=“(min-width: 1000px)”>

<source srcset=“medium.jpg” media=“(min-width: 600px)”>

</picture>

<img src="small.jpg" alt="descrição da imagem">

<picture>

<source srcset=“large.jpg” media=“(min-width: 1000px)”>

<source srcset=“medium.jpg” media=“(min-width: 600px)”>

</picture>

<img src="small.jpg" alt="descrição da imagem">

<picture>

<source srcset=“large.jpg” media=“(min-width: 1000px)”>

<source srcset=“medium.jpg” media=“(min-width: 600px)”>

</picture>

<img src="small.jpg" alt="descrição da imagem">

<picture>

<source srcset=“large.jpg” media=“(min-width: 1000px)”>

<source srcset=“medium.jpg” media=“(min-width: 600px)”>

</picture>

http

://liv

rorw

d.co

m.b

r