Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Stolperfallen im Responsive Webdesign

Stolperfallen im Responsive Webdesign

Responsive Webdesign wird bereits von vielen Webworkern und Agenturen in der täglichen Praxis angewendet. Doch nicht immer läuft dabei alles glatt. Von der Frage, wie man richtig an ein Projekt herangeht, bis zum Punkt, an dem man endlich eine gute reaktionsfähige Website ausliefert, warten einige Stolperfallen und Probleme, die umgangen bzw. gelöst werden wollen. Einige dieser potenziellen Fehlerquellen werden hier näher beleuchtet.

Christoph Zillgens

October 26, 2013
Tweet

Other Decks in Design

Transcript

  1. »der Nutzen steht meist nie in Relation zum Aufwand« »nur

    ein Hype« »RWD ist Schrott« »zeitaufwändig und teuer« »Design-Sau, die gerade mal wieder durch’s Dorf getrieben wird« »zu geringe mobile Nutzerzahlen«
  2. »[RWD] is a fundamental shift in how we’ll build web

    sites for the decade to come.« JEFF VEEN
  3. »To design responsive websites effectively and responsibly, I had to

    completely redefine the way I view the web.« TRENT WALTON
  4. Weder Designer noch Entwickler entscheiden, wie eine Website aussieht, sondern

    der Browser. Wir liefern lediglich die Anleitung.
  5. Klare Projektphasen Design wurde in Photoshop ausgearbeitet und endete dort

    HTML und CSS nur »Handlanger« für das Photoshop-Design
  6. »is is how I do RWD and the crazy percentages

    required to line things up: I throw numbers into the CSS file until it looks right.« Elliot Jay Stocks
  7. Photoshop ist nicht das richtige Werkzeug, um sich RWD anzunähern.

    Ein statisches Abbild einer Website kann die Flexibilität des RWDs nicht demonstrieren, nicht erfahrbar machen.
  8. Wir gehen der Annahme auf den Leim, dass unser in

    PS entwickeltes Layout das Web widerspiegelt, dabei liefert es nur
  9. Wir gehen der Annahme auf den Leim, dass unser in

    PS entwickeltes Layout das Web widerspiegelt, dabei liefert es nur eine einzelne Ansicht von vielen möglichen.
  10. ABER! Nicht als Werkzeug für umfassende, detaillierte Seitengestaltung. Sondern als

    Tool • für Teilbereiche, einzelne Module • um schnelle Ideen zu visualisieren • für Texturen und Grafiken, Moodboards
  11. »It’s a myth that mobile users don’t want to do

    everything that desktop users do.« BRAD FROST
  12. We do everything on our phones now. Anytime you say,

    somebody won’t want that on mobile, that’s not mobile content... you’re wrong. JOSH CLARK
  13. Nutzerverhalten Nutzer gehen regelmäßig mit mehreren Geräten online: Laptop /

    Smartphone Am Arbeitsplatz Desktop / zuhause mit Tablet usw.
  14. Nutzerverhalten Nutzer gehen regelmäßig mit mehreren Geräten online: Laptop /

    Smartphone Am Arbeitsplatz Desktop / zuhause mit Tablet usw. 90% der Teilnehmer einer Google-Befragung nutzen regelmäßig mehr als ein Gerät am Tag. Sie starten Aufgaben auf dem einen und beenden diese auf einem anderen Gerät. http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
  15. ?

  16. Content Parity Alle Inhalte einer Website sollten für alle Nutzer

    stets erreichbar sein, unabhängig davon, mit welchem Gerät sie auf die Inhalte zugreifen möchten. mobile ≠ weniger
  17. One-Web-Philosophie Es gibt kein mobiles Web und kein Desktop-Web. Es

    gibt nur ein Web, auf das wir lediglich mit vielen verschiedenen Geräten zugreifen.
  18. Denke »Mobile First« Mobile First zwingt uns zu fokussieren und

    Schwerpunkte zu setzen. Die Nutzer und ihre Bedürfnisse rücken in den Vordergrund.
  19. Denke »Mobile First« Mobile First zwingt uns zu fokussieren und

    Schwerpunkte zu setzen. Die Nutzer und ihre Bedürfnisse rücken in den Vordergrund. Designplanung für Touch-Bedienung wird zu Beginn berücksichtigt.
  20. Denke »Mobile First« Mobile First zwingt uns zu fokussieren und

    Schwerpunkte zu setzen. Die Nutzer und ihre Bedürfnisse rücken in den Vordergrund. Designplanung für Touch-Bedienung wird zu Beginn berücksichtigt. Keine Degradierung der Inhalte.
  21. »is is what I see when I visit a website

    that greets me with a popup.« BRAD FROST pic.twitter.com/ezBIRIHvGS
  22. !

  23. !

  24. »Start with the small screen first, then expand until it

    looks like shit. Time to insert a breakpoint!« STEPHEN HAY
  25. 4"-5" Smartphones • Apple iPhone 5 (4" Apple iOS 6.0)

    • Nokia Lumia 920 (4.5" Microsoft Windows 8) • HTC Windows Phone 8X (4.3" Microsoft Windows 8) • HTC Windows Phone 8S (4.0" Microsoft Windows 8) • Motorola Droid RAZR HD (4.7" Google Android 4.0) • Motorola Droid RAZR M (4.3" Google Android 4.0) • TBD: LG Nexus 4 (4.7" Google Android 4.2) 5"-6" Phone/Tablet Hybrids • Samsung Galaxy Note II (5.5" Google Android 4.0) 7"-8" Tablets • iPad Mini (7.9" Apple iOS 6.0) • Kindle Fire HD (7" Google Android 4.0 modified) • Kindle Fire (7" Google Android 4.0 modified) 9"-10" Tablets • iPad Gen 4 (9.7" Apple iOS 6.0) • Microsoft Surface Tablet (10.6" Microsoft Windows 8) • Kindle Fire HD (8.9" Google Android 4.0 modified) • Lenovo ThinkPad Tablet 2 (10.1" Microsoft Windows 8) • Acer Iconia Tab W510 (10.1" Microsoft Windows 8) • Dell Latitude 10 (10.1" Microsoft Windows 8) • Dell XPS 10 (10.1" Microsoft Windows 8) • Asus Vivo Tab RT (10.1" Microsoft Windows 8) • TBD: Nexus 10 (10" Google Android 4.2) 11"-17" Laptops & Convertibles (Tablet/Laptop) • 13" MacBook Pro with Retina (13" Apple OSX 10.8) • Lenovo IdeaPad Yoga 13 (13.3" Microsoft Windows 8) • Lenovo ThinkPad Twist (12.5" Microsoft Windows 8) • Toshiba Satellite U925T (12.5" Microsoft Windows 8) • Dell XPS 12 (12.5" Microsoft Windows 8) • Lenovo IdeaTab Lynx (11.6" Microsoft Windows 8) • Samsung ATIV Smart PC 500T/700T (11.6" Microsoft Windows 8) • Acer Iconia W700 (11.6" Microsoft Windows 8) • Sony Vaio Duo 11 (11.6" Microsoft Windows 8) • Samsung Chromebook (11.6" Google Chrome OS) 20"-30" Desktops • Sony Tap 20 (20" touch screen Microsoft Windows 8) • 21.5-inch iMac (21.5" Apple OSX 10.8) • 27-inch iMac (27" Apple OSX 10.8) Neue Geräte September/Oktober 2012
  26. ! 74% der Nutzer verlassen eine Seite, wenn sie länger

    als 5 s zum Laden braucht. http://e-commercefacts.com/research/2011/07/what-usrs-want-from- mobil/19986_WhatMobileUsersWant_Wp.pdf
  27. Bilder und RWD • Im mobilen Kontext fallen große Datenmengen

    besonders ins Gewicht aufgrund langsamer Netzverbindungen
  28. Bilder und RWD • Im mobilen Kontext fallen große Datenmengen

    besonders ins Gewicht aufgrund langsamer Netzverbindungen • Bilder können per CSS kleiner skaliert werden, aber die Bilddatenmenge verringert sich dadurch nicht.
  29. Bilder und RWD • Im mobilen Kontext fallen große Datenmengen

    besonders ins Gewicht aufgrund langsamer Netzverbindungen • Bilder können per CSS kleiner skaliert werden, aber die Bilddatenmenge verringert sich dadurch nicht. • Bilder werden unscharf, wenn sie stark vergrößert werden (->High-Res-Displays).
  30. Bilder einbinden • Icons, Logos usw. als Iconfont oder SVG

    ausliefern http://maddesigns.de/responsive-images/
  31. Bilder einbinden • Icons, Logos usw. als Iconfont oder SVG

    ausliefern • Dekobilder und nicht inhaltsrelevante Bilder über CSS Hintergrundbilder einbinden http://maddesigns.de/responsive-images/
  32. Bilder einbinden • Icons, Logos usw. als Iconfont oder SVG

    ausliefern • Dekobilder und nicht inhaltsrelevante Bilder über CSS Hintergrundbilder einbinden • Inhaltlich relevante Bilder über PictureFill, Source- Shuffle & Co. (JavaScript) http://maddesigns.de/responsive-images/
  33. Bilder einbinden • Icons, Logos usw. als Iconfont oder SVG

    ausliefern • Dekobilder und nicht inhaltsrelevante Bilder über CSS Hintergrundbilder einbinden • Inhaltlich relevante Bilder über PictureFill, Source- Shuffle & Co. (JavaScript) • Bilder so gut wie möglich komprimieren! (JEPGmini, TinyPNG, SVGo usw.) http://maddesigns.de/responsive-images/
  34. Umstellung braucht Zeit! Jeder braucht eine gewisse Zeit der Eingewöhnung.

    Projekte werden am Anfang länger dauern. Prozesse müssen sich einspielen.
  35. Umstellung braucht Zeit! Jeder braucht eine gewisse Zeit der Eingewöhnung.

    Projekte werden am Anfang länger dauern. Prozesse müssen sich einspielen. Rückschläge sind möglich. Vom Projektmanagement sollte dafür Zeit einkalkuliert werden.