O documento discute técnicas de design responsivo, com foco em abordagens "mobile first" e o uso de imagens flexíveis e elementos picture para fornecer versões apropriadas de imagens para diferentes dispositivos. Exemplos demonstram como atributos como srcset e sizes funcionam para carregar imagens otimizadas para a tela do usuário.

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

8. 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

9. “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

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

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

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

14. Exemplo

15. Imagens flexíveis
Exemplo

16. http://httparchive.org/

17. Art direction
Exemplo

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

19. 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

20. 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

21. 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

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

23. 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

24. 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

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

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

27. <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

28. <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

29. http://kwz.me/ML

30. Obrigado