Responsive Webdesign ProcessWebinale, Berlin 03.06.2013Sven Wolfermann | maddesigns
Sven Wolfermann (35)Freelancer für moderne Webentwicklung(HTML5, CSS3, jQuery) aus BerlinCSS3 Adventskalender 2010/2011Org...
„The Web“ im Rückblickflexibel von Haus ausMobile-First Responsive Web Design article by Brad Frost/
Responsive Web DesignKurzer RückblickA List Apart article by Ethan Marcotte/
A List Apart Artikel jetzt responsive
Responsive Webdesign ZutatenFlexible layoutsFlexible mediaMedia queries···/
RWD ist mehrbeyond media queries: anatomy of an adaptive web design
Responsive design is notabout mobile. Its not abouttablets. Its not aboutdesktops. Its about TheWeb.— Jeremy Keith (@adact...
Was können wir über das"Web des Users" sagen?/
last 3 slides taken from „For A Future Friendly Web“ by Brad Frost
Was können wir über das "Web des Users" sagen?Heutzutage wissen wir nicht wie und wo der User unsere Websitebesuchtwir ken...
Aktueller Workflow
Der übliche Prozess in Webprojekten/
Designänderungswunsch vom Kunden/
Designänderungswunsch vom Kunden/
Using photoshop/fireworksfor responsive design is likebringing a knife to agunfight— Andy Clarke (@Malarkey)“”
Photoshop Designs sehen klasse aus,Webseiten sehen niemals so gut aus!/
Bisher haben wir häufig Bilder von Webseitenin Photoshop erstellt, keine abnahmefähigenPrototypen./
Der Workflow muss sich ändern!/
Its impossible to predict allthe complications of aresponsive design up front.We need a more fluidworkflow!— Andy Clarke (...
Design Process in the Responsive Age
Mobile firstTechnik und Konzept
Mobile firstSmartphone firstPlanung, Konzeption, Umsetzung mit dem Fokus auf mobile GeräteDesignplanung für Touch-bedienun...
Mobile first -› Content first!?
taken from „For A Future Friendly Web“ by Brad Frost
Content firstResponsive Content Grundsatz: Je kleiner das Gerät, desto wichtiger istes den wichtigen Inhalt so weit wie mö...
Steven Hays workflow
Content firstSteven Hays workflow1. Content inventory2. Content reference wireframes3. Design in text (structured content)...
Design/
Style TilesDem Kunden Interface Layouts zeigen ohne die Zeit mit mehrerenPhotoshop Layouts zu verschwendenhttp://styletil....
Style Tiles – Beispiel 1/
Style Tiles – Beispiel 2/
Style Tiles – Beispiel 3/
Designing im BrowserVorteile von HTML5/CSS3 nutzenPrototyping im Browser kann schneller seinÄnderungen können schneller um...
Adobe Edge Reflow
Adobe Edge ReflowAdobes neues Baby (public preview)Edge Reflow ist ein Designtool, kein Entwicklungstoolhttp://html.adobe....
ThinkinTags
ThinkinTags
ThinkinTagsDesigning im BrowserYAML4, sowie weitere Frameworks integriertUnterstützung für CSS3 Media Queries zur Erstellu...
Performance/
”You cant mockup performance in Photoshop“/
Theres no correlationbetween the size of thescreen and the amount ofbandwidth available to it.— Ethan Marcotte(@beep)“”
PerformanceEine Annahme...kleiner Bildschirm + Touch (Meist Smartphone)großer Bildschirm + Touch (Meist Tablets)großer Bil...
verbreitete Breakpoints (Umbruchpunkte im Design)320 Pixel - Smartphone portrait480 Pixel - Smartphone landscape768 Pixel ...
Breakpoints der ZukunftWas kommt?Blogpost von Luke Wroblewski "This Week In Mobile..." (7. September 2012)??? pixels - Kin...
TestingTesten auf richtigen Geräten ist sehr wichtigso früh wie möglich testennicht nur das Layout testen, auch Funktionst...
Edge Inspect/
Edge Inspecthttp://html.adobe.com/edge/inspect//
Frameworks, Tools & Resources/
FrameworksFrameworks und moderne Frontend-Techniken beschleunigen dieEntwicklungFoundation 4BootstrapYAML 4aber vorsichtig...
PrototypingResponsive PatternsPattern Lab (Brad Frost)Sass & Compass für schnellere EntwicklungStyleguides dynamisch erste...
Trends are poison. Its sucha shame that Responsivedesign is often degraded tobeing a “Web design trend”.It isnt. Its a new...
Danke für die Aufmerksamkeit!Sven Wolfermann | maddesignshttp://maddesigns.deHTML5 slideshow by Google/
Responsive Webdesign Process
Responsive Webdesign Process
Responsive Webdesign Process
Nächste SlideShare
Wird geladen in …5
×

Responsive Webdesign Process

2.084 Aufrufe

Veröffentlicht am

Responsive Webdesign ist grad der heiße Scheiß, allerdings ist Responsive Webdesign mehr, als eine Desktopwebsite in eine mobile Ansicht zu quetschen. Es muss ein neuer Prozess her. Der alte Workflow "Auftrag bekommen > Recherche > Design erstellen > Abnahme > Design umsetzen" funktioniert so nicht mehr. Im Responsive-Webdesign-Prozess müssen alle Beteiligten eines Webprojekts von der ersten Sekunde an enger zusammenarbeiten. Zudem müssen frühzeitige und häufige Testphasen und Implementierungsstrategien gefunden werden.

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.084
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3
Aktionen
Geteilt
0
Downloads
55
Kommentare
0
Gefällt mir
4
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Responsive Webdesign Process

  1. 1. Responsive Webdesign ProcessWebinale, Berlin 03.06.2013Sven Wolfermann | maddesigns
  2. 2. Sven Wolfermann (35)Freelancer für moderne Webentwicklung(HTML5, CSS3, jQuery) aus BerlinCSS3 Adventskalender 2010/2011Organisator Berlin WebPerf Meetupschreibt Artikel für das T3N-, PHP- undWebstandards-Magazin (new: Screengui.de)mobile GeekWer ist die Flitzpiepe da überhaupt?Twitter: @maddesignsWeb: http://maddesigns.de······/
  3. 3. „The Web“ im Rückblickflexibel von Haus ausMobile-First Responsive Web Design article by Brad Frost/
  4. 4. Responsive Web DesignKurzer RückblickA List Apart article by Ethan Marcotte/
  5. 5. A List Apart Artikel jetzt responsive
  6. 6. Responsive Webdesign ZutatenFlexible layoutsFlexible mediaMedia queries···/
  7. 7. RWD ist mehrbeyond media queries: anatomy of an adaptive web design
  8. 8. Responsive design is notabout mobile. Its not abouttablets. Its not aboutdesktops. Its about TheWeb.— Jeremy Keith (@adactio)“”
  9. 9. Was können wir über das"Web des Users" sagen?/
  10. 10. last 3 slides taken from „For A Future Friendly Web“ by Brad Frost
  11. 11. Was können wir über das "Web des Users" sagen?Heutzutage wissen wir nicht wie und wo der User unsere Websitebesuchtwir kennen die Bildschirmgröße nichtwir kennen die Browsereigenschaften nichtwir kennen die Verbindungsgeschwindigkeit nicht···/
  12. 12. Aktueller Workflow
  13. 13. Der übliche Prozess in Webprojekten/
  14. 14. Designänderungswunsch vom Kunden/
  15. 15. Designänderungswunsch vom Kunden/
  16. 16. Using photoshop/fireworksfor responsive design is likebringing a knife to agunfight— Andy Clarke (@Malarkey)“”
  17. 17. Photoshop Designs sehen klasse aus,Webseiten sehen niemals so gut aus!/
  18. 18. Bisher haben wir häufig Bilder von Webseitenin Photoshop erstellt, keine abnahmefähigenPrototypen./
  19. 19. Der Workflow muss sich ändern!/
  20. 20. Its impossible to predict allthe complications of aresponsive design up front.We need a more fluidworkflow!— Andy Clarke (@Marlarkey)“”
  21. 21. Design Process in the Responsive Age
  22. 22. Mobile firstTechnik und Konzept
  23. 23. Mobile firstSmartphone firstPlanung, Konzeption, Umsetzung mit dem Fokus auf mobile GeräteDesignplanung für Touch-bedienungKonzentration aufs Wesentliche – welche Inhalte sind wichtig –wichtiger Inhalt zuerstVon Anfang an auf den wachsenden Mobil Markt vorbereitet seinNeuste Techniken nutzen, sowohl Browsertechniken, als auchMobiltechniken – Innovationkeine Degradierung der Inhalte, sondern Erweiterung Schritt fürSchritt·······/
  24. 24. Mobile first -› Content first!?
  25. 25. taken from „For A Future Friendly Web“ by Brad Frost
  26. 26. Content firstResponsive Content Grundsatz: Je kleiner das Gerät, desto wichtiger istes den wichtigen Inhalt so weit wie möglich am Anfang der Webseite zuzeigenUsers können den Inhalt auch anders konsumieren...RSS (Google Reader †1. Juli 2013, Feedly)Readability, InstapaperSEO‽···/
  27. 27. Steven Hays workflow
  28. 28. Content firstSteven Hays workflow1. Content inventory2. Content reference wireframes3. Design in text (structured content)4. Linear design5. Breakpoint graph6. Design for various breakpoints7. HTML design prototype8. Present prototype screenshots9. Present prototype after revision10. Document for productionVideo/
  29. 29. Design/
  30. 30. Style TilesDem Kunden Interface Layouts zeigen ohne die Zeit mit mehrerenPhotoshop Layouts zu verschwendenhttp://styletil.es//
  31. 31. Style Tiles – Beispiel 1/
  32. 32. Style Tiles – Beispiel 2/
  33. 33. Style Tiles – Beispiel 3/
  34. 34. Designing im BrowserVorteile von HTML5/CSS3 nutzenPrototyping im Browser kann schneller seinÄnderungen können schneller umgesetzt werdenPhotoshop für Finetuning, Designentscheidungen aber im Browsertreffen····/
  35. 35. Adobe Edge Reflow
  36. 36. Adobe Edge ReflowAdobes neues Baby (public preview)Edge Reflow ist ein Designtool, kein Entwicklungstoolhttp://html.adobe.com/edge/reflow//
  37. 37. ThinkinTags
  38. 38. ThinkinTags
  39. 39. ThinkinTagsDesigning im BrowserYAML4, sowie weitere Frameworks integriertUnterstützung für CSS3 Media Queries zur Erstellung responsiverLayoutsSimulation der Viewportbreite für verschiedene Mobilgeräte, direktaus der Applikation herausVier vorkonfigurierte Layoutgrößen: Phone, Tablet, Desktop,Widescreenhttp://www.thinkintags.com····/
  40. 40. Performance/
  41. 41. ”You cant mockup performance in Photoshop“/
  42. 42. Theres no correlationbetween the size of thescreen and the amount ofbandwidth available to it.— Ethan Marcotte(@beep)“”
  43. 43. PerformanceEine Annahme...kleiner Bildschirm + Touch (Meist Smartphone)großer Bildschirm + Touch (Meist Tablets)großer Bildschirm + Tastatur/Maus (Meist Desktop/Laptops)was ist ein Laptop mit UMTS-Stick » mobile/desktop?gedrosselte Verbindung...·····/
  44. 44. verbreitete Breakpoints (Umbruchpunkte im Design)320 Pixel - Smartphone portrait480 Pixel - Smartphone landscape768 Pixel - ein Tablet in landscape1024 Pixel - einige Tablets, Notebooks, Desktop Monitore1200 Pixel - große Bildschirmeirgendwas vergessen?360 Pixel - Samsung Galaxy S3, Google Nexus, HTC One, ... (portrait)600 Pixel - kleine Tablets (7") in portrait1600 Pixel - große Bildschirme, TV?1600 Pixel - damn, Toshiba AT330 13.3" Mega-Tablet603 Pixel - huh, Nexus 7 hatte beim Erscheinen device-width=603px, jetzt 600px568 Pixel - haha, iPhone 5 in landscape383 Pixel - Nexus 4 in portrait m(············vorsichtig mit Screen- (Device-)pixel und CSS-Pixel (Video)/
  45. 45. Breakpoints der ZukunftWas kommt?Blogpost von Luke Wroblewski "This Week In Mobile..." (7. September 2012)??? pixels - Kindle Fire HD, iPad Mini?, ...Unterschiedlich oder doch nicht? - 533 pixel, 768px, ...Breakpoints nach Inhalt wählen, nicht nach Gerät!···/
  46. 46. TestingTesten auf richtigen Geräten ist sehr wichtigso früh wie möglich testennicht nur das Layout testen, auch Funktionstest & PerformanceRemote Testing und Debugging mit Adobe Edge InspectOpen Device Labgestartet von Jeremy Keith in Brighton#ODL in der Nähe: http://opendevicelab.com/Devices für Projekte mieten: mobile ODL······/
  47. 47. Edge Inspect/
  48. 48. Edge Inspecthttp://html.adobe.com/edge/inspect//
  49. 49. Frameworks, Tools & Resources/
  50. 50. FrameworksFrameworks und moderne Frontend-Techniken beschleunigen dieEntwicklungFoundation 4BootstrapYAML 4aber vorsichtig mit Frameworks, gut für Prototyping, meist Overheadan Resourcen (modulare Frameworks sind ok)··/
  51. 51. PrototypingResponsive PatternsPattern Lab (Brad Frost)Sass & Compass für schnellere EntwicklungStyleguides dynamisch erstellen:Pattern Primer (PHP)KSS (Ruby)StyleDocco (Node.js)······/
  52. 52. Trends are poison. Its sucha shame that Responsivedesign is often degraded tobeing a “Web design trend”.It isnt. Its a new mindset.— Vitaly Friedman (@smashingmag)“”/
  53. 53. Danke für die Aufmerksamkeit!Sven Wolfermann | maddesignshttp://maddesigns.deHTML5 slideshow by Google/

×