Optimieren Sie das Design für Mobilgeräte, ohne dass dies Auswirkungen auf den Desktop hat?

Warum können Änderungen auf Mobilgeräten Auswirkungen auf Desktops haben?

GemPages arbeitet auf einer Responsive Design-Prinzip. Das bedeutet, dass sich die Elemente auf Ihrer Seite automatisch an unterschiedliche Bildschirmgrößen anpassen.

Wenn Sie ein Element für Mobilgeräte verschieben oder seine Größe ändern, kann sich dadurch auch das Desktop-Layout ändern, da es sich im Code um dasselbe Element handelt.

Sie müssen spezielle Techniken anwenden, um die Designs für jedes Gerät zu isolieren.

Wichtige Techniken für die ausschließlich mobile Anpassung

Um ausschließlich mobile Layouts zu entwerfen, ohne den Desktop zu beeinträchtigen, sollten Sie eine der folgenden Techniken in GemPages verwenden, darunter:

• Sichtbarkeitseinstellungen
• Responsive Layout-Optionen
• (Fortgeschrittene) Benutzerdefinierte CSS

1. Sichtbarkeitseinstellungen

Mit dieser Funktion können Sie verschiedene Elemente/Abschnitte ausblenden Ihres Shops auf bestimmten Geräten (Desktop oder Mobilgerät).

Ejemplo:

Sie erstellen zwei Abschnitte, A und B. Abschnitt A ist speziell für Desktop-Benutzer konzipiert, während Abschnitt B für Mobilgeräte optimiert ist. Sie können Abschnitt A so einstellen, dass er nur auf dem Desktop und Abschnitt B nur auf Mobilgeräten angezeigt wird. So stellen Sie sicher, dass jeder Abschnitt auf das jeweilige Gerät zugeschnitten ist, ohne sich gegenseitig zu beeinträchtigen.

Vorteile:

• Es ermöglicht Ihnen, einzigartige Layouts zu erstellen, die für jede Bildschirmgröße optimiert sind.
• Es lässt sich leicht anpassen, ohne dass das Risiko einer Auswirkung auf andere Abschnitte besteht.

Einschränkungen:

Der Inhalt Ihrer Seite wird technisch dupliziert. Dies hat zwar keinen großen Einfluss auf die Ladegeschwindigkeit, ist aber dennoch ein Punkt, den Sie beachten sollten.

Hinweis: Am besten beschränken Sie den Einsatz dieser Technik auf 1–2 wichtige Abschnitte (z. B. den Abschnitt „Above the Fold“), die für jedes Gerät die größte Anpassung erfordern.

Weitere Informationen zum Ein- und Ausblenden von Elementen und Abschnitten auf den einzelnen Geräten finden Sie unter Dieser Artikel.

2. Elementspezifische Anpassungen

Mit GemPages können Sie Anpassen der Darstellung von Elementen basierend auf der Bildschirmgröße.

Diese Einstellungen umfassen Optionen zum Anpassen der Schriftgröße, Ausrichtung, Farben, Ränder, Polsterung, Hintergründe usw.

Ejemplo:

Sie vergrößern die Schriftgröße einer Überschrift auf Mobilgeräten für eine bessere Lesbarkeit, während die Desktop-Version erhalten bleibt.

Einschränkungen:

Sie können nur die optische Erscheinung von Elementen anpassen, nicht deren Position. 

Wenn Sie ein Element auf dem Mobilgerät verschieben, wird es auch auf der Desktop-Version verschoben, da sich das Element im Gesamtlayout immer noch an derselben Position befindet.

3. Responsive Layouts

Mithilfe der Spalten- und Zeileneinstellungen von GemPages können Sie Wechseln Sie zwischen horizontalen Layouts für Desktop und vertikalen Layouts für Mobilgeräte. 

Dadurch wird ein klares und übersichtliches Design gewährleistet, das auf jeder Bildschirmgröße gut funktioniert.

Ejemplo:

Sie richten Spalten so ein, dass sie auf dem Desktop nebeneinander angezeigt werden, auf Mobilgeräten jedoch zur einfacheren Navigation vertikal gestapelt werden.

Vorteile:

• Mit diesem Ansatz können Sie ganz einfach Layouts erstellen, die sowohl auf Desktop- als auch auf Mobilgeräten gut aussehen.
• Sie können Spalten innerhalb von Zeilen neu anordnen und erhalten so mehr Flexibilität beim Design.

Einschränkungen:

Sie können nur die Position ganzer Spalten ändern, nicht die einzelner Elemente innerhalb der Spalten.

4. Erweiterte Anpassung: Verwenden Sie benutzerdefiniertes CSS für Mobilgeräte

Wenn Sie über fundierte CSS-Kenntnisse verfügen, können Sie Ihre mobile Optimierung durch das Hinzufügen von benutzerdefiniertem CSS-Code auf die nächste Ebene bringen. Auf diese Weise können Sie den Stil und das Erscheinungsbild bestimmter Elemente nur für Mobilgeräte optimieren.

Ejemplo:

Sie können benutzerdefiniertes CSS schreiben, um den Stil einer Schaltfläche zu ändern oder den Abstand von Elementen exklusiv für Mobilgeräte anzupassen.

Vorteile:

Vollständige Kontrolle über den Stil jedes Elements, sodass Sie hochspezifische Anpassungen vornehmen können.

Einschränkungen:

Erfordert CSS-Kenntnisse. Ohne diese kann es schwierig sein, Anpassungen effektiv umzusetzen.

Wie kann das Design nur für Mobilgeräte optimiert werden?

Um Ihr Design effektiv zu optimieren, empfehlen wir folgende Vorgehensweise:

• Beginnen Sie mit dem Desktop

Entwerfen Sie zunächst Ihr Layout für den Desktop. Das mobile Layout übernimmt die Inhaltsstruktur des Desktops. Wenn Sie hier beginnen, schaffen Sie eine solide Grundlage.

• Tasteneinstellungen anpassen

Verwenden Sie elementspezifische Anpassungen und responsive Layouttechniken, um Schriftgröße, Farbe, Ränder, Polsterung und Ausrichtung für Mobilgeräte zu ändern.

• Wenden Sie bei Bedarf Sichtbarkeitseinstellungen an

Wenn Sie ein mobiles Layout benötigen, das sich vollständig vom Desktop-Layout unterscheidet, sollten Sie die Verwendung von Sichtbarkeitseinstellungen um Abschnitte nur für Mobilgeräte zu erstellen.

Hier ist beispielsweise ein schrittweises Beispiel zur Verwendung der Sichtbarkeitseinstellungen auf der Registerkarte „Erweitert“:

Schritt 1: Zur mobilen Ansicht wechseln

Nachdem Sie das Desktop-Design fertiggestellt haben, klicken Sie auf das Mobilsymbol in der oberen Symbolleiste von GemPages, um eine Vorschau der Darstellung Ihrer Seite auf dem Handy anzuzeigen.

Schritt 2: Duplizieren Sie den Abschnitt

Klicken Sie mit der rechten Maustaste auf den Abschnitt, den Sie für Mobilgeräte anpassen möchten, und wählen Sie „Duplikat"

• Der ursprüngliche Abschnitt wird für die mobile Optimierung verwendet (Abschnitt a).
• Der duplizierte Abschnitt ist nur für den Desktop bestimmt (Abschnitt B).

Schritt 3:: Legen Sie fest, dass ein Element auf dem Handy und das andere auf dem Desktop sichtbar ist. So können Sie jedem Element einen eigenen Stil zuweisen.

Schritt 4: In Passen Sie im Einstellungsfeld auf der linken Seite Schriftgröße, Abstand und andere Attribute für die mobile Version an.

Dadurch wird sichergestellt, dass das Element für kleinere Bildschirme optimiert ist, ohne das Desktop-Design zu beeinträchtigen.

Häufig gestellte Fragen

1. Wie bearbeite ich eine Seite in GemPages nur für Mobilgeräte?

Verwenden Sie den Umschalter für die mobile Ansicht in der oberen Symbolleiste, um zur mobilen Vorschau zu wechseln. Dann:

• Passen Sie Schriftgröße, Innenabstand, Rand usw. für Mobilgeräte mithilfe elementspezifischer Einstellungen an.
• Verwenden Sie die Sichtbarkeitseinstellungen, um Abschnitte auf Mobilgeräten bzw. Desktops anzuzeigen/auszublenden, wenn Sie separate Designs benötigen.

2. Warum wirken sich Änderungen, die ich auf dem Mobilgerät vornehme, auch auf das Desktop-Layout aus?

GemPages folgt einer responsiven Designstruktur, d. h. die Elemente sind auf allen Geräten gleich positioniert. Um mobile Änderungen zu isolieren, verwenden Sie die Sichtbarkeitseinstellungen, um den Abschnitt zu duplizieren und jede Version separat anzupassen.

3. Wie kann man einen Abschnitt auf Mobilgeräten am besten anders aussehen lassen?

Es gibt zwei empfohlene Optionen:

• Passen Sie Stileinstellungen (Schriftgröße, Abstand, Rand, Ausrichtung) direkt in der mobilen Ansicht an
• Verwenden Sie Sichtbarkeitseinstellungen, um nur mobile Versionen wichtiger Abschnitte wie Hero oder CTA zu erstellen

4. Kann ich für Mobilgeräte und Desktops unterschiedliche Hintergrundbilder verwenden?

Ja. Duplizieren Sie den Abschnitt und verwenden Sie die Sichtbarkeitseinstellungen, um eine Version für Mobilgeräte und eine für Desktop-Computer anzuzeigen. Anschließend können Sie in beiden Versionen unterschiedliche Hintergrundbilder festlegen.