Responsive Webdesign – Eine Herausforderung für Webdesigner

Ein flexibler Workflow

Im Responsive Webdesign verlagern sich viele Designentscheidungen in den Entwicklungsprozess, weil sie erst dort offensichtlich werden, durch Tests auf mobilen Geräten zum Beispiel. Wir können also nicht länger mit der Entwicklung erst nach der Designphase beginnen. Um mögliche Problemstellen rechtzeitig aufzudecken, sollten wir die Entwicklung weiter nach vorne ziehen. Je eher wir mit richtigen HTML-Prototypen starten, desto eher können Schwachstellen auf verschiedenen Geräten und Bildschirmgrößen entdeckt und berücksichtigt werden. Josh Emerson von der britischen Webdesignschmiede Clearleft empfiehlt, gleich vom ersten Tag an mit dem Codieren zu beginnen, um möglichst schnell einen – wenn auch nur groben – HTML-Prototypen zur Verfügung zu haben. Damit können erste Ideen direkt getestet und entsprechendes Feedback früh an den Designer weitergeleitet werden. Statt die Design- und Entwicklungsphase getrennt voneinander zu betrachten, müssen wir diese beiden Schritte viel stärker verzahnen und als zwei Elemente einer Phase betrachten, die sich in kurzen Entwicklungszyklen wechselseitig beeinflussen.

Abb. Flexbiler Prozess: Stärkere Verzahnung von Design und Entwicklung

Flexbiler Prozess: Stärkere Verzahnung von Design und Entwicklung Designer und Entwickler sollten im ständigen Dialog miteinander stehen und sich gegenseitig Verbesserungen und Anregungen zuspielen, auf denen der jeweils andere dann aufbauen kann. Dieser Prozess wiederholt sich so lange, bis eine finale Version der Seite erreicht ist, mit denen alle Beteiligten zufrieden sind. So kann man gemeinsam im Team auf die Herausforderungen eines flexiblen Webdesigns reagieren.

Damit dieser Workflow funktionieren kann, ist es wichtig, im Vorfeld gemeinsam mit dem Auftraggeber eine Hierarchie der Inhalte zu entwickeln, anhand derer eine Reihenfolge und Gewichtung der einzelnen Elemente auf der Seite festgelegt werden kann.

Auch im späteren Prozess kann der Auftraggeber immer wieder eingebunden werden. Wird ihm dann ein HTML-Prototyp vorgelegt, kann er direkt die Vorzüge einer flexiblen Webentwicklung nachvollziehen, auch wenn das Layout noch nicht in einer finalen Version vorliegt. So vermeidet der Gestalter es, falsche Erwartungen zu wecken.

Annäherung an die Gestaltung

Photoshop & Co. müssen nicht aus dem Workflow verbannt werden. Die erstellten Entwürfe sollten aber zum einen nicht zu sehr ins Detail gehen, zum anderen nicht dem Auftraggeber als Pseudo-Endprodukt präsentiert werden. Stattdessen sollten wir sie lediglich als Ausgangspunkte nutzen, die erst anschließend im wechselseitigen Zusammenspiel mit dem Entwickler schrittweise zur finalen Webseite weiterentwickelt werden.

Um schnell mal Farbkombinationen, Texturen, Schriftstil usw. auszuprobieren, sind Grafikprogramme natürlich nach wie vor ein probates Mittel. Hier kommen die sogenannten Styletiles ins Spiel. Sie sind eine gute Möglichkeit, sich zeitsparend an eine Gestaltung anzunähern.

Abb. Beispiel einer Styletile

Statt gleich zu Beginn eines Projekts zu viel Zeit in ausgearbeitete Entwürfe zu stecken, helfen »Stiltafeln«, sich langsam an eine Gestaltungsrichtung heran zu tasten. Ähnlich wie Musterbücher und Farbfächer beim Raumausstatter kann man so die Vorlieben und Geschmäcker des Auftraggebers herausfinden und eine visuelle Sprache entwickeln, die die Eigenschaften und Ansprüche des Unternehmens unterstreicht.

Styletiles bilden sozusagen den flexiblen Gegenpart zu statischen Komplett-Entwürfen, weil sie unabhängig von Bildschirmgrößen funktionieren uns sich auf das wesentliche beschränken.

Auch ein Designsytem unterstützt in einem flexiblen Workflow Designer und Entwickler sehr. Hierbei werden wiederverwendbare Gestaltungselemente und Bausteine in einer zentralen Datei abgelegt.

Beispiel eines Designsystems

Arbeitet man an einzelnen Templates, fällt es mitunter schwer, das große Ganze im Auge zu behalten. Es kann passieren, dass man mehrere, sehr ähnliche Stile kreiert, für vergleichbare Probleme unterschiedliche Lösungen findet und Elemente auch doppelt erstellt.

Gerade im Zusammenhang mit reaktionsfähigem Webdesign könnt ihr euch viel Arbeit sparen, wenn ihr auf bestehende Elemente zurückgreift, statt jedes Template als separate Seite zu betrachten. Gemeinsamkeiten zwischen einzelnen Bausteinen herauszustellen, vereinfacht nicht nur den Designprozess, sondern hilft ebenso den Entwicklern bei der Umsetzung. Sie können sich an dieser Datei orientieren und aus den Elementen wiederverwendbare, reaktionsfähige Bausteine erstellen.

Fazit

Responsive Webdesign betrifft nicht nur Entwickler, sondern stellt auch Designer vor einige Herausforderungen, was Herangehensweise an ein Projekt und Arbeitsabläufe betrifft. Es wird sicher noch einige Zeit dauern, bis die Umstellung der Prozesse in Fleisch und Blut übergegangen ist. Die Vorteile dieser Umstellung – nicht zuletzt die gesparte Arbeitszeit – trösten aber langfristig über anfängliche Schwierigkeiten hinweg.

* * *

Verlosung

Vor wenigen Wochen ist von Christoph Zillgens das Buch „Responsive Webdesign“ im Hanser Verlag erschienen. Ein Exemplar steht im Rahmen einer Verlosung für dt-Leser bereit. Ich kann es jedem Webdesigner, der sich dem Thema Responsivität annähern möchte, sehr empfehlen. Einleitend beschreibt Christoph sehr überzeugend, warum zukünftig kein Weg an Responsive Design vorbeiführen wird. Anhand von Beispielen vermittelt das Buch Grundlagen, Websites mit Hilfe von HTML5 und CSS3 reaktionsfähig zu gestalten und umzusetzen. Christoph widmet sich dem Thema Webtypografie und er gibt zahlreiche Tipps in Bezug auf die Gestaltung von Webanwendungen für mobile Endgeräte.

Cover - Responsive WebdesignResponsive Webdesign
Reaktionsfähige Websites gestalten und umsetzen
Autor: Christoph Zillgens
375 Seiten. Flexibler Einband
Komplett in Farbe
ISBN: 978-3-446-43015-0
Preis: 39,90 €

Wer das Buch gewinnen möchte, hefte bitte bis Mittwoch den 21. November einen Kommentar an diesen Artikel. Jeder Kommentar, der einen passenden Link zum Thema Responsive Design enthält (responsive Websites, Tutorials, spannender Artikel, etc.), nimmt an der Verlosung teil.

1 2

Dieser Beitrag hat 177 Kommentare

  3. Dazu habe ich neulich auch schon diesen interessanten Beitrag gefunden:
    https://viljamis.com/blog/2012/responsive-workflow/
    (zwar auf Englisch aber die Problematik wird auch hier deutlich)

    Projektmethoden wie Scrum sind nicht nur im Bereich Programmierung interessant, sondern im Gesamtprojekt. Wer kennt nicht das berühmte “dynamische Pflichtenheft” in den klassischen Projekten ;-)

    Schöner Beitrag!

    Danke!
    Carola

    Antworten

  5. Dein Artikel gibt einen schönen Überblick über RWD. Und ich kann nur zustimmen, schon heute sollte man neue Websites auf jeden Fall Responsive erstellen. Wobei es natürlich nach wie vor Projekte gibt, bei denen das nur schwer möglich ist, und man vielleicht doch eine eigene mobile Version oder sogar eine App erstellen muss, z.B. Shops.

    Als kleine Linktipp: Sven Wolfermann hatte auf der T3CON12 einen interessanten Vortrag zum RWD-Prozess gehalten, seine Slides sind auch sehr interessant: https://maddesigns.de/rwd-process/#1

    Und natürlich würde ich mich freuen, das Buch zu gewinnen.

    Grüße
    Wolfgang

    Antworten

  6. Gute Artikel, das Buch sieht interessant aus. Also hier meine Links ;)

    Die Webseite von unitedpixelworkers ist einer meiner Lieblings “Reaktionsfähigen” Webseiten, denn diese hatte mich damals auch für das Thema sensibilisiert.

    Die Seite von microsoft ist ja seit dem Design wechsel auch responsive.

    Und hier noch eine nette Infografik für Leute die dem ganzen vielleicht noch skeptisch gegenüber stehen.

    Antworten

  7. für Menschen wie mich, die so etwas eher hobbiemäßig betreiben sind CSS Frameworks dabei sehr hilfreich, die eigene Seite gleich auf responsive Design umzustellen. Eines meiner Lieblingsframeworks ist das yaml framework, dass auf solche Probleme eingeht und es ermöglicht, mit nur einer HTML Datei und dem entsprechenden CSS auf verschiedene Auflösungen von Anzeigegeräten zu reagieren.

    https://www.yaml.de/

    Antworten

  10. Klasse Einführung. Das Thema verfolge ich nun schon länger, allerdings nicht so aktiv wie gewünscht. In den Entscheiderkreisen ist es meiner Meinung nach noch nicht angekommen. Vor allem die Mehraufwände sind in Projekten noch schwer zu “verkaufen”. Eine Frage der Zeit.

    Erst gestern habe ich bei t3n einen interessanten Artikel zum Thema RWD und Typographie gelesen:
    https://t3n.de/magazin/responsive-webdesign-reaktionsfahige-typografie-230315/

    Viele Grüße
    Mario

    Antworten

  17. Danke für den Artikel! Ich selbst bin Designerin und arbeite u. a. im Bereich Webdesign. Die erwähnten Herausforderungen/Probleme kommen mir leider sehr bekannt vor und es scheint noch keine Lösung vom Himmel gefallen zu sein. Deshalb versuche ich mich selbst zu belesen. Einen Tipp möchte auch ich euch zu diesem Thema nicht vorenthalten: https://styletil.es/ . Eine kleine schöne Anleitung zum Thema Style Tiles. Na und zu guter letzt würde ich mich natürlich wahnsinnig über das Buch und einer Erleuchtung freuen.

    Antworten

  19. Ein sehr guter Artikel, gerade der Ansatz mit der Entwicklung von Stiltafeln vor dem eigentlichen Layout-Prozess gefällt mir sehr sehr gut. Für größere Kunden habe ich schon des öfteren mal eine solche Stiltafel erstellt, dann aber eher aus bestehenden Elementen aus dem Print-Material, um den Look des Kunden ins Website Layout transportieren zu können.

    Die Umsetzung und Adaption dieser einzelnen Elemente in ein globales Stylesheet und eine einheitliche Identifikation der Elemente über Projektgrenzen hinweg wäre hier perfekt.
    Twitter Bootstrap ist hier sicherlich ein Vorbild.

    An der Verlosung würde ich natürlich auch sehr gerne teilnehmen, daher hier mein Link zu einem Artikel der einige “Best practices” zeigt:
    https://www.tripwiremagazine.com/2012/06/responsive-website-design.html

    Antworten

  22. 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

    Antworten

  24. 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.

    Antworten

  27. 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

    Antworten

  28. 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.

    Antworten

  29. Ü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.

    Antworten

  30. 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.

    Antworten

  33. Danke für die tolle Einführung! Vor allem der Aspekt des Workflows, fand ich interessant. Ich würde gerne ein Framework empfehlen: https://www.getskeleton.com/. Es basiert glaube ich auf dem oben genannten YAML, hat aber einige praktische Best Practices mit dabei.

    Außerdem möchte ich erwähnen, dass das Thema Responsive Web Design im wesentlichen drei Aspekte behandeln soll:
    1- Displaygröße
    2- Displayauflösung
    3- Touc first Bedienung
    Der erster Punkt wurde ausführlich behandelt.
    Zum zweiten Punkt empfehle ich diesen Artikel: https://coding.smashingmagazine.com/2012/08/20/towards-retina-web/. Die Anzahl an HD-Displays wird künftig wachsen, und die bisherigen 72 dpi-Icons sehen total unscharf aus.
    Zum dritten Punkt kommen Aspekte wie Größe der clickbaren Elemente für Touch aber auch ein Paradigmenwechsel in der Interaktion. Bisher war das Event Mouseover die wichtigste Interaktion beim Webdesign. Bisher konnten wir clickbare Flächen erst bei Mouseover entdecken und durch Farbänderung oder ähnliches navigieren. Nun jetzt geht das nicht mehr. Bisher auf dem iPad habe ich gesehen, dass Mouseover schwierig ist (https://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/). Ich weiß es nicht ob iOS Safari die MouseOver events weiterhin so interpretieren wird, aber für mich heißt es auf MouseOver im Design und Implementierung zu verzichten. Anstatt dessen ist onClick(Tap) der universelle Event im Web Design. (https://globalmoxie.com/blog/desktop-touch-design.shtml)

    Antworten

  45. Danke für den Artikel. Bleibt nur zu hoffen, dass Kunden sich auf diese Art des Workflows einlassen können, was vermutlich gerade bei Konzernen etwas schwierig werden dürfte, da die Art der Abstimmung bisher meistens ja eher das Gegenteil von informell ist.

    In dem Zusammenhang würde ich gerne auf einen Artikel von Luke Wroblewski zum Thema “Mobile First“ hinweisen. Er schlug vor inzwischen drei Jahren vor, sich bei der Entwicklung von Websites und Anwendungen, die auch auf den kleinen Screens mobiler Endgeräte laufen sollen, zuerst auf die Konzeption und das Design für die kleinere Darstellung zu fokussieren und erst anschließend die größeren Auflösungen zu bedienen. Das hat zugleich auch den Vorteil, dass auch die größeren Screens von der Konzentration auf die Kernfunktionalitäten und einen optimierten Ablauf profitieren.

    Mein derzeitiger Favorit ist https://coworkchicago.com/, ich selbst habe vor kurzem mal eine Seite für einen Rechtsanwalt für Versicherungsrecht gemacht (https://ra-fassl.de/, für die ich das responsive Framework Foundation verwendet habe. Alternativ wäre Bootstrap von twitter noch ein interessanter Startpunkt.

    Ehrlich gesagt bin ich aber schon wieder dabei, mich von dem Gedanken von responsive Design im ursprünglichen Sinn (also komplett skalierbare Bilder etc.) zu verabschieden und mehr in die Richtung von https://framelessgrid.com/ zu gehen.

    Antworten

  46. Wie die praktische Arbeit aussehen kann, wenn man dem Kunden keine Grafiken sondern HTML-Entwürfe vorlegt, beschreibt Matt Griffin sehr praxisnah auf A List Apart. Er klärt mit einem Kunden zuerst die Hierarchie der Website und entwickelt dann einen Rohentwurf, der bereits reaktionsfähig ist und auf unterschiedlichen Geräten beurteilt werden kann.

    Antworten

  52. Was ich persönlich sehr interessant finde, ist dass der Guardian aktuell an seiner mobilen Website arbeitet und dabei in Zukunft auch auf responsive Design setzen will. Darüberhinaus wird der Fortschritt und Überlegungen auch auf einem Blog dokumentiert: https://www.guardian.co.uk/help/developer-blog/2012/oct/18/responsive-design-guardian-introduction
    Die Beta-Version kann auch schon unter https://beta.guardian.co.uk/ angesehen werden – aktuell ist die neue Version aber nur für mobile Geräte gedacht (mobile first).

    Antworten

  66. Ich überarbeite derzeit die Website meines Praktikums-Betriebs.

    Gute Links wurden in den vorigen 47 Kommentaren bereits in Hülle und Fülle genannt. Manchmal ist es im Responsive Webdesign jedoch erforderlich, mobile Geräte und Tablets bereits auf Serverebene zu erkennen, zum Beispiel, um für geringe Bandbreite optimierte Videos zur Verfügung zu stellen.

    Das Projekt Mobile Detect liefert eine fertige Lösung für PHP:
    https://github.com/serbanghita/Mobile-Detect/blob/master/Mobile_Detect.php

    —

    Gerade Videos für alle Geräte verfügbar zu machen, ist furchtbar. Es wurde dank HTML5 – das Vereinheitlichung schaffen sollte – sogar noch schlimmer.

    Als “best practice” hat sich bei mir dieses Skript hier etabliert, das in allen Browsern ein passendes Video zur Verfügung stellt:
    https://mediaelementjs.com/

    Ich codiere meine Videos daher nur noch in 2 Formaten: webm und h.264. Für h264 nehme ich den Adobe Media Encoder. Den einzig tauglichen webm-Encoder habe ich auf dieser Seite gefunden:
    https://video.online-convert.com/convert-to-webm

    Den Rest erledigt das Skript für mich und stellt entweder den browsereigenen Player zur Verfügung – oder eben Flash.

    —

    Um meine Style-Sheets auch einigermaßen wartbar zu halten, arbeite ich inzwischen nur noch mit {.less}, einem Parser für CSS.
    http://www.lesscss.de

    Mit {.less} kann man bspw. Variablen (z.B. Pixelwerte, Farben) definieren und in gegebener Stelle einfügen oder verrechnen lassen. Auch lassen sich Klassen als Objekt- und Absatzformate definieren, vergleichbar mit den uns vertrauten Funktionen in InDesign. Mit den verschachtelten Formaten behalte ich stets den Überblick und habe inzwischen eine CSS-Vorlage, bei der es genügt, Schriftart und Farbschema zu ändern, um das Gerüst für das nächste Webprojekt anzupassen.

    —

    Natürlich ist mit Responsive Web Design das Flash-Plugin (außer als Fallback für Videos) gestorben. Um trotzdem kleine Animationen einfach umzusetzen, sollte man Illustrator hernehmen und dieses Plugin ausprobieren:
    https://visitmix.com/labs/ai2canvas/

    —

    Der Responsive-Gedanke hört übrigens nicht bei Websites auf: Auch Mailings können und müssen für verschiedene Clients und Geräte optimiert werden. Campaign-Monitor liefert hier umfassenden Einblick in seine Technologie, mit Ratgebern und Übersichtstabellen:

    https://www.campaignmonitor.com/guides/
    https://www.campaignmonitor.com/css/

    —

    Gerne hätte ich auch noch auf meine Testergebnisse für den richtigen Einsatz von QR-Codes verlinkt, doch ich komme voraussichtlich erst Ende des Monats dazu, etwas zu schreiben. Denn QR-Codes sind oft der Zugangsschlüssel für mobile Websites. Und wenn die schon nicht “responsive” gestaltet sind, kann die Website noch so gut sein.

    Wer trotzdem interessiert ist, kann sich die Seite https://alexplus.de/dossiers/ schon mal bookmarken.

    Antworten

  68. Vielen Dank für den interessanten Artikel.
    Ich bin gespannt, wie und wann der Workflow in die Agenturen einzieht. Vor allem einen Kunden klar zu machen, dass er erstmal lange nicht sieht, was er gekauft hat (Layout) sehe ich als grösste Herausforderung.
    Beispiel für eine responsive Lightbox gibt es hier: https://www.frescojs.com/

    Antworten

  69. Danke für den Artikel. Kann man das Bild von dir eigentlich nutzen? Natürlich mit Angabe der Quelle.

    Responsiv Design ist immer schwer dem Kunden beizubringen. Gerade, wenn die Ansprüche nicht so hoch sind. Die eigenen wachsen, die des Kunden müssen erst geweckt werden. Ich denke, dass wird noch ein langer Prozess.

    Ich habe ein richtig schönes jQuery Tool gefunden, mit denen man Tabellen auch responsiv gestalten kann: https://www.mobifreaks.com/wp-content/demos/Responsive-and-SEO-Friendly-Data-Tables-with-js/

    Antworten

  72. Das Thema Bootstrap kam hier schon vereinzelt auf. Deshalb dazu noch ergänzend für eine gute Grundlageneinarbeiten folgender Link: https://www.catmoney.de/bootstrap-tutorial/

    Mein letztes Responsive-Projekt habe ich ebenfalls mit einem Angepassten Bootstrap Column-Set aufgebaut. Der aktuell größte Nachteil momentan ist meiner Meinung nach, dass Bootstrap wieder und wieder mit “.row”-Wrappern arbeitet um Verschachtelungen zu ermöglichen. Das führt zum Beispiel bei der Integration in diverse CMS’ zu Problemen, da entweder umständlich Templates angepasst werden müssen oder wieder und wieder weitere Layer eingebunden werden müssen.

    Mein Tipp deshalb um Bootstrap flexibler zu machen: Die “.row”s fliegen raus. Anstatt dessen wird pro Span eine weitere Klasse “.nested” erstellt, die die Margins und Widths des Elements überschreibt, die Span somit vergrößert. Das Ergebnis: Ich kann mit nur einer weiteren Klasse alle Elemente (egal ob span2, span3 oder span12) verschachteln ohne neue Layer einzubinden. Das wiegt die Umschreibung des CSS’ später locker wieder auf.

    Antworten

  86. Da sind ja bereits eine ganze Menge schöner Artikel und Verweise zusammengekommen. Offenbar haben sich viele von uns schon mit der Thematik „Responsive Webdesign“ beschäftigt oder auf die ein oder andere Weise genähert.

    Ich stehe immer öfter potentiellen Kunden (und auch Kollegen) gegenüber, die schon mal davon gehört haben (mehr aber auch nicht). Sie fragen um Rat über das Was und Wie und Warum und überhaupt. Meist geht es ja letztendlich um Geld bzw. zusätzliche Investitionen.

    Den Artikel hier (PDF, ca 550 kb) zum Thema gebe ich dazu gerne vorab mal in die Hand, um beim interessierten Laien bzw. Kunden einen Schimmer von Ahnung zu erzeugen, bevor ich mir den Mund fusselig rede.

    Antworten

  88. Habe keinen passenden Link, find das Thema aber total interessant und möchte eigentlich auch nur ein Danke fürs Verfassen/Veröffentlichen/Teilen da lassen.

    Antworten

  90. Huhu,

    vielen Dank für diese Zusammenfassung. Ich bin kein Webdesigner, sondern eher der Techniker und Verantwortlich für Server, CMS-Lösungen etc.
    Aber leider meistens auch das Bindeglied zwischen Designer und Kunden. =) So eine Art Projektleiter.

    Endlich habe ich es schriftlich, dass ein Grafiklayout nicht immer so 100% auch im Web aussehen muß. =) Sowas will ja mancher Kunde nicht wissen. Aber wenn die dann schon mit ihren diversen Browsern, Auflösungen etc. ankommen, geht bei denen auch die Erkenntnis ein.

    Als netten Link und lesenswert erachte ich auch:

    https://www.konversionskraft.de/trends/die-3-saeulen-des-responsive-webdesign.html

    Vielleicht gewinne ich ja das Buch. Lesenswert ist es allemal. =) Und vielleicht kann ich dann auch manchen Designer noch besser verstehen. *g*

    Gruesse,

    Marcel

    Antworten

  96. Oh ja, als Webentwickler kennt man die Problematik nur zu gut. Man bekommt vom Webdesigner eine statische Photoshop-Datei und der Projektleiter sagt dann “mach das mal responsive”. Die angesprochene Rückbesinnung kommt erfreulicherwiese ja langsam zurück, aber die notwendigen Abstimmungen aller Beteiligten sind meist zeitintensiv und auch sicher nicht ganz simpel. Aber es macht ja Freude sich solchen Herausforderungen zu stellen. :-)) – Schöner Artikel, den ich weiterempfehlen werde!

    Anbei noch ein passender Link: Am 27.11.2012 findet in Köln ein Meetup mit dem Themenschwerpunkt “Responsive Design” statt. Der Eintritt ist frei, aber ein Besuch sicher nicht umsonst! https://www.insidrrr.de/go/event

    Antworten

  97. Finde den Artikel sehr gut.
    Ein Problem ist nur im täglichen Business, dass 80% der Kunden “in Print” denken und mit responsive wenig anfangen können, weil sie das Web und seine Funktionsweise eigentlich gar nicht verstehen (wollen?). Das Arbeiten mit Styletiles etc. setzt auf Kundenseite ein Quantum an abstraktem Vorstellungsvermögen voraus, was leider nicht immer angetroffen wird.

    Antworten

  104. Also eine art “Meta-Datei” mit dem sammeln und definieren fester Elemente für sämtliche Seiten ist eigentlich ab gewisser Projektgrößen zumindest in meinem Workflow standard. Trotzdem sehr gut, es nochmal zu erwähnen. Nichts desto trotz glaube ich, es wird nach wie vor Screendesigner geben müssen und auch Fireworks/PSD Entwürfe entscheidender Seiten. Vermutlich scheitert diese gewünschte “Verzahnung” am Budget der Kunden, die über den Entwicklungsprozess (welcher sich ja bekanntlich immer länger zeiht als erwartet) vermutlich nicht noch ein Programmierer parallel bezahlen werden. Trotzdem ein sehr interessantes Thema, ein empfehlenswerter Artikel von den IA’s über responsive Typografie, welche immer vernachlässigt wird.
    https://informationarchitects.net/blog/responsive-typography-the-basics/

    Antworten

  105. Vielen Dank für diesen tollen Artikel, das Thema ist mehr als aktuell. Anbei ein Beitrag zum Thema aus dem Hause Robinizer Design Studio (Erstellung des Responsive-Designs) in Zusammenarbeit mit dem Hoffmann und Campe Verlag (verantwortlich für die redaktionellen Inhalte).

    https://www.projectm-online.com

    Antworten

  111. Hi,
    wir haben bei der Entwicklung unseres Verlagsproduktes aus der Sparte Healthcare https://www.uterus-myomatosus.net von Anfang an auf responsive Design gesetzt. Dem voraus gingen Lehrjahre als ausgebildete Grafikerin in Agenturen, wo ich für biegsame Accountmanager starre Printlayouts 1:1 für das Web übernehmen musste.Vielleicht hat RWD auch etwas mit geistiger Flexibilität zu tun. Für uns ist die Zukunft der Informationsvermittlung digital, am besten optisch und inhaltlich durchdacht, auf den Leser und seine Gewohnheiten zugeschnitten und auf mobilen Endgeräten ohne Conversion-Abbruch genießbar. Es hilft, sich dabei an Fibonacci zu orientieren. Über auf Papier eingefrorenes kompaktes Wissen aka Buch würde ich mich sehr freuen! :D

    Antworten

  124. Im Grunde mache ich das schon seit geraumer Zeit so. Oder ähnlich. Ich gehe eigentlich immer zunächst vom Quellcode aus, den ich (mit einem groben Blick auf das zukünftige Layout) sinnvoll strukturiere, danach verpasse ich den Tags ein allgemeines Aussehen (Farben, Schriften, Abstände), das den Stilvorgaben (aus dem Print-Bereich) entspricht, und erst danach erstelle ich mit den Blöcken das Screen-Layout, den Standard für die großen Bildschirme und per Mediaqueries die Anpassungen für die kleineren. Danach kommen dann noch Verhaltens-Erweiterungen mit Javascript dazu. Und das alles läuft natürlich nicht ohne kleinere Schleifen und Rücksprünge ab, weil man dann doch wieder den Quellcode anpassen muss und danach nochmal die Styles usw.

    Mit dem konkreten Schema unter der Bezeichnung Responsive Webdesign hab ich mich aber noch nicht weiter beschäftigt, daher nur ein Link auf die Wikipedia: https://de.wikipedia.org/wiki/Responsive_Design

    Antworten

  125. […] Die große Herausforderung im Webdesign heißt heute “responsive”! Das hat jeder schon mal gehört – aber wissen Sie auch, was sich eigentlich genau dahinter verbirgt ? Das Designtagebuch hat uns dazu am 16.11.2012 eine sehr schöne Erklärung geliefert. Kurz: Responsive Webdesign ist die Erstellung einer Website, die auf allen Bildschirmen der Welt sichtbar und voll funktionsfähig ist. Eigentlich ist das gar nichts Neues – kein Trend – sondern alt Bewährtes neu entdeckt: “Ö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.” (ausführlich online nachzulesen im Designtagebuch) […]

    Antworten

  128. Hallo Achim,

    ich bin ja sowohl Design- als auch Programierlaie. Als solcher drängt sich mir die Frage auf, ob es offenbar noch keine Tools gibt, die gerade das Erstellen von Responsive Designs gut unterstützen? Müsst Ihr armen Designer etwa wirklich mit 20 verschiedenen Geräten/Browsern das Ergebnis testen?

    Ich hatte neulich eine Lösung von Adobe für die “Dynamisierung von Grafiken” gesehen, bei dem nicht nur die optimale Bildgröße (Pixel) sondern sogar die Farben und Texturen von Stoffen in Produktkonfiguratoren vorgestellt wurde (war es Scene 7?). Wenn so etwas schon geht, sollte doch irgendjemand auch Tools für Responsive Designs bauen können, bei denen der Designer/Entwickler darauf vertrauen kann, dass in “Cross-Browser” vernünftig aussieht?

    Gibby

    Antworten

  131. Vielen Dank für den schönen Artikel!
    Ich freu mich schon darauf, als Designer aktiv in den Konzeptionsprozess und die Entwicklungsphase eingebunden zu werden. Gerade bei großen webbasierten Projekten (die weit über eine “normale” Homepage hinausgehen) fühlt man sich immer eher als Feuerwehr oder als Störer, wenn man im Entwicklungsprozess einen neuen Vorschlag zur Verbesserung macht…
    Aber ich bin ganz optimistisch, dass ich die Welt trotzdem schöner machen kann ;) (Und mit dem Buch noch mehr ;))

    Antworten

  133. Hier noch ein super Videobeitrag, in dem Stephen Hay das Thema Workflow unter “Responsive Bedingungen” einmal beleuchtet. Ein interessanter Ansatz, der den klassischen Wir-machen-ein-Photoshop-Layout-und-adaptieren-dann-auf-andere-Medien-Weg ablösen könnte.
    Gerade im Zusammenspiel mit den angesprochenen Stiltafeln könnte das eine neue, aber vielversprechende Lösung sein:
    https://vimeo.com/45915667

    Antworten

  141. Ich habe versucht mich in den letzten Monaten etwas schlau zu machen zu diesem Thema. Dabei bin ich auf das Framework Foundation gestossen. Die Arbeit damit ist doch recht einfach. Ich finde es toll, jedoch hat auch Foundation noch Verbesserungspotential wie bei den vielen komplexen JavaScripts und dem sehr umfangreichen CSS-Dateien.

    https://foundation.zurb.com/

    Antworten

  142. Interessanter und sehr gut geschriebener Artikel zum Thema Responsive … eine Herausforderung sowohl in Konzeption, Grafik als auch in der Umsetzung.

    Eine kleine Präsentation meinerseits zum Thema Responsive findet ihr hier
    https://speakerdeck.com/zeppelingroup/responsive-webdesign-fluch-oder-segen-fur-den-cro-aspekt-einer-website

    …. einige Punkte bei Responsive, vor allem die verlängerten Ladezeiten im Vergleich zu einer getrennten mobilen Website lassen mich doch etwas nachdenklich stimmen … ansonsten aber bin ich 100% für Responsive bei zukünftigen Projekten

    Antworten

  143. Einen schönen Link kann ich nicht beitragen. Also auch ohne Gewinnchance – außer Konkurrenz sozusagen – ein herzliches Dankeschön für diesen Beitrag und die vielen interessanten Links.

    Antworten

  144. “Die erstellten Entwürfe sollten aber zum einen nicht zu sehr ins Detail gehen, zum anderen nicht dem Auftraggeber als Pseudo-Endprodukt präsentiert werden.”

    Das klingt zwar schön in der Theorie, ist aber eine Praxis, die einem keine Aufträge einbringen wird. Der Kunde will ein Eindruck vom Endprodukt bekommen und er will diesen Eindruck gestern. Und er wird den Webdesigner beauftragen, der ihm diesen Eindruck vermittelt. Denn wenn das Endprodukt schon so gereift ist, wie es in der Skizze aussieht, kann es bis zur Erstellung der Website nicht so lange dauern, als wenn man ihm ein Bild aus Bauklötzen vorsetzt. Die Vorschau sieht mit Absicht perfekter aus als das Endprodukt, denn man will schließlich was verkaufen. Und wenn der Kunde nur den Webdesigner beauftragt, der ihm die Idee mit der größten Reife präsentiert, dann will er auch darüber hinweggetäuscht werden, dass das gezeigte nicht dem Ergebnis entspricht. Sonst würde er nicht nach diesem Kriterium entscheiden.

    Kurz: Bestimmte Teile dieses Artikels sind für freischaffende Webdesigner einfach nicht machbar, wenn sie ein Einkommen haben wollen.

    Antworten

  146. *******************************************

    Hier sind ja ein Menge hilfreicher Links zum Thema Responsive Design zusammengekommen. Sehr schön. Soeben habe ich die Verlosung vorgenommen. Über ein Exemplar „Responsive Webdesign“ von Christoph Zillgens freuen darf sich:

    Andrea #64

    Viel Vergnügen beim Lesen wünsche ich! Eine E-Mail an Dich ist soeben raus gegangen.
    Allen Anderen – herzlichen Dank fürs Mitmachen.

    Kreative Momente wünsch ich.

    *******************************************

    Antworten

  151. Aus meiner Erfahrung kann ich dazu auch beisteuern, dass bei der heutigen Komplexität der digitalen Produkte die Rolle des Designers am Ende der Produktionskette zeitlich und wirtschaftlich nicht tragbar ist. Der Designer sollte möglichst früh in den iterativen Prozess (viele kleine Schritte) einbezogen werden. Gute Grundlagen liefern dafür die Arbeitsmodelle aus dem Usability-Bereich oder dem Design-Thinking.
    https://www.penova.de/2012/10/design-thinking-kompakt/
    https://lucidii.com/?page_id=432
    Die andere wichtige Frage ist: Was soll der Designer alles können, um so zu arbeiten? Da spielen die Photoshop-Kenntnisse eher eine Nebenrolle, oder?

    Antworten

  152. Wie auch schon andere poste ich hier diesen Link denn ich denke er zeigt noch eine andere gute Möglichkeit aus.

    On off Canvas – Lösung

    Leider finde ich es schwer und aus der Parxis zeigt es sich das viele Kunden die Notwendigkeit nicht verstehen und auch den Mehraufwand nicht bezahlen wollen. Sagt mir mal einer ein gutes Argument damit der Kunde sagt ja ich zahle das!

    Oder gehört es nun zur Leistung dazu für die meisten Endgeräte etwas mit zu entwickeln?

    Lg Peet

    Antworten

  154. Ich kann mich meinen Vorednern nur anschliessen .. sehr interessant und aufschlussreich das Ganze. Mit WordPress und dem richtigen Theme funktioniert das responsive Webdesign schon mal ganz gut. Leider habe ich bisher noch kein Tool oder Programm gefunden dass alle Endgeräte simuliert und nach Fehlern oder Schwachstellen sucht. Habt Ihr eine Idee oder einen Tipp ?

    Antworten

  156. Responsive Design sollte inzwischen kein Ding mehr sein. Die Herhausforderung liegt darin bestehende Seiten mit minimalem Einsatz anzupassen. Ich bin auch kein Fan von effektvollen scripten, da ich lieber auf schnelle Ladezeiten setzte. Wenigstens ist Responsive Design 2013 endlich in aller Munde!

    Antworten

  160. Responsive Webdesign wird immer wichtiger. Die Anzahl mobiler Geräte steigt ständig an. Da Responsive Design die Anordnung der Elemente dynamisch anpasst, sollte man aufpassen, dass sich die Webseite auf allen Geräten ähnlich verhält.
    Ob eine Webagentur dass Wasserfallmodell nutzt oder andere Entwicklungszyklen ist eine wichtige Frage. Einen “besten” Entwicklungsprozess gibt es nicht. Das hhängt immer von Webagentur und Projekt ab.

    Antworten

  162. Prima Artikel.
    Nachdem ich mich endlich auch mal mit diesem Thema auseinander gesetzt habe war klar, das mein Blog dringend ein neues Theme braucht.
    Gar nicht so leicht, da das richtige zu finden & dann noch alle Plugins zu überprüfen, ob diese auch responsive sind.
    Bin gespannt, was der Umstieg noch so an Hürden mit sich bringt!

    Danke auf jeden Fall für die Anregung & Gruß aus Köln
    Heike

    Antworten

  163. Ein wirklich toller Artikel und ein richtig gutes Buch, dass ich mir auch gerade zu Gemüte führe…

    Was meiner Meinung nach das schwerste an Responsive Webdesign ist (für mich als Designer) ist die veränderte Herangehensweise an ein Projekt zu verinnerlichen und nicht immer auf die jahrelang gelernten Methoden zurückzufallen.

    Auch die Behandlung von Bildern im Responsive Webdesign finde ich sehr schwierig, da es keine wirklich gut funktionierende Methode gibt (zumindest noch nicht). Ich hoffe, dass sich bald das picture Tag durchsetzt und dann auch schnell in den Browsern funktioniert.

    Viele Grüße aus Köln
    Marcus

    Antworten

  164. Um Responsive Webdesign wird man nicht mehr herumkommen. Weder als Designer, noch als Kunde. Die mobile Suche nimmt zu und der Anspruch des Besuchers ebenso.

    Antworten

  167. Hi, ich habe von responsive Webdesign erst vor kurzem gehört und es hat mich gleich gepackt. Der Artikel hier kommt mir gerade recht. :) Ich versuche gerade alles Mögliche an Infos über das Thema zusammen zu bekommen. Bin total begeistert, dass es noch so viele Seiten über da Thema gibt. Meine Lieblingsseite, auf der ich mich am Anfang am meisten informiert habe, ist https://www.dreiwerken.de/

    Danke für den tollen Beitrag und die vielen Links. :D

    Grüße aus dem Norden.
    Sandro

    Antworten

  168. Hey, schöner Artikel, macht richtig Lust sich das Buch zu kaufen & sich noch mehr mit dem Thema auseinander zu setzen.

    Ich denke Responsive Webdesign wird immer wichtiger, vorallem, wenn man Zukunftstechnologie wie Google Glass oder Apple iWatch verfolgt. Fixe Größen sind von gestern, heute muss sich alles anpassen, Evolution pur – auch im Internet. Vielleicht gibt es auch bald runde Internetfähige Geräte? Wahrscheinlich arbeitet Apple bereits an dem iBall.

    Bei so einem Thema müssen Webdesigner einfach am “Ball” bleiben. :D

    Antworten

  169. Eine sehr schöne Zusammenstellung der Grundlagen responsiven Webdesigns.
    Und ganz richtig: Nur Breitenänderungen reichen nicht aus: display:none; visibility:hidden –> viele Teile sollten auf kleinen Geräten ausgeblendet werden. Außerdem müssen Schriftgrößen sowie die Anordnungen der Inhalte auf dem jeweiligen Display mit viel Handarbeit angepasst werden.

    Wir haben uns darauf spezialisiert, bei Eignung vorhandene Webseiten nachträglich responsive umzuschreiben. Das lohnt sich vor allem für Betreiber umfangreicher Seiten sehr.

    Antworten

  170. […] Mit diesem modularen Aufbau im Hinterkopf kann der Entwurf in nur einer Größe entstehen. In der Ausarbeitung sind dann die verschiedenen Anordnungen nur noch zu überprüfen und gegebenenfalls nachzujustieren. Insgesamt konzentriert sich der Grafiker auf den grundsätzlichen Website-Charakter sowie ganz detaillierte Einzelelemente. Die Abbildung kompletter Seiten dagegen wird überflüssig. Christoph Zillgens hat den Designaspekt ausführlich im Design-Tagebuch diskutiert […]

    Antworten

  173. Today is competition world and yes, this is the biggest challenge for a web designer to create website for mobile, desktop, watch etc.

    Antworten

  177. Wird tatsächlich zunehmend zur Herausforderung für uns als Webdesigner. Super Artikel! Vor allem Tablets, aber hier ist zum Glück die Anzahl der Besucher nicht so riesig.

    Antworten

Schreibe einen Kommentar

Die Netiquette ist zu beachten. Vor dem Hintergrund einer transparenten, sachlich-fairen Debatte wird die Nutzung eines Klarnamens empfohlen.

Folgende HTML-Elemente können verwendet werden: <b> <i> <img src="bildurl"> <a> <blockquote>

ÄHNLICHE BEITRÄGE

An den Anfang scrollen