Your SlideShare is downloading. ×
Responsive Webdesign: Prozess, Dialog, Qualität
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Responsive Webdesign: Prozess, Dialog, Qualität

767
views

Published on

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
767
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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…
  • 44. IDEEN TESTEN mit HTML Prototypen
  • 45. Schrift
  • 46. Breakpoints
  • 47. Webfonts
  • 48. Iconfonts
  • 49. Cross Browser und Devices Testen
  • 50. Performance
  • 51. (Quelle: http://www.f-i.com/fi/airlines/) und (http://www.youtube.com/watch?v=EIj8gmf6aeY)
  • 52. HTML PROTOTYP 100% Bedienbar, Interaktiv, Responsive
  • 53. DIREKTES FEEDBACK
  • 54. Verhalten Device Design HTML
  • 55. HTMLPROTOTYP Blaupause für die weitere (Design)Entwicklung
  • 56. CODEREVIEW Den eigenen Quelltext verbessern
  • 57. FRAMEWORKS Responsive Frontend Framework
  • 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. BOOTSTRAP Kern des Frameworks sind LESS-CSS, HTML sowie jQuery Komponenten http://gumbyframework.com/
  • 60. GUMBY 2 Basiert auf SASS-CSS, HTML, jQuery-Daten und Modernizr http://gumbyframework.com/
  • 61. YAML 4 Yaml ist ein kostenpflichtiges CSS-Framework, basiert auf einem CSS-Grid, HTML und jQuery http://gumbyframework.com/
  • 62. QUALITÄT
  • 63. Für meine Ellen
  • 64. DANKE, MERCI, THANKS
  • 65. twitter: webinterface e-mail: peter.rozek@ecx.io e-mail: hello@peter-rozek.de FRAGEN