1. Peter Rozek | ecx.io germany GmbH
RESPONSIVE WEBDESIGN
Prozess, Dialog, Qualität

2. SPEAKER
Peter Rozek

3. PARADIGMENWECHSEL
Phänomäne des Wandels

4. Hardware verändert sich

5. GERÄTEVIELFALT

6. 97*
232*
2010
2011
2012
2013
*BILDSCHIRMAUFLÖSUNGEN

7. 4:3
5:3
8:5
16:9
16:10
17:10
128:75
32:17
SEITENVERHÄLTNIS

8. GUI
Ablösung der grafischen Benutzeroberfläche und ihren
Desktopmetaphern

9. Von der Methaper (GUI)
Zur natürlichen Interaktion (NUI)

10. Maus war gestern, Finger ist heute

11. Nutzungsverhalten und Nutzererwartungen
verändern sich

12. Standards verändern sich

13. NUI
Entwicklung zu wesentlich direktere und intuitivere
Designprinzipien des Natural User Interface Designs

14. NUI
Verhalten wird wichtiger als Aussehen

15. Verändern wir unsere Prozesse ?

16. PARADIGMENWECHSEL
Wir müssen unsere Prozesse und unser Denken ändern

17. „We have to refactor our design process!
[...] We need a Post-PC-Workflow.“
Andy Clark, 2012, Better better Client-Participation in responsive design projects:
http://www.smashingmagazine.com/2012/09/28/better-client-participation-in-responsivedesign-projects/

18. „It is the nature of the web to be flexible, and it should be
our role as designers and developers to embrace this
flexibility, and produce pages which, by being flexible, are
accessible to all. The journey begins by letting go of
control, and becoming flexible.“
John Allsopp, A dao of webdesign: http://alistapart.com/article/dao

19. „Aufbrechen der Gewerke Konzept, Design und Frontend
zugunsten einer engen Zusammenarbeit“
Jens Grochtdreis

20. „Je weiter der Designprozess fortschreitet, desto höher
werden die Kosten für notwendige Anpassungen, während
die Möglichkeit der Designalternativen stetig abnimmt“
Bias and Mayhew; „Cost Justifying Usability“, 1994.

21. Ist ein Design nicht systematisch responsive entwickelt,
wird das Ergebnis ein aufwendig erreichter Kompromiss
sein.

22. Post-PC-Workflow:
KLASSISCHER PROZESS

23. Konzept
Design
Entwicklung
Test
Deliver

24. Unter Kopfhören verstecken

25. Lösungsansatz:
ITERATIVER DESIGNPROZESS

26. Design
Konzept
Test
Entwicklung
Deliver

27. DIALOG
Iterativer Designprozess lebt durch Dialog

28. In Wirkungsweisen und Handlungen denken, nicht in
Funktionen und festen Strukturen

29. DAS WEB IST KEIN
960 GRID RASTER

30. DAS WEB IST NICHT
KONTROLLIERBAR

31. „Give up control – not quality
Jeremy Keith, The Spirit of the Web

32. Responsive Webdesign in Photoshop ?

33. PHOTOSHOP
100% feste und statische Strukturen

34. Breakpoints
Umbruchpunkte in unserem denken und Design
320 Pixel
480 Pixel
768 Pixel
1024 Pixel
1200 Pixel
Smartphone portrait
Smartphone landscape
ein Tablet in landscape
einige Tablets, Notebooks, Desktop Monitore
große Bildschirme

35. Breakpoints
Umbruchpunkte in der Realität
360 Pixel
600 Pixel
1600 Pixel
1600 Pixel
568 Pixel
383 Pixel
Samsung Galaxy S3, Google Nexus, HTC One, ... (portrait)
kleine Tablets (7") in portrait
große Bildschirme, TV?
Toshiba AT330 13.3" Mega-Tablet
iPhone 5 in landscape
Nexus 4 in portrait

36. DESIGN IN PHOTOSHOP
In welcher Auflösung brauchen wir es?

37. „Responsive design is not about mobile. Its not about
tablets. Its not about desktops. Its about The Web.“
Jeremy Keith (@adactio)

38. Frage eines Designers:
„Mit welcher Breite (Pixel) soll ich die Tablett-Ansicht
anlegen.“

39. Developer und Designer an einem Tisch

40. MOBILE FIRST

41. CONTENT STRATEGY

42. IDEEN VISUALISIEREN
mit Photoshop

43. STYLE TILES
Typo, Farben, Forms, Buttons, Komponenten…

45. IDEEN TESTEN
mit HTML Prototypen

46. Schrift

47. Breakpoints

48. Webfonts

49. Iconfonts

50. Cross Browser und Devices Testen

51. Performance

53. (Quelle: http://www.f-i.com/fi/airlines/) und (http://www.youtube.com/watch?v=EIj8gmf6aeY)

54. HTML PROTOTYP
100% Bedienbar, Interaktiv, Responsive

55. DIREKTES FEEDBACK

56. Verhalten
Device
Design
HTML

57. HTMLPROTOTYP
Blaupause für die weitere (Design)Entwicklung

58. CODEREVIEW
Den eigenen Quelltext verbessern

59. FRAMEWORKS
Responsive Frontend Framework

61. FOUNDATION 4
Basiert auf einem 940 px breitem CSS-Grid, und umfasst
SASS-CSS Dateien und Zepto-Javascript (jQuery ähnlich)
http://gumbyframework.com/

63. BOOTSTRAP
Kern des Frameworks sind LESS-CSS, HTML sowie
jQuery Komponenten
http://gumbyframework.com/

65. GUMBY 2
Basiert auf SASS-CSS, HTML, jQuery-Daten und
Modernizr
http://gumbyframework.com/

67. YAML 4
Yaml ist ein kostenpflichtiges CSS-Framework, basiert
auf einem CSS-Grid, HTML und jQuery
http://gumbyframework.com/

69. QUALITÄT

70. Für meine Ellen

71. DANKE, MERCI, THANKS

72. twitter: webinterface
e-mail: peter.rozek@ecx.io
e-mail: hello@peter-rozek.de
FRAGEN