Mein Design sieht auf Mobilgeräten nicht gut aus

Warum Ihre Seite auf Mobilgeräten möglicherweise schlecht aussieht (und wie Sie das beheben können)

1. Sie haben nur für die Desktop-Ansicht entworfen

Einer der häufigsten Fehler besteht darin, die gesamte Seite in der Desktop-Ansicht zu gestalten und zu vergessen, sie für Mobilgeräte anzupassen. GemPages versucht zwar automatisch, Inhalte responsive zu gestalten, aber Elemente wie großer Text, übergroße Bilder und enge Abstände müssen in der mobilen Ansicht oft manuell angepasst werden.

Lösung:
Nachdem Sie Ihr Desktop-Design fertiggestellt haben, wechseln Sie zum Mobilansicht im Editor und passen Sie Schriftgrößen, Bildskalierung, Ränder, Auffüllungen und Elementpositionen speziell für mobile Benutzer an.

In diesem offiziellen GemPages-Handbuch erfahren Sie, wie es geht: Responsive Webdesign Übersicht.

2. Unsachgemäße Verwendung des Zeilenelements

Die Zeilenelement ist für die Erstellung responsiver Layouts unerlässlich. Bei unsachgemäßer Verwendung passen sich verschachtelte Elemente möglicherweise nicht geräteübergreifend an, was zu Layoutproblemen führt.

Weitere Informationen zum Erstellen eines responsiven Layouts mithilfe von Zeilenelementen finden Sie hier:

3. Elemente sind sichtbar, obwohl sie es nicht sein sollten

Manchmal wird ein Element auf dem Desktop ausgeblendet, aber auf dem Handy vergessen, es auszublenden, oder umgekehrt. Dies führt dazu, dass auf mobilen Bildschirmen doppelte oder unnötige Inhalte angezeigt werden, was den Benutzer verwirrt und das Erlebnis beeinträchtigt.

Lösung:
Verwenden Sie die Sichtbarkeitseinstellungen In GemPages können Sie je nach Gerätetyp bestimmte Elemente ein- oder ausblenden. Beispielsweise können Sie komplexe Bildschieberegler oder große Textblöcke auf Mobilgeräten ausblenden, um ein übersichtlicheres Erlebnis zu erzielen.

 Erfahren Sie mehr über die Steuerung der Sichtbarkeit: Element oder Abschnitt auf jedem Gerät anzeigen/ausblenden.

4. Nicht optimierte Bilder für Mobilgeräte

Die Verwendung hochauflösender Desktop-Bilder auf Mobilgeräten kann zu langen Ladezeiten und verzerrten Darstellungen führen. Darüber hinaus kann die falsche Einstellung der Bildabmessungen dazu führen, dass Bilder auf kleineren Bildschirmen vergrößert oder falsch ausgerichtet werden.

Bitte lesen Sie diesen Artikel auf der Empfohlene Größe für Bilder.

Best Practices für großartiges mobiles Design in GemPages

Um sicherzustellen, dass Ihre GemPages-Seiten auf Mobilgeräten gut aussehen, befolgen Sie diese wichtigen Vorgehensweisen:

1. Beginnen Sie mit dem Desktop, aber passen Sie immer an Mobilgeräte an

GemPages ist für responsives Design konzipiert, dennoch ist es wichtig, manuell zur mobilen Ansicht zu wechseln und Layout, Typografie und Abstände für kleinere Bildschirme anzupassen.

2. Verwenden Sie das Zeilenelement, um flexible Layouts zu erstellen

Strukturieren Sie Ihr Layout immer mit dem Zeilenelement. Dadurch können Inhalte je nach Bildschirmgröße automatisch skaliert oder gestapelt werden. Erstellen Sie Ihr Layout nicht nur mit eigenständigen Elementen, sondern fassen Sie diese für eine bessere Kontrolle in einer Zeile zusammen.

3. Schriftgrößen für Mobilgeräte anpassen

Große Schriftarten sehen auf dem Desktop gut aus, können den Nutzer auf dem Smartphone aber überfordern. Reduzieren Sie beim Design für Mobilgeräte Schriftgröße und Zeilenabstand für Überschriften, Produktnamen und CTA-Buttons.

Informationen zum Einstellen unterschiedlicher Schriftgrößen für Desktop und Mobilgeräte finden Sie unter Dieser Artikel.

4. Häufige Vorschau auf Mobilgeräten

Verwenden Sie die Vorschau Klicken Sie in GemPages auf die Schaltfläche „Testen Sie Ihr Layout auf realen Geräten oder in mobilen Browsersimulatoren“. So können Sie fehlerhafte Layouts oder falsch ausgerichtete Inhalte vor der Veröffentlichung erkennen.

5. Minimieren Sie versteckte Elemente

Vermeiden Sie die übermäßige Verwendung versteckter Elemente. Selbst wenn etwas auf Mobilgeräten versteckt ist, wird es im Hintergrund geladen, was Ihre Seite verlangsamen kann. Verwenden Sie Sichtbarkeitseinstellungen nur, wenn es unbedingt erforderlich ist.

6. Verwenden Sie für Mobilgeräte optimierte Bilder

Laden Sie Bilder hoch, die klein und für Mobilgeräte geeignet sind. Dies verbessert die Seitenladegeschwindigkeit und verhindert verzerrte Darstellungen.