Hinter dem Begriff "Responsives Webdesign" verbirgt sich eine Layout-Struktur, die sich an die unterschiedlichen Auflösungen von Endgeräten anpasst. Vielleicht haben Sie diesen Begriff schon einmal gehört, als Sie über einen Webauftritt nachgedacht haben.

Ganz kurz: Mit einer responsiven Seite wird es egal, ob Ihre Webseite mit dem Desktop-Rechner, dem Smartphone oder dem Tablet PC aufgerufen wird - Ihre Webseite macht immer eine gute Figur und alles ist am Platz. Selbst wenn ich das Mobilgerät vom Hoch- ins Querformat kippe, bleibt alles geordnet und gut gestaltet.


Da selbst auf kleineren Webseiten von Freiberuflern oder kleinen und mittleren Unternehmen die Seitenzugriffe im Durchschnitt von 15 - 20% von Mobilgeräten aus erfolgen und dieser Anteil ganz sicher noch zunehmen wird, werden Sie sich mit dem Thema befassen müssen. Responsives Webdesign ist allerdings kein Allheilmittel, sondern hat Vor- und Nachteile. In jedem Fall hat "Responsives Webdesign" ein hohes Anforderungsniveau an den technischen Unterbau einer Webseite. Immerhin muss eine Webseite so aufgebaut werden, dass der Bereich vom hochauflösenden Breitbild-Bildschirm bis zum und niedrig auflösenden Hochformat alles abgedeckt wird.

Ich will versuchen, die wichtigsten Punkte einigermassen laienverständlich aufzubereiten:

Die Kriterien, die bei der Umsetzung einer Webseite, die sich responsiv verhalten soll, beachtet werden müssen, sind:

1. Bildschirmgrösse


2. Bildschirmauflösung


3. Bildschirmformat (Hochformat versus Querformat)


4. Bedienung der Webseite (navigiere ich mit der Maus, der Tastatur, mit dem Finger oder auf andere Weise)


5. Geschwindigkeit (Netzwerk, Endgerät, Seiteninhalt)

Um das Mal anhand der Apple-Endgeräte zu vergleichen:

• ein MacBook-Bildschirm bietet eine Bildschirmauflösung von mehr als 1280px


• ein Desktop-Bildschirm bietet eine Auflösung von i.d.R mehr als 1920px


• ein iPad hat eine Bildschirmauflösung von unter 800px (hochkant)


• ein iPhone hat eine Bildschirmauflösung von weniger als 480px (hochkant)

Hinzu kommen alle anderen Endgeräte vom Netbook (was noch am Unproblematischsten sein dürfte) über das Android-Handy, den Kindle bis hin zum alterwürdigen Blackberry. Das sich daraus ergebende Dilemma lässt sich erahnen...

Responsives Webdesign lässt Hoffnung aufkommen:

• eine einzige Webseite deckt die Darstellungsmodi unterschiedlicher Browser und Endgeräte ab


• es gibt keinen zusätzlichen Programmierungs- und Pflegeaufwand für eine speziell für Mobilgeräte optimierte Webseite


• responsive Webseiten sind i.d.R auch gleichzeitig barrierefrei


• responsive, d.h. für den Aufruf von Mobilgeräten optimierte Webseiten haben suchmaschinentechnische Vorteile

Es gibt aber auch Nachteile des responsiven Webdesigns:

• der Unterbau responsiver Webseiten ist weitaus komplexer, dadurch ist der Entwicklungs- und Pflegeaufwand deutlich grösser (zumindest, wenn man nicht auf vorgefertigte Webseiten-Vorlagen zurück greift)


• es kann gerade beim Rückgriff auf externe Javascript-Bibliotheken zu erheblichen Performance-Problemen kommen - die Ladezeit kann deutlich länger werden oder aber eine Seite bleibt beim Laden komplett hängen


• ältere Browser haben Darstellungsprobleme mit responsiven Seiten (und der Internet Explorer gehört hier wieder mal zu den eher problematischen Kandidaten)


• das Einfügen vom multimedialen Inhalten, von Bildern und Videos kann problematisch werden


• die Darstellungsraster sind nicht mehr verlässlich - man muss genau wissen, was man tut, ansonsten wird das, was auf dem einem Gerät gut aussieht, auf dem nächsten unberechenbar

Wo ist der grundlegende Unterschied?

Nicht responsive Webseiten basieren auf einer bestimmten Positionszuweisung der einzelnen Seitenelemente: Idealerweise folgt eine Webseite dabei einem bestimmten Raster - man bezeichnet das auch als "Layout-Grid". Die Positionen der einzelnen Inhalte ist also nicht zufällig, sondern folgt einer bestimmten strukturellen Anordnung - alles ist an seinem Platz. Bei responsiven Seiten gibt es dieses starre Layout-Grid nicht mehr, bzw. nicht mehr in der bisherigen Form: Seiteninhalte, die ich bisher starr in einem festen Abstand neben- und übereinander legen konnte, müssen nun bei Aufruf von einem Mobilgerät aus automatisch untereinander angeordnet werden. Im Wesentlichen heisst dass, dass für das Raster keine festen Pixelwerte mehr vorgegeben werden dürfen, sondern nur noch prozentuale Vorgaben

Auf nicht responsiven Webseiten konnte man feste Schriftgrössen definieren - das ist jetzt nicht mehr möglich, denn die unterschiedlichen Geräte haben unterschiedliche Anforderungen: Was auf dem Desktop-Bildschirm eine ausreichend grosse und bequem lesbare Schriftgrösse war, ist auf einem iPhone u.U. nicht mehr lesbar. Die Konsequenz: Responsives Webdesign muss sich von festen, in Pixeln definierten Schriftgrössen verabschieden.

Etwas Ähnliches passiert mit Bildern: Auf Desktop-Rechnern ist viel Platz zum Anordnen von in festen Grössen definierten Bildern. Da stationäre Rechner meistens an zuverlässige und hinreichend schnelle Netzwerke angeschlossen sind, ist die Bildgrösse ein sekundärer Faktor geworden. Bei Mobilgeräten sieht das oft anders aus, denn die Mobilverbindung lässt häufig zu wünschen übrig und so muss im Untergrund einer Webseite eine bestimmte Technik vorhanden sein, die Bilddateien für die Ausgabe auf Mobilgeräten herunter rechnen kann

Probleme über Probleme...

Ein paar Vorraussetzungen bzw. Grundanforderungen muss man beim Erstellen einer responsiven Webseite im Auge haben:

• der Browser, mit dem die Seite aufgerufen wird muss CSS3 beherrschen


• die Ladezeit einer Webseite darf durch die angewandten Techniken nicht behindert werden - dies betrifft insbesondere komplexe Javascript-Bibliotheken, auf die responsive Webseiten zugreifen


• die Navigation muss auch mobil bedienbar sein - Mouseover-Menüs zum Beispiel können auf Mobilgeräten grosse Probleme bereiten!

Responsive Webseiten müssen getestet werden

Nur wenige der in Sachen Webdesign arbeitenden Freelancer haben die Möglichkeit, ihre responsiven Seiten auf allen erdenklichen Endgeräten zu testen - trotzdem sollten Webseiten immer auf einem realen Gerät überprüft werden: Es geht nicht nur um das Aussehen und das Verhalten, wenn ich vom Quer- ins Hochformat und umgekehrt wechsele, es geht auch um die Bedienung und die Benutzerführung einer Webseite. Der allein kämpfende Freelancer wird sich meist auf seine eigenen paar Geräte beschränken müssen, allerdings gibt es Test-Tools, die man zu Hilfe nehmen kann ohne sich gleich einen Stall von Mobilgeräten kaufen zu müssen.

Die bekanntesten sind z.B.:

• Responsinator


• Responsive Design Testing


• Demonstrating Responsive Design


• Responsivepx

Relativ zuverlässig ist Safari-Erweiterung: "Resize", die mittlerweile allerdings ein paar Euro kostet. Das Problem all dieser Tools: Diese Test-Tools simulieren nur die Wirklichkeit und sind nur begrenzt zuverlässig. Man muss also auf Überraschungen gefasst sein.

Was bleibt am Ende?

Den responsiven Seiten gehört zweifelsohne die Zukunft. Trotzdem gibt es Einzelfälle, bei denen man immer noch auf klassisch aufgebaute Seiten zurück greifen wird und eine speziell für Mobilgeräte optimierte Seitenversion erstellen wird, auf die man den Seitenbesucher dann automatisch umleitet. Beispielsweise wenn eine Website sehr umfangreich aufgebaut und komplex strukturiert worden ist, ist es oft besser, bei getrennten Webseiten zu bleiben, die dann per Umleitung ("Mobile Browser Detect") den jeweiligen Mobilgeräten ausgegeben werden.

Für kleinere Webauftritte oder auch für komplett neue Webauftritte sollte man primär responsiv denken...

Bildquelle: morguefile | solrac_gi_2nd

"Der Patient rückt nur dann ganz in den Mittelpunkt der Gesundheitsbranche, wenn die Leistungs- und Qualitätstransparenz durchgängig gewährleistet sind." Schöne und hehre Worte - lässt sich ein solcher Anspruch mit einem Transparenz schaffenden Testdienstleister verwirklichen?

Mehr dazu hier:
Nicht Patient o d e r Konsument, sondern Patient u n d Konsument!
Transparenz mit „Stiftung Gesundheitstest“

Datenschutz spielt nicht nur in der Arztpaxis eine Rolle - jeder Freiberufler, jeder kleine und mittlere Gewerbebetrieb ist davon betroffen. Leider sieht es diesbezüglich häufig düster aus und das Verständnis für Datenschutz ist erschrecken gering.

Ein paar verständliche und eigentlich einfach zu befolgende Grundregeln hat Sascha Schoor hier zusammen gefasst:
Die 8 Gebote der Datensicherung personenbezogener Daten