Responsive Webdesign Process

1. Responsive Webdesign ProcessWebinale, Berlin 03.06.2013Sven Wolfermann | maddesigns

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. „The Web“ im Rückblickflexibel von Haus ausMobile-First Responsive Web Design article by Brad Frost/

4. Responsive Web DesignKurzer RückblickA List Apart article by Ethan Marcotte/

5. A List Apart Artikel jetzt responsive

6. Responsive Webdesign ZutatenFlexible layoutsFlexible mediaMedia queries···/

7. RWD ist mehrbeyond media queries: anatomy of an adaptive web design

8. Responsive design is notabout mobile. Its not abouttablets. Its not aboutdesktops. Its about TheWeb.— Jeremy Keith (@adactio)“”

9. Was können wir über das"Web des Users" sagen?/

10. last 3 slides taken from „For A Future Friendly Web“ by Brad Frost

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. Aktueller Workflow

13. Der übliche Prozess in Webprojekten/

14. Designänderungswunsch vom Kunden/

15. Designänderungswunsch vom Kunden/

16. Using photoshop/fireworksfor responsive design is likebringing a knife to agunfight— Andy Clarke (@Malarkey)“”

17. Photoshop Designs sehen klasse aus,Webseiten sehen niemals so gut aus!/

18. Bisher haben wir häufig Bilder von Webseitenin Photoshop erstellt, keine abnahmefähigenPrototypen./

19. Der Workflow muss sich ändern!/

20. Its impossible to predict allthe complications of aresponsive design up front.We need a more fluidworkflow!— Andy Clarke (@Marlarkey)“”

21. Design Process in the Responsive Age

22. Mobile firstTechnik und Konzept

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. Mobile first -› Content first!?

25. taken from „For A Future Friendly Web“ by Brad Frost

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. Steven Hays workflow

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. Design/

30. Style TilesDem Kunden Interface Layouts zeigen ohne die Zeit mit mehrerenPhotoshop Layouts zu verschwendenhttp://styletil.es//

31. Style Tiles – Beispiel 1/

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. Adobe Edge Reflow

36. Adobe Edge ReflowAdobes neues Baby (public preview)Edge Reflow ist ein Designtool, kein Entwicklungstoolhttp://html.adobe.com/edge/reflow//

37. ThinkinTags

38. ThinkinTags

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. Performance/

41. ”You cant mockup performance in Photoshop“/

42. Theres no correlationbetween the size of thescreen and the amount ofbandwidth available to it.— Ethan Marcotte(@beep)“”

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. 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. 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. 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. Edge Inspect/

48. Edge Inspecthttp://html.adobe.com/edge/inspect//

49. Frameworks, Tools & Resources/

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. PrototypingResponsive PatternsPattern Lab (Brad Frost)Sass & Compass für schnellere EntwicklungStyleguides dynamisch erstellen:Pattern Primer (PHP)KSS (Ruby)StyleDocco (Node.js)······/

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. Danke für die Aufmerksamkeit!Sven Wolfermann | maddesignshttp://maddesigns.deHTML5 slideshow by Google/