Responsive Webdesign von georg design, der Webdesignagentur in Münster
Responsive Webdesign macht die mobile Revolution der Internetnutzung möglich
Das Team von georg design entwickelte als eine der ersten Werbeagenturen in Münster responsive Websites – von A bis Z. Unter A bis Z verstehen wir die Verbindung aus strategischer Planung, kreativem Webdesign, starken Bildern, Texten, die Google Besuchern genauso gefallen wie den Besuchern der Website, technischem Know-how in der Programmierung, dem Hosting der Website bei einem exzellenten Businessprovider und kompetenter persönlicher Betreuung auch nach der Liveschaltung.
Der Wettbewerb im Internet und das Webdesign entwickeln sich rasant. Dabei werden die Anforderungen an eine Internetpräsenz immer komplexer. In den letzten Jahren hat sich die Art und Weise, wie wir das Internet nutzen, revolutioniert. Auslöser dafür sind mobile Endgeräte. Inzwischen nutzen 2 von 3 Anwendern in Deutschland das Internet auch mobil (Quelle). Bei einer Internetnutzung von fast 90 % der deutschen Bevölkerung ist das ein enormer Marktanteil.
Was hat responsive Webdesign mit Bruce Lee zu tun?
Bruce Lee beschrieb einmal die Notwendigkeit, im Kampfsport flexibel zu reagieren, mit folgendem Zitat:
„Wenn man Wasser in eine Tasse gießt, wird es zur Tasse.
Gießt man Wasser in eine Flasche, wird es zur Flasche.
Gießt man Wasser in eine Teekanne, wird es zur Teekanne.“
Das ist es im Prinzip, was eine responsive Website tut. Der Inhalt passt sich der Form des Gefäßes an. Die Gefäße sind in diesem Fall unterschiedliche Endgeräte wie PC-Monitore, Notebooks, Tablet-PC oder Smartphones, mit denen Websites aufgerufen werden.
Und wie sieht eine typische responsive Website aus?
Antwort: Auf jedem Gerät ein bisschen anders. Vielleicht sollten wir eher fragen, wie sich eine responsive Website verhält. Responsive Webdesign passt sich den Bildschirmen auf allen Geräten wie Smartphones, Tablets, PC Monitoren, TV-Geräten etc. dynamisch an. Dadurch ist sichergestellt, dass der Nutzer immer eine optimale Präsentation der Website erhält.
Responsive Webdesign macht es erforderlich, bereits bei der Konzeption darüber nachzudenken, wie die Website auf den verschiedenen Geräten angezeigt wird, wie der Nutzer dabei geführt wird und auf welche Weise sie bedient wird. Websites früherer Generationen waren für größere Computermonitore gestaltet und boten dem Nutzer eine Menge an Inhalten auf einen Blick. Mobile Endgeräte wie Smartphones oder Tablets stellen andere Anforderungen an das Webdesign. Websites müssen die Darstellung ihrer Inhalte und die Menüsteuerung entsprechend der geringeren Größe ihrer Displays anpassen. Die flexible Anpassung an das Format des jeweiligen Displays nennt man responsive Webdesign.
Auf PC-Monitoren und Notebooks bieten z. B. die Steuerung per Maus oder Trackpad den Vorteil, per „Mouseover“-Effekt Inhalte wie Menüpunkte anzuzeigen, sobald der Cursor darüber liegt. Auf Tablets oder Smartphones ist das nicht möglich. Der Nutzer muss hier einen Menüpunkt oder Link als solchen erkennen und antippen. Dafür bietet der Touchscreen von Smartphones z. B. die Möglichkeit, einen Anrufbutton zu platzieren, einen sogenannten Call-to-action.
Wie funktioniert eine responsive Website?
Das Webdesign früherer Jahre beruhte meist auf einem Raster, das die Breite des Browsers in „Columns“ (Eng.: Säulen) unterteilt. An diesem Raster werden die Elemente (Bilder, Texte, Videos etc.) pixelgenau ausgerichtet und mit festen Größen definiert.
Eine responsive Website hingegen arbeitet mit Verhältnissen. Die Breite eines Bildes wird im responsiven Design durch eine Prozentangabe der Gesamtbreite des Browsers definiert. So bleibt das Verhältnis aller Elemente auf der Website immer gleich und unabhängig von der Bildschirmgröße. Üblicherweise werden zusätzlich zu den Verhältnisregeln auch noch sogenannte Breakpoints definiert. Breakpoints sind die Punkte in der horizontalen Skalierung der Website, ab denen eine Darstellung der Elemente nebeneinander keinen Sinn mehr machen würde. Liegt ein Bildschirm (Tablet oder Smartphone) unter der Breite des definierten Breakpoints, bauen sich die Elemente untereinander neu auf.
Am besten können Sie sich dieses Prinzip verdeutlichen, indem Sie Ihr Browserfenster verkleinern und beobachten, ab welchen Punkten die Elemente dieser Seite sich umstellen. In der Praxis findet eine solche Verkleinerung des Fensters natürlich nicht statt, sie soll vielmehr die unterschiedlichen Bildschirmgrößen versinnbildlichen, mit denen eine Website geöffnet werden kann. Sollten Sie unsere Seite über ein mobiles Gerät besuchen, wechseln Sie einfach zwischen Portrait- und Landscapeansicht Ihres Geräts und Sie werden auch hier die Veränderung im Aufbau feststellen können.
Eine weitere Testmöglichkeit stellt der mobile-friendly Test von Google dar. Geben Sie einfach Ihre Websiteadresse in die entsprechende Zeile ein und Sie bekommen eine erste, unverbindliche Bewertung Ihrer Site von Google.
Eine responsive Website stellt somit sicher, dass die Inhalte Ihres Webangebots immer optimal für das jeweilige Endgerät Ihres potenziellen Kunden dargestellt werden. Aber responsive Websites bieten noch einen weiteren Vorteil:
Responsive Webdesign unterstützt die Suchmaschinenoptimierung
Ein Vorteil von responsive Websites für die Suchmaschinenoptimierung (SEO) liegt darin, dass sich alle Zugriffszahlen auf eine einzige Domain beziehen, sprich eine responsive angelegte Website erhält Zugriffe von mobilen UND herkömmlichen Endgeräten. Ein Plus für das Google-Ranking z. B. im Gegensatz zu Websites, die eine zusätzlich mobile Version einsetzen.
(Einen ausführlichen Beitrag zu SEO finden Sie hier.)
