Darstellung der Website auf Handy & Tablet prĂŒfen

Darstellung auf Handy & Tablet

Responsive Design

Bei der Erstellung der eigenen Website sollte darauf geachtet werden, dass die Website nicht nur auf dem Laptop oder PC gut aussieht, sondern auch auf mobilen EndgerÀte, wie Handy und Tablet, etwas hermacht.

Deshalb möchte ich zwei Möglichkeiten aufzeigen, wie ihr die Darstellung auf verschiedenen EndgerĂ€ten schnell und einfach prĂŒfen könnt. Beide Tool sind kostenlos und online nutzbar – es mĂŒssen also keine Programme installiert werden.

Der Vorteil ist, dass man durch die virtuelle „GerĂ€tesimulation“ nicht jedes GerĂ€t selbst besitzen muss, sondern schnell prĂŒfen kann, wie die eigene Website bspw. auf dem neuesten iPhone oder einem alten Samsung aussieht.

Darstellung via Chrome-Browser prĂŒfen

Wenn du den Chrome-Browser nutzt, kannst du am PC mit zwei Klicks die Darstellung auf verschiedenen Handy- und Tablettypen prĂŒfen.

Klicke auf der Tastatur auf die F12-Taste – es öffnen sich die Entwicklertool.

Nun einfach noch auf das „Responsive“-Symbol klicken:

Und schon stehen dir diverse Beispiel-GerĂ€te zur VerfĂŒgung. Sollten diese nicht ausreichen, kannst du auch selbst eine Auflösung hinterlegen.

Möchtest du etwas mehr GerĂ€te zur Auswahl haben, kann ich dir die Seite Screenfly empfehlen. Auch hier stehen dir diverse EndgerĂ€te zur VerfĂŒgung. Die Navigation auf der Seite ist selbsterklĂ€rend, weshalb ich auf eine Anleitung verzichte 😉

Website fĂŒr Handy und Tablet gestalten

Da ich ein großer Fan des Pagebuilders „Elementor“ bin, möchte ich ihn an dieser Stelle nochmal positiv hervorheben. In Elementor lassen sich Websites direkt fĂŒr Handy- und Tabletauflösungen gestalten. Es kann fĂŒr jedes Element (Textboxen, Bilder, Videos, etc.) ausgewĂ€hlt werden, ob diese auf Desktop, Handy oder Tablet ausgeblendet oder nur dort dargestellt werden sollen. Fast jedes Element lĂ€sst sich fĂŒr Handy, Tablet und Desktop anpassen – bspw. die Festlegung einer unterschiedlichen SchriftgrĂ¶ĂŸe fĂŒr jedes GerĂ€t. Und das ohne Programmierkenntnisse.

Elementor ist ein “What You See Is What You Get”-Editor. Du siehst also schon vor dem Speichern, wie die Darstellung final aussehen wird.

Elementor-Handymodus
"Handymodus" im Elementor Pagebuilder

Schreibe einen Kommentar

Abonnieren
Benachrichtige mich bei
0 Kommentare
Inline Feedbacks
View all comments

Die mit Sternchen (*) gekennzeichneten Verweise sind sogenannte Provision-Links. Wenn du auf so einen Verweislink klickst und ĂŒber diesen Link einkaufst, bekomme ich von deinem Einkauf eine Provision. FĂŒr dich verĂ€ndert sich der Preis nicht. 

0
Hast du Fragen? Dann schreibe einen Kommentar ;-)x
()
x
Newsletter abonnieren

Erhalte regelmĂ€ĂŸig Informationen zu neuen Tipps und Tutorials.