Responsive web design

Transcript

1. DESIGN RESPONSIVO Uma abordagem abrangente N jeitos BH 2012
2. BRUNA KOCHI @brutiko brutiko@gmail.com
3. ROGER ROSSI @_utgardloki roger.c.rossi@gmail.com
4. A OFICINA HISTÓRICO PRODUÇÃO BOAS PRÁTICAS
5. 1990 Criado para distribuição e colaboração de informação Tim-Berners-Lee lança o protocolo http (Hypertext Transfer Protocol) HISTÓRICO DO DESIGN NA WEB
6. HISTÓRICO DO DESIGN NA WEB
9. Designers começaram a trazer toda a experiência p/ web Necessidade de diferenciar a web HISTÓRICO DO DESIGN NA WEB *
10. HISTÓRICO DO DESIGN NA WEB tipografia | diagramação | contraste | posicionamento
11. HISTÓRICO DO DESIGN NA WEB tipografia | diagramação | contraste | posicionamento
12. HISTÓRICO DO DESIGN NA WEB Passaram a aplicar o mesmo estilo na Web
13. HISTÓRICO DO DESIGN NA WEB Layout em tabelas
14. 1998 Layouts de forma semântica, uso de tabelas apenas para dados tabulares Movimento Tableless Html propósito original HISTÓRICO DO DESIGN NA WEB
15. HISTÓRICO DO DESIGN NA WEB Css Zen Garden
20. WEB 1.0 quase não existia a interação com o usuário Conteúdo de leitura HISTÓRICO DO DESIGN NA WEB
21. TECNOLOGIA poucos dispositivos acesso limitado à internet HISTÓRICO DO DESIGN NA WEB internet discada
22. Primeiros computadores pessoais | 80s
23. PC
24. PC Monitor LCD |
25. MicroTac Motorola | 1996
26. Nokia 9000 | 1996
27. Smartphones | 2012
28. Tablets | 2012
29. imac | 2012
30. Novo ipad | 2012
31. Resoluções 1024x768px
32. Resoluções 1024x768px Smartphone Tablet Netbook Desktop 320px 768px 1024px 1600px
33. ACESSOS Uso 24 horas Todo mundo conectado HISTÓRICO DO DESIGN NA WEB Acessibilidade
35. WEB 2.0 Uma nova forma de uso, o usuário agora é participativo Web como plataforma HISTÓRICO DO DESIGN NA WEB Pensar num layout dinâmico
38. DESIGN RESPONSIVO Exibir todo conteúdo em diferentes dispositivos, adequado e acessível
39. DESIGN RESPONSIVO
42. RESPONSIVO flexível media queries boas práticas DESIGN
45. GOLDEN RULE TARGET ÷ CONTEXTO = DIMENSÃO
46. ESTRUTURA target ÷ contexto = dimensão Trocar as larguras fixas por porcentagem 1000px = 100% 600px ÷ 1000 = 60% 340px ÷ 1000 = 34%
47. 600px 340px 1000px
48. TIPOGRAFIA target ÷ contexto = dimensão target tamanho da fonte que vc quer redefinir (em px) contexto tamanho da fonte base, que veio do body (16 px no caso) dimensão resultado em
49. 22px / 24px 18px / 20px 14px / 20px
50. Tipografia - medidas base body { background: #fafafc; font-family: Georgia, 'Palatino', serif; font-size: 16px; height: 100%; line-height: 18px; }
51. body { background: #fafafc; font-family: Georgia, 'Palatino', serif; font-size: 100%; height: 100%; line-height: 1.5em; } /* font-size: 16px; Trocar para porcentagem */ /* 100% equivale a 16px na maioria dos browsers */ Tipografia - medidas base
52. #content article p { font-size: 14px; line-height: 20px; } #content article p { font-size: 0.875em; /* 14px ÷ 16px = 0.875em */ line-height: 1.25em; /* 20px ÷ 14px = 1.42857em */ } Tipografia - redefinindo medidas
53. MEDIA QUERIES all, braille, embossed, handheld, print, projection, screen, speech, tty, tv TIPOS
54. MEDIA QUERIES @media screen and (max-width: 1200px) { /* insert styles here */ } <link rel=”stylesheet” href=”wide.css” media=”screen and (min-width: 1200px)”/> ou USO
55. BOAS PRÁTICAS Para conseguir funcionar html5 e css3 no IE ie7-js, ie8-js do google modernizer.js HTML5 e CSS3
56. BOAS PRÁTICAS Plugin de auxílio de grid 960.js GRID
57. BOAS PRÁTICAS Sempre vai baixar o tamanho menor de imagem, verifica sem tem e permite uma resolução maior e carrega a maior. O ruim é ter 2 requests. https://github.com/teleject/hisrc Hisrc
58. BOAS PRÁTICAS Funciona como a tag video <picture alt="description"> <source src="small.jpg"> <source src="medium.jpg"> <source src="large.jpg"> Define um source p/ cada tamanho de imagem. Tag picture
59. BOAS PRÁTICAS Melhora contínua IE FIREFOX CHROME ... Progressive Enhancement
60. BOAS PRÁTICAS Sempre melhor adicionar do que subtrair Esboce seu layout para as versões Mobile First
61. REFERÊNCIAS http://mediaqueri.es/ http://www.evolutionoftheweb.com/ http://dabblet.com/ http://css-tricks.com/which-responsive-images-solution-should-you-use/
62. RESPONSIVO adaptável flexível otimizado DESIGN