Online-Marketing-Blog Heroshot

Mobilfreundliche Websites – Eine Einführung (Teil 2)

Schlauen Sie sich auf

Mobilfreundliche Websites – Eine Einführung (Teil 2) Mobilfreundliche Websites – Eine Einführung (Teil 2) - Mobile
26.02.2016

Mobilfreundliche Websites – Eine Einführung (Teil 2)

Im ersten Teil dieses Blogartikels haben Sie gelesen, warum eine Website heute auch auf mobilen Endgeräten wie Smartphones oder Tablets gut aussehen muss, warum Sie also Ihre Website für mobile Endgeräte optimieren sollten. Denn wenn Sie Ihre Website nicht für die Darstellung auf mobilen Endgeräten optimieren, dann kann das über kurz oder lang der Tod Ihrer Website sein. Gerade Suchmaschinen haben zunehmend hohe Erwartungen was die Unterstützung mobiler Endgeräte anbelangt. Google beispielsweise berücksichtigt seit April 2015 für mobile Endgeräte optimierte Websites stärker bei der Berechnung von Suchmaschinenergebnissen. Das heißt: Ist Ihre Website nicht für mobile Endgeräte optimiert, werden Ihre Chancen schlechter, in Suchmaschinen gefunden zu werden. Zumindest wenn Nutzer mobile Endgeräte nutzen.

Reaktionsfähige Websites

Aufbauend auf dem gerade Gesagten haben Sie nun entweder ein Problem oder eine Herausforderung. Ein Problem haben Sie dann, wenn Ihre vorhandene Website nicht für mobile Endgeräte optimiert ist – und auch nicht optimiert werden kann. Eine neue Herausforderung haben Sie, wenn Sie eine neue Website planen und diese dann für mobile Endgeräte optimiert sein muss. Das, was Sie im Umkehrschluss brauchen, sind also Ansätze, um Ihre Website für mobile Endgeräten zu optimieren. Gleichzeitig soll Ihre Website aber auch weiterhin auf normalen PCs oder Notebook schick aussehen. Sie müssen also zwei Fliegen mit einer Klappe schlagen.

Abbildung 1: Flexibles Layout bei reaktionsfähigem Webdesign (angelehnt an: A. Ertel, K. Laborenz – Responsive Webdesign: Anpassungsfähige Websites programmieren und gestalten, S.31, Galileo Computing, 2014).

Der derzeit am weitesten verbreitete Ansatz der Ihnen dies erlaubt, ist das so genannte „Responsive Webdesign“, die Erstellung reaktionsfähiger Websites. Responsive Webdesign bedeutet, dass das Layout einer Website variiert – und zwar abhängig von der Bildschirmauflösung des Endgerätes, das benutzt wird, um die Website anzuzeigen. Die Bildschirmauflösung beschreibt, wie viele Bildpunkte (englisch: pixel) pro Zeile in wie vielen Zeilen ein Bildschirm anzeigen kann. Eine Bildschirmauflösung von 1024 x 768 Pixeln bedeutet, dass auf einem Bildschirm 1024 Bildpunkte pro Zeile in insgesamt 768 Zeilen angezeigt werden. Je mehr Bildpunkte desto mehr Platz steht zur Verfügung. Verwechseln Sie die Bildschirmauflösung bitte nicht mit der tatsächlichen Größe eines Bildschirms. So hat ein iPad mit einem hochauflösenden Retina-Display, obwohl es absolut gesehen einen kleineren Bildschirm besitzt als ein älterer Flachbildschirm, eine höhere Bildschirmauflösung und damit mehr Platz zur Darstellung einer Website.

Beim reaktionsfähigen Webdesign wird das Layout einer Website – bestehend aus Header, Navigationsstrukturen (also Menüs), Inhaltsbereichen (mitsamt den enthaltenen Texten und Bildern) und Footer – an die Bildschirmauflösung des aktuell genutzten Endgerätes respektive Bildschirms angepasst. Werfen Sie hierzu einen Blick auf Abbildung 1. Bei einer Bildschirmbreite von 800 Pixeln oder weniger wird das Layout ganz links mit zwei horizontalen Bereichen, einer Navigationsstruktur und einem Inhaltsbereich und zwei zusätzlichen Spalten gewählt bzw. verwendet (vgl. Abbildung 1). Bei einer Bildschirmbreite zwischen 800 und 1024 Pixeln wird eines der beiden mittleren Layouts verwendet (vgl. Abbildung 1) – wobei die Grenze für den Übergang zwischen den beiden Layoutvarianten beliebig gewählt werden kann. Bei einer Bildschirmbreite von 1280 Pixeln (oder mehr) wird das Layout ganz rechts gewählt (vgl. Abbildung 1). Wie Sie sehen, verschwimmt auch die Bedeutung einzelner Bereiche einer Website. Denken Sie einfach an voneinander unabhängige Bausteine, die beliebig miteinander kombiniert werden können.

Wie funktioniert Reaktionsfähigkeit?

Eine reaktionsfähige Website passt sich somit immer automatisch an die Bildschirmauflösung (eigentlich: die Bildschirmbreite) desjenigen Gerätes an, mit dem diese gerade aufgerufen und betrachtet wird. Man könnte auch sagen: Das Design der Website reagiert auf das Gerät, mit dem sie aufgerufen wird. Technisch gesehen ist das allerdings nicht ganz so einfach. Wie erfolgt die Anpassung des Erscheinungsbildes und der Bedienung einer Website an das jeweilige Endgerät?

Das endgültige Erscheinungsbild einer aufgerufenen Website wird beim Responsive Design nicht statisch von vorneherein festgelegt und definiert. Stattdessen wird erst beim Aufruf einer Website anhand des von einem Besucher verwendeten Endgerätes das finale Layout festgelegt. Konkret kommen so genannte „Medienabfragen“ (englisch: Media Queries) zum Einsatz.

Beim Aufruf einer Website bestimmt eine Medienabfrage anhand einer Liste von Kriterien dasjenige Endgerät, mit dem die Website aufgerufen wird. Beispiele verwendeter Kriterien sind die Bildschirmgröße, die Bildschirmauflösung, unterstützte Betrachtungswinkel (Querformat, Hochformat) und auch Eingabemöglichkeiten (Maus, Tastatur, Sprache, Finger). Abhängig vom Endgerät werden dann Entscheidungen getroffen. Ein Layout wird ausgewählt, die Schriftgröße wird gesetzt und die Navigationselemente, Texte und Bilder werden neu angeordnet.

Zur Umsetzung reaktionsfähiger Websites

Sie müssen auf jeden Fall berücksichtigen, dass die Unterstützung mobiler Endgeräte ein sehr technisches Thema ist. Dementsprechend kommen Sie nicht drum herum, insbesondere wenn Sie Ihre Website selbst erstellen, sich zwingend mit der Programmierung Ihrer Website auseinanderzusetzen. Die gute Nachricht aber an dieser Stelle ist, dass es technische Lösungen gibt, die Ihnen viel Arbeit abnehmen. Für eine umfassende Diskussion der Programmierung reaktionsfähiger Websites sei auf die umfangreiche Fachliteratur verwiesen.

Weitere Informationen

Viele weitere Informationen dazu, wie Sie Ihren Webauftritt zu einem erfolgreichen Webauftritt machen, können Sie in unserem im Rheinwerk Verlag erschienenen Buch „Der erfolgreiche Webauftritt – Kunden gewinnen und binden“ nachlesen. Das Buch kann direkt beim Rheinwerk-Verlag als E-Book und als Buch (359 Seiten, broschiert) einfach und bequem bestellt werden. Natürlich können Sie das Buch auch bei Amazon und in anderen Onlineshops bestellen. Viele weitere Informationen rund um das Thema Online-Marketing gibt es schon jetzt hier im Blog.