Sites responsivos

Download Sites responsivos

Post on 22-Apr-2015

616 views

Category:

Technology

3 download

Embed Size (px)

DESCRIPTION

 

TRANSCRIPT

<ul><li> 1. Por que? Antigamente, o acesso internet era apenas por computador. </li> <li> 2. Por que? 2013 271,1 milhes de linhas mveis x 201 milhes de brasileiros Hoje, o negcio mudou. blogs.ne10.uol.com.br/mundobit/2014/01/27/brasil-fechou-2013-com-271-milhoes-de-linhas-de-celular/ </li> <li> 3. Quais so os meios de acesso? Qualquer dispositivo que o usurio utilize para consumir informao na web um meio de acesso. Leitor de RSS Rob do Google Leitor de tela do usurio deficiente visual </li> <li> 4. O que Responsive web design? acima de tudo um conceito. Ns nos responsabilizamos a apresentar a informao de forma acessvel e confortvel para diversos meios de acesso. </li> <li> 5. O foco hoje esse: </li> <li> 6. Agenda: Design responsivo Mobile First Dicas Exemplos Referncias </li> <li> 7. Design responsivo O que um programador vai falar sobre DESIGN para um designer??? </li> <li> 8. Design responsivo Viso externa, do lado do usurio Performance Usabilidade Somos uma equipe </li> <li> 9. Design responsivo focado na economia. tempo economia de cdigo peso de arquivos </li> <li> 10. Design responsivo focado no contedo. O que preciso dizer, mostrar? Notcias? Servios? Produtos? Imagens? Qual o tamanho mdio dos textos? Existir um espao destinado a anncios? Qual o formato da logo? </li> <li> 11. Design responsivo Pense em estruturas reaproveitveis. </li> <li> 12. Quebra-cabeas Esticar, encolher, quebrar e dobrar estruturas </li> <li> 13. Resolues O ideal no quebrar nunca, mas as mais comuns so: www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning </li> <li> 14. Mobile First Abandona-se o conceito de Graceful Degradation. Remover o contedo desnecessrio. </li> <li> 15. Mobile First Inicia-se o conceito de Progressive Enhancement. Planejar primeiramente para dispositivos mveis, depois para desktops. </li> <li> 16. Mobile First A ateno em reas como Arquitetura de Informao, Usabilidade e Acessibilidade aumentada essencial pensar onde cada elemento deve ser posicionado. Te prepara para outros cenrios Mobile Desktop SmartTVs </li> <li> 17. Mobile First &gt; O que mais importante? </li> <li> 18. Layout fludo Utiliza toda a rea disponvel. Exemplos: amazon.com goo.gl/Nvk4XQ </li> <li> 19. Dicas </li> <li> 20. Wireframes Projetar para smartphone / tablet / desktop Wireframe sketch sheets sneakpeekit.com </li> <li> 21. Wallpaper com medidas em pixel www.envisionsuccess.net/images/responsive-guide.jpg </li> <li> 22. Menu Teste AB: Hamburger vs Menu As pessoas preferem informaes claras. exisweb.net/mobile-menu-abtest </li> <li> 23. Menu Reposicionar elementos: http://www.citychoir.org.uk/ Menu recolhido: http://en.leica-camera.com/ Select box: http://www.highwayhurricanes.com/ </li> <li> 24. Menu </li> <li> 25. Imagens Servir imagens apropriadas para cada resoluo. alistapart.com/article/responsive-web-design </li> <li> 26. Imagens SVG | Font icons Qualidade em qualquer resoluo Performance Nem todo mundo tem um celular de primeira linha A 3G sofrvel css-tricks.com/using-svg </li> <li> 27. Imagens - retina Magia negra: imagem com o dobro de tamanho, exportada com qualidade 0 = perfeita pra retina e mais leve. </li> <li> 28. Links Links muito pequenos e juntinhos so difceis de selecionar O ideal que o usurio possa navegar no site sem precisar dar zoom. Mobile no tem hover Tudo click </li> <li> 29. Tabelas Problema: </li> <li> 30. Tabelas Possveis solues: Ocultar colunas menos importantes Montar um grfico de pizza ou </li> <li> 31. Formulrios Evitar input de texto. Utilizar checkbox, radio button e select sempre que possvel. Desta forma, o usurio precisa digitar o mnimo de informao. </li> <li> 32. Formulrios realmente necessrio um formulrio de contato? </li> <li> 33. Exemplos </li> <li> 34. Exemplos </li> <li> 35. Exemplos </li> <li> 36. Concluindo Sites responsivos so a melhor escolha? DEPENDE preciso analisar a necessidade, o foco de cada caso. Com o tempo, cada um percebe a melhor forma de fazer. </li> <li> 37. Referncias Tudo sobre responsive web design http://bradfrost.github.io/this-is- responsive/resources.html Design Responsivo na prtica: do rascunho ao digital http://tableless.com.br/design-responsivo-na-pratica- do-rascunho-ao-digita/ Responsive Web Design http://alistapart.com/article/responsive-web-design O Cenrio do Web Design Responsivo http://tableless.com.br/o-cenario-do-web-design- responsivo/ Mobile First A arte de pensar com foco http://tableless.com.br/mobile-first-a-arte-de-pensar- com-foco/ Why and How to avoid Hamburger Menus http://lmjabreu.com/post/why-and-how-to-avoid- hamburger-menus/ Responsive Web Design Fundamentals https://developers.google.com/web/fundamentals/doc umentation/multi-device-layouts/rwd- fundamentals/index Mobile First Design: Why Its Great and Why It Sucks http://designshack.net/articles/css/mobilefirst/ Hamburger vs Menu: The Final AB Test http://exisweb.net/menu-eats-hamburger Navigation and Action Patterns https://developers.google.com/web/fundamentals/doc umentation/multi-device-layouts/navigation- patterns/index </li> <li> 38. Dvidas / Comentrios ? </li> <li> 39. OBRIGADO! willian@exit.ag </li> </ul>