Handy, Tablet oder PC – womit surfst du?
Wenn du häufig mit dem Smartphone im Web surfst, bist du bestimmt schon des Öfteren auf Homepages gestoßen, deren Schrift und grafische Inhalte kaum zu erkennen waren. Man zoomt hinein und scrollt hin und her, um das zu erkennen, wonach man auf der Seite sucht – und das macht keinen Spaß. Die Ursache dafür ist ganz einfach: Solche Webpages wurden auf klassischem Wege für die Darstellung auf dem Desktop-PC-Monitor layoutet. Diese Darstellung wird in dem Smartphone-Browser deiner Wahl 1 : 1 verkleinert dargestellt. Mit dem Ergebnis: Das Besuchen solcher Homepages mit dem Handy ist frustierend, weil man kaum etwas findet oder erkennt. Die Lösung dieses Problems lautet: Responsive Webdesign. Was das genau ist und wie du mit WordPress responsive Webseiten erstellen kannst, erfährst du in diesem Beitrag.
Was genau bedeutet „Responsive Webdesign“?
In früheren Zeiten hat man für eine optimierte Darstellung von Webseiten auf mobilen Browsern eine zusätzliche, eigenständige Website erstellt. Diese enthielt die selben Inhalte wie die Desktop-Version, nur mit vergrößerten Schriften, angepassten Navigationselementen und Bildmaterial mit geringerer Auflösung. Dieses Verfahren ist jedoch äußerst mühsam, wenn man eine komplette Website an zwei Stellen warten und pflegen muss.
Heutzutage macht man dies mit responsivem Webdesign, bei der es nur noch eine einzige Layout-Version der Website gibt. Hierbei fragen die einzelnen Webseiten mittels spezieller CSS-Techniken den Browsertyp und die darstellbare Pixelanzahl ab („Bist du ein PC- oder ein Handybrowser?“) und bauen – je nach Ergebnis – die Webseite passend und für das jeweilige Display optimiert auf. Dies kommt nicht nur dem Besucher der Website zugute; auch Google honoriert es mit entsprechend höherem Ranking, wenn die Pages auf möglichst vielen Displays gut dargestellt werden können. Nicht umsonst ist ein wesentlicher Leitspruch unter Webdesignern: „Mobile first!“ Dies wird auch bei der Google-Suche deutlich: Mobil darstellbare Seiten sind bei den Suchergebnissen entsprechend gekennzeichnet.
Wie gestaltet man mit WordPress responsive Webseiten?
Mit den Standard-Themes, die mit WordPress mitgeliefert werden, wird dem Wunsch nach responsivem Webdesign bereits recht gut Genüge getan – die Seiten sind auf PC-Monitoren, Tablets und Smartphones gleichermaßen lesbar und ansehnlich. Wie die meisten WordPress User, nutzt du jedoch wahrscheinlich nicht das Standard Layout, sondern ein spezielles Theme, von denen es unzählige auf dem Markt gibt. Hier müsstest du also entsprechend selbst Hand anlegen und das Theme mittels Meta-Tags und CSS-Stylesheets für eine Darstellung auf mobilen Browsern umgestalten, um eine WordPress-responsive Website zu realisieren, falls das Theme nicht bereits auf responsive Darstellung spezialisiert ist. Übrigens: Unser hauseigenes Angebot, das Call A Nerd Theme, ist selbstverständlich responsive.
Um WordPress responsive Fähigkeiten zu verleihen, kann man PlugIns einsetzen, die diese Aufgabe automatisch für dich übernehmen. In meinem Tutorial „WordPress AMP – Accelerated Mobile Pages einfach selbst aktivieren“ erfährst du, wie man mit einem PlugIn namens AMP (Accelerated Mobile Pages) jedes WordPress-Theme fit für mobile Browser bekommt – ganz gleich, ob es bereits von Haus aus responsive Fähigkeiten enthält oder nicht. Das Tool ist unverzichtbar, da es sich nicht nur um das WordPress-responsive-Layout kümmert, sondern auch hervorragend mit Google Analytics zusammenarbeitet. So erfährst du ohne größeren Aufwand, ob deine Website-Besucher vorrangig per PC oder per Smartphone-Browser zu dir kommen. Gleichzeitig optimiert AMP die Ladezeiten, was sowohl deine Besucher freut als auch wiederum von Google honoriert wird.
Kann ich dir weiterhelfen?
Hast du weitere Fragen dazu, wie du WordPress responsive gestalten kannst oder möchtest du, dass ich deine Webseite für dich responsive mache? Dann nimm gerne mit mir Kontakt auf! Gemeinsam besprechen wir dein Anliegen. Eine kostenlose und unverbindliche Aufwandseinschätzung ist selbstverständlich.
