Der Vortrag von Sven Wolfermann auf der Webinale in Berlin behandelt den Prozess des responsiven Webdesigns und betont die Notwendigkeit eines flexible Workflow. Er thematisiert die Bedeutung von 'mobile first'-Ansätzen und 'content first'-Strategien für die Gestaltung von Webseiten sowie die Rolle von verschiedenen Design-Tools wie Adobe Edge Reflow und Thinkin'Tags. Zudem wird auf die Wichtigkeit von Tests auf echten Geräten und die Auswahl von Breakpoints basierend auf Inhalten anstelle von Geräten hingewiesen.

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
/