responsive webdesign process

Download Responsive Webdesign Process

Post on 27-Jan-2015

120 views

Category:

Design

1 download

Embed Size (px)

DESCRIPTION

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.

TRANSCRIPT

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

2. Sven Wolfermann (35)Freelancer fr moderne Webentwicklung(HTML5, CSS3, jQuery) aus BerlinCSS3 Adventskalender 2010/2011Organisator Berlin WebPerf Meetupschreibt Artikel fr das T3N-, PHP- undWebstandards-Magazin (new: Screengui.de)mobile GeekWer ist die Flitzpiepe da berhaupt?Twitter: @maddesignsWeb: http://maddesigns.de/ 3. The Web im Rckblickflexibel von Haus ausMobile-First Responsive Web Design article by Brad Frost/ 4. Responsive Web DesignKurzer RckblickA 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 knnen wir ber das"Web des Users" sagen?/ 10. last 3 slides taken from For A Future Friendly Web by Brad Frost 11. Was knnen wir ber das "Web des Users" sagen?Heutzutage wissen wir nicht wie und wo der User unsere Websitebesuchtwir kennen die Bildschirmgre nichtwir kennen die Browsereigenschaften nichtwir kennen die Verbindungsgeschwindigkeit nicht/ 12. Aktueller Workflow 13. Der bliche Prozess in Webprojekten/ 14. Designnderungswunsch vom Kunden/ 15. Designnderungswunsch 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 hufig Bilder von Webseitenin Photoshop erstellt, keine abnahmefhigenPrototypen./ 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 GerteDesignplanung fr 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 frSchritt/ 24. Mobile first - Content first!? 25. taken from For A Future Friendly Web by Brad Frost 26. Content firstResponsive Content Grundsatz: Je kleiner das Gert, desto wichtiger istes den wichtigen Inhalt so weit wie mglich am Anfang der Webseite zuzeigenUsers knnen 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/ 32. Style Tiles Beispiel 2/ 33. Style Tiles Beispiel 3/ 34. Designing im BrowserVorteile von HTML5/CSS3 nutzenPrototyping im Browser kann schneller seinnderungen knnen schneller umgesetzt werdenPhotoshop fr 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 integriertUntersttzung fr CSS3 Media Queries zur Erstellung responsiverLayoutsSimulation der Viewportbreite fr verschiedene Mobilgerte, direktaus der Applikation herausVier vorkonfigurierte Layoutgren: 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)groer Bildschirm + Touch (Meist Tablets)groer 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 - groe Bildschirmeirgendwas vergessen?360 Pixel - Samsung Galaxy S3, Google Nexus, HTC One, ... (portrait)600 Pixel - kleine Tablets (7") in portrait1600 Pixel - groe 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 whlen, nicht nach Gert!/ 46. TestingTesten auf richtigen Gerten ist sehr wichtigso frh wie mglich 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 Nhe: http://opendevicelab.com/Devices fr 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 fr Prototyping, meist Overheadan Resourcen (modulare Frameworks sind ok)/ 51. PrototypingResponsive PatternsPattern Lab (Brad Frost)Sass & Compass fr 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 fr die Aufmerksamkeit!Sven Wolfermann | maddesignshttp://maddesigns.deHTML5 slideshow by Google/