Responsive – Diferentes Técnicas e Abordagens

495 visualizações

Publicada em

David Marques, Full Stack Developer - orador na 10ª edição das Industry Sessions by EDIT. com a temática UX & Responsive Design, no Porto.

Quando se fala em interface web, o Responsive já não é uma opção e sim uma prioridade!
Todos os dias surgem novos desafios provocados pelas constantes invocações nos devices. As técnicas de responsive que temos ao nosso dispor, ajudam-nos a dar uma resposta com garantias a esses desafios.

0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
495
No SlideShare
0
A partir de incorporações
0
Número de incorporações
16
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Responsive – Diferentes Técnicas e Abordagens

  1. 1. Responsive   Diferentes Técnicas e Abordagens DAVID MARQUES | 27 de Maio de 2015 www.hi-interactive.pt
  2. 2. SKILLS: UX, SEO, PHP, HTML, CSS, JAVASCRIPT, MySQL, OutSystems David  Marques   Gestor de Projetos 2 Contacto: davidmarques@hi-interactive.pt
  3. 3. 3 Somos uma agência digital especializada em user experience. Há mais de uma década que trabalhamos com empresas nacionais e internacionais, desde startups a multinacionais. Fazemos parte da comunidade STEAM, uma empresa de consultoria com mais de 20 anos de presença no mercado.
  4. 4. Investigação   e  estratégia   User  Experience   e  design   Tecnologias   e  desenvolvimento   4 Áreas  de  Intervenção  
  5. 5. 5 Referências  
  6. 6. 6 A beautifully responsive UI framework
  7. 7. Temas 7 SILK  UI  Framework   Padrões
  8. 8. http://www.labs.outsystems.net/ silkui 8
  9. 9. Responsive   “Já não é uma opção, é uma necessidade!” 9
  10. 10. Como  surgiu  o  termo   “responsive”?   10
  11. 11. A origem do termo é atribuída a Ethan  Marcotte, quando em 2010 escreveu um artigo onde usou o termo “responsive   web  design” para denominar uma analise ao comportamento de um site visto em diferentes resoluções. 11
  12. 12. Este artigo veio dar origem ao famoso livro “Responsive  Web  Design”.   12
  13. 13. 13 A  realidade  atual   no  acesso  à  internet...  
  14. 14. Mais  de  4000   devices  diferentes!   14 Uma infinidade de resoluções.
  15. 15. Acesso  mobile   cresce  todos  os  dias   15 O acesso mobile já ultrapassou o acesso por computador! 7.210 Biliões População Total 3.010 Biliões Utilizadores Ativos de Internet 2.078 Biliões Contas de Redes Sociais Ativas 3.649 Biliões Utilizadores Mobile 1.685 Biliões Contas Mobile de Redes Sociais Ativas
  16. 16. 16 Indexação  do  Google  prefere  mobile   Recentemente no passado dia 21 de Abril o Google passou a dar prioridade na indexação a websites compatíveis com mobile quando a pesquisa é efetuada a partir de mobile.
  17. 17. 17 O que devemos ter em conta quando pensamos em responsive Parâmetros Principais
  18. 18. 18 Resolução   A área visual que temos para apresentar os conteúdos
  19. 19. 19 Resolução   A área visual que temos para apresentar os conteúdos Se  é  touch A forma como utilizador interage com o device
  20. 20. Resolução   A área visual que temos para apresentar os conteúdos 20 Se  é  touch A forma como utilizador interage com o device A  velocidade   de  acesso     A capacidade que o device tem de reproduzir os conteúdos
  21. 21. 21 Como  aplicar   o  responsive   “Os dois lados do desenvolvimento”
  22. 22. 22 Filtramos os conteúdos a enviar para o cliente (device) do lado do servidor. Optimizados os conteúdos do lado do cliente (device). Lado  do   Servidor   Lado  do   Cliente  
  23. 23. 23 Algumas  técnicas   de  desenvolvimento  
  24. 24. 24 Ajustar  o  conteúdo   à  resolução  
  25. 25. 25 Apenas  conteúdo  necessário   Devemos filtrar os conteúdos para o device. Em ecrãs de resolução inferior não temos espaço para dar destaque a tudo, devemos ser mais precisos no conteúdo que o utilizador procura. Nem sempre é devemos enviar todo o conteúdo que temos em desktop para o mobile.
  26. 26. 26 Desktop Tablet Phone Optimizar  as  imagens   consoante  o  device Devemos fornecer imagens com diferente qualidade e resolução consoante o tipo de device e a velocidade de acesso.
  27. 27. 27 Lazy  load   Carregar lista de conteúdos à medida que o utilizador vai efectuando scroll. Loading...  
  28. 28. 28 Toggle  on   Device Mostrar conteúdo apenas com a interação do utilizador.
  29. 29. 29 Botões  e  áreas  de  interação   maiores  para  o  caso  de  devices   com  touch.  
  30. 30. 30 Limitar  as  famílias  de  fontes   no  mobile.  
  31. 31. 31 Sistema  de  “Grid”   e  “Mobile  First”  
  32. 32. 32 Um  sistema  de  grid  que  nos   ajude  a  panear  as  quebras  
  33. 33. 33 Planear  a  nossa   interface  começando   sempre  por  mobile   > > >
  34. 34. Obrigado.   www.hi-interactive.pt Gestor de Projetos Contacto: davidmarques@hi-interactive.pt David  Marques  

×