Download - Sites responsivos
Por que?
Antigamente, o acesso à internet era apenas por computador.
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/
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
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.
O foco hoje é esse:
Agenda:
• Design responsivo
• Mobile First
• Dicas
• Exemplos
• Referências
Design responsivo
O que um programador vai falar sobre DESIGN
para um designer???
Design responsivo
• Visão externa, do lado do usuário
• Performance
• Usabilidade
• Somos uma equipe
Design responsivo
É focado na economia.
tempo
economia de código
peso de arquivos
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?
Design responsivo
Pense em estruturas reaproveitáveis.
Quebra-cabeças
Esticar, encolher, quebrar e dobrar estruturas
Resoluções
O ideal é não quebrar nunca, mas as mais comuns são:
www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning
Mobile First
Abandona-se o conceito de Graceful Degradation.
Remover o conteúdo “desnecessário”.
Mobile First
Inicia-se o conceito de Progressive Enhancement.
Planejar primeiramente para dispositivos móveis, depois para desktops.
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
Mobile First
> O que é mais importante?
Layout fluído
Utiliza toda a área disponível. Exemplos: amazon.com goo.gl/Nvk4XQ
Dicas
Wireframes
Projetar para smartphone / tablet / desktop
Wireframe sketch sheets
sneakpeekit.com
Wallpaper com medidas em pixel
www.envisionsuccess.net/images/responsive-guide.jpg
Menu
Teste AB: Hamburger vs Menu
As pessoas preferem informações claras.
exisweb.net/mobile-menu-abtest
Menu
Reposicionar elementos: http://www.citychoir.org.uk/ Menu recolhido: http://en.leica-camera.com/ Select box: http://www.highwayhurricanes.com/
Menu
Imagens
Servir imagens apropriadas para cada resolução.
alistapart.com/article/responsive-web-design
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
Imagens - retina
Magia negra: imagem com o dobro de tamanho, exportada com qualidade 0 = perfeita pra retina e mais leve.
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
Tabelas
Problema:
Tabelas
Possíveis soluções:
Ocultar colunas menos importantes
Montar um gráfico de pizza
ou
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.
Formulários
É realmente necessário um formulário de contato?
Exemplos
Exemplos
Exemplos
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.
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/documentation/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/documentation/multi-device-layouts/navigation-patterns/index
Dúvidas / Comentários ?
