Responsive Webdesign, Mediaqueries, Adaptive Layouts

Auch wenn jeder eine gewisse Vorstellung hat, was mit Responsive Webdesign gemeint ist, tun sich manche mit einer genauen Übersetzung schwer. Ich habe es in meinem Buch mit reaktionsfähig übersetzt.

Responsive Webdesign

Auch wenn der ein oder andere das eher mit Chemie in Verbindung bringt, trifft es den Kern ganz gut. Denn es geht darum, dass Websites fähig sind, auf bestimmte Bedingungen, wie beispielsweise eine veränderte Bildschirmgröße reagieren zu können.

Ethan Marcotte, der den Begriff Responsive Webdesign geprägt hat, leitete ihn aus der Architektur ab. Dort gibt es einen Bereich Responsive Architecure, der sich mit der Herausforderung beschäftigt, Gebäude auf äußere Einflüsse reagieren zu lassen. So gibt es Gebäude, die ihre Form entsprechend der Windrichtung anpassen können oder selbstständig Schnee vom Dach schütteln. Architekten experimentieren mit Wänden, die sich je nach Anzahl der Personen im Raum nach innen oder außen Wölben und so die gefühlte Raumgröße verändern.

Übertragen aufs heutige Web haben wir auch eine Vielzahl an Parametern, auf die unsere Websites reagieren könnten. Neben der erwähnten Bildschirmgröße kann man zum Beispiel auf die verschiedenen Steuergeräte wie Maus, Tastatur, Finger eingehen, die Netzwerkgeschwindigkeit berücksichtigen (zurzeit noch nicht so einfach) und die Farbigkeit des Displays auslesen (das Kindle z.B. hat einen Schwarz/weiß-Bildschirm).

Mediaqueries

Mittels der Mediaqueries, den Media-Abfragen, können die oben genannten Parameter geprüft bzw. abgefragt werden. Die Website kann anschließend darauf reagieren und zum Beispiel das Layout an die Bildschirmgröße anpassen. Neben einem flexiblen Raster und flexiblen Bildern/Videos sind Mediaqueries die dritte Zutat, die es zu einer reaktionsfähigen Website braucht.
Adaptive Webdesign

Im Zusammenhang mit Responsive Webdesign taucht ab und an auch der Begriff Adaptive Webdesign auf. Adaptive heißt so viel wie anpassungsfähig und ist etwas allgemeiner gehalten als das von Ethan klarer umrissene „responsive“. Aaron Gustafson, der Autor des Buches Adaptive Web Design meint damit einfach, dass sich Websites an die Fähigkeiten des Nutzergeräts anpassen können, sowohl bezüglich Layout als auch der Funktion (z.B. hinsichtlich JavaScript).

Ist von anpassungsfähigen Layouts die Rede, so werden hierbei verschiedene fixe Layouts entwickelt, die sich an bestimmten vorher festgelegten Bildschirmgrößen orientieren. Im Vergleich dazu sind reaktionsfähige Layouts flexibler, weil sie aufgrund ihres flexiblen Gestaltungsrasters auf jede mögliche Bildschirmgröße reagieren können.

Kommunikation mit dem Auftraggeber

In der Kommunikation mit Auftraggebern sollte Fachchinesisch so gut es geht vermieden werden. Hier ist es besser, responsive mit Adjektiven wie flexibel, nachhaltig und zukunftssicher zu umschreiben. Das sind Begriffe, die in klein- und mittelständischen Unternehmen leichter nachvollzogen werden. Natürlich spielt auch immer der Wissensstand der Auftraggeber eine wichtige Rolle für die Wahl des passenden Vokabulars.

5 comments

  1. Ralph Segert says:

    Das Problem bei Umschreibungen wie „nachhaltig“ und „zukunftssicher“ ist leider, daß ich damit dem Kunden z.B. nicht erkläre, warum reaktionsfähiges Webdesign teurer ist. Zudem sind diese mittlerweile so abgegriffen, dass ich persönlich ein schlechtes Gefühl bekomme, wenn sie mir herausrutschen, da mittlerweile alles und nichts nachhaltig ist. Und jeder weiss doch, alles ist sicher, nur die Zukunft nicht. ;)

    Ich meine, ich komme bei der Beratung um diese Fachbegriffe rund um responsive Web Design nicht herum. Das ist auch nicht nötig. Es kommt darauf an, welche erklärenden Geschichten ich um diese Begriffe herum erzähle. Das kann durchaus kurz und lebendig sein, indem ich z.B. versuche, an den Alltagserfahrungen von Konsumenten anzusetzen. Ja, auch Kunden sind Konsumenten. ;)

    Es ist schwer, nicht ins eigene Fachvokabular abzudriften, vor allem, wenn man praktisch und theoretisch voll im Thema steckt. Manchmal hilft eine Art Mantra, schnell aufgesagt, wenn das Telefon klingelt: „Ich setze nichts voraus!“

  2. Jan says:

    Die Unterscheidung zwischen adaptive und responsive design erscheint mir etwas weit hergeholt. Aufgabe und Ziel beider Entwürfe sind identisch, lediglich die Strategie unterscheidet sich geringfügig, was dem Alter und dem technischen Stand geschuldet ist.

    Gustafson war offenbar der erste, der für diesen Ansatz einen Begriff geprägt hat (adaptive design). Etwas später hat man die Strategie geringfügig verfeinert und schlicht einen neuen Begriff für die gleiche Vorgehensweise erfunden. Aus „Kraftwagen“ wurde „Auto“, trotzdem ist beides dasselbe.

    Wenn man nun im Nachhinein versucht, künstlich eine unterschiedliche Definition auf die Begriffe zu legen, erscheint mir das eher willkürlich. „Anpassungsfähig“ spricht von einem festgelegten „Satz“ von Layouts während „reaktionsfähig“ eine dynamische Anpassung des Layouts meint? Wo ist der Unterschied? Beide Ansätze returnieren lediglich ein passendes Layout für den jeweiligen Client. Die modernere Strategie (responsive) unterstützt einfach nur mehr Clients, indem sie unendlich viele Layouts erzeugen kann, während die ältere Strategie (adaptive) etwas eingeschränkt ist und nur eine handvoll Layouts liefert. Ist es sinnvoll, hier eine Unterscheidung vorzunehmen?

    Adaptive und responsive sind meiner Ansicht nach zwei Begriffe für ein und dasselbe Konzept und ich würde beide Begriffe als „anpassungsfähig“ übersetzen. Meine zwei Pfennig.

  3. Carsten Witt says:

    Ich stimme Jan zu, dass “adaptive” und “responsive” beide für verschiedene Endgeräte im Ergebnis das Gleiche liefern und sich im technischen Ansatz unterscheiden. Der Unterschied ist für mich wie der zwischen analog und digital, nämlich der zwischen Welle und Treppe.

    Begrifflich halte ich „anpassungsfähig“ für treffender, da „reaktionsfähig“ immer auch impliziert, dass auf eine Aktion [des Benutzers] eine aktive Re-Aktion [der Website] erfolgt. Stattdessen passt sich die Website ja den Rahmenbedingungen des Browsers eher passiv an.

  4. Ich spreche lieber von „responsiven“ und „adaptiven“ Design. Denn in dem Moment, von du beim responsiven Layout ein Media-Query definierst (wo man eigentlich kaum drumherum kommt), ist es adaptiv.

    Da es mittlerweile 100e von mobilen Ausgabegeräten mit unterschiedlicher Auslösung und Browser(-Versionen), ist responsives Webdesign sehr aufwendig und teuer … und muss auch zukünftig weiter angepasst werden. Es ist eine Illusion mit EINEM Layout Zukunftssicherheit herzustellen.

    Es ist schwer genug, dies dem Kunden nachvollziehbar zu vermitteln.

Schreibe einen Kommentar zu Jan Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert