Responsive Webdesign Process

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 Process Webinale, Berlin 03.06.2013 Sven Wolfermann | maddesigns
2. Sven Wolfermann (35) Freelancer für moderne Webentwicklung (HTML5, CSS3, jQuery) aus Berlin CSS3 Adventskalender 2010/2011 Organisator Berlin WebPerf Meetup schreibt Artikel für das T3N-, PHP- und Webstandards-Magazin (new: Screengui.de) mobile Geek Wer ist die Flitzpiepe da überhaupt? Twitter: @maddesigns Web: http://maddesigns.de · · · · · · /
3. „The Web“ im Rückblick flexibel von Haus aus Mobile-First Responsive Web Design article by Brad Frost /
4. Responsive Web Design Kurzer Rückblick A List Apart article by Ethan Marcotte /
5. A List Apart Artikel jetzt responsive
6. Responsive Webdesign Zutaten Flexible layouts Flexible media Media queries · · · /
7. RWD ist mehr beyond media queries: anatomy of an adaptive web design
8. Responsive design is not about mobile. It's not about tablets. It's not about desktops. It's about The Web. — Jeremy Keith (@adactio) “ ”
9. Was können wir über das "Web des Users" sagen? /
12. last 3 slides taken from „For A Future Friendly Web“ by Brad Frost
13. Was können wir über das "Web des Users" sagen? Heutzutage wissen wir nicht wie und wo der User unsere Website besucht wir kennen die Bildschirmgröße nicht wir kennen die Browsereigenschaften nicht wir kennen die Verbindungsgeschwindigkeit nicht · · · /
14. Aktueller Workflow
15. Der übliche Prozess in Webprojekten /
16. Designänderungswunsch vom Kunden /
17. Designänderungswunsch vom Kunden /
18. Using photoshop/fireworks for responsive design is like bringing a knife to a gunfight — Andy Clarke (@Malarkey) “ ”
19. Photoshop Designs sehen klasse aus, Webseiten sehen niemals so gut aus! /
20. Bisher haben wir häufig Bilder von Webseiten in Photoshop erstellt, keine abnahmefähigen Prototypen. /
21. Der Workflow muss sich ändern! /
22. It's impossible to predict all the complications of a responsive design up front. We need a more fluid workflow! — Andy Clarke (@Marlarkey) “ ”
23. Design Process in the Responsive Age
24. Mobile first Technik und Konzept
25. Mobile first Smartphone first Planung, Konzeption, Umsetzung mit dem Fokus auf mobile Geräte Designplanung für Touch-bedienung Konzentration aufs Wesentliche – welche Inhalte sind wichtig – wichtiger Inhalt zuerst Von Anfang an auf den wachsenden Mobil Markt vorbereitet sein Neuste Techniken nutzen, sowohl Browsertechniken, als auch Mobiltechniken – Innovation keine Degradierung der Inhalte, sondern Erweiterung Schritt für Schritt · · · · · · · /
26. Mobile first -› Content first!?
27. taken from „For A Future Friendly Web“ by Brad Frost
29. Content first Responsive Content Grundsatz: Je kleiner das Gerät, desto wichtiger ist es den wichtigen Inhalt so weit wie möglich am Anfang der Webseite zu zeigen Users können den Inhalt auch anders konsumieren... RSS (Google Reader †1. Juli 2013, Feedly) Readability, Instapaper SEO‽ · · · /
30. Steven Hay's workflow
31. Content first Steven Hay's workflow 1. Content inventory 2. Content reference wireframes 3. Design in text (structured content) 4. Linear design 5. Breakpoint graph 6. Design for various breakpoints 7. HTML design prototype 8. Present prototype screenshots 9. Present prototype after revision 10. Document for production Video /
32. Design /
33. Style Tiles Dem Kunden Interface Layouts zeigen ohne die Zeit mit mehreren Photoshop Layouts zu verschwenden http://styletil.es/ /
34. Style Tiles – Beispiel 1 /
35. Style Tiles – Beispiel 2 /
36. Style Tiles – Beispiel 3 /
37. Designing im Browser Vorteile von HTML5/CSS3 nutzen Prototyping im Browser kann schneller sein Änderungen können schneller umgesetzt werden Photoshop für Finetuning, Designentscheidungen aber im Browser treffen · · · · /
38. Adobe Edge Reflow
39. Adobe Edge Reflow Adobes neues Baby (public preview) Edge Reflow ist ein Designtool, kein Entwicklungstool http://html.adobe.com/edge/reflow/ /
40. Thinkin'Tags
41. Thinkin'Tags
42. Thinkin'Tags Designing im Browser YAML4, sowie weitere Frameworks integriert Unterstützung für CSS3 Media Queries zur Erstellung responsiver Layouts Simulation der Viewportbreite für verschiedene Mobilgeräte, direkt aus der Applikation heraus Vier vorkonfigurierte Layoutgrößen: Phone, Tablet, Desktop, Widescreen http://www.thinkintags.com · · · · /
43. Performance /
44. ”You can't mockup performance in Photoshop“ /
45. There's no correlation between the size of the screen and the amount of bandwidth available to it. — Ethan Marcotte(@beep) “ ”
46. Performance Eine 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... · · · · · /
47. verbreitete Breakpoints (Umbruchpunkte im Design) 320 Pixel - Smartphone portrait 480 Pixel - Smartphone landscape 768 Pixel - ein Tablet in landscape 1024 Pixel - einige Tablets, Notebooks, Desktop Monitore 1200 Pixel - große Bildschirme irgendwas vergessen? 360 Pixel - Samsung Galaxy S3, Google Nexus, HTC One, ... (portrait) 600 Pixel - kleine Tablets (7") in portrait 1600 Pixel - große Bildschirme, TV? 1600 Pixel - damn, Toshiba AT330 13.3" Mega-Tablet 603 Pixel - huh, Nexus 7 hatte beim Erscheinen device-width=603px, jetzt 600px 568 Pixel - haha, iPhone 5 in landscape 383 Pixel - Nexus 4 in portrait m( · · · · · · · · · · · · vorsichtig mit Screen- (Device-)pixel und CSS-Pixel (Video) /
48. Breakpoints der Zukunft Was 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! · · · /
49. Testing Testen auf richtigen Geräten ist sehr wichtig so früh wie möglich testen nicht nur das Layout testen, auch Funktionstest & Performance Remote Testing und Debugging mit Adobe Edge Inspect Open Device Lab gestartet von Jeremy Keith in Brighton #ODL in der Nähe: http://opendevicelab.com/ Devices für Projekte mieten: mobile ODL · · · · · · /
50. Edge Inspect /
51. Edge Inspect http://html.adobe.com/edge/inspect/ /
52. Frameworks, Tools & Resources /
53. Frameworks Frameworks und moderne Frontend-Techniken beschleunigen die Entwicklung Foundation 4 Bootstrap YAML 4 aber vorsichtig mit Frameworks, gut für Prototyping, meist Overhead an Resourcen (modulare Frameworks sind ok) · · /
54. Prototyping Responsive Patterns Pattern Lab (Brad Frost) Sass & Compass für schnellere Entwicklung Styleguides dynamisch erstellen: Pattern Primer (PHP) KSS (Ruby) StyleDocco (Node.js) · · · · · · /
55. Trends are poison. It's such a shame that Responsive design is often degraded to being a “Web design trend”. It isn't. It's a new mindset. — Vitaly Friedman (@smashingmag) “ ” /
56. Danke für die Aufmerksamkeit! Sven Wolfermann | maddesigns http://maddesigns.de HTML5 slideshow by Google /