Design Responsivo: Uma abordagem abrangente

Workshop realizado no Ndesign.

Transcript

1. DESIGN RESPONSIVO Uma abordagem abrangente N jeitos BH 2012
3. BRUNA KOCHI @brutiko brutiko@gmail.com
4. ROGER ROSSI @_utgardloki roger.c.rossi@gmail.com
5. A OFICINA HISTÓRICO PRODUÇÃO BOAS PRÁTICAS
6. 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
7. HISTÓRICO DO DESIGN NA WEB
10. Designers começaram a trazer toda a experiência p/ web Necessidade de diferenciar a web HISTÓRICO DO DESIGN NA WEB *
11. HISTÓRICO DO DESIGN NA WEB tipografia | diagramação | contraste | posicionamento
12. HISTÓRICO DO DESIGN NA WEB tipografia | diagramação | contraste | posicionamento
13. HISTÓRICO DO DESIGN NA WEB Passaram a aplicar o mesmo estilo na Web
14. HISTÓRICO DO DESIGN NA WEB Layout em tabelas
15. 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
16. HISTÓRICO DO DESIGN NA WEB Css Zen Garden
21. WEB 1.0 quase não existia a interação com o usuário Conteúdo de leitura HISTÓRICO DO DESIGN NA WEB
22. TECNOLOGIA poucos dispositivos acesso limitado à internet HISTÓRICO DO DESIGN NA WEB internet discada
23. Primeiros computadores pessoais | 80s
24. PC
25. PC Monitor LCD |
26. MicroTac Motorola | 1996
27. Nokia 9000 | 1996
28. Smartphones | 2012
29. Tablets | 2012
30. imac | 2012
31. Novo ipad | 2012
32. Resoluções 1024x768px
33. Resoluções 1024x768px Smartphone Tablet Netbook Desktop 320px 768px 1024px 1600px
34. ACESSOS Uso 24 horas Todo mundo conectado HISTÓRICO DO DESIGN NA WEB Acessibilidade
39. 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
42. DESIGN RESPONSIVO Exibir todo conteúdo em diferentes dispositivos, adequado e acessível
43. DESIGN RESPONSIVO
47. RESPONSIVO flexível media queries boas práticas DESIGN
50. GOLDEN RULE TARGET ÷ CONTEXTO = DIMENSÃO
51. ESTRUTURA target ÷ contexto = dimensão Trocar as larguras fixas por porcentagem 1000px = 100% 600px ÷ 1000 = 60% 340px ÷ 1000 = 34%
52. 600px 340px 1000px
53. 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
54. 22px / 24px 18px / 20px 14px / 20px
55. Tipografia - medidas base body { background: #fafafc; font-family: Georgia, 'Palatino', serif; font-size: 16px; height: 100%; line-height: 18px; }
56. 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
57. #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
58. MEDIA QUERIES all, braille, embossed, handheld, print, projection, screen, speech, tty, tv TIPOS
59. 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
60. BOAS PRÁTICAS Para conseguir funcionar html5 e css3 no IE ie7-js, ie8-js do google modernizer.js HTML5 e CSS3
61. BOAS PRÁTICAS Plugin de auxílio de grid 960.js GRID
62. 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
63. 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
64. BOAS PRÁTICAS Melhora contínua IE FIREFOX CHROME ... Progressive Enhancement
65. BOAS PRÁTICAS Sempre melhor adicionar do que subtrair Esboce seu layout para as versões Mobile First
66. REFERÊNCIAS http://mediaqueri.es/ http://www.evolutionoftheweb.com/ http://dabblet.com/ http://css-tricks.com/which-responsive-images-solution-should-you-use/
67. RESPONSIVO adaptável flexível otimizado DESIGN