Web Design Responsivo
-
Upload
mauricio-maujor -
Category
Technology
-
view
1.271 -
download
0
Transcript of Web Design Responsivo
![Page 1: Web Design Responsivo](https://reader035.fdocuments.net/reader035/viewer/2022070519/58f319ff1a28abf9138b463d/html5/thumbnails/1.jpg)
Designer?Desenvolvedor front-end?Desenvolvedor back-end?
Empresário?Nenhum dos anteriores?
![Page 3: Web Design Responsivo](https://reader035.fdocuments.net/reader035/viewer/2022070519/58f319ff1a28abf9138b463d/html5/thumbnails/3.jpg)
Web Design ResponsivoTécnicas
![Page 4: Web Design Responsivo](https://reader035.fdocuments.net/reader035/viewer/2022070519/58f319ff1a28abf9138b463d/html5/thumbnails/4.jpg)
![Page 5: Web Design Responsivo](https://reader035.fdocuments.net/reader035/viewer/2022070519/58f319ff1a28abf9138b463d/html5/thumbnails/5.jpg)
![Page 6: Web Design Responsivo](https://reader035.fdocuments.net/reader035/viewer/2022070519/58f319ff1a28abf9138b463d/html5/thumbnails/6.jpg)
![Page 7: Web Design Responsivo](https://reader035.fdocuments.net/reader035/viewer/2022070519/58f319ff1a28abf9138b463d/html5/thumbnails/7.jpg)
![Page 8: Web Design Responsivo](https://reader035.fdocuments.net/reader035/viewer/2022070519/58f319ff1a28abf9138b463d/html5/thumbnails/8.jpg)
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
![Page 9: Web Design Responsivo](https://reader035.fdocuments.net/reader035/viewer/2022070519/58f319ff1a28abf9138b463d/html5/thumbnails/9.jpg)
“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
![Page 10: Web Design Responsivo](https://reader035.fdocuments.net/reader035/viewer/2022070519/58f319ff1a28abf9138b463d/html5/thumbnails/10.jpg)
Desktop first
fonte: http://uxdesign.blog.br
![Page 11: Web Design Responsivo](https://reader035.fdocuments.net/reader035/viewer/2022070519/58f319ff1a28abf9138b463d/html5/thumbnails/11.jpg)
Mobile first
fonte: http://uxdesign.blog.br
![Page 12: Web Design Responsivo](https://reader035.fdocuments.net/reader035/viewer/2022070519/58f319ff1a28abf9138b463d/html5/thumbnails/12.jpg)
PIXEL PERFECT
![Page 13: Web Design Responsivo](https://reader035.fdocuments.net/reader035/viewer/2022070519/58f319ff1a28abf9138b463d/html5/thumbnails/13.jpg)
![Page 14: Web Design Responsivo](https://reader035.fdocuments.net/reader035/viewer/2022070519/58f319ff1a28abf9138b463d/html5/thumbnails/14.jpg)
Exemplo
![Page 15: Web Design Responsivo](https://reader035.fdocuments.net/reader035/viewer/2022070519/58f319ff1a28abf9138b463d/html5/thumbnails/15.jpg)
Imagens flexíveisExemplo
![Page 17: Web Design Responsivo](https://reader035.fdocuments.net/reader035/viewer/2022070519/58f319ff1a28abf9138b463d/html5/thumbnails/17.jpg)
Art direction
Exemplo
![Page 18: Web Design Responsivo](https://reader035.fdocuments.net/reader035/viewer/2022070519/58f319ff1a28abf9138b463d/html5/thumbnails/18.jpg)
Variável do layout responsivo
Largura da viewport
media query
![Page 19: Web Design Responsivo](https://reader035.fdocuments.net/reader035/viewer/2022070519/58f319ff1a28abf9138b463d/html5/thumbnails/19.jpg)
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
![Page 20: Web Design Responsivo](https://reader035.fdocuments.net/reader035/viewer/2022070519/58f319ff1a28abf9138b463d/html5/thumbnails/20.jpg)
variável autorconhece?
navegadorconhece?
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 sizesX
sim via srcsetX
![Page 21: Web Design Responsivo](https://reader035.fdocuments.net/reader035/viewer/2022070519/58f319ff1a28abf9138b463d/html5/thumbnails/21.jpg)
WD HTML WG do W3C : The srcset attribute
28/02/2013 até 19/08/2014
Especificação HTML5Atributos srcset e sizes
http://kwz.me/MB
![Page 22: Web Design Responsivo](https://reader035.fdocuments.net/reader035/viewer/2022070519/58f319ff1a28abf9138b463d/html5/thumbnails/22.jpg)
Nota HTML WG do W3C : The picture element
26/02/2013 até 22/07/2014
Especificação HTML5Elemento picture
http://kwz.me/Mp
![Page 23: Web Design Responsivo](https://reader035.fdocuments.net/reader035/viewer/2022070519/58f319ff1a28abf9138b463d/html5/thumbnails/23.jpg)
Suporte nos navegadoresBlink/Chrome/Opera
picture – Chrome 38, Opera 25 srcset – Chrome 34, Opera 21
Webkit/Safaripicture – Não implementado
srcset – Safari 6.2, Safari 7.1, iOS8Firefox
picture – Firefox 38 srcset – Firefox 38
Microsoft Edge picture – Em consideração
srcset – Em desenvolvimento
![Page 24: Web Design Responsivo](https://reader035.fdocuments.net/reader035/viewer/2022070519/58f319ff1a28abf9138b463d/html5/thumbnails/24.jpg)
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
![Page 25: Web Design Responsivo](https://reader035.fdocuments.net/reader035/viewer/2022070519/58f319ff1a28abf9138b463d/html5/thumbnails/25.jpg)
<picture> <source attr=“valor” ...> <source attr=“valor” ...> ... <img src=“ ” alt=“ ”>
</picture>
Elemento picture
![Page 26: Web Design Responsivo](https://reader035.fdocuments.net/reader035/viewer/2022070519/58f319ff1a28abf9138b463d/html5/thumbnails/26.jpg)
<source attr=“valor” ...>
media
srcset
sizes
type
media queries URL, descriptor dimensões MIME type
![Page 27: Web Design Responsivo](https://reader035.fdocuments.net/reader035/viewer/2022070519/58f319ff1a28abf9138b463d/html5/thumbnails/27.jpg)
<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
![Page 28: Web Design Responsivo](https://reader035.fdocuments.net/reader035/viewer/2022070519/58f319ff1a28abf9138b463d/html5/thumbnails/28.jpg)
<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
![Page 30: Web Design Responsivo](https://reader035.fdocuments.net/reader035/viewer/2022070519/58f319ff1a28abf9138b463d/html5/thumbnails/30.jpg)
Obrigado