t3n News Entwicklung

Das ist doch gar nicht „responsive“! Ein Guide gegen Bullshit-Bingo in der Web-Entwicklung

Das ist doch gar nicht „responsive“! Ein Guide gegen Bullshit-Bingo in der Web-Entwicklung

Responsive, Adaptive, , Mobile First oder Elastic – wir alle haben davon gehört, aber was bedeuten diese Begriffe eigentlich genau? Ein Guide ohne eine einzige Zeile Code.

Das ist doch gar nicht „responsive“! Ein Guide gegen Bullshit-Bingo in der Web-Entwicklung
„Responsive Webdesign“ – DAS Buch für flexibles Webdesign von Ethan Marcotte.

Vor drei Jahren, genauer gesagt am 25. Mai 2010, hat Ethan Marcotte einen legendären Artikel auf „A List Apart“ veröffentlicht, der die nachhaltig verändert hat. Fast ein Jahrzehnt zuvor, im Jahr 2000, hat John Allsopp einen Artikel namens „A Dao of Web Design“ verfasst, in dem er beschrieb, dass die Regeln aus dem Buchdruck nicht auf das Web übertragbar sind. In diesem Beitrag lest ihr, warum euer Webprojekt von morgen auf Wissen von vor über zehn Jahren aufbaut.

Das Fenster des Browsers, ist im Gegensatz zum Blatt Papier, flexibel.
Das Fenster des Browsers ist im Gegensatz zum Blatt Papier flexibel.

„Die Kontrolle, welche Designer aus Print-Medien kennen und sich auch für das Web ersehnen, ist ein Produkt der limitierten Größe der Buchseite. Wir sollten die Tatsache annehmen, dass das Web nicht die selbe Begrenzung hat, und für diese Flexibilität auch designen. Aber zuerst müssen wir ‘the ebb and flow of things‘ akzeptieren.“ John Allsopp in „A Dao of Webdesign“

Was John Allsopp damit meinte ist, dass man als Designer nicht die gewünschte Kontrolle über die Darstellung hat – beziehungsweise nicht versuchen sollte, diese zu erlangen (Stichwort: „pixelperfektes Design“, „CSS ist DPI für Web“ und so weiter). Zehn Jahre später erweiterte Ethan Marcotte die Idee von John Allsop und lieferte ein Konzept, um dieses Problem auch technisch lösen zu können. Sein Artikel (und später sein Buch) mit dem Namen „Responsive Web Design“ haben die moderne Web-Entwicklung bis heute geprägt. Die Quintessenz von Marcottes Buch ist – technisch gesehen – die Beschreibung von drei Kernelementen für Responsive Webdesign (RWD):

  • Das flexible und auf Rastern basierende Grid
  • Die flexible Darstellung von Bildern und anderen Media-Dateien
  • Die mit CSS3 vorgestellten Media-Queries

Der ein oder andere wird jetzt fragen: „Diese Techniken setze ich aber auch bei [beliebiger Ansatz] ein und das ist gar kein RWD!?“ Genau auf diese Frage möchte ich mit diesem Artikel eingehen.

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
10 Antworten
  1. von Sabine am 30.10.2013 (09:44 Uhr)

    Content First so ungefähr 2017

    Antworten Teilen
  2. von Sebastian Frost am 30.10.2013 (10:22 Uhr)

    Gutes RoundUp, die Grafik bzw. Erklärung zu Progressive Enhancement bzw. Graceful Degradation trifft dennoch nicht ganz den Kern (ist sogar etwas irreführend), hatte das hier schon mal angesprochen: http://blog.kulturbanause.de/2013/08/mobile-first-progressive-enhancement/

    Antworten Teilen
  3. von dot_SB am 30.10.2013 (10:27 Uhr)

    @Sabine: Ich hoffe, dass dies schon jetzt stattfindet. Jeder Responsive Konzeption sollte eine Content-Strategie und -Hierachisierung vorangehen, sonst verfällt Responsive Design wieder zu einem dieser visuellen Nichtsnutz-Effekte.

    Antworten Teilen
  4. von Frank am 30.10.2013 (11:32 Uhr)

    Die gute Nachricht les ich wohl, allein es gibt die Kunden und die Grafikdesign-Büros :-/

    Was nützen all die schlauen Gedanken die man sich macht, wenn der Kunde sich dann für das "Bunte" der Konkurrenz entscheidet, weil es billiger ist und einfach schön aus sieht.
    Den Ansatz mit Responsive Design hatten wir schon damals im "Tabellendesign", als man versuchte, flexible HTML-Tabellen aufzubauen, die dank mangels hochauflösender Monitore nicht "unendlich" breit werden konnten aber durch "Grafikbremsen" auch nicht unendlich klein.

    Damals gab es "pixelgenaue" Designumsetzungen und was soll ich sagen?
    Auch heute noch wird von Agenturen und Grafikbüros gefordert, dass das Design pixelgenau umgesetzt wird (hier müsste ich drei !!! dahinter setzen, weil es wirklich welche gibt, die mit dem Pixelmesstool am Bildschirm die pixelgenaue Umsetzung der Abstände und Größen prüfen).

    Solange sogar größere Kunden lieber die "schöne Bunte ich-bin-auch-im-Web Seite" wählen und absolut nicht verstehen was differenzierte Besucheransprache heißt, wird man schöne bunte Seiten machen.
    Solange Grafiker nur Grafik können und keine Ahnung vom Web und den technischen Möglichkeiten aber auch Einschränkungen haben, werden wir auch pixelgenaue Designs basteln ("basteln" trifft es richtig), weil der Workflow falsch ist: Denn nicht der Grafiker mit oft wenig Ahnung vom Webdesign sollte die Vorgaben machen, sondern derjenige der das Web-Konzept entwirft und das System und die Möglichkeiten kennt.

    Die Realität ist leider die, dass wir immer noch bunte Druckprospekte möglichst 1 zu 1 ins Web umsetzen (müssen), dass Kunden sich stets vom Bunten blenden lassen und dass "Konzeption" nichts wert ist, weil man es als Laie nicht sieht, nicht greifen kann und es trotzdem Geld kosten soll.

    Ich glaube, dass ein nächster Paradigmenwechsel die "differenzierte Besucheransprache" sein könnte. Besucher mit Mobilgeräten sind eventuell nicht die gleiche Zielgruppe wie Besucher mit Tower-PC und großen Monitoren.
    Das Design könnte sich entsprechend so anpassen, dass Informationen die für Mobilgeräte-Nutzer erfahrungsgemäß weniger wichtig sind, nur am Rande zu finden sind. Jedoch Besucher die eher im Büro sitzen, haben vielleicht andere Informations-Schwerpunkte die sie finden möchten.

    Antworten Teilen
  5. von David Hellmann am 30.10.2013 (11:49 Uhr)

    Wenn ich das so lese machen wir nur noch weiße Textseiten...

    Antworten Teilen
  6. von Lars Mielke am 30.10.2013 (12:58 Uhr)

    Und mit diesem Kommentar noch einmal eine Rolle rückwärts ...

    Mir sträuben sich innerlich und äußerlich die Haare, wenn behauptet wird, die größte Leistung des Webdesign bestünde darin, sich aus der Knechtschaft der Typographie und des Buchdrucks befreit zu haben. Ich möchte hinsichtlich dieses Irrglaubens auch nicht weiter ausholen, aber mir ist eine vom Layout her unflexible aber gut gestaltete Webseite lieber als diese Zumutungen, die ich im Umfeld der ganzen "wir machen es jetzt alles anders, weil wir es endlich können" Designer.

    Antworten Teilen
  7. von David Hellmann am 30.10.2013 (20:23 Uhr)

    Daumen hoch an Lars! :)

    Antworten Teilen
  8. von eigentor am 05.11.2013 (06:40 Uhr)

    aha, nun hab sogar ich den Unterschied zwischen adaptive und Responsive verstanden.
    Das war für mich immer Nebel.
    Schöner Artikel.

    Antworten Teilen
  9. von eigentor am 05.11.2013 (06:44 Uhr)

    Und noch einer
    @Frank: Wenn dich das so stört, gäbe es einen Ausweg. Dann müßtest du allerdings Überzeugung vor Brötchenverdienen stellen. Ich mache es häufiger, und der Brotkasten ist schon mal leer.

    Konkret so: Projekte ablehnen, bei denen der Kunde sich nicht auf den moderneren Ansatz einläßt.

    Antworten Teilen
  10. von Frank am 05.11.2013 (09:56 Uhr)

    @eigentor: Das ist es ja, der Brotkasten bleibt meistens leer, wenn man immer seine Überzeugung durchsetzen will. Aber wenigstens kann man meistens die schlimmsten Unfälle vermeiden.

    @Lars Mielke: Typographie und die Regeln der Präsentation gelten auch im Webdesign und auch für Responsive Webdesign. Aber anders als im Buchdruck muss man sich daran gewöhnen, dass man keine feste Länge x Breite mehr hat.
    Aber eine Seite kann sowohl für Mobiles als auch für PCs gut gestaltet sein.

    Meistens ist es der Kunde, der mit eigenen Inhalten die Seite verunstaltet.
    Es ist schon viel wert, wenn man ihnen rote, gelbe, grüne und blaue Textpassagen in einem Absatz abgewöhnen kann. Womöglich noch blinkend in Fettschrift.

    Andererseits machen es sich manche Agenturen recht einfach, indem sie Textwüsten bauen. Eine Überschrift und der Rest ist Fließtext ohne Zwischenüberschriften oder irgendwelche Auflockerungen für das Auge.
    Das ist dann im wahrsten Sinne des Wortes billig und deren Kunden halten es für günstig.
    Aber so ist es halt.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Webentwicklung
Webentwicklung, UX-Design, Product Lead oder Grafik: Traum-Ferienwohnungen, CHECK24, RTL, Otto, myToys und mehr suchen neue Mitarbeiter
Webentwicklung, UX-Design, Product Lead oder Grafik: Traum-Ferienwohnungen, CHECK24, RTL, Otto, myToys und mehr suchen neue Mitarbeiter

Zweimal pro Woche verweisen wir hier auf aktuelle und interessante Jobangebote aus unserer Stellenbörse „t3n Jobs“. Heute können wir euch 27 Angebote aus den Bereichen „Entwicklung“ und … » weiterlesen

HTML auf der Autobahn: Wie du mit Jade deine Webentwicklung beschleunigst
HTML auf der Autobahn: Wie du mit Jade deine Webentwicklung beschleunigst

Viele Entwickler fragen sich, wie sie die Entwicklung von HTML beschleunigen können. Heute zeigen wir euch Jade – eine auf Node basierende Template-Engine, die genau das verspricht. » weiterlesen

Brick: Mozilla vereinfacht Webentwicklern mit UI-Kit die Arbeit
Brick: Mozilla vereinfacht Webentwicklern mit UI-Kit die Arbeit

Brick ist eine UI-Komponenten-Sammlung von Mozilla, die Webentwicklern die Arbeit mit UI-Elementen erleichtern soll. Sie basiert auf Web-Components, ist aber jetzt schon mit aktuellen Browsern … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?