(1) O documento discute o design responsivo (RWD), definindo-o como sites que se adaptam ao contexto de uso, como diferentes dispositivos. (2) Ele explica que RWD envolve grids flexíveis, mídia flexível e media queries. (3) Princípios-chave de RWD incluem ubiquidade, flexibilidade, desempenho, aprimoramento progressivo e orientação para o futuro.

1. RESPONSIVE WEB DESIGN
uma faca de dois legumes
@fredcerdeira
29.11.2013

2. RWD
“uma faca de dois legumes”
2

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. 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. REALIDADE ACTUAL
Mais estatísticas
lukew.com
@lukew
5
Era mobile

6. REALIDADE ACTUAL
Leitura obrigatória!
lukew.com
@lukew
6
Era mobile

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

8. RWD o que é?
2010 - Ethan Marcotte
@beep
8

9. RWD o que é?
@bradfrost
9

10. RWD o que é?
This is the WEB!
@bradfrost
10

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

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. RWD o que é?
(1) Grelha Flexível
(2) Multimédia Flexível
(3) Media Queries
13

14. RWD o que é?
Para além dos 3 pilares, RWD gere-se pelo conceito de
ADAPTIVE LAYOUT / Fluid Grids
14

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. RWD o que é?
Isto é só a ponta do iceberg.
16

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. 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. RWD
PRINCÍPIOS
Ubiquidade
Flexibilidade
Performance
Enhancement / Optimização
Future Friendly
19

20. RWD
PRINCÍPIOS
Ubiquidade
20

21. RWD
PRINCÍPIOS
Ubiquidade
21

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. RWD
PRINCÍPIOS
Flexibilidade
Please turn your device to vertical portrait
orientation to browse our website
23

24. RWD
PRINCÍPIOS
Flexibilidade
320px
480px
600px
768px
960px
1024px
S / M / L / XL
24

25. RWD
PRINCÍPIOS
Flexibilidade
…
768px
960px
!
WTF px!
breakpoints ?
25

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. 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. 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. RWD
PRINCÍPIOS
Performance
1.3MB
carrega em média um site normal no primeiro load.
29

30. RWD
PRINCÍPIOS
Performance
1.3MB
86%
dos sites responsive actuais, pesam o mesmo (ou mais)
em mobile.
JESUS!
30

31. RWD
PRINCÍPIOS
Performance
"if your site is 15MB it's not HTML5, it's stupid."
Cris Heilmann @codepo8 (Mozilla)
31

32. RWD
PRINCÍPIOS
Performance
é invisível
é design
mobitest.akamai.com
32

33. RWD
PRINCÍPIOS
Enhancement / Optimização
33

34. RWD
PRINCÍPIOS
Enhancement / Optimização
PE
BD
34

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. RWD
PRINCÍPIOS
Enhancement / Optimização
if
(Modernizr.canvas)
{
//
enhance!
}
else
{
//degrade
gracefully...
}
36

37. RWD
PRINCÍPIOS
Enhancement / Optimização
.glossy
{
background:
url("glossybutton.png");
}
!
.cssgradients
.glossy
{
background-­‐image:
linear-­‐gradient(top,
#555,
#333);
}
37

38. RWD
PRINCÍPIOS
Future Friendly
Prever o imprevisível
38

39. RWD
PRINCÍPIOS
Future Friendly
39

40. RWD
PRINCÍPIOS
Future Friendly
futurefriend.ly
40

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. 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. É UM MUNDO EM CONSTANTE
EVOLUÇÃO
Falem com os Designers, falem com os Developers
antes de qualquer maquete para o cliente!
!
THANKS!
@fredcerdeira
!
43