This document discusses responsive design and designing for different screen sizes and devices. It covers topics like retina/high resolution screens, device pixel ratios for mobile devices, and considerations for new platforms like Google Glass. It emphasizes that responsive design is not just for mobile, but creating flexible experiences across all devices. Key quotes encourage delivering content to users however they want to consume it and that it is the designer's responsibility to provide a good experience across formats.

1. –Jaime Silveira
“Digite uma citação aqui.”
Hey!

2. Da tela retina ao Google Glass
Responsive design não é feature, é obrigação

3. –Jaime Silveira
“Digite uma citação aqui.”
Quem Sou eu?
Pedro Marques
UI/UX Designer @ CI&T

4. Quem Sou eu?
Pedro Marques
UI/UX Designer @ CI&T
Telas de alta resolução
ou retina

5. Telas de alta resolução

6. Telas de alta resolução

7. 500px 1000px
.bola {width:500px}
Como Assim?
500px

8. Device Pixel Ratio
Device Independent Pixel

9. Device Pixel Ratio
Device Independent Pixel

10. Imagens

11. @2x
Imagens

12. Device Pixel Ratio
0.75
1
1.33
1.5
2
3
Low dpi
normal, mdpi
tvtdpi
hdpi
retina, xhdpi
xxhdpi

13. Device Pixel Ratio
0.75
1
1.33
1.5
2
3
Low dpi
normal, mdpi
tvtdpi
hdpi
retina, xhdpi
xxhdpi
Design Responsivo

15. Conteúdo

16. Conteúdo
Responsive design is not about “designing for mobile.” But it’s not about
“designing for the desktop,” either. Rather, it’s about adopting a more
flexible, device-agnostic approach to designing for the web.
Ethan Marcotte.
"
“

17. Conteúdo

19. Conteúdo
It is your mission to get your content out, on whichever platform, in
whichever format your audience wants to consume it. Your users get to
decide how, when, and where they want to read your content. It is your
challenge and your responsibility to deliver a good experience to them.
Karen McGrane for A List Apart:
"
“

20. Device Pixel Ratio
0.75
1
1.33
1.5
2
3
Low dpi
normal, mdpi
tvtdpi
hdpi
retina, xhdpi
xxhdpi
Google Glass e a Web

21. Device Pixel Ratio
0.75
1
1.33
1.5
2
3
Low dpi
normal, mdpi
tvtdpi
hdpi
retina, xhdpi
xxhdpi

22. Device Pixel Ratio
0.75
1
1.33
1.5
2
3
Low dpi
normal, mdpi
tvtdpi
hdpi
retina, xhdpi
xxhdpi

23. Device Pixel Ratio
0.75
1
1.33
1.5
2
3
Low dpi
normal, mdpi
tvtdpi
hdpi
retina, xhdpi
xxhdpi
Como acessar um website?

24. Como acessar um website?

25. Device Pixel Ratio
0.75
1
1.33
1.5
2
3
Low dpi
normal, mdpi
tvtdpi
hdpi
retina, xhdpi
xxhdpi
“Versão mobile”

26. Device Pixel Ratio
0.75
1
1.33
1.5
2
3
Low dpi
normal, mdpi
tvtdpi
hdpi
retina, xhdpi
xxhdpi
“Versão mobile”

27. Zoom Scroll
Interações
Olhar em volta

28. Media queries

29. Media queries
device-width: 640px
device-height: 360px
width: 427px
height: 240px
orientation: landscape
-webkit-device-pixel-ratio: 1.5

30. User Agent
Mozilla/5.0 (Linux; U; Android 4.0.4; en-us; Glass 1 Build/IMM76L;
XE7) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile
Safari/534.30

33. E O BROWSER?

36. Crie experiências
Não importa a tela

37. Crie experiências
Não importa a telaQ&A

38. –Jaime Silveira
“Digite uma citação aqui.”
Links!
https://developers.google.com/glass/
https://developers.google.com/glass/design/index

39. –Jaime Silveira
“Digite uma citação aqui.”
Muito Obrigado!
https://twitter.com/pedro_designer
marksdesign.com.br
pedro@marksdesign.com.br