da tela retina ao google glass, design responsivo não é feature é obrigação
DESCRIPTION
Slides da lightning talk ministrada no Front In BH. Os slides falam sobre o processo de se desenhar para telas de altas resoluções e também sobre o web design para Google Glass.TRANSCRIPT
![Page 1: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/1.jpg)
–Jaime Silveira
“Digite uma citação aqui.” Hey!
![Page 2: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/2.jpg)
Da tela retina ao Google Glass
Responsive design não é feature, é obrigação
![Page 3: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/3.jpg)
–Jaime Silveira
“Digite uma citação aqui.”
Quem Sou eu?
Pedro MarquesUI/UX Designer @ CI&T
![Page 4: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/4.jpg)
Quem Sou eu?
Pedro MarquesUI/UX Designer @ CI&T
Telas de alta resoluçãoou retina
![Page 5: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/5.jpg)
Telas de alta resolução
![Page 6: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/6.jpg)
Telas de alta resolução
![Page 7: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/7.jpg)
500px 1000px
.bola {width:500px}
Como Assim?
500px
![Page 8: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/8.jpg)
Device Pixel Ratio
Device Independent Pixel
![Page 9: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/9.jpg)
Device Pixel Ratio
Device Independent Pixel
![Page 10: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/10.jpg)
Imagens
![Page 11: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/11.jpg)
@2x
Imagens
![Page 12: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/12.jpg)
Device Pixel Ratio
0.75 1
1.33 1.5
2 3
Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi
![Page 13: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/13.jpg)
Device Pixel Ratio
0.75 1
1.33 1.5
2 3
Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi
Design Responsivo
![Page 14: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/14.jpg)
![Page 15: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/15.jpg)
Conteúdo
![Page 16: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/16.jpg)
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.
"“
![Page 17: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/17.jpg)
Conteúdo
![Page 18: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/18.jpg)
![Page 19: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/19.jpg)
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:
"“
![Page 20: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/20.jpg)
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
![Page 21: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/21.jpg)
Device Pixel Ratio
0.75 1
1.33 1.5
2 3
Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi
![Page 22: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/22.jpg)
Device Pixel Ratio
0.75 1
1.33 1.5
2 3
Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi
![Page 23: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/23.jpg)
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?
![Page 24: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/24.jpg)
Como acessar um website?
![Page 25: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/25.jpg)
Device Pixel Ratio
0.75 1
1.33 1.5
2 3
Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi
“Versão mobile”
![Page 26: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/26.jpg)
Device Pixel Ratio
0.75 1
1.33 1.5
2 3
Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi
“Versão mobile”
![Page 27: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/27.jpg)
Zoom Scroll
Interações
Olhar em volta
![Page 28: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/28.jpg)
Media queries
![Page 29: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/29.jpg)
Media queriesdevice-width: 640px
device-height: 360px
width: 427px
height: 240px
orientation: landscape
-webkit-device-pixel-ratio: 1.5
![Page 30: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/30.jpg)
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
![Page 31: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/31.jpg)
![Page 32: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/32.jpg)
![Page 33: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/33.jpg)
E O BROWSER?
![Page 34: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/34.jpg)
![Page 35: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/35.jpg)
![Page 36: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/36.jpg)
Crie experiênciasNão importa a tela
![Page 37: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/37.jpg)
Crie experiênciasNão importa a telaQ&A
![Page 38: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/38.jpg)
–Jaime Silveira
“Digite uma citação aqui.”
Links!
https://developers.google.com/glass/https://developers.google.com/glass/design/index
![Page 39: Da tela retina ao Google Glass, design responsivo não é feature é obrigação](https://reader033.vdocuments.mx/reader033/viewer/2022060118/558b1968d8b42a471a8b45fa/html5/thumbnails/39.jpg)
–Jaime Silveira
“Digite uma citação aqui.”
Muito Obrigado!
https://twitter.com/pedro_designer