Webdesign

Warum responsives Design Pflicht ist

Verschiedene Bildschirmgrößen

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 Sie eine Website umstellen sollten, hängt vom Leserverhalten und dem Ranking Ihrer Website ab. Wissen Sie, wie hoch der Anteil der Mobile-Besucher auf Ihrer Website/Blog ist? Das finden Sie ganz einfach in Ihrem Tracking-Tool. In Google Analytics ist unter Zielgruppe der Punkt Mobile. Hier wird die Anzahl der Besucher auf Desktop, Mobile und Tablet aufgelistet. 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öchten Sie, dass Ihre Beiträge gelesen werden und der Leser möglichst lange auf Ihrer Website verweilt. Sie müssen dafür sorgen, dass der Leser sich gerne auf Ihrer 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.

Haben Sie 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 sollten Sie Ihre 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%

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.

 

Screenshot für Mobilgeräte nicht geeignet

Eine statische, nicht optimierte Website

„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ählen Sie 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

Stellen Sie sicher, dass Sie immer die neueste WordPress Version installiert haben. Die aktuelle WordPress Version ist 4.2.2.  Sie können übergangsweise ein responsives Design mit einem Plugin erstellen. Empfohlen werden

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.

Fazit

Jeder Besucher Ihrer Website oder Blog hat eine benutzerfreundliche Ansicht der Beiträge verdient. Für gutes Ranking in den Suchmaschinen ist ein responsives Design heute unerlässlich. Langfristig brauchen Sie auf jeden Fall ein responsives Design, es sei denn, Sie hängen aus Nostalgiegründen an einer alten Website fest.

Foto: ©bagiuiani – Fotolia.com
Screenshots: ©Kristina Marino

Kategorie: Webdesign

von

Avatar

Kristina hat mehrere Blogs mit WordPress aufgebaut und viele Erfahrungen als Blogger gesammelt. In diesem Blog gibt sie Tipps für erfolgreiches Bloggen mit WordPress. Hat dir der Beitrag gefallen? Dann verpasse keinen Artikel und abonniere den Newsletter