Responsive by Design! - Successfull by Chance?

1.343 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.343
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
83
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

×