Web Design Responsivo WordCamp-RJ 2015

  • View
    3.689

  • Download
    0

Embed Size (px)

Text of Web Design Responsivo WordCamp-RJ 2015

  • Web Design ResponsivoDicas para projetar um site Responsivo de qualidade

  • Hans Msl Mdias Sociais

    Contato

    Web Designer /hansmosl

    /hansmosl

    /hansmosl

    /hansmosl

    /+HansPaulMslJunior

    /in/hansmosl

    contato@hans.mosl.nom.br

    hans.mosl.nom.br

    (21) 98383-7929

  • Conceito Bsico1

    Tenha uma boa estrutura2

    Cuidado com as imagens3

    Bons exemplos4

  • Conceito Bsico1

    Web Design Responsivo :

    Atender bem diversos formatos de tela

    priorizar contedo e bom uso da aplicao

    gerar uma boa experincia de uso

  • Tenha uma boa estrutura2

    Parthenon - Grcia: Construdo no Sc V a.C.

  • Tenha uma boa estrutura2

    Use uma grade flexvel e prtica

    Comee pelo papel Planeje paracada formato

  • Use uma Grade Flexvel e Prtica

  • http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/05/wireframe-sketch-07.jpg

    Comee pelo papel

  • Planeje para cada formato

    http://boatboat001.com/upload/img/responsive_design.png

  • Verso Desktop (1024x768)http://alistapart.com/d/responsive-web-design/ex/ex-site-mini.html

  • Verso Tablet (768x1024)http://alistapart.com/d/responsive-web-design/ex/ex-site-mini.html

  • Verso Celular (360x640)http://alistapart.com/d/responsive-web-design/ex/ex-site-mini.html

  • Cuidado com as imagens3

    Configure imagens especficas para cada

    formato

  • Responsive Images Community Grouphttps://responsiveimages.org/

  • RICG Pluginhttps://wordpress.org/plugins/ricg-responsive-images/

  • Reid Park Zoohttp://reidparkzoo.org/

    Bons exemplos4

  • RICGhttps://responsiveimages.org/

    Bons exemplos4

  • Media Querieshttp://mediaqueri.es/

    Bons exemplos4

  • Bnus!hans.mosl.nom.br/wordcamp-2015-bonus

  • Obrigado!