Beim „Responsive Webdesign“ geht es um die technische und gestalterische Anpassung des Erscheinungsbildes der Webseite auf verschiedene Endgerät.
Wie werden Webseiten technisch angepasst?
Dieses kann zum Beispiel in der Programmierung mithilfe sogenannter Breakpoints ausgeführt werden. Breakpoints sind selbst festgelegte „Punkte“ auf einer Webseite, bei welchen sich die Ansicht ändern soll. Beispiel: bei 1280px, 960px, 480px. Für die Umsetzung wird die CSS-Datei (Datei mit den visuellen Definitionen einer Webseite) angepasst. Beispiel: Wenn die Seitenbreite unter 480px angezeigt wird, soll der Fließtext in der Schriftgröße 12px statt 14px angezeigt werden.
Schriften werden lesbarer, Buttons sind besser zu erreichen und Bilder werden skaliert. Nicht jeder Inhalt einer Webseite hat einen gleich wichtigen Informationsgehalt. Bei der Anpassung sollte auch darauf geachtet werden Inhalte zu priorisieren sind. Bedeutet Funktionen wie Slider sind nicht immer von Vorteil auf einem Mobilen Endgerät und sollten bei der Anpassung mit berücksichtigt werden bzw. ausgeblendet werden.
Was ist das Ziel der responsive Webseiten?
Ziel des Responsive Webdesigns ist es die User Experience einer Webseite für den Besucher zu erhöhen. Der Webseitenbesucher soll sich auf kleinen Displays besser und schneller zurecht finden können. Es soll aber auch das eigentliche Ziel der Webseite schneller vermittelt werden. Beispiel: Ihr Seite dient der hauptsächlich einer Produktvorstellung. Duch eine verkleinerte Ansicht Ihrer Desktopseite würden Sie dieses Ziel schlechter erreichen.
Was kostet eine responsive Seite?
Das unterscheidet sich an der gewünschten Qualität der Anpassung. Wenn Sie einfach nur möchten das sich Inhalte ohne einen Sinn untereinander darstellen sollen, fallen kaum Mehrkosten an. Dafür können ferige Frameworks (grob gesagt: ein vordefinierter Programmierer-Werkzeugkasten) verwendet werden. Wenn allerdings Schriften angepasst werden sollen, muss das CSS erweitert werden. Also entstehen nochmal die Kosten der Erstellung der CSS Datei.
Bei einer umfangreichen Anpassung entstehen Kosten von einer erweiterten Konzeption und der Anpassung der Seite.
Hat eine responsive Webseite Vorteile beim google Ranking?
Diese Antwort kann nur Google selbst richtig beantworten. Fakt ist: Google möchte Ihnen bei der Eingabe des Suchbegriffes eine qualitativ hochwertige Antworten liefern. Und weil eine Responsive Webseite nun mal eine bessere Usability für bestimmte Endgeräte bietet, ist das auch ein Kriterium für eine qualitativ hochwertigere Webseite.
Häufig verwendete Breakpoints:
- Große Monitore: 1280 Pixel
- Mittlere Monitore: 980 Pixel
- Tablets: 760 Pixel
- Smartphones: 480 Pixel
Spalten statt Pixel
Der einfachste Anfang einer Umsetzung einer Responsive Webseite ist sich von dem Gedanken von Auflösungen zu befreien. Es gibt einfach zuviele verschiedene Endgeräte auf dem Markt. Daher werden Seiten bei der Gestaltung in Spalten eingeteilt. Das dient nicht nur einer sauberen Aufteilung, sondern auch einer erleichterten Anpassung an andere Endgeräte.
Ein Beispiel könnte wie folgt aussehen:
- 12 Spalten: Desktop und volle Breite
- 4 Spalten: Tablets und kleine Bildschirme
- 2 Spalten: Smartphones mit großem Display
- 1 Spalte: Smartphones mit kleinem Display
Das gilt allerdings nur für die logische Aufteilung. Die Pixel müssen natürlich auch mit berücksichtigt werden, da ja Schriften auch noch angepasst werden müssen.
Ich hoffe wir konnten Ihnen hiermit einen groben Überblick in die Welt des Responsive Webdesigns verschaffen. Zum heutigen Zeitpunkt sollte die Frage nicht mehr im Raum stehen, ob man seine Seite für Mobile Endgeräte braucht, sondern vielmehr wie man dieses sinnvoll umsetzt!