Warning: A non-numeric value encountered in /kunden/439622_40885/webseiten/internetblog/wordpress/wp-content/plugins/eu-cookie-law/class-frontend.php on line 122

Responsive Webdesign (Teil 1): Was ist eine Responsive Webseite?

Durch meinen Beruf als Webentwickler bekomme merke ich den Trend immer mehr, dass die Kunden immer häufiger Webseiten haben möchten, die auf Mobilgeräten gut aussehen, sogenannte Responsive Webseiten. In dieser Artikelreihe möchte ich darauf eingehen, was genau eine Responsive Webseite ist und wie man eine erstellen kann.

Was ist eine Responsive Webseite?

Eine Webseite, die responsive erstellt wurde, passt sich automatisch der zur Verfügung stehenden Größe des Gerätes an. Bei einem IPhone 5 zum Beispiel steht der Webseite eine Breite von 320px im Hochformat zur Verfügung. Wenn das Handy ins Querformat gedreht wird, dann ist die verfügbare Breite schon bei ca. 520px. Eine schöne Übersicht der verschiedenen Bildschirmauflösungen und Pixeldichen gibt es auf der Seite screensiz.es

Man könnte zwar jetzt sagen, dass man um die Webseite verschiedene Container legen kann, die immer die entsprechende Größe haben, aber es ist nicht ganz so einfach. Da es sehr viele verschiedene Geräte gibt, die verschiedene Auflösungen haben, so müsste man für ca. 800 verschiedene Breiten verschiedene Container definieren.

Ob eine Webseite responsive ist, lässt sich sehr leicht herausfinden. Verkleinert man das Browserfenster und die Webseite passt sich an, dann ist das ein Indiz dafür, dass die Webseite responsive ist. Der einfachste Test ist es, die Webseite in dem Handy aufzurufen. Wenn die Webseite einfach verkleinert wird, dann handelt es sich dabei nicht um eine responive Webseite.

Worauf ist bei einer Optimierten Webseite zu achten?

Um die Webseite auf Mobilen Geräten ebenfalls optimal darstellen zu können, muss man sich zu aller erst Gedanken darüber machen, welche Inhalte überhaupt auf der Seite vorhanden sein sollen. Häufig bekommt man zu hören, dass eine bestimmte Anzahl von Informationen auf der Webseite nicht gut aussehen, ob Sie dann im Handy wegfallen können. Darauf antworte ich gerne: Warum sollte der Nutzer im Browser mehr Informationen bekommen als der Nutzer mit dem Handy.

Ebenfalls sollte man sich Gedanken über die Navigation machen. Viele Webseiten haben zur Zeit ein Top Menü, welches über halb der Seite ist. Dieses Menü umfasst ca. 6 bis 8 Eintrage. Es ist jedoch nicht so einfach, ein großes Menü, welches sich noch aufklappen lässt, auf einem Handy optimal für den Nutzer darzustellen. Deswegen sollte man sich Gedanken über eine nutzerfreundliche Lösung machen.

Ein weiterer Punkt, der noch zu beachten ist, dass der Nutzer nicht mit einer Maus arbeitet, sondern mit seinem Finger die verschiedenen Elemente der Webseite anklicken muss. So sollte man darauf achten, dass bei einer Responsive Webseite die „klickbaren“ Elemente auch entsprechend groß sind. In einigen Guides wird empfohlen, dass diese Bereiche mindestens 44 x 44px groß sein sollten.

Auch sollte man beachten, dass die Grafiken, die geladen werden müssen, zwar für die verschiedenen Displays optimiert sind (viele Handys haben Retina Displays), aber die Dateigröße sollte dabei nicht so groß werden.

Welche Vorteile bietet mir eine mobile optimierte Webseite?

Es gibt eine Menge Vorteile, die nicht zu verachten sind. Zu aller erst gibt es nur eine Seite zu pflegen. Da alle Geräte den gleichen Inhalt vorgesetzt bekommen, müssen Änderungen am Text nur noch an einer Stelle erfolgen. Somit ist der Aufwand der Pflege wesentlich geringer als bei einer reinen Mobilen Seite.

Des Weiteren bekommen alle Geräte die gleiche URL zur Verfügung gestellt, um den Inhalt optimal darzustellen. Das hat aus SEO Sicht den Vorteil, dass der Inhalt nur einmal im Internet existiert und die Suchmaschinen eine Mobile Version nicht als Doppelten Content ansieht. Auch Google selber hat schon gesagt, dass Seiten, die für Mobilgeräte optimiert sind, besser in den Suchmaschinen gelistet sind.

Ebenfalls ist der Vorteil, dass der Nutzer immer die richtigen Inhalte zu sehen bekommt. Wenn es nur eine Mobile Variante gibt, so wird der Nutzer auf die Startseite weiter geleitet, wenn er den Desktop Link mit dem Handy anklickt. Er wird dann sehr schnell unzufrieden sein und die Webseite dann auch wieder verlassen. Die sogenannte Absprungrate (Personen, die die Seite sofort wieder verlassen, ohne eine Aktion auszuführen) ist ein Signal an Google. Wenn sie zu hoch ist, dann wird die Seite weniger angezeigt.

Benötigt man immer eine Optimierte Webseite?

Die Antwort ist ja und nein. Eine Optimierte Webseite sollte immer für diese Art von Geräten zur Verfügung stehen, schon alleine deswegen, da es auf Tabelts und Handys keinen Overeffekt gibt. Jedoch sollte man sich Gedanken darüber machen, ob der Nutzer unterwegs nicht andere Inhalte braucht, als der Nutzer zu Hause im Desktop. So hat zum Beispiel die Deutsche Bahn wesentlich andere Informationen für Handynutzer als der Desktopnutzer. Wichtig ist, zu identifizieren, was die Nutzer erwarten, wenn Sie mit einem Mobil Gerät auf die Seite kommen.

Man muss sich auch im klaren darüber sein, dass die Nutzung eines Mobilgerätes nicht immer darauf schließen lässt, dass die Personen unterwegs sind. Viele Leute gehen heutzutage hin und surfen im Internet, während sie zu Hause auf der Couch liegen.

 

 


Warning: count(): Parameter must be an array or an object that implements Countable in /kunden/439622_40885/webseiten/internetblog/wordpress/wp-includes/class-wp-comment-query.php on line 399

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Mit der Nutzung dieser Webseite stimmen Sie zu, dass die Webseite Cookies nutzt. Mehr Informationen

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close