O documento discute o design responsivo, abordando conceitos como mobile first, dicas, exemplos e referências. O foco é planejar sites para dispositivos móveis primeiro e depois para desktops, removendo conteúdo desnecessário e melhorando a usabilidade e acessibilidade em diferentes telas. Wireframes, imagens apropriadas para cada resolução e formulários simplificados são algumas dicas apresentadas.

2. Por que?
Antigamente, o acesso à internet era apenas por computador.

3. 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/

4. 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

5. 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.

6. O foco hoje é esse:

7. Agenda:
• Design responsivo
• Mobile First
• Dicas
• Exemplos
• Referências

8. Design responsivo
O que um programador vai falar sobre
DESIGN
para um designer???

9. Design responsivo
• Visão externa, do lado do usuário
• Performance
• Usabilidade
• Somos uma equipe

10. Design responsivo
É focado na economia.
tempo
economia de código
peso de arquivos

11. 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?

12. Design responsivo
Pense em estruturas reaproveitáveis.

13. Quebra-cabeças
Esticar, encolher, quebrar e dobrar estruturas

14. Resoluções
O ideal é não quebrar nunca, mas as mais comuns são:
www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning

15. Mobile First
Abandona-se o conceito de Graceful Degradation.
Remover o conteúdo “desnecessário”.

16. Mobile First
Inicia-se o conceito de Progressive Enhancement.
Planejar primeiramente para dispositivos móveis, depois para
desktops.

17. 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

18. Mobile First
>
O que é mais
importante?

19. Layout fluído
Utiliza toda a área disponível.
Exemplos:
amazon.com
goo.gl/Nvk4XQ

20. Dicas

21. Wireframes
Projetar para smartphone / tablet / desktop
Wireframe sketch sheets
sneakpeekit.com

22. Wallpaper com medidas em pixel
www.envisionsuccess.net/images/responsive-guide.jpg

23. Menu
Teste AB: Hamburger vs Menu
As pessoas preferem informações claras.
exisweb.net/mobile-menu-abtest

24. Menu
Reposicionar elementos:
http://www.citychoir.org.uk/
Menu recolhido:
http://en.leica-camera.com/
Select box:
http://www.highwayhurricanes.com/

25. Menu

26. Imagens
Servir imagens apropriadas para cada resolução.
alistapart.com/article/responsive-web-design

27. 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

28. Imagens - retina
Magia negra: imagem com o dobro de tamanho, exportada com
qualidade 0 = perfeita pra retina e mais leve.

29. 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

30. Tabelas
Problema:

31. Tabelas
Possíveis soluções:
Ocultar colunas menos importantes
Montar um
gráfico de pizza
ou

32. 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.

33. Formulários
É realmente necessário um formulário de contato?

34. Exemplos

35. Exemplos

36. Exemplos

37. 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.

38. 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

39. Dúvidas / Comentários ?

40. OBRIGADO!
willian@exit.ag