1.
Designer?
Desenvolvedor front-end?
Desenvolvedor back-end?
Empresário?
Nenhum dos anteriores?

2.
Maurício Samy Silva
Maujor
http://kwz.me/AZ http://kwz.me/DC http://kwz.me/Dh maujor@maujor.com

3.
Web Design Responsivo
Técnicas

4.
Mobile first
“Desenhe primeiro para mobile.
Adotar uma abordagem Mobile First não é
mais uma questão de pensar no futuro, e sim
de estar antenado com o presente”.
Edu Agni

5.
“Usuários mobile farão tudo e qualquer coisa
que um usuário desktop fará, desde que seja
apresentada de maneira utilizável”
Brad Foster

6.
Desktop first
fonte: http://uxdesign.blog.br

7.
Mobile first
fonte: http://uxdesign.blog.br

8.
P
I
X
E
L
P
E
R
F
E
C
T

9.
Exemplo

10.
Imagens flexíveis
Exemplo

11.
http://httparchive.org/

12.
Art direction
Exemplo

13.
Variável do layout responsivo
Largura da viewport
media query

14.
Variáveis da imagem flexível
• Dimensões de renderização
em CSS pixel
• Densidade da tela
• Diferentes versões disponíveis
• Largura da viewport

15.
variável
autor
conhece?
navegador
conhece?
dimensões viewport
tamanho imagem em
relação à viewport
densidade da tela
dimensões das
imagens disponíveis
não sim
sim não
não sim
sim não
sim via sizes
X
sim via srcset
X

16.
WD HTML WG do W3C :
The srcset attribute
28/02/2013 até 19/08/2014
Especificação HTML5
Atributos srcset e sizes
http://kwz.me/MB

17.
Nota HTML WG do W3C :
The picture element
26/02/2013 até 22/07/2014
Especificação HTML5
Elemento picture
http://kwz.me/Mp

18.
Suporte nos navegadores
Blink/Chrome/Opera
picture – Chrome 38, Opera 25
srcset – Chrome 34, Opera 21
Webkit/Safari
picture – Não implementado
srcset – Safari 6.2, Safari 7.1, iOS8
Firefox
picture – Firefox 38
srcset – Firefox 38
Microsoft Edge
picture – Em consideração
srcset – Em desenvolvimento

19.
Atributo srcset
<img src=“fallback.jpg”
srcset=“large.jpg 1024w,
medium.jpg 640w,
small.jpg 320w”
sizes=“(min-width: 75em) 50vw,
(min-width: 50em) 80vw,
(min-width: 20em) 100vw”
alt=“ ”>
Exemplo

20.
<picture>
<source attr=“valor” ...>
<source attr=“valor” ...>
...
<img src=“ ” alt=“ ”>
</picture>
Elemento picture

21.
<source attr=“valor” ...>
media
srcset
sizes
type
 media queries
 URL, descriptor
 dimensões
 MIME type

22.
<picture>
</picture>
<source
media=“(min-width: 50em)”
srcset=“ibg.jpg 1x, ibg-hd.jpg 2x”>
<source
srcset=“ism.jpg 1x, ism.jpg 2x”>
<img src=“ifallback.jpg” alt=“ ”>
Exemplo

23.
<picture>
<source src="logo.svg“
type="image/svg">
<source src="logo.png“
type="image/png">
<img src="logo.gif" alt=“Site do
Maujor">
</picture>
Atributo type

24.
http://kwz.me/ML

25.
Obrigado