Webdesign für Smartphones – das müssen Sie beachten!

Beim Erstellen einer Website gibt es grundsätzlich drei wichtige Systeme, die beachtet werden müssen. Die meisten Webdesigner denken nur an die Desktopversion, merken dann nach der Erstellung einer schönen Webseite, dass sie nicht für Smartphones und Tablets geeignet ist. Wie funktioniert Webdesign für Smartphones?

Was jetzt? Viele Ihrer Besucher, wenn nicht die meisten sind auf Ihrem Smartphone oder Tablet im Web unterwegs. Es gibt auch die Möglichkeit, eine mobile First ausrichtung zu verfolgen. Die Webseite kann so nicht bleiben, da so wichtige Benutzer und sogar Kunden sich nicht zurechtfinden und möglicherweise direkt abspringen. Das ist ein Desaster im Online-Marketing Bereich.

In diesem Beitrag werde ich Ihnen erklären, wie Sie Ihre Website Responsive machen und was Webdesign für Smartphones beinhaltet. Dabei gehe ich primär auf WordPress Technologien ein. Aber auch auf die klassischen CSS Media Queries.

Auch interessant: Webseite neu gestalten – Tipps und Tricks

1. Was ist Responsive Design?

Der Begriff Responsive Webdesign besagt, dass eine Website oder Design auf alle Bildschirmgrößen reagiert und sich korrekt anpasst. Für eine Desktop-Website gibt es also nicht eine korrekte Mobil-Version. Das Design der Mobil-Version kann stark variieren von Designer zu Designer, wichtig ist aber, dass alles klar erkennbar ist und Sinn ergibt.

In den meisten heute benutzbaren Website Baukasten gibt es die Möglichkeit im Editor in die Mobilansicht zu wechseln und Änderungen in dieser umzusetzen. Hier muss aber beachtet werden, dass vieles nicht nur die mobile Version beeinflusst. Aber Änderungen an den Abständen und in Elementen selber sollten nur in der mobilen Version stattfinden.

Wie funktioniert das? Auch moderne Website Baukasten basieren auf alten HTML5 und CSS3 Technologien. Seit CSS3 gibt es die Möglichkeit via CSS3 Media Queries Änderungen nur für bestimmte Bildschirmgrößen durchzuführen. Hierbei kann aber nur CSS geändert werden, daher die Limitationen. Das gibt Ihnen die Möglichkeit, die Webseite für mobile Endgeräte zu optimieren.

2. Wie funktionieren Media Queries

Media Queries sind CSS Anfragen und beginnen immer mit @media. Nun gibt es einige Möglichkeiten, in diesem Beispiel verwende ich aber only screen and (max-width: 600px). In diesem Beispiel werden alle Bildschirme mit einer Breite von 600 Pixel oder weniger angesprochen.

Jetzt müssen Sie diesen Befehl noch per Schweif Klammer einrahmen. In dieser Klammer können Sie jetzt alle möglichen CSS Befehle ausführen, die nur auf den angesprochenen Bildschirmen ausgeführt werden.

Also so sollte es in der Theorie sein. In Praxis ist es sehr viel probieren, bis es funktioniert, dabei kann es etwas frustrierend werden. Das gehört aber zu der alten HTML und CSS Entwicklung dazu.

Ich denke, die meisten, die diesen Beitrag lesen werden aber Ihre Webseite mit einem Website-Baukasten entworfen haben, deshalb überspringen wir die weitere Ausführung. Wenn Sie mehr zum Thema Media Queries wissen wollen, empfehle ich Ihnen diesen Ratgeber.

Auch interessant: WordPress Onpage SEO – SEO Tutorial

3. Was ist beim Responsive Design zu beachten

Zu aller erst ist es wichtig, dass Links und Rechts ein gewisser Abstand herrscht. Dieser darf aber nicht zu groß sein, da dann der Text zusammengequetscht aussehen kann.

Auch wichtig ist, dass auf der Mobil-Version, Texte und Bilder, die vielleicht auf dem Desktop nebeneinander sind, untereinander aufgelistet sind. Hierbei müssen gegebenenfalls auch Schriftgrößen und Bildgrößen angepasst werden.

Dann sollten Buttons auch etwas von der Größe und Breite angepasst werden. Grundsätzlich ist zu beachten, dass es ein Gleichgewicht zwischen den Größen der Elemente geben muss. Nichts soll zu groß / zu klein sein.

Auch ist zu sagen, dass Elemente, die nebeneinander aufgelistet sind in den meisten Fällen auf der mobil Version, oder sogar der Tablet-Version untereinander aufgelistet werden müssen. Das sollten die grundsätze des Webdesign für Smartphones sein.

Kontaktieren Sie mich gerne bei jeglichen Fragen und Anfragen.

Vielen Dank für Ihre Aufmerksamkeit!