RESPONSIVE WEB DESIGN
uma faca de dois legumes

@fredcerdeira
29.11.2013
RWD

“uma faca de dois legumes”

2
RWD - AGENDA
(1) Realidade Actual / Estatísticas
(2) RWD - O que é?
(3) Princípios
(4) Desenvolvimento ( + retro-fit )
(5)...
REALIDADE ACTUAL

Era mobile

7 biliões de pessoas no mundo
5.6 biliões de subscrições mobile.
Mobile representou mais de ...
REALIDADE ACTUAL
Mais estatísticas

lukew.com

@lukew

5

Era mobile
REALIDADE ACTUAL
Leitura obrigatória!

lukew.com

@lukew
6

Era mobile
RWD o que é?
2010 - Ethan Marcotte

alistapart.com
7
RWD o que é?
2010 - Ethan Marcotte

@beep
8
RWD o que é?

@bradfrost

9
RWD o que é?
This is the WEB!

@bradfrost
10
RWD o que é?
“Internet of Things” / Ubiquidade

@bradfrost
11
RWD o que é?
Sites e Web apps que se adaptam ao seu contexto de utilização.
1 único site, 1 único URL, o mesmo conteúdo em...
RWD o que é?
(1) Grelha Flexível
(2) Multimédia Flexível
(3) Media Queries

13
RWD o que é?
Para além dos 3 pilares, RWD gere-se pelo conceito de

ADAPTIVE LAYOUT / Fluid Grids

14
RWD o que é?
2008 flexiblewebbook.com

Layouts fluídos
Técnicas de grelha elástica
Exemplos híbridos
O que usar para cada ...
RWD o que é?

Isto é só a ponta do iceberg.

16
RWD o que é?

FEATURE DETECTION
RWD COM COMPONENTES SERVER-SIDE

APIS

HTML5

PERFORMANCE

ESTRATÉGIA DE CONTEÚDO
LOADING ...
RWD o que é?
FEATURE DETECTION
RWD COM COMPONENTES SERVER-SIDE

APIS

Tem que começar no Design!

HTML5

PERFORMANCE

Cont...
RWD

PRINCÍPIOS

Ubiquidade
Flexibilidade
Performance
Enhancement / Optimização
Future Friendly

19
RWD

PRINCÍPIOS

Ubiquidade

20
RWD

PRINCÍPIOS

Ubiquidade

21
RWD

PRINCÍPIOS

Ubiquidade
Os utilizadores mobile fazem
tudo o que os utilizadores
desktop fazem
se o conteúdo for aprese...
RWD

PRINCÍPIOS

Flexibilidade

Please turn your device to vertical portrait

orientation to browse our website

23
RWD

PRINCÍPIOS

Flexibilidade
320px
480px
600px
768px
960px
1024px
S / M / L / XL
24
RWD

PRINCÍPIOS

Flexibilidade
…
768px
960px

!
WTF px!
breakpoints ?

25
RWD

PRINCÍPIOS

Flexibilidade
ferramentas para teste no browser
http://bradfrostweb.com/demo/ish
http://ami.responsivedes...
RWD

PRINCÍPIOS

Performance

71%
dos utilizadores espera que o site em mobile carregue

tão ou mais rápido do que o site ...
RWD

PRINCÍPIOS

Performance

74%
dos utilizadores abandona o site se demorar 

mais do que 5s a carregar.
Fontes: compuwa...
RWD

PRINCÍPIOS

Performance

1.3MB
carrega em média um site normal no primeiro load.

29
RWD

PRINCÍPIOS

Performance

1.3MB
86%
dos sites responsive actuais, pesam o mesmo (ou mais)
em mobile.

JESUS!

30
RWD

PRINCÍPIOS

Performance

"if your site is 15MB it's not HTML5, it's stupid."
Cris Heilmann @codepo8 (Mozilla)

31
RWD

PRINCÍPIOS

Performance
é invisível
é design
mobitest.akamai.com

32
RWD

PRINCÍPIOS

Enhancement / Optimização

33
RWD

PRINCÍPIOS

Enhancement / Optimização

PE

BD

34
RWD

PRINCÍPIOS

Enhancement / Optimização

Progressive Enhancement VS Beautiful Degradation

O que é melhor? Depende da s...
RWD

PRINCÍPIOS

Enhancement / Optimização

	
  if	
  (Modernizr.canvas)	
  {	
  
	
  	
   //	
  enhance!	
  
	
  }	
  els...
RWD

PRINCÍPIOS

Enhancement / Optimização

	
  .glossy	
  {	
  
	
  	
  	
  	
  background:	
  url("glossybutton.png");	
...
RWD

PRINCÍPIOS

Future Friendly

Prever o imprevisível

38
RWD

PRINCÍPIOS

Future Friendly

39
RWD

PRINCÍPIOS

Future Friendly
futurefriend.ly

40
RWD EM SUMA
Arquitectura de Informação é mais importante do que nunca.
Considerar sempre a Usabilidade em devices.
Content...
RWD

RESOURCES

Uma boa colecção de info útil de gente que sabe o que faz.
!
!
http://bradfrost.github.io/this-is-responsi...
É UM MUNDO EM CONSTANTE
EVOLUÇÃO
Falem com os Designers, falem com os Developers

antes de qualquer maquete para o cliente...
Próximos SlideShares
Carregando em…5
×

RWD

1.434 visualizações

Publicada em

Talk - Frederico Cerdeira - Industry Sessions #1 - Responsive Design - Powered By EDIT.

Publicada em: Educação
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

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

Nenhuma nota no slide

RWD

  1. 1. RESPONSIVE WEB DESIGN uma faca de dois legumes @fredcerdeira 29.11.2013
  2. 2. RWD “uma faca de dois legumes” 2
  3. 3. RWD - AGENDA (1) Realidade Actual / Estatísticas (2) RWD - O que é? (3) Princípios (4) Desenvolvimento ( + retro-fit ) (5) Resources / Tools / Docs / People 3
  4. 4. REALIDADE ACTUAL Era mobile 7 biliões de pessoas no mundo 5.6 biliões de subscrições mobile. Mobile representou mais de 30% do tráfego web em 2012. Mais smartphones e tablets do que pcs. eBay em 2010: $2 biliões transaccionados só em mobile. Em 2009, $600 milhões. Amazon em 2010: 1 bilião de produtos vendidos em mobile. Fontes: Tim Kadlec (@tkadlec) / Jeff Bezos 4
  5. 5. REALIDADE ACTUAL Mais estatísticas lukew.com @lukew 5 Era mobile
  6. 6. REALIDADE ACTUAL Leitura obrigatória! lukew.com @lukew 6 Era mobile
  7. 7. RWD o que é? 2010 - Ethan Marcotte alistapart.com 7
  8. 8. RWD o que é? 2010 - Ethan Marcotte @beep 8
  9. 9. RWD o que é? @bradfrost 9
  10. 10. RWD o que é? This is the WEB! @bradfrost 10
  11. 11. RWD o que é? “Internet of Things” / Ubiquidade @bradfrost 11
  12. 12. RWD o que é? Sites e Web apps que se adaptam ao seu contexto de utilização. 1 único site, 1 único URL, o mesmo conteúdo em diferentes plataformas. Web universal é a fundação. "The Primary design principle underlying the Web's usefulness and growth is universality" (Tim Berners-Lee) 12
  13. 13. RWD o que é? (1) Grelha Flexível (2) Multimédia Flexível (3) Media Queries 13
  14. 14. RWD o que é? Para além dos 3 pilares, RWD gere-se pelo conceito de
 ADAPTIVE LAYOUT / Fluid Grids 14
  15. 15. RWD o que é? 2008 flexiblewebbook.com Layouts fluídos Técnicas de grelha elástica Exemplos híbridos O que usar para cada caso 15
  16. 16. RWD o que é? Isto é só a ponta do iceberg. 16
  17. 17. RWD o que é? FEATURE DETECTION RWD COM COMPONENTES SERVER-SIDE APIS HTML5 PERFORMANCE ESTRATÉGIA DE CONTEÚDO LOADING CONDICIONAL TOUCH ERGONOMIA USABILIDADE @bradfrost 17
  18. 18. RWD o que é? FEATURE DETECTION RWD COM COMPONENTES SERVER-SIDE APIS Tem que começar no Design! HTML5 PERFORMANCE Conteúdo acima de tudo ESTRATÉGIA DE CONTEÚDO LOADING CONDICIONAL Progressive Enhancement TOUCH Beautiful Degradation ERGONOMIA USABILIDADE 18
  19. 19. RWD PRINCÍPIOS Ubiquidade Flexibilidade Performance Enhancement / Optimização Future Friendly 19
  20. 20. RWD PRINCÍPIOS Ubiquidade 20
  21. 21. RWD PRINCÍPIOS Ubiquidade 21
  22. 22. RWD PRINCÍPIOS Ubiquidade Os utilizadores mobile fazem tudo o que os utilizadores desktop fazem se o conteúdo for apresentado correctamente e respeitar as regras básicas de usabilidade. 22
  23. 23. RWD PRINCÍPIOS Flexibilidade Please turn your device to vertical portrait
 orientation to browse our website 23
  24. 24. RWD PRINCÍPIOS Flexibilidade 320px 480px 600px 768px 960px 1024px S / M / L / XL 24
  25. 25. RWD PRINCÍPIOS Flexibilidade … 768px 960px ! WTF px! breakpoints ? 25
  26. 26. RWD PRINCÍPIOS Flexibilidade ferramentas para teste no browser http://bradfrostweb.com/demo/ish http://ami.responsivedesign.is http://responsive.victorcoulon.fr http://screenqueri.es/ http://www.responsinator.com Chrome Developer Tools 26
  27. 27. RWD PRINCÍPIOS Performance 71% dos utilizadores espera que o site em mobile carregue
 tão ou mais rápido do que o site em desktop. Fontes: compuware.com via @bradfrost / @LukeW 27
  28. 28. RWD PRINCÍPIOS Performance 74% dos utilizadores abandona o site se demorar 
 mais do que 5s a carregar. Fontes: compuware.com via @bradfrost / @LukeW 28
  29. 29. RWD PRINCÍPIOS Performance 1.3MB carrega em média um site normal no primeiro load. 29
  30. 30. RWD PRINCÍPIOS Performance 1.3MB 86% dos sites responsive actuais, pesam o mesmo (ou mais) em mobile. JESUS! 30
  31. 31. RWD PRINCÍPIOS Performance "if your site is 15MB it's not HTML5, it's stupid." Cris Heilmann @codepo8 (Mozilla) 31
  32. 32. RWD PRINCÍPIOS Performance é invisível é design mobitest.akamai.com 32
  33. 33. RWD PRINCÍPIOS Enhancement / Optimização 33
  34. 34. RWD PRINCÍPIOS Enhancement / Optimização PE BD 34
  35. 35. RWD PRINCÍPIOS Enhancement / Optimização Progressive Enhancement VS Beautiful Degradation O que é melhor? Depende da situação. PE = mais seguro, mais abrangente. BD = mais fácil, menos abrangente. 35
  36. 36. RWD PRINCÍPIOS Enhancement / Optimização  if  (Modernizr.canvas)  {       //  enhance!    }  else  {       //degrade  gracefully...    } 36
  37. 37. RWD PRINCÍPIOS Enhancement / Optimização  .glossy  {          background:  url("glossybutton.png");    }   !  .cssgradients  .glossy  {          background-­‐image:  linear-­‐gradient(top,  #555,  #333);    } 37
  38. 38. RWD PRINCÍPIOS Future Friendly Prever o imprevisível 38
  39. 39. RWD PRINCÍPIOS Future Friendly 39
  40. 40. RWD PRINCÍPIOS Future Friendly futurefriend.ly 40
  41. 41. RWD EM SUMA Arquitectura de Informação é mais importante do que nunca. Considerar sempre a Usabilidade em devices. Content First - Conteúdo acima de tudo em todo o lado. Mobile First Design. Se querem Look n Feel idêntico às aplicações nativas, 
 façam aplicações nativas. Performance by design - pesos e requests de ficheiros. Evitar Social Plugins! Pensar sempre em layouts adaptativos e conteúdo fluído. 41
  42. 42. RWD RESOURCES Uma boa colecção de info útil de gente que sabe o que faz. ! ! http://bradfrost.github.io/this-is-responsive/resources.html +! http://uptodate.frontendrescue.org 42
  43. 43. É UM MUNDO EM CONSTANTE EVOLUÇÃO Falem com os Designers, falem com os Developers
 antes de qualquer maquete para o cliente! ! THANKS! @fredcerdeira ! 43

×