Neulich war ich unterwegs zu einem Termin und war viel zu früh da. Prima, dachte ich, dann kann ich noch ein paar neue Blogartikel lesen. Auf meinem Smartphone habe ich die App für Feedly und somit den neuesten Lesestoff vorsortiert. Einen Artikel wollte ich unbedingt gleich lesen. Was ist denn, das? Normalerweise brauche ich keine Lesebrille, jetzt hätte ich eine Lupe brauchen können. Also reinzoomen und scrollen. Anscheinend fehlt mir die Übung. Ich gab entnervt auf und nahm mir den nächsten Artikel vor.
Normalerweise lese ich Blogartikel auf dem Desktop und so ist es mir vorher nicht aufgefallen. Damit gehöre ich zur Minderheit, die breite Masse der Blogleser liest zunehmend am Smartphone und Tablet. Immer mehr Nutzer gehen ins Internet und holen sich die gewünschten Informationen, während sie unterwegs sind. Websitesbetreiber, die keine mobile freundliche Version ihrer Website haben, werden es zukünftig schwerer haben. Google hat den Trend erkannt und dementsprechend seinen Algorithmus geändert.
Für die Umsetzung einer mobile freundlichen Version gibt es grundsätzlich zwei verschiedene Vorgehensweisen. So kann eine zweite Website erstellt werden, die für Smartphones optimiert ist und angezeigt wird. Das Problem bei dieser Lösung ist, dass es keine einheitliche Displaygröße bei Smartphones gibt. Die Tabletleser gehen bei dieser Lösung leer aus.
Die Alternative ist, die Website in einem responsiven Design zu erstellen.
Was ist eigentlich ein responsives Design?
Die Definition ist einfach. Responsives Design ist die Fähigkeit einer Website, sich an die verschiedenen Endgeräte anzupassen, um eine optimale Darstellung der Websites zu erhalten, ohne Zoom und Scrollen nach rechts. Die Umsetzung des Layouts dagegen ist schon schwieriger, denn die Displays der Endgeräte reichen von klein (Smartphone) über mittelgroß (Tablets) bis zu Widescreen-Monitoren der Desktop-PC’s.
Das Layout muss sich den verschiedenen Größen anpassen. Das Problem dabei ist, dass es keine Einheitsgrößen für Smartphones, Tablets und Monitore gibt. Wie werden die Größen bei responsivem Design festgelegt?
- Smartphones ab 320 bis 480 Pixel
- Tablets ab 768 Pixel
- Desktop ab 1024 Pixel
Warum responsives Design Pflicht ist
Der Anteil der Leser an mobilen Geräten wird im Allgemeinen unterschätzt. Es gibt zwei wichtige Gründe für ein responsives Design:
- Die Nutzer der Website
- Gutes Ranking in den Suchmaschinen
Tatsache ist, dass zunehmend immer mehr Leser über mobile Geräte ins Internet gehen. Schnell unterwegs über Smartphone oder bequem auf dem Sofa auf dem Tablet. Weitere Tatsache ist, dass Desktop-PC’s von Notebooks und mobilen Geräten verdrängt werden.
Wie schnell du eine Website umstellen solltest, hängt vom Leserverhalten und dem Ranking deiner Website ab. Weißt du, wie hoch der Anteil der Mobile-Besucher auf deiner Website/Blog ist? Das findest du ganz einfach in der Google Search Console oder in deinem Tracking-Tool. Hier wird die Anzahl der Besucher auf den verschiedenen Geräten angezeigt, also Desktop, Mobile und Tablet. Die Anteile an den verschiedenen Technologien sind vom Thema der Website abhängig. Es gibt Themen, die lieber auf dem Desktop gelesen werden und Themen, die Leser vorzugsweise an mobilen Geräten lesen.
Als Betreiber einer Website/Blogs möchtest, dass deine Beiträge gelesen werden und der Leser möglichst lange auf deiner Website verweilt. Du musst dafür sorgen, dass der Leser sich gerne auf deiner Website aufhält. Wenn jedoch die Schrift zu klein ist, die Links und Buttons nicht angeklickt werden können, da sie zu nah beieinanderliegen oder der Leser hektisch scrollen muss, um die gewünschte Information zu finden, wird er fluchtartig die Seite verlassen und nicht wiederkommen. Unübersichtliche Websites/Blogs sind nicht leserfreundlich.
Hast du schon von „Mobilegeddon“ gehört? Nein, das ist kein neuer Fantasyfilm. Unter diesem Namen wurde am 21.04.2015 der neue Algorithmus bei Google gestartet. Um was ging es?
Google möchte den neuen Technologien, sprich mobilen Geräten, wie Smartphone und Tablet, Rechnung tragen, und straft alle Websites ab, die nicht mobile tauglich sind. Bereits im März verschickte Google E-Mails an die Webmaster der betroffenen Websites. Der Text: „Beheben Sie Probleme der mobilen Nutzerfreundlichkeit auf https://www.domain.de. „, incl. Tipps, wie diese zu beheben seien.
Tatsache ist, dass die für mobile Geräte nicht optimierten Websites im Ranking gefallen sind. Spätestens jetzt solltest du deine Webseite auf responsives Design umstellen. Google ist, trotz aller Diskussionen, immer noch die Nummer 1 der Suchmaschinen in Deutschland.
Beispiele responsives Design
Am Beispiel meines Blogs sieht man, dass das Layout sich der Displaygröße anpasst und durchaus anders aussieht, als auf dem Desktop.
Leserverhalten auf meinen Blogs
Die bereits angesprochene Themenabhängigkeit merke ich auch bei meinen Webauftritten. Ich betreibe meine Blogs mit WordPress und habe von Anfang an responsive Themes verwendet. Die Zahlen sind nicht repräsentativ, zeigen aber das Leseverhalten ganz deutlich.
| Name | Blog | Mobile Anteil |
|---|---|---|
| Bloggen mit Konzept | WordPress, Bloggen, Online Marketing | 12% |
| Pasta selber machen | Foodblog | 61% |
| BuchNotizen | Bücherblog | 12% |
| NotizBlog | „Bauchladen“ gemischter Blog | 23% |
So hat sich das Leseverhalten in den letzten Jahren verändert. Es ist deutlich zu sehen, dass es auch vom Thema des Blogs abhängt, wie gelesen wird.
| Name | Blog | Mobile Anteil |
|---|---|---|
| Bloggen mit Konzept | WordPress, Bloggen, Online Marketing | 15% |
| Pasta selber machen | Foodblog | 75% |
| BuchNotizen | Bücherblog | 65% |
| NotizBlog | „Bauchladen“ gemischter Blog | 55% |
Nicht für Mobilgeräte optimiert
Wie stelle ich nun fest, ob meine Website für Mobilgeräte optimiert ist? Google stellt schon seit längerer Zeit dazu ein Tool zur Verfügung: Test auf Optimierung für Mobilgeräte. Mit diesem Tool analysiert Google die Website und zeigt an, wie er sie sieht. Dazu gibt es gratis Optimierungstipps.
„Nicht für Mobilgeräte optimiert“ lautet das von mir erwartete Ergebnis des Tests. Das Beispiel zeigt eine statische Website, die ich noch nicht für Mobilgeräte optimiert habe.
Die Benutzerfreundlichkeit einer Website auf mobilen Geräten lässt sich jedoch am besten direkt auf verschiedenen Smartphones und Tablets im Bekannten- oder Kollegenkreis testen.
Wie mache ich eine Website/Blog mobile freundlich?
Am einfachsten gelingt die Umstellung mit einem CMS (Content Mangement System). Für jedes CMS werden Layouts angeboten. Bei WordPress heißen sie Themes, bei anderen Templates etc. Im Prinzip wählst du ein neues responsives Design aus.
Schwieriger und aufwendiger ist die Optimierung einer Website ohne CMS. Die wichtigste Frage lautet also: „Wie alt ist die Website?“ Ist die Website älter als 4-5 Jahre, sind das Design und die technische Umsetzung in der Regel veraltet. Je nach Alter der Website ist es meist kostengünstiger eine neue responsive Website zu erstellen, als die bestehende Website zu optimieren. Die Erstellung einer zweiten, mobilen Version kann auf Dauer nur eine Zwischenlösung sein.
WordPress für Mobilgeräte optimieren
Stelle sicher, dass du immer die neueste WordPress Version installiert hast. Die aktuelle WordPress-Version ist 4.2.2. Du kannst übergangsweise ein responsives Design mit einem Plugin erstellen. Empfohlen werden
- WPtouch Mobile Plugin
- Jetpack von WordPress.com für Blogs gehostet bei WordPress.com
- Mobile Theme des Jetpack für selbst gehostetes WordPress Blogs
Ich habe die Plugins nicht getestet, da alle meine Blogs ein responsives Theme haben. Ich würde die Plugins jedoch nur als Notlösung betrachten, bis ein geeignetes responsives Theme gefunden ist.
Auf jeden Fall sollte das neue Theme auf verschiedenen Mobilgeräten getestet werden.
Update März 2021
Die aktuelle WordPress-Version ist 5.6.2. Inzwischen ist responsives Design Standard. Neue Themes von seriösen Anbietern, egal ob kostenlos oder Premium, sollten alle ein responsives Design haben. Die meisten Blogs werden heute über mobile Geräte gelesen.
Fazit
Jeder Besucher deiner Website oder Blogs hat eine benutzerfreundliche Ansicht der Beiträge verdient. Für gutes Ranking in den Suchmaschinen ist ein responsives Design heute unerlässlich. Langfristig brauchst du auf jeden Fall ein responsives Design, es sei denn, du hängst aus Nostalgiegründen an einer alten Website fest.
Foto: ©bagiuiani – Fotolia.com
Screenshots: ©Kristina Marino
