1. intuio.at
Responsive by Design!
Successful by Chance?
16.02.2015
Thomas Piribauer / Björn Ganslandt

2. intuio.at
#ixdahh
#rwd

3. intuio.at
MenschMaschineKommunikation

4. intuio.at
Wien
Hafen
Kneipe

5. intuio.at

6. intuio.at

7. intuio.at

8. intuio.at
1

9. intuio.at
2

10. intuio.at

11. intuio.at

12. intuio.at

13. intuio.at
?

14. intuio.at

15. intuio.at

16. intuio.at

17. intuio.at
Mobile = Desktop

18. intuio.at
Gleichzeitig First!
” — intuio @ IxDAHH 15

19. intuio.at
Mobile Desktop

20. intuio.at
Wireframes do not work
anymore.” — Mark Boulton @ Fronteers 12

21. intuio.at
Warum denn nicht?
TZ (B+1)S
S: Anzahl der insgesamt zu designenden Screens
T: Anzahl der Web Page Templates
Z: Anzahl der unterschiedlichen Zustände je Template
B: Anzahl der Breakpoints für verschiedene Displaygrößen

22. intuio.at
Und das bedeutet?
Breakpoints
Templates
Zustände
Mobile Tablet Desktop
T1
T2
= 2
= 3
= 20
20S 180x 3 ( 2 + 1 )x

23. intuio.at
♥Your
friend

24. intuio.at

25. intuio.at
♥

26. intuio.at
E
1
Z (B+1)
1
Do the math
E: Effizienzgewinn durch Designing im Browser gegenüber statischen Screens in %
Z: Anzahl der unterschiedlichen Zustände je Web Page Template
B: Anzahl der Breakpoints für verschiedene Displaygrößen

27. intuio.at
Und das bedeutet?
Breakpoints
Templates
Zustände
Mobile Tablet Desktop
T1
T2
= 2
= 3
= 20
3 ( 2 + 1 )x
E
1
1

28. intuio.at
89%

29. intuio.at

30. intuio.at

31. intuio.at

32. intuio.at
http://intu.io/ixdahh
Happy
Coding

33. intuio.at
Treat Performance as
Design.” — Brad Frost, 2013

34. intuio.at
15.776px

35. intuio.at
2012
15.776px
2015
17.292px

36. intuio.at

37. intuio.at
∅ Website Größe
Quelle: http://www.webperformancetoday.com/2015/01/14/mobile-page-growth/

38. intuio.at
∅ Website Größe
Quelle: http://www.webperformancetoday.com/2015/01/14/mobile-page-growth/

39. intuio.at Quelle: https://twitter.com/scottjehl/statuses/332871134934626306

40. intuio.at

41. intuio.at

42. intuio.at
Responsive
Images

43. intuio.at
Skeletons

44. intuio.at
Critical Path

45. intuio.at
Cutting the
Mustard

46. intuio.at
Offline First