Designer?Desenvolvedor front-end?Desenvolvedor back-end?
Empresário?Nenhum dos anteriores?
Web Design ResponsivoTécnicas
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
“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
Desktop first
fonte: http://uxdesign.blog.br
Mobile first
fonte: http://uxdesign.blog.br
PIXEL PERFECT
Exemplo
Imagens flexíveisExemplo
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
• Largura da viewport
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
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
Nota HTML WG do W3C : The picture element
26/02/2013 até 22/07/2014
Especificação HTML5Elemento picture
http://kwz.me/Mp
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
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
<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.jpg 2x”> <img src=“ifallback.jpg” alt=“ ”>
Exemplo
<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
http://kwz.me/ML
Obrigado