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