Immer mehr Kunden tätigen ihre Käufe im Internet über mobile Endgeräte wie das Smartphone statt über einen PC oder Laptop. Somit sind Unternehmen gefordert, ihre Websites an die Kundenbedürfnisse anzupassen.
Als Zwischenschritt setzten viele Unternehmen bei ihrem Webauftritt auf eine Desktopversion und eine mobile Version. Dieser Ansatz ist inzwischen veraltet – und auch sehr aufwendig. Die neue Lösung lautet: Responsive Design.
Mit diesem kleinen Leitfaden zeigen wir Ihnen, worauf es bei der Konzeption und Webentwicklung mit responsivem Design – insbesondere auch beim Content-Management-System WordPress – ankommt.
Warum ist Responsive Design so wichtig?
Responsive Design ist für moderne Websites ein Muss. Neben dem Aspekt der Kundenzufriedenheit gibt es hierbei noch einen weiteren wichtigen Faktor zu beachten: Suchmaschinen wie Google. Diese bewerten das Ranking einer Homepage nämlich nicht mehr nur anhand von Faktoren wie:
- wertvollen, einzigartigen Inhalten – sogenanntem Unique Content
- suchmaschinenoptimierten Texten mit entsprechenden Keywords
- einer guten Performance (Leistung) der Internetseite – also geringen Ladezeiten.
Ob eine Website über responsives Design mit dynamischen Inhalten verfügt, entscheidet auch darüber, ob Ihre Homepage bei Suchmaschinen wie Google gut rankt – oder aber gegenüber Wettbewerbern benachteiligt wird (durch die sogenannte Mobile-First-Indexierung).
Insgesamt bietet Ihnen Responsive Webdesign folgende Vorteile:
- Es unterstützt die Kundenzufriedenheit und Kundenbindung durch ein hohes Level an Komfort.
- Es macht Ihr Unternehmen wettbewerbsfähig.
- Es richtet Ihre Unternehmensseite zukunftsorientiert aus.
- Es ermöglicht Ihnen ein besseres Ranking bei Suchmaschinen wie Google.
Responsive Webdesign – die Hintergründe
Mobile Endgeräte wie Smartphones und Tablets unterscheiden sich maßgeblich von Laptops oder PCs hinsichtlich Faktoren wie:
- der Bildschirmgröße
- der vorhandenen Formate – bei den mobilen Geräten gibt es das Hoch- und Querformat.
- der Bedienbarkeit: Während PCs und Laptops via Tastatur und Maus bedient werden können, gibt es bei mobilen Endgeräten dafür den Touchscreen.
- den unterschiedlichen Bildschirmauflösungen – hier existieren insgesamt mehrere Hundert verschiedene.
Responsive Design ermöglicht es, dass Ihre Website den Nutzern auf allen Endgeräten – ob desktopbasiert oder mobil – optimal angezeigt wird. Statt pixelbasiert werden Inhalte und Bilder sowie weitere Elemente der Unternehmensseite über ein flexibles Raster mittels Prozentwerten perfekt an den jeweiligen Bildschirm angepasst.
Responsive Webdesign mit WordPress
Das meistgenutzte Content Management System (CMS) ist WordPress. Bei diesem gibt es für das responsive Design einige Besonderheiten zu beachten.
Für die Implementierung eines responsiven Designs auf WordPress bedarf es eines gewissen Know-hows. Hier werden das Logo und weitere Bilder sowie Header, Footer und Inhalte wie Texte mit Hilfe entsprechender Themes angepasst. Anschließend gleicht sich das neue, responsive Design ausgezeichnet an die verschiedenen Display-Größen der unterschiedlichen Endgeräte an.
Auf WordPress basierende Internetseiten können auch mit Hilfe von Plugins für mobile Endgeräte wie Smartphones optimiert werden – allerdings kann hier nur zwischen der Mobilversion und einer Desktopversion unterschieden werden. Der Aufwand hierfür ist zwar deutlich geringer als die Optimierung mit Hilfe von Themes, allerdings ist die Seite dann auch nicht für alle Bildschirmgrößen optimiert – und somit nicht wirklich responsiv. Zudem ist die Performance der Seite bei diesem Ansatz deutlich schlechter – was sich wiederum auf das Ranking bei Suchmaschinen auswirken kann. Bei der Optimierung der Performance beziehungsweise der Ladezeiten kann es sich zudem auch lohnen, einen Blick auf das Hosting der Unternehmensseite zu werfen, da dieses die Ladezeiten mitbeeinträchtigen kann.
Um Ihre WordPress-Seite responsiv zu machen, bedarf es folgender Schritte:
- Responsive Breakpoints setzen
- Erstellung eines CSS-Rasterlayouts beziehungsweise Layout-Elemente mittels entsprechenden Prozentwerten vergrößern
- Implementierung responsiver Bilder
- Etablierung responsiver Texte
- Responsivität testen
Mit Hilfe entsprechender Tutorials bekommen Sie einen guten ersten Überblick zum Thema Responsive Design. Wer gleich Unterstützung durch eine erfahrene Digital Marketing Agentur in diesem Bereich wünscht, ist bei der SIA Media AG genau richtig. Wir wissen, worauf es beim Responsive Webdesign mit einem CMS wie WordPress ankommt – und begleiten Sie kompetent und zuverlässig.
