Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Designer?
Desenvolvedor front-end?
Desenvolvedor back-end?
Empresário?
Nenhum dos anteriores?
Maurício Samy Silva
Maujor
http://kwz.me/AZ http://kwz.me/DC http://kwz.me/Dh maujor@maujor.com
Web Design Responsivo
Técnicas
Mobile first
“Desenhe primeiro para mobile.
Adotar uma abordagem Mobile First não é
mais uma questão de pensar no futuro, ...
“Usuários mobile farão tudo e qualquer coisa
que um usuário desktop fará, desde que seja
apresentada de maneira utilizável...
Desktop first
fonte: http://uxdesign.blog.br
Mobile first
fonte: http://uxdesign.blog.br
P
I
X
E
L
P
E
R
F
E
C
T
Exemplo
Imagens flexíveis
Exemplo
http://httparchive.org/
Art direction
Exemplo
Variável do layout responsivo
Largura da viewport
media query
Variáveis da imagem flexível
• Dimensões de renderização
em CSS pixel
• Densidade da tela
• Diferentes versões disponíveis...
variável
autor
conhece?
navegador
conhece?
dimensões viewport
tamanho imagem em
relação à viewport
densidade da tela
dimen...
WD HTML WG do W3C :
The srcset attribute
28/02/2013 até 19/08/2014
Especificação HTML5
Atributos srcset e sizes
http://kwz...
Nota HTML WG do W3C :
The picture element
26/02/2013 até 22/07/2014
Especificação HTML5
Elemento picture
http://kwz.me/Mp
Suporte nos navegadores
Blink/Chrome/Opera
picture – Chrome 38, Opera 25
srcset – Chrome 34, Opera 21
Webkit/Safari
pictur...
Atributo srcset
<img src=“fallback.jpg”
srcset=“large.jpg 1024w,
medium.jpg 640w,
small.jpg 320w”
sizes=“(min-width: 75em)...
<picture>
<source attr=“valor” ...>
<source attr=“valor” ...>
...
<img src=“ ” alt=“ ”>
</picture>
Elemento picture
<source attr=“valor” ...>
media
srcset
sizes
type
 media queries
 URL, descriptor
 dimensões
 MIME type
<picture>
</picture>
<source
media=“(min-width: 50em)”
srcset=“ibg.jpg 1x, ibg-hd.jpg 2x”>
<source
srcset=“ism.jpg 1x, ism...
<picture>
<source src="logo.svg“
type="image/svg">
<source src="logo.png“
type="image/png">
<img src="logo.gif" alt=“Site ...
http://kwz.me/ML
Obrigado
Web Design Responsivo
Web Design Responsivo
Web Design Responsivo
Web Design Responsivo
Web Design Responsivo
Sie haben dieses Dokument abgeschlossen.
Lade die Datei herunter und lese sie offline.
Nächste SlideShare
Testes
Weiter
Nächste SlideShare
Testes
Weiter
Herunterladen, um offline zu lesen und im Vollbildmodus anzuzeigen.

Teilen

Web Design Responsivo

Herunterladen, um offline zu lesen

Apresentação de técnicas RWD no WebDeveloperWeekRio do iMasters em 16/09/2015

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

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
  • faelaphoenix

    Oct. 30, 2015
  • rogeralbino1

    Sep. 21, 2015
  • dedevillela

    Sep. 19, 2015
  • Justinjanuario

    Sep. 17, 2015
  • tiagowarst

    Sep. 17, 2015
  • RafaelRodrigues69

    Sep. 17, 2015
  • willianschenkel1

    Sep. 17, 2015
  • alexsandrofelix

    Sep. 17, 2015
  • tiagobsantos

    Sep. 17, 2015
  • fabiorogeriosj

    Sep. 17, 2015
  • daniloflavio

    Sep. 17, 2015
  • ma120288

    Sep. 17, 2015
  • DiegoBorges16

    Sep. 17, 2015
  • gilmrodrigues

    Sep. 16, 2015
  • fcschimidt

    Sep. 16, 2015
  • rodrigozandonadi

    Sep. 16, 2015

Apresentação de técnicas RWD no WebDeveloperWeekRio do iMasters em 16/09/2015

Aufrufe

Aufrufe insgesamt

1.506

Auf Slideshare

0

Aus Einbettungen

0

Anzahl der Einbettungen

58

Befehle

Downloads

14

Geteilt

0

Kommentare

0

Likes

16

×