responsive Design für TYPO3-Websites

Was bedeutet „responsive Design“?

Websites mit responsive Design stellen Inhalte für verschiedene Endgeräte (Bsp. Tablets, Smartphones) zur Verfügung. Die Ausgabe reagiert auf unterschiedliche Bildschirmgrößen. Inhalte passen sich unter Beachtung von Design und CI automatisch an. Dabei wird nicht auf spezielle Endgerät-Typen geachtet, sondern darauf, dass die Inhalte dynamisch auf den unterschiedlichen Auflösungen und Bildschirmgrößen optimal dargestellt werden. Die technische Umsetzung erfolgt mit CSS3 und HTML5.

Mobile Inhalte und Navigation

Je weniger Platz auf dem Bildschirm ist, umso mehr muss man darauf achten, welche Inhalte wichtig sind und angezeigt werden sollen.

Die Navigation der Website muss so angepasst werden, dass sie einfach zu bedienen ist. Dabei darf sie weder störend sein, noch Inhalte aus dem sichtbaren Bereich verdrängen.

Kleinere Bildschirmgröße bedeutet auch, dass Texte, Buttons, Links, etc. nicht zu klein sein dürfen und sich die Größen der Elemente dynamisch ändern ("liquid"). User müssen anders als an Notebooks oder Desktop-Rechnern mit der „Touch-Bedienung“ durch die Website navigieren können. Wichtige Elemente werden dann nicht verkleinert, sondern müssen zur besseren Bedienbarkeit sogar größer als auf der Website dargestellt werden.

Performance-Optimierung durch responsive Websites

Für mobile Geräte, die oft mobiles Internet nutzen, sind „schlanke Webseiten“ wichtig, die keine unnötigen Inhalte laden oder viele JavaScript-Elemente enthalten. Durch die Einbindung eines responsive Templates wird unnötiger Traffic-, bzw. Performanceverlust vermieden.

Bilder und Videos werden dynamisch an die Breite des Endgeräts angepasst. Bei responsive / mobilen Webseiten hat sich der Ansatz "Mobile First" bewährt, bei dem als erstes die Mobile Version nur mit den wichtigsten Inhalten erstellt wird. Eine high Performance Lösung stellt unterschiedliche Größen für Bilder oder Videos serverseitig bereit und lädt diese dann dynamisch.

Hier gilt: Weniger kann mehr sein.

Wissenswertes zu responsive Websites

Wussten, Sie schon, dass...

• Google seit 2011 einen mobile-Bot hat, der die mobile / responsive Version einer Webseite besucht und u.a. die Performance für unterschiedliche mobile Endgeräte bewertet? Seit März 2021 verfolgt Google ausschließlich den "Mobile-First"-Index und rankt nur noch Inhalte, die mobil aufrufbar sind. 
• mit immer mehr unterschiedlichen mobilen Endgeräten "responsive" auch wichtig ist für mobile Suche / Suchergebnisse?
• mobile Suche relevant ist für lokale Rankings?
• eine responsive Website somit wichtig für lokale Rankings in den Suchmaschinen (v.a. Google) ist?