Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Web Design Responsivo

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Nächste SlideShare
O papel do Front-End na UX
O papel do Front-End na UX
Wird geladen in …3
×

Hier ansehen

1 von 30 Anzeige
Anzeige

Weitere Verwandte Inhalte

Anzeige

Ähnlich wie Web Design Responsivo (20)

Anzeige

Aktuellste (20)

Web Design Responsivo

  1. 1. Designer? Desenvolvedor front-end? Desenvolvedor back-end? Empresário? Nenhum dos anteriores?
  2. 2. Maurício Samy Silva Maujor http://kwz.me/AZ http://kwz.me/DC http://kwz.me/Dh maujor@maujor.com
  3. 3. Web Design Responsivo Técnicas
  4. 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. 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. 6. Desktop first fonte: http://uxdesign.blog.br
  7. 7. Mobile first fonte: http://uxdesign.blog.br
  8. 8. P I X E L P E R F E C T
  9. 9. Exemplo
  10. 10. Imagens flexíveis Exemplo
  11. 11. http://httparchive.org/
  12. 12. Art direction Exemplo
  13. 13. Variável do layout responsivo Largura da viewport media query
  14. 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. 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. 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. 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. 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. 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. 20. <picture> <source attr=“valor” ...> <source attr=“valor” ...> ... <img src=“ ” alt=“ ”> </picture> Elemento picture
  21. 21. <source attr=“valor” ...> media srcset sizes type  media queries  URL, descriptor  dimensões  MIME type
  22. 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. 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. 24. http://kwz.me/ML
  25. 25. Obrigado

×