Click here to load reader

Web Design Responsivo

  • View
    1.268

  • Download
    0

Embed Size (px)

Text of Web Design Responsivo

Apresentao do PowerPoint

Designer?Desenvolvedor front-end?Desenvolvedor back-end?Empresrio?Nenhum dos anteriores?

Maurcio Samy SilvaMaujorhttp://kwz.me/AZhttp://kwz.me/DChttp://kwz.me/[email protected]

Web Design ResponsivoTcnicas

Mobile firstDesenhe primeiro para mobile. Adotar uma abordagem Mobile First no mais uma questo de pensar no futuro, e sim de estar antenado com o presente.Edu Agni

Usurios mobile faro tudo e qualquer coisa que um usurio desktop far, desde que seja apresentada de maneira utilizvelBrad Foster

Desktop firstfonte: http://uxdesign.blog.br

Mobile first

fonte: http://uxdesign.blog.br

PIXEL PERFECT

Exemplo

Imagens flexveisExemplo

http://httparchive.org/

Art directionExemplo

Varivel do layout responsivoLargura da viewportmedia query

Variveis da imagem flexvelDimenses de renderizao em CSS pixelDensidade da tela Diferentes verses disponveisLargura da viewport

varivelautorconhece?navegadorconhece?dimenses viewporttamanho imagem em relao viewport

densidade da teladimenses das imagens disponveis

nosimsimnonosimsimnosim via sizesXsim via srcsetX

WD HTML WG do W3C : The srcset attribute28/02/2013 at 19/08/2014Especificao HTML5Atributos srcset e sizeshttp://kwz.me/MB

Nota HTML WG do W3C : The picture element26/02/2013 at 22/07/2014Especificao HTML5Elemento picturehttp://kwz.me/Mp

Suporte nos navegadoresBlink/Chrome/Opera picture Chrome 38, Opera 25 srcset Chrome 34, Opera 21

Webkit/Safaripicture No implementado srcset Safari 6.2, Safari 7.1, iOS8Firefox picture Firefox 38 srcset Firefox 38Microsoft Edge picture Em considerao srcset Em desenvolvimento

Atributo srcset Exemplo

...

Elemento picture

mediasrcsetsizestype media queries URL, descriptor dimenses MIME type

Exemplo

Search related