intuio.at
Responsive by Design!
Successful by Chance?
16.02.2015
Thomas Piribauer / Björn Ganslandt
intuio.at
#ixdahh
#rwd
intuio.at
MenschMaschineKommunikation
intuio.at
Wien
Hafen
Kneipe
intuio.at
intuio.at
intuio.at
intuio.at
1
intuio.at
2
intuio.at
intuio.at
intuio.at
intuio.at
?
intuio.at
intuio.at
intuio.at
intuio.at
Mobile = Desktop
intuio.at
Gleichzeitig First!
” — intuio @ IxDAHH 15
intuio.at
Mobile Desktop
intuio.at
Wireframes do not work
anymore.” — Mark Boulton @ Fronteers 12
intuio.at
Warum denn nicht?
TZ (B+1)S
S: Anzahl der insgesamt zu designenden Screens
T: Anzahl der Web Page Templates
Z: A...
intuio.at
Und das bedeutet?
Breakpoints
Templates
Zustände
Mobile Tablet Desktop
T1
T2
= 2
= 3
= 20
20S 180x 3 ( 2 + 1 )x
intuio.at
♥Your
friend
intuio.at
intuio.at
♥
intuio.at
E
1
Z (B+1)
1
Do the math
E: Effizienzgewinn durch Designing im Browser gegenüber statischen Screens in %
Z: Anz...
intuio.at
Und das bedeutet?
Breakpoints
Templates
Zustände
Mobile Tablet Desktop
T1
T2
= 2
= 3
= 20
3 ( 2 + 1 )x
E
1
1
intuio.at
89%
intuio.at
intuio.at
intuio.at
intuio.at
http://intu.io/ixdahh
Happy
Coding
intuio.at
Treat Performance as
Design.” — Brad Frost, 2013
intuio.at
15.776px
intuio.at
2012
15.776px
2015
17.292px
intuio.at
intuio.at
∅ Website Größe
Quelle: http://www.webperformancetoday.com/2015/01/14/mobile-page-growth/
intuio.at
∅ Website Größe
Quelle: http://www.webperformancetoday.com/2015/01/14/mobile-page-growth/
intuio.at Quelle: https://twitter.com/scottjehl/statuses/332871134934626306
intuio.at
intuio.at
intuio.at
Responsive
Images
intuio.at
Skeletons
intuio.at
Critical Path
intuio.at
Cutting the
Mustard
intuio.at
Offline First
Nächste SlideShare
Wird geladen in …5
×

Responsive by Design! - Successfull by Chance?

1.408 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Design
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.408
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
78
Aktionen
Geteilt
0
Downloads
10
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Responsive by Design! - Successfull by Chance?

  1. 1. intuio.at Responsive by Design! Successful by Chance? 16.02.2015 Thomas Piribauer / Björn Ganslandt
  2. 2. intuio.at #ixdahh #rwd
  3. 3. intuio.at MenschMaschineKommunikation
  4. 4. intuio.at Wien Hafen Kneipe
  5. 5. intuio.at
  6. 6. intuio.at
  7. 7. intuio.at
  8. 8. intuio.at 1
  9. 9. intuio.at 2
  10. 10. intuio.at
  11. 11. intuio.at
  12. 12. intuio.at
  13. 13. intuio.at ?
  14. 14. intuio.at
  15. 15. intuio.at
  16. 16. intuio.at
  17. 17. intuio.at Mobile = Desktop
  18. 18. intuio.at Gleichzeitig First! ” — intuio @ IxDAHH 15
  19. 19. intuio.at Mobile Desktop
  20. 20. intuio.at Wireframes do not work anymore.” — Mark Boulton @ Fronteers 12
  21. 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. 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. 23. intuio.at ♥Your friend
  24. 24. intuio.at
  25. 25. intuio.at ♥
  26. 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. 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. 28. intuio.at 89%
  29. 29. intuio.at
  30. 30. intuio.at
  31. 31. intuio.at
  32. 32. intuio.at http://intu.io/ixdahh Happy Coding
  33. 33. intuio.at Treat Performance as Design.” — Brad Frost, 2013
  34. 34. intuio.at 15.776px
  35. 35. intuio.at 2012 15.776px 2015 17.292px
  36. 36. intuio.at
  37. 37. intuio.at ∅ Website Größe Quelle: http://www.webperformancetoday.com/2015/01/14/mobile-page-growth/
  38. 38. intuio.at ∅ Website Größe Quelle: http://www.webperformancetoday.com/2015/01/14/mobile-page-growth/
  39. 39. intuio.at Quelle: https://twitter.com/scottjehl/statuses/332871134934626306
  40. 40. intuio.at
  41. 41. intuio.at
  42. 42. intuio.at Responsive Images
  43. 43. intuio.at Skeletons
  44. 44. intuio.at Critical Path
  45. 45. intuio.at Cutting the Mustard
  46. 46. intuio.at Offline First

×