Ein responsives Design für Mobilgeräte ist für eine moderne Website unverzichtbar. Denn damit wird das Design automatisch für jedes Display und Gerät (Smartphone, Tablet, Computer) angepasst, mit dem ein Besucher die Website anzeigt. Laut Statista stammen heutzutage 52 Prozent des gesamten Web-Traffics von Mobilgeräten. Dieser Anteil steigt jedes Jahr. Dies ist eine der wichtigsten Statistiken, die du als Website-Betreiber berücksichtigen solltest.
Ist deine Website nicht „mobilfreundlich“, werden dich viele nicht finden und deine Online-Präsenz nicht besuchen können. Dadurch entgehen dir neue Kunden – Stichwort „Konversionen“. Manche werden deine Website vielleicht künftig ganz meiden. Ohne ein responsives Design riskierst du also, Kunden und Besucher zu verlieren. Mit beliebten Plattformen wie WordPress.com kannst du leicht ein responsives Design realisieren. Denn alle WordPress.com-Themes sind bereits mobilfreundlich (sogar die kostenlosen).
Mit diesen vier Schritten gestaltest du deine Website responsiv, damit sie auch auf Mobilgeräten gut aussieht.
1. Dateien komprimieren
CSS-, HTML- und JavaScript-Dateien werden bei deiner WordPress.com-Website automatisch komprimiert. Willst du die Dateien lieber selbst komprimieren, versuch es mit einem maßgeschneiderten Design.
Auch bei der Komprimierung von Bildern bieten WordPress.com-Websites große Vorteile. Sie verwenden automatisch Photon, um die Bildgröße zu komprimieren und dienen zugleich als Netzwerk für die Content-Auslieferung (CDN). Wo auch immer die Besucher deiner Website herkommen: Deine Bilder werden automatisch komprimiert und von einem Server in der Nähe auf ihrem Computer bereitgestellt.
3. Einfachere Navigation
Ganz gleich, ob sich dein Navigationsmenü auf einem Mobilgerät als Icon minimieren lässt oder sich quer über den Bildschirm erstreckt – Einfachheit steht an erster Stelle.
Zu viele Navigationseinträge oder Untermenüs können überwältigend sein und auf Mobilgeräten zu Problemen führen.
4. Mobilfreundliche Texte
Die Besucher deiner Website lassen sich in drei Kategorien unterteilen: Querleser, Aufmerksame und eine Mischung aus beidem. Querleser werden eine Seite schnell überfliegen, während Aufmerksame jedes Wort lesen und sich genau mit dem Inhalt beschäftigen. Beim dritten Typ – der Mischung aus beiden Kategorien – steht immer auf der Kippe, ob der Querleser oder der aufmerksame Teil gewinnt. Und das hängt davon ab, ob deine Website ihr Interesse weckt und der Inhalt es aufrechterhalten kann.
Teile deines responsiven Designs für Mobilgeräte sollten sich an alle drei Typen richten. E-Write empfiehlt hierfür die „Bite-Snack-Meal“-Methode – zu Deutsch: von der Kostprobe zum Snack bis zur kompletten Mahlzeit. Die Überschriften deiner Seiten oder Blogbeiträge sind die „Kostprobe“. Sie geben den Besuchern einen Vorgeschmack darauf, was sie erwartet (z. B. „Wie unsere Dienstleistungen Ihre Kosten senken“). Der „Snack“ ist eine Zusammenfassung und/oder ein Fazit mit allen wichtigen Informationen. Die „Mahlzeit“ bietet dagegen genauere Erklärungen, um Informationslücken zu schließen.
Wenn du diese Tipps befolgst, bist du auf dem besten Weg zu einem mobilfreundlicheren Webdesign für deine Website.