Heute stelle ich Ihnen vor, wie Websites mit responsive Webdesign (RWD) so erstellt werden, dass die Webseite auf die Eigenschaften des Endgerätes, auf dem sie angezeigt wird, reagieren und somit angepasst werden kann.
Was ist Responsive Webdesign?
Responsive bedeutet „reagierend“ – in diesem Fall reagiert die Webseite auf das Endgerät. Responsive Webdesign ist eine Onlinedarstellung, die 2011 von Ethan Marcotte etabliert wurde. Das Ziel von RWD ist, Seiten zu erstellen, die, möglichst geräteunabhängig, schnell laden und auch auf allen Endgeräten gut aussehen. Webseiten sollen schließlich für die User in der Darstellung wie in der Handhabung gut zugänglich und bedienbar sein, egal, ob diese über ein Mobile Device oder über einen Standrechner auf die Webseite zugreifen.
Erstellen von responsiven Layouts
Mit HTML und CSS kann man festlegen, dass sich die Webseite an die Bildschirmgröße des Endgeräts anpasst. Zusätzlich gibt es CSS3 Media Queries (Medienabfragen). So kann man an festgelegten Größen Umbruchpunkte individuell definieren und dadurch das Layout anpassen. Zunächst werden Medientyp und Medienmerkmal abgefragt. Wenn das verwendete Ausgabemedium alle Kriterien einer Media Query erfüllt, wird die damit verknüpfte CSS-Ressource eingebunden.
Responsive Webdesign muss in erster Linie gut geplant werden und erfordert ein abstrahiertes Verständnis der geplanten Webseite. Meist wird die Browserseite als Referenz gewählt. Sie können also das Browserfenster verkleinern oder Ihr Smartphone von Hochformat auf Querformat drehen – die Ansicht wird angepasst. Dies erreicht man mit folgendem <meta> Element: <meta name=“viewport“ content=“width=device-width, initial-scale=1.0″>.
Vorteile
- Ist das Webdesign responsiv, können die Nutzer über alle Arten von Endgeräten auf die Website zugreifen. Endgeräte können dabei der Desktop, das Tablet, der Fernsehbildschirm oder das Smartphone sein.
- Google empfiehlt aus Gründen der Suchmaschinenoptimierung (SEO) eine URL für darstellungsunabhängige Inhalte.
- Man braucht nur einen Code und ein Design und kann dadurch die Website einfacher und schneller warten.
Nachteile
- Der Entwicklungsaufwand für eine Website im RWD ist in etwa derselbe, wie der Aufwand, zwei Webseiten zu erstellen, eine für die Bildschirmansicht, eine für die mobile Ansicht.
- Beim RWD hat man weniger Kontrolle darüber, wie die Darstellung beim User dann tatsächlich aussehen wird und benötigt somit ein gewisses Abstraktionsvermögen von geschulten Web Designern.
- Bei den Möglichkeiten der Gestaltung sind Kompromisse nötig, da nur einfachere Varianten der Designelemente responsive sind.
- RWD verlängert die Ladezeit, was dazu führen kann, dass Nutzer die Seite gleich wieder verlassen.
- Beim Abrufen der Website erfolgen viele kleine Zugriffe, was für jede einzelne Übertragung eine stabile Internetverbindung des Users erfordert, um die Seite überhaupt darstellen zu können.
- IE6 bis IE8 verstehen die für RWD notwendigen CSS-Anweisungen nicht, man benötigt für diese Browser also zusätzliche Javascript-Codes oder weitere Stylesheets.
- Wenn das Werbemittel ebenfalls mittels Responsive Designs geändert wird, ändert sich ohne zusätzliche Skripte, die die Ladezeit verlängern, auch das Abrechnungsmodell. Aus dem Inpage wird ein Floating oder Interstitial, das zwar mehr Geld einbringen würde, aber nicht abgerechnet werden kann.
Welches Webdesign soll ich verwenden?
Wie immer müssen Sie sich zuallererst darüber klar werden, was Sie mit Ihrer Website erreichen wollen. In den meisten Fällen wird RWD eine gute Wahl sein, in anderen Fällen sollten zwei Versionen einer Website erstellt werden. Die Experten von Dextra-Data beraten Sie hier gerne.
