Nur responsive zu sein reicht nicht mehr – zu leicht geht man sonst im Meer der Parallax-Templates und gleichförmigen Frameworks unter. Thomas Piribauer und Björn Ganslandt (beide von intuio aus Wien) zeigen, wie Designworkflows sich verändern müssen um gleichzeitig innovative und responsive Websites zu gestalten, die auch unter schwierigen Bedingungen noch gut funktionieren. Der Kern ist dabei eine enge Zusammenarbeit zwischen Design und Entwicklung, bei der Frontend-Performance immer im Fokus bleibt. Prototypen ersetzen für uns Photoshop-Mockups bzw. Wireframes und erlauben so schnelle Iterationen und mutige Experimente jenseits gängiger Prototyping-Tools.

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