Web Design Responsivo

  • View
    5

  • Download
    0

Embed Size (px)

DESCRIPTION

Em 15 minutos procurei abordar dois tópicos importantes no Design Responsivo a estrutura e o uso condicional de imagens.Quanto a estrutura o foco foi o uso de uma grid para facilitar a divisão de regiões.Para as imagens falei um pouco sobre a recursos do HTML 5 que permitem carregar imagens de acordo com o dispositivo do usuário.Por fim exibi alguns bons exemplos de sites responsivos.

Text of Web Design Responsivo

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