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

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

• 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