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.

1. Responsive
Diferentes Técnicas e Abordagens
DAVID MARQUES | 27 de Maio de 2015
www.hi-interactive.pt

2. SKILLS: UX, SEO, PHP, HTML, CSS, JAVASCRIPT, MySQL, OutSystems
David Marques
Gestor de Projetos
2
Contacto:
davidmarques@hi-interactive.pt

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. Investigação
e estratégia
User Experience
e design
Tecnologias
e desenvolvimento
4
Áreas de Intervenção

5. 5
Referências

6. 6
A beautifully responsive UI framework

7. Temas
7
SILK UI Framework
Padrões

8. http://www.labs.outsystems.net/
silkui
8

9. Responsive
“Já não é uma opção,
é uma necessidade!”
9

10. Como surgiu o termo
“responsive”?
10

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. Este artigo veio dar origem ao famoso livro
“Responsive Web Design”.
12

13. 13
A realidade atual
no acesso à internet...

14. Mais de 4000
devices diferentes!
14
Uma infinidade
de resoluções.

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
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
O que devemos ter em conta
quando pensamos em responsive
Parâmetros
Principais

18. 18
Resolução
A área visual que
temos para apresentar
os conteúdos

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. 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
Como aplicar
o responsive
“Os dois lados
do desenvolvimento”

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
Algumas técnicas
de desenvolvimento

24. 24
Ajustar o conteúdo
à resolução

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
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
Lazy load
Carregar lista de conteúdos à medida
que o utilizador vai efectuando scroll.
Loading...

28. 28
Toggle on
Device
Mostrar conteúdo apenas
com a interação do utilizador.

29. 29
Botões e áreas de interação
maiores para o caso de devices
com touch.

30. 30
Limitar as famílias de fontes
no mobile.

31. 31
Sistema de “Grid”
e “Mobile First”

32. 32
Um sistema de grid que nos
ajude a panear as quebras

33. 33
Planear a nossa
interface começando
sempre por mobile
> > >

34. Obrigado.
www.hi-interactive.pt
Gestor de Projetos
Contacto:
davidmarques@hi-interactive.pt
David Marques