Peter Rozek | ecx.io germany GmbH

RESPONSIVE WEBDESIGN
Prozess, Dialog, Qualität
SPEAKER
Peter Rozek
PARADIGMENWECHSEL
Phänomäne des Wandels
Hardware verändert sich
GERÄTEVIELFALT
97*

232*

2010
2011
2012
2013

*BILDSCHIRMAUFLÖSUNGEN
4:3
5:3
8:5
16:9
16:10
17:10
128:75
32:17

SEITENVERHÄLTNIS
GUI
Ablösung der grafischen Benutzeroberfläche und ihren
Desktopmetaphern
Von der Methaper (GUI)
Zur natürlichen Interaktion (NUI)
Maus war gestern, Finger ist heute
Nutzungsverhalten und Nutzererwartungen
verändern sich
Standards verändern sich
NUI
Entwicklung zu wesentlich direktere und intuitivere
Designprinzipien des Natural User Interface Designs
NUI
Verhalten wird wichtiger als Aussehen
Verändern wir unsere Prozesse ?
PARADIGMENWECHSEL
Wir müssen unsere Prozesse und unser Denken ändern
„We have to refactor our design process!
[...] We need a Post-PC-Workflow.“

Andy Clark, 2012, Better better Client-Partic...
„It is the nature of the web to be flexible, and it should be
our role as designers and developers to embrace this
flexibi...
„Aufbrechen der Gewerke Konzept, Design und Frontend
zugunsten einer engen Zusammenarbeit“

Jens Grochtdreis
„Je weiter der Designprozess fortschreitet, desto höher
werden die Kosten für notwendige Anpassungen, während
die Möglichk...
Ist ein Design nicht systematisch responsive entwickelt,
wird das Ergebnis ein aufwendig erreichter Kompromiss
sein.
Post-PC-Workflow:

KLASSISCHER PROZESS
Konzept
Design
Entwicklung
Test
Deliver
Unter Kopfhören verstecken
Lösungsansatz:

ITERATIVER DESIGNPROZESS
Design
Konzept

Test
Entwicklung

Deliver
DIALOG
Iterativer Designprozess lebt durch Dialog
In Wirkungsweisen und Handlungen denken, nicht in
Funktionen und festen Strukturen
DAS WEB IST KEIN
960 GRID RASTER
DAS WEB IST NICHT
KONTROLLIERBAR
„Give up control – not quality

Jeremy Keith, The Spirit of the Web
Responsive Webdesign in Photoshop ?
PHOTOSHOP
100% feste und statische Strukturen
Breakpoints
Umbruchpunkte in unserem denken und Design
320 Pixel
480 Pixel
768 Pixel
1024 Pixel
1200 Pixel

Smartphone por...
Breakpoints
Umbruchpunkte in der Realität
360 Pixel
600 Pixel
1600 Pixel
1600 Pixel
568 Pixel
383 Pixel

Samsung Galaxy S3...
DESIGN IN PHOTOSHOP
In welcher Auflösung brauchen wir es?
„Responsive design is not about mobile. Its not about
tablets. Its not about desktops. Its about The Web.“

Jeremy Keith (...
Frage eines Designers:
„Mit welcher Breite (Pixel) soll ich die Tablett-Ansicht
anlegen.“
Developer und Designer an einem Tisch
MOBILE FIRST
CONTENT STRATEGY
IDEEN VISUALISIEREN
mit Photoshop
STYLE TILES
Typo, Farben, Forms, Buttons, Komponenten…
IDEEN TESTEN
mit HTML Prototypen
Schrift
Breakpoints
Webfonts
Iconfonts
Cross Browser und Devices Testen
Performance
(Quelle: http://www.f-i.com/fi/airlines/) und (http://www.youtube.com/watch?v=EIj8gmf6aeY)
HTML PROTOTYP
100% Bedienbar, Interaktiv, Responsive
DIREKTES FEEDBACK
Verhalten

Device

Design

HTML
HTMLPROTOTYP
Blaupause für die weitere (Design)Entwicklung
CODEREVIEW
Den eigenen Quelltext verbessern
FRAMEWORKS
Responsive Frontend Framework
FOUNDATION 4
Basiert auf einem 940 px breitem CSS-Grid, und umfasst
SASS-CSS Dateien und Zepto-Javascript (jQuery ähnlich)...
BOOTSTRAP
Kern des Frameworks sind LESS-CSS, HTML sowie
jQuery Komponenten

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

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

http://gumbyframework.co...
QUALITÄT
Für meine Ellen
DANKE, MERCI, THANKS
twitter: webinterface
e-mail: peter.rozek@ecx.io
e-mail: hello@peter-rozek.de

FRAGEN
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, Qualität
Nächste SlideShare
Wird geladen in …5
×

Responsive Webdesign: Prozess, Dialog, Qualität

1.201 Aufrufe

Veröffentlicht am

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.201
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
12
Aktionen
Geteilt
0
Downloads
19
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Responsive Webdesign: Prozess, Dialog, Qualität

  1. 1. Peter Rozek | ecx.io germany GmbH RESPONSIVE WEBDESIGN Prozess, Dialog, Qualität
  2. 2. SPEAKER Peter Rozek
  3. 3. PARADIGMENWECHSEL Phänomäne des Wandels
  4. 4. Hardware verändert sich
  5. 5. GERÄTEVIELFALT
  6. 6. 97* 232* 2010 2011 2012 2013 *BILDSCHIRMAUFLÖSUNGEN
  7. 7. 4:3 5:3 8:5 16:9 16:10 17:10 128:75 32:17 SEITENVERHÄLTNIS
  8. 8. GUI Ablösung der grafischen Benutzeroberfläche und ihren Desktopmetaphern
  9. 9. Von der Methaper (GUI) Zur natürlichen Interaktion (NUI)
  10. 10. Maus war gestern, Finger ist heute
  11. 11. Nutzungsverhalten und Nutzererwartungen verändern sich
  12. 12. Standards verändern sich
  13. 13. NUI Entwicklung zu wesentlich direktere und intuitivere Designprinzipien des Natural User Interface Designs
  14. 14. NUI Verhalten wird wichtiger als Aussehen
  15. 15. Verändern wir unsere Prozesse ?
  16. 16. PARADIGMENWECHSEL Wir müssen unsere Prozesse und unser Denken ändern
  17. 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. 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. 19. „Aufbrechen der Gewerke Konzept, Design und Frontend zugunsten einer engen Zusammenarbeit“ Jens Grochtdreis
  20. 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. 21. Ist ein Design nicht systematisch responsive entwickelt, wird das Ergebnis ein aufwendig erreichter Kompromiss sein.
  22. 22. Post-PC-Workflow: KLASSISCHER PROZESS
  23. 23. Konzept Design Entwicklung Test Deliver
  24. 24. Unter Kopfhören verstecken
  25. 25. Lösungsansatz: ITERATIVER DESIGNPROZESS
  26. 26. Design Konzept Test Entwicklung Deliver
  27. 27. DIALOG Iterativer Designprozess lebt durch Dialog
  28. 28. In Wirkungsweisen und Handlungen denken, nicht in Funktionen und festen Strukturen
  29. 29. DAS WEB IST KEIN 960 GRID RASTER
  30. 30. DAS WEB IST NICHT KONTROLLIERBAR
  31. 31. „Give up control – not quality Jeremy Keith, The Spirit of the Web
  32. 32. Responsive Webdesign in Photoshop ?
  33. 33. PHOTOSHOP 100% feste und statische Strukturen
  34. 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. 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. 36. DESIGN IN PHOTOSHOP In welcher Auflösung brauchen wir es?
  37. 37. „Responsive design is not about mobile. Its not about tablets. Its not about desktops. Its about The Web.“ Jeremy Keith (@adactio)
  38. 38. Frage eines Designers: „Mit welcher Breite (Pixel) soll ich die Tablett-Ansicht anlegen.“
  39. 39. Developer und Designer an einem Tisch
  40. 40. MOBILE FIRST
  41. 41. CONTENT STRATEGY
  42. 42. IDEEN VISUALISIEREN mit Photoshop
  43. 43. STYLE TILES Typo, Farben, Forms, Buttons, Komponenten…
  44. 44. IDEEN TESTEN mit HTML Prototypen
  45. 45. Schrift
  46. 46. Breakpoints
  47. 47. Webfonts
  48. 48. Iconfonts
  49. 49. Cross Browser und Devices Testen
  50. 50. Performance
  51. 51. (Quelle: http://www.f-i.com/fi/airlines/) und (http://www.youtube.com/watch?v=EIj8gmf6aeY)
  52. 52. HTML PROTOTYP 100% Bedienbar, Interaktiv, Responsive
  53. 53. DIREKTES FEEDBACK
  54. 54. Verhalten Device Design HTML
  55. 55. HTMLPROTOTYP Blaupause für die weitere (Design)Entwicklung
  56. 56. CODEREVIEW Den eigenen Quelltext verbessern
  57. 57. FRAMEWORKS Responsive Frontend Framework
  58. 58. FOUNDATION 4 Basiert auf einem 940 px breitem CSS-Grid, und umfasst SASS-CSS Dateien und Zepto-Javascript (jQuery ähnlich) http://gumbyframework.com/
  59. 59. BOOTSTRAP Kern des Frameworks sind LESS-CSS, HTML sowie jQuery Komponenten http://gumbyframework.com/
  60. 60. GUMBY 2 Basiert auf SASS-CSS, HTML, jQuery-Daten und Modernizr http://gumbyframework.com/
  61. 61. YAML 4 Yaml ist ein kostenpflichtiges CSS-Framework, basiert auf einem CSS-Grid, HTML und jQuery http://gumbyframework.com/
  62. 62. QUALITÄT
  63. 63. Für meine Ellen
  64. 64. DANKE, MERCI, THANKS
  65. 65. twitter: webinterface e-mail: peter.rozek@ecx.io e-mail: hello@peter-rozek.de FRAGEN

×