Responsives Design - Simple Regeln, wie du deine Webseite mobil machen kannst

Verpasse nicht den Anschluss: Über die Hälfte der Internetnutzer weltweit surft mobil, so lautet das Ergebnis einer aktuellen Studie des Statistik-Portals Statista aus dem Jahr 2021.

Ein Blick auf das eigene mobile Webdesign lohnt sich also, denn ohne eine mobil angepasste Webseite verlierst du in nur wenigen Minuten potenzielle Nutzer. Doch nicht nur das: Eine nicht mobil optimierte Webseite kann auch den Eindruck vermitteln, dass das Unternehmen nicht auf dem neuesten Stand ist und noch Nachholbedarf hat.

Um dieses Risiko zu minimieren, nutzen viele Designer mittlerweile den Mobile-First-Ansatz, bei dem zuerst eine mobile Webseite entworfen und danach für den Desktop optimiert wird. Denn wenn das Design auf dem Smartphone funktioniert, ist es einfacher, es auf größere Geräte zu übertragen. Im Gegensatz dazu kann es schwierig sein, ein aufwändiges Desktop-Design für das Smartphone anzupassen.

Damit deine mobile Webseite optimal funktioniert, haben wir hier einige Tipps für dich:

1. Beachte die gängigen Bildschirmgrößen

Passt du dein Design an solltest du gängige Gerätegrößen beachten. Hierbei geht es immer nur um die breite des Geräts, nicht die Höhe.

• X-Small (Smartphone Portrait): Maximalbreite von 576px
• Small (Smartphone Landscape): Maximalbreite zwischen 576px und 768px
• Medium (Tablet Portrait): Maximalbreite zwischen 768px und 992px
• Large (Tablet Landscape): Maximalbreite zwischen 992px und 1200px
• X-Large (Desktop): Maximalbreite zwischen 1200px und 1400px
• XX-Large (Desktop): Maximalbreite von über 1400px

Viele Content Management Systeme haben dabei noch nachholbedarf. Wenn du die Möglichkeit hast manuelle Änderungen im CSS zu nehmen, dann kannst du das mit dem @media screen-size machen. Definiere dabei die oben benannten Bereiche und mache Anpassungen.

2. Ratio beibehalten

Wichtige Informationen, die auf deinem Desktop auf einen Bildschirm passen, sollten auf dem Smartphone auch auf einen Bildschirm passen. Verringere die Abstände, damit diene Nutzer nicht zu viel Scrollen müssen

3. Schriftgrößen anpassen

Mache nicht den Fehler, deine Headline mit einer gigantischen Schriftgröße zu versehen. Das sieht nicht nur unästhetisch aus, sondern beansprucht auch unnötig viel Platz auf dem ohnehin begrenzten Smartphone-Display. Ich selbst würde bei einer Überschrift die 50px-Marke nicht überschreiten.

Achte zudem darauf, dass die Textgröße in deinem gesamten Design mindestens 16px beträgt. Größere Schriftarten sind nicht nur angenehmer für die Augen, sondern auch eine Wohltat für den Lesefluss. Gönn’ deinen Lesern ein entspanntes Leseerlebnis!

Du kannst dir Webseiten wie typescale.com zu Nutzen machen. Hier werden dir passende Schriftgrößen generiert, die du ganz einfach übernehmen kannst. Die Schriftgrößen werden anhand unterschiedlicher Methoden berechnet wie zum Beispiel dem ,,Golden Ratio”.

4. Navigationsleiste anpassen

Das Zeitalter der Navigationsleiste ist vorbei - das Burgermenü ist der neue Star auf dem Smartphone und Tablet! Nicht nur spart es wertvollen Platz auf dem kleinen Bildschirm, sondern sieht auch noch schick aus. Keine Sorge, wenn du ein gängiges Content Management System wie Wix oder Wordpress nutzt, wird das Burgermenü automatisch eingebunden. Aber wenn du ein wenig mehr Kontrolle über dein Design haben möchtest und wissen willst, wie du das Burgermenü selbst programmieren kannst, dann klicke hier und lasse dich inspirieren!

5. Hover funktioniert nicht

Obwohl Hover-Effekte auf Buttons am Desktop-Computer großartig aussehen können, werden Nutzer auf Smartphones oder Tablets diese Effekte nicht sehen können. Touch-Geräte haben nämlich keine Hover-Funktion. Aber keine Sorge, es gibt andere coole Optionen, die du für mobile Geräte nutzen kannst, wie zum Beispiel das Swipen.

6. Bildgröße anpassen

Verzichte auf winzige Bilder auf dem Smartphone! Stattdessen sollten deine Bilder angenehm groß sein oder durch einen einfachen Klick vergrößert werden können.

7. Elemente strukturieren

Um eine gute mobile Benutzererfahrung zu bieten, ist es wichtig, dass deine Inhalte auf dem Smartphone übersichtlich und gut strukturiert dargestellt werden. Wenn du Text und Bilder kombinierst, ist es eine gute Praxis, diese Elemente auf kleinen Bildschirmen untereinander anzuordnen, um Platz zu sparen und das Lesen zu erleichtern. Du kannst auch verschiedene Anordnungsmöglichkeiten ausprobieren, abhängig von deinem Inhalt und deinem Design.

Zum Beispiel könntest du eine klare Hierarchie schaffen, indem du deine Überschrift zuerst darstellst, gefolgt von deinen Bildern und dann dem Text. Oder du könntest den Text zuerst präsentieren, gefolgt von den Bildern, um eine Geschichte zu erzählen. Probiere verschiedene Optionen aus und finde heraus, was am besten für deine Inhalte funktioniert.

Fazit

Immer mehr Nutzer greifen heute auf das Internet über mobile Geräte zu, deshalb ist mobiles Webdesign unverzichtbar geworden. Doch keine Sorge: Mit ein paar einfachen Tricks und dem mobile-first Ansatz kannst du deine Webseite im Handumdrehen mobil anpassen. Wichtig dabei ist, dass du immer den Nutzer ins Zentrum des Designs stellst und auf eine angenehme Lesbarkeit und Bedienbarkeit achtest. Eine mobile freundliche Webseite kann den Unterschied zwischen Erfolg und Misserfolg ausmachen und hat großen Einfluss auf die Nutzerzufriedenheit. Also, worauf wartest du noch? Mach deine Webseite mobil und begeistere deine Nutzer!