View
5
Download
0
Category
Preview:
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.
Citation preview
Web Design ResponsivoDicas para projetar um site Responsivo de qualidade
Hans Mösl Mídias Sociais
Contato
Web Designer /hansmosl
/hansmosl
/hansmosl
/hansmosl
/+HansPaulMöslJunior
/in/hansmosl
contato@hans.mosl.nom.br
hans.mosl.nom.br
(21) 98383-7929
Conceito Básico1
Tenha uma boa estrutura2
Cuidado com as imagens3
Bons exemplos4
Conceito Básico1
Web Design Responsivo é:
Atender bem diversos formatos de tela
priorizar conteúdo e bom uso da aplicação
gerar uma boa experiência de uso
Tenha uma boa estrutura2
Parthenon - Grécia: Construído no Séc V a.C.
Tenha uma boa estrutura2
Use uma grade flexível e prática
Começe pelo papel Planeje paracada formato
Use uma Grade Flexível e Prática
http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/05/wireframe-sketch-07.jpg
Começe pelo papel
Planeje para cada formato
http://boatboat001.com/upload/img/responsive_design.png
Versão Desktop (1024x768)http://alistapart.com/d/responsive-web-design/ex/ex-site-mini.html
Versão Tablet (768x1024)http://alistapart.com/d/responsive-web-design/ex/ex-site-mini.html
Versão Celular (360x640)http://alistapart.com/d/responsive-web-design/ex/ex-site-mini.html
Cuidado com as imagens3
Configure imagens específicas 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
Bônus!hans.mosl.nom.br/wordcamp-2015-bonus
Obrigado!
Recommended