Beitrag von Christoph Zillgens
Seit Ethan Marcotte 2010 seine Grundzutaten des Responsive Web Design in einem A-List-Apart-Artikel vorgestellt hat, schritt die Entwicklung auf technischer Seite mächtig voran. Rund um Ethan drei Grundzutaten flexibles Grid, flexible Bilder und Mediaqueries haben sich mittlerweile einige »Best Practices« entwickelt.
Responsive Web Design, zu deutsch »reaktionsfähiges Webdesign« stellt aber nicht nur Webentwickler, sondern auch Webdesigner vor neue Herausforderungen. Denn die Geräte, mit denen wir Websites konsumieren, werden immer vielfältiger, z.B. in Bezug auf die Bildschirmgröße.
Abb. Diverse internetfähige Geräte mit verschiedenen Bildschirmgrößen
Um dieser Gerätevielfalt gerecht zu werden, müssen wir uns auf die Flexibilität des Webs rückbesinnen sowie einen verbesserten Workflow in Zusammenarbeit mit Entwicklern und Auftraggebern etablieren. Außerdem müssen wir unsere Annäherung an die Gestaltung dem Prozess anpassen. Diese Aspekte möchte ich im Folgenden näher erläutern.
Rückbesinnung auf Flexibilität
Responsive Webdesign ist kein aktueller Trend, sondern rückt vielmehr wieder das in den Vordergrund, was HTML-Dokumente seit jeher ausmacht: ihre Flexibilität. Öffnen wir ein »nacktes« HTML-Dokument im Browser, egal welches Dokument, egal welcher Browser, dann passen sich die Inhalte automatisch an die Fenstergröße an. Webdokumente sind also bereits von Natur aus reaktionsfähig.
Erst im Laufe der Jahre haben wir Webdesigner Websites mit unserem Wunsch nach mehr Gestaltung und dem damit verbundenen Bestreben nach Kontrolle jener Anpassungsfähigkeit beraubt. Statt die vorhandene Flexibilität zu nutzen und zu tolerieren, haben wir dem Web die aus der Printwelt vertrauten Gestaltungsprozesse übergestülpt, indem wir feste Breiten definiert und somit ursprünglich reaktionsfähige Webdokumente zu starren Seiten degradiert haben. Das soll an dieser Stelle keine Vorwurf sein, es ist einfach Teil des Lernprozesses im Umgang mit diesem jungen Medium.
Unsere aus dem Print übernommenen Werkzeuge haben uns dabei sicherlich tatkräftig unterstützt. Öffnen wir ein Grafikprogramm wie Photoshop, ist die erste Amtshandlung das Eingeben von Breiten- und Höhenangaben und somit die Festlegung auf fixe Größen. Bevor wir überhaupt richtig anfangen, werden wir gezwungen, erste Annahmen über die Dimensionen zu treffen. Wenn wir dann unsere digitale Leinwand mit Pixeln »befüllen«, erhalten wir schließlich ein starres Gemälde, das zwar eine Webseite suggeriert, aber dennoch weit entfernt ist von einem dynamischen und flexiblen Dokument. Auf diese Weise bewegen wir uns weiter weg von einer reaktionsfähigen Website.
Probleme des klassischen Wasserfallprozesses
Im Laufe Webgeschichte hat sich der sogenannte Wasserfallprozess etabliert, der grob nach einem Schema à la Planung -> Design -> Umsetzung -> Veröffentlichung abläuft.
Abb. Ein herkömmlicher Wasserfallprozess
Nach einer statischen Gestaltungsphase folgt also die Entwicklungsphase, in der es vor allem darauf ankommt, das vom Auftraggeber »abgesegnete« Layout bestmöglich in die Browser zu übertragen. Mittlerweile hat sich zwar schon sehr weit herumgesprochen, dass Websites nicht in jedem Browser gleich aussehen müssen. Dennoch wird mit einem statischen Website-Entwurf eine Erwartungshaltung geweckt, die nicht dem späteren Ergebnis entsprechen wird. Der Webdesigner schaufelt sich eine Grube, in die er dann freimütig hinein springt:
- Waren bisher schon die statischen Abbildungen eines Webentwurfs im Grafikprogramm nur ein mäßiger Ersatz für eine interaktive Website, so kommt jetzt noch erschwerend hinzu, dass die unterschiedliche Darstellung auf den verschiedenen Geräten anhand eines statischen Entwurfs nicht visualisiert werden kann.
- Diese Herangehensweise verhindert auch für den Designer eine vernünftige Auseinandersetzung mit dem grundlegenden Problem. Denn im Grafikprogramm werden eventuelle Schwachstellen eines Layouts im Zusammenhang mit kleineren oder größeren Displays nicht offensichtlich.
- Das Festlegen von Umbruchpunkten in der Gestaltungsphase ohne vorherige Tests im Browser gleicht einem Ratespiel
- Auch bestimmte Elemente wie Schrift und Schriftgröße können nur vernünftig im Browser und auf den verschiedenen Geräten bewertet werden. Auch das kann ein Grafikprogramm nicht leisten.
Wir müssen also unsere bestehende Arbeitsabläufe anpassen. Wie aber können wir mehr Flexibilität in den Gestaltungsprozess bringen?
Ich finde den Talk von Stephen Hay interessant:
Responsive Design Workflow
https://vimeo.com/45915667
Hallo Cristoph,
sehr schöner Beitrag, der insbesondere gelungen das Dilemma der Webdesigner widerspiegelt, dem Endkunden das ‘Responsive’ nahzubringen.
Ich finde, dass inbesondere die Entwickler und Designer rund um WordPress hier schon ziemlich gute Arbeit geleistet haben.
Wir haben für unseren Blog https://www.trendish.de/ mit dem DesignFolio Theme von Presscoders eine wirklich schöne und ausbaufähige Plattform gefunden und sind insbesondere froh, dass mit dem Fitvids Plugin nun auch die eingebundenen Videos problemlos auf mobilen Browsern ‘downgesized’ werden.
Und recht hast du, Responsive Webdesign ist mehr als nur ein Trend!
LG
Andreas
Eine fantastische Übersicht auf ‘netmagazine.com’ über 50 Websites zum Thema Responsive Webdesign.
Sehr empfehlenswert – viel Spaß damit.
Hey Christoph,
Du lieferst mit Deinem Artikel eine gelunge Zusammenfassung der gegenwärtigen Problemstellung. Der Ausblick, Responsive Webdesign in einem flexiblen Workflow zu bearbeiten, “spricht mir aus der Seele“. Dieser Schritt stellt uns (UXler und Kreative) zugleich neue wie spannende Herausforderungen im gemeinsamen Arbeitsumfeld.
Der Aussage “Photoshop & Co. müssen nicht aus dem Workflow verbannt werden.“ kann ich rundum zustimmen. Dazu schrieb Tom Giannattasio vor einiger Zeit den Artikel In Defense Of Photoshop, in dem es um die Entthronung Photoshops hinsichtlich der neuen Möglichkeiten durch HTML/CSS-Prototypen geht. Gelungen finde ich in diesem Zusammenhang auch den Artikel Make Your Mockup in Markup von Meagan Fisher.
Nicht zuletzt liefert ZURB mit seinem Foundation Framework, stellvertretend für eine ganze Reihe aktuell verfügbarer Frameworks, eine exzellente Grundlage für das Rapid Prototyping.
Besten Gruß
Claudio.
Interessantes Thema:
https://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Fantastisch klingendes Buch. Würde ich mich drüber freuen.
Hier mein Link zur responsive cat :) https://roxik.com/cat/
Sehr guter und lesenswerter Beitrag, dessen Inhalt aus meiner Sicht leider hierzulande viel zu wenig Beachtung findet, leider auch vom designtagebuch.
Da ich sehr häufig unterwegs bin, nutze ich mehr als die Hälfte der Zeit, die ich im Internet surfe mobile Geräte. Obwohl mobile Browser gute Fähigkeiten haben auch “normale” Seiten auf kleinen Bildschirmen darzustellen, bin ich sehr häufig enttäuscht, dass sich nur Wenige die relative überschaubare Mühe machen (häufig reicht eine sinnvolle html-Struktur und etwas CSS), das Design an unterschiedliche Darstellungsformate anzupassen.
Für mich stellt mittlerweile das Vorhandensein eines responsive Layouts eines der wichtigsten Kriterien dar, anhand derer ich entscheide, ob ich die Webseite nutze oder gleich weiter surfe.
Wie Achim schreibt, habe auch ich den Eindruck, dass es sehr häufig tatsächlich daran liegt, dass grundlegende Aspekte des Printdesign einfach zu sehr Einfluss nehmen. Viele Kreative sind scheinbar nicht bereit, die Flexibilität eines Browserfensters bzw. die unterschiedlichen Bildschirmgrößen als etwas zu betrachten, was mehr Platz für Freiheit und Kreativität bietet. Dabei sehe ich auch die Designer und Entwickler in der Pflicht Kunden von den Vorzügen einer flexiblen Gestaltung zu überzeugen.
Grundsätzlich sind die “Kollegen” jenseits des Atlantiks offensichtlich viel offener bzw. fortschrittlicher und daher hole ich mir daher sehr häufig Rat von dort.
Ein Blog, den ich auch zu diesem Thema regelmäßig lese ist webdesignerwall.com und da liefern beispielsweise folgende Artikel hilfreiche Tipps:
webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design
webdesignerwall.com/tutorials/design-process-of-shopdock
Das Thema ist sehr interessant. Aus eigener Erfahrung kann ich sagen das es wirklich gut ist schnell in den Browser zu kommen. Meine aktuelle Seite die ich vor ein paar Tagen neu gemacht habe ist auch vollkommen Responsive: https://www.davidhellmann.com
Ich habe die Startseite in Photoshop angefangen aber nicht wirklich weit. Im Grunde nur den Header und ein paar Elemente. Dann ging es direkt in den Browser und PS wurde nur noch genutzt um Grafiken zu bauen die benötigt wurden.
Die Seite an sich hab ich erst in der großen Größe gebaut und dann ca. 1-2h gebraucht dann lief es bis runter auf das Smartphone.
Problem ist das Kunden halt immer noch meist erst statische Screens sehen wollen > diese dann freigeben und dann erst die Entwicklung beginnt. Das wird man wohl auch nicht so schnell raus bekommen da es “gelernt ist” das so zu machen.
Über „Responsive Webdesign“ habe ich mir noch nie wirklich Gedanken gemacht, allerdings im Workflow trotzdem schon intuitiv eingesetzt. Ein sehr interssantes Thema. Glücklicherweise arbeitet unser Grafikbereich eng mit unserer IT zusammen, sodass sowohl im Vorfeld als auch im Design- und Entwicklungsprozess größere und kleinere Schwierigkeiten abgesprochen und gelöst werden können.
radio eins (https://www.radioeins.de/) hat seit Anfang November einen neuen Internetauftritt und hat versucht auf „Responsive Design“ umzusatteln. Leider nicht ganz so erfolgreich, wie man es sich hätte wünschen können. Die Monitoransicht funktioniert ausgezeichnet, für Smartphones gibt einige Div-Blöcke, die offenbar statische Breiten haben … und für alles dazwischen (z. B. iPad) gibt es leider erst gar keine gesonderte Auflösung. Trotzdem ist der Auftritt eigentlich ganz schön anzusehen.
Interessanter Artikel – obwohl ich das “Problem” etwas weit hergeholt finde.
Hier sind einige Codebeispiele und auch schöne Beispiele zu sehen.
Klick Here
Interessant – finde allerdings das es mehr nach ner netten Spielerei aussieht. Mir ist zumindest das Problem bisher nicht aufgefallen. Naja evt kann das Buch meine Meinung ändern ;) also auch mein Senf dazu.