Alles Wissenswerte über

Responsive Design

zurück zum Blog-Lexikon

1. Was bedeutet Responsive Design?

Schau dir ein und denselben Blog an: zuerst auf dem Smartphone, dann auf dem Laptop. Dir wird auffallen, dass sich in den meisten Fällen Design und Struktur der Seite verändern: 

Das Menü sieht anders aus, Bildergrößen und Schriften passen sich an ... Was du hier siehst, ist das Responsive Design, oder eben responsives Design.

Es bedeutet ganz einfach, dass sich der Aufbau einer Internetseite an das Gerät anpasst, mit dem der Seitenbesucher gerade surft. 

Damit wird auch der Fachbegriff Responsive Design deutlich: die Seite antwortet (engl.: respond – antworten) auf das entsprechende Gerät.

Auf dem folgenden Bild siehst du, wie mein Blog Ferndurst auf unterschiedlichen Endgeräten dargestellt wird und sich an den jeweiligen Bildschirm anpasst:

responsive design mehrere geräte beispiel ferndurst

Die Darstellung habe ich übrigens mit dem Multi Device Website Mockup Generator von Techsini erstellt.

2. Brauchst du ein Responsive Design für deinen Blog?

Wenn du mit deinem Tablet oder Smartphone mal auf einer Seite gesurft bist, die nicht responsiv angelegt ist, beantwortet sich die Frage von selbst – Ja! Die Schrift ist zu klein, Buttons sind nicht klickbar und Zeilen laufen über den Bildschirmrand „hinaus“, anstatt an ihm zu brechen.

Seitenbesuchern einen Blog ohne responsives Design anzubieten, hat viele Nachteile– auf lange Sicht wirst du wahrscheinlich sogar Besucher verlieren, die vom umständlichen Handling genervt sind. 

Mit responsivem Design erhöhst du also die Nutzerfreundlichkeit deiner Webseite und ermöglichst den Besuchern, deine Inhalte mit jedem möglichen Gerät anzuschauen.

Neben der Nutzerfreundlichkeit verbessert Responsive Design auch dein Suchmaschinenranking: Da Suchmaschinen wie Google wissen, mit welchem Gerät gerade gesurft wird, bieten sie als Ergebnis automatisch die Seiten an, die den Präferenzen des Gerätes entsprechen. Sucht jemand also mit dem Handy nach Inhalten deiner Seite auf Google, kann es sein, dass sie sehr viel später „geranked“ wird, wenn sie nicht responsiv ist. Mit Responsive Design kann du also dein Ranking verbessern und bekommst mehr Leser- ein wichtiges Argument in punkto Suchmaschinenoptimierung (SEO)!

In Deutschland werden bereits etwa 1/3 der Online-Käufe über mobile Geräte abgewickelt – in anderen Ländern wie Japan ist dieser Wert doppelt so hoch. Das zeigt, wie relevant die mobile Nutzung ist.

Du solltest also darauf achten, möglichst ein Blog-Design bzw. Gerüst (Theme) auszuwählen, das responsive ist. 

3. Wie nutze ich Responsive Design in WordPress?

Ob dein Blog responsiv ist oder nicht, entscheidet sich also mit dem Theme, das du installierst. Mittlerweile sind fast alle Themes, die für WordPress entwickelt werden, responsiv angelegt.

Wenn du sehen möchtest, wie dein persönlicher Blog auf verschiedenen Geräten aussehen würde und ob das Responsive Design tatsächlich funktioniert, gibt es drei simple Möglichkeiten:

  • Geräte imitieren: Verkleinere einfach dein Browserfenster auf die Größe eines Tablet- oder Smartphone-Bildschirms. Damit imitierst du zwar nur ein anderes Gerät – der Effekt ist jedoch der selbe: Menüs, Blogelemente und Widgets werden sich verschieben.
  • Ein Browser-Plugin installieren: z. B. Responsive Web Design Tester (wobei wir aus Sicherheitsgründen immer empfehlen, nur wichtigste Plugins zu installieren)
  • Integrierte Einstellung: WordPress bietet mit den meisten Themes eine integrierte Möglichkeit an, die unterschiedlichen Gerätegrößen zu imitieren. Gehe dazu auf den Theme-Customizer in deiner WordPress-Benutzeroberfläche ("Design > Customizer"). Links unten siehst du drei kleine Symbole, mit denen du die verschiedenen Endgeräte simulieren kannst: Smartphone, Tablet, PC:
responsive ansicht im wordpress customizer

Wenn du neue Widgets hinzufügst oder dein Bloglayout überarbeitest, solltest du den kurzen Test machen: „Läuft“ die Seite auf allen Bildschirmgrößen?

Manchmal kann es zu Fehlern in der Darstellung kommen – dann können dir diese Fragen weiterhelfen:

  • Gibt es Widgets, die die Darstellung „zerstören“? Dann könntest du diese herausnehmen oder woanders platzieren.
  • Sind im Header oder Footer Logos oder Bilder eingebunden, die nun verzerrt oder gar nicht mehr angezeigt werden? Dann könntest du diese entweder herausnehmen oder an das Gerät anpassen, mit dem deine Seite am besten dargestellt werden soll.
  • Gibt es Slideshows oder Parallax Scrolling Elemente, die eine lange Ladezeit haben? Dann könntest du die Größe der eingebundenen Medien überprüfen. Besonders in der mobilen Ansicht kann es zu langen Ladezeiten kommen, wenn Bilder zu groß sind – dadurch baut sich das Layout deines Blogs spät richtig auf.

Und sonst: probieren, probieren, probieren! Die Vorteile des Responsive Design sind so groß, dass es sich lohnt, hier etwas Zeit zu investieren.

Bock auf einen eigenen blog?

Dann starte mit unserem kostenlosen Online-Schnupperkurs "Blogger werden" in dein Blog-Abenteuer:

Sina - Autorin bei Ferndurst, Soulflake und Blog Wings

Autorin

SINA WENDT

Co-Founder bei Blog Wings und Gründerin des Reiseblogs Ferndurst - einem der am meisten geklickten Reiseblogs Deutschlands. Seit neustem bloggt sie auch auf Soulflake über die Freiheit, wir selbst zu sein. 

>