Sites responsivos

1.193 visualizações

Publicada em

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.193
No SlideShare
0
A partir de incorporações
0
Número de incorporações
87
Ações
Compartilhamentos
0
Downloads
75
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Sites responsivos

  1. 1. Por que? Antigamente, o acesso à internet era apenas por computador.
  2. 2. Por que? 2013 271,1 milhões de linhas móveis x 201 milhões de brasileiros Hoje, o negócio mudou. blogs.ne10.uol.com.br/mundobit/2014/01/27/brasil-fechou-2013-com-271-milhoes-de-linhas-de-celular/
  3. 3. Quais são os meios de acesso? Qualquer dispositivo que o usuário utilize para consumir informação na web é um meio de acesso. Leitor de RSS Robô do Google Leitor de tela do usuário deficiente visual
  4. 4. O que é Responsive web design? É acima de tudo um conceito. Nós nos responsabilizamos a apresentar a informação de forma acessível e confortável para diversos meios de acesso.
  5. 5. O foco hoje é esse:
  6. 6. Agenda: • Design responsivo • Mobile First • Dicas • Exemplos • Referências
  7. 7. Design responsivo O que um programador vai falar sobre DESIGN para um designer???
  8. 8. Design responsivo • Visão externa, do lado do usuário • Performance • Usabilidade • Somos uma equipe
  9. 9. Design responsivo É focado na economia. tempo economia de código peso de arquivos
  10. 10. Design responsivo É focado no conteúdo. O que é preciso dizer, mostrar? Notícias? Serviços? Produtos? Imagens? Qual o tamanho médio dos textos? Existirá um espaço destinado a anúncios? Qual é o formato da logo?
  11. 11. Design responsivo Pense em estruturas reaproveitáveis.
  12. 12. Quebra-cabeças Esticar, encolher, quebrar e dobrar estruturas
  13. 13. Resoluções O ideal é não quebrar nunca, mas as mais comuns são: www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning
  14. 14. Mobile First Abandona-se o conceito de Graceful Degradation. Remover o conteúdo “desnecessário”.
  15. 15. Mobile First Inicia-se o conceito de Progressive Enhancement. Planejar primeiramente para dispositivos móveis, depois para desktops.
  16. 16. Mobile First A atenção em áreas como Arquitetura de Informação, Usabilidade e Acessibilidade é aumentada É essencial pensar onde cada elemento deve ser posicionado. Te prepara para outros cenários Mobile Desktop SmartTVs
  17. 17. Mobile First > O que é mais importante?
  18. 18. Layout fluído Utiliza toda a área disponível. Exemplos: amazon.com goo.gl/Nvk4XQ
  19. 19. Dicas
  20. 20. Wireframes Projetar para smartphone / tablet / desktop Wireframe sketch sheets sneakpeekit.com
  21. 21. Wallpaper com medidas em pixel www.envisionsuccess.net/images/responsive-guide.jpg
  22. 22. Menu Teste AB: Hamburger vs Menu As pessoas preferem informações claras. exisweb.net/mobile-menu-abtest
  23. 23. Menu Reposicionar elementos: http://www.citychoir.org.uk/ Menu recolhido: http://en.leica-camera.com/ Select box: http://www.highwayhurricanes.com/
  24. 24. Menu
  25. 25. Imagens Servir imagens apropriadas para cada resolução. alistapart.com/article/responsive-web-design
  26. 26. Imagens SVG | Font icons Qualidade em qualquer resolução Performance Nem todo mundo tem um celular de primeira linha A 3G é sofrível css-tricks.com/using-svg
  27. 27. Imagens - retina Magia negra: imagem com o dobro de tamanho, exportada com qualidade 0 = perfeita pra retina e mais leve.
  28. 28. Links Links muito pequenos e juntinhos são difíceis de selecionar O ideal é que o usuário possa navegar no site sem precisar dar zoom. Mobile não tem hover Tudo é click
  29. 29. Tabelas Problema:
  30. 30. Tabelas Possíveis soluções: Ocultar colunas menos importantes Montar um gráfico de pizza ou
  31. 31. Formulários Evitar input de texto. Utilizar checkbox, radio button e select sempre que possível. Desta forma, o usuário precisa digitar o mínimo de informação.
  32. 32. Formulários É realmente necessário um formulário de contato?
  33. 33. Exemplos
  34. 34. Exemplos
  35. 35. Exemplos
  36. 36. Concluindo Sites responsivos são a melhor escolha? DEPENDE É preciso analisar a necessidade, o foco de cada caso. Com o tempo, cada um percebe a melhor forma de fazer.
  37. 37. Referências Tudo sobre responsive web design http://bradfrost.github.io/this-is- responsive/resources.html Design Responsivo na prática: 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 Cenário 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 It’s 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
  38. 38. Dúvidas / Comentários ?
  39. 39. OBRIGADO! willian@exit.ag

×