So verwenden Sie das Symbol für responsive Einstellungen

Eine auf dem Desktop ansprechende Webseite lässt sich nicht immer optimal auf Mobilgeräte oder Tablets übertragen. Überschriften wirken auf einem Smartphone-Bildschirm möglicherweise zu groß, Abstände, die auf einem Laptop harmonisch wirken, können auf einem Tablet beengt erscheinen, und Schaltflächen benötigen je nach Gerät unterschiedliche Größen. Deshalb bietet Ihnen GemPages die Möglichkeit, individuelle Anpassung spezifischer Einstellungen für jedes Gerät Verwendung der Symbol für responsive Einstellungen.

Was ist das Symbol für responsive Einstellungen?

Das Symbol für responsive Einstellungen ist ein kleines Symbol, das neben bestimmten Optionen im GemPages-Einstellungsfeld erscheint. Es ermöglicht Ihnen, den Standardwert einer bestimmten Einstellung gerätespezifisch zu überschreiben. So können Sie beispielsweise für dasselbe Element einen Wert auf dem Desktop, einen anderen auf dem Tablet und einen weiteren auf dem Mobilgerät festlegen.

Dadurch haben Sie die volle Kontrolle darüber, wie sich Ihre Seite an verschiedene Bildschirmgrößen anpasst, ohne Elemente duplizieren oder benutzerdefinierten Code schreiben zu müssen.

Warum responsive Einstellungen wichtig sind

Responsives Design ist sowohl für die Benutzerfreundlichkeit als auch für die Suchmaschinenoptimierung unerlässlich. Hier erfahren Sie, warum die Verwendung des responsiven Einstellungssymbols so wichtig ist:

• Besseres mobiles Erlebnis: Mehr als die Hälfte aller Online-Shopper nutzen mobile Geräte zum Stöbern, daher muss Ihre Seite auch auf kleinen Bildschirmen gut aussehen.
• Verbesserte Konvertierungsraten: Angemessene Textgröße, Schaltflächen und Abstände erleichtern es den Besuchern, zu lesen, anzutippen und zu kaufen.
• Höhere SEO-Rankings: Google verwendet Mobile-First-Indexing, was bedeutet, dass eine gut optimierte mobile Version direkten Einfluss auf Ihre Sichtbarkeit in den Suchergebnissen hat.
• Saubererer Arbeitsablauf: Sie können ein Element für alle Geräte an einer einzigen Stelle feinabstimmen, ohne Abschnitte zu duplizieren.

So verwenden Sie das Symbol für responsive Einstellungen

Betrachten wir ein konkretes Beispiel. Angenommen, Sie haben ein/e Überschrift Das sieht auf dem Desktop super aus, ist aber auf Mobilgeräten zu groß. So beheben Sie das Problem mit einem responsiven Symbol:

Schritt 1: Wählen Sie Ihr Element

Klicken Sie im Editorbereich auf die Überschrift (oder ein beliebiges Element). Im Einstellungsbereich auf der rechten Seite werden alle verfügbaren Optionen für dieses Element angezeigt.

Schritt 2: Suchen Sie das responsive Symbol

Scrollen Sie durch das Einstellungsfeld und suchen Sie die Option, die Sie pro Gerät anpassen möchten – zum Beispiel SchriftgrößeDaneben sehen Sie ein kleines, responsives Symbol.

Schritt 3: Zur Zielgeräteansicht wechseln

Verwenden Sie die Geräteumschalter Oben im Editor können Sie zwischen folgenden Optionen wechseln: Desktop, Tablette und Mobil Ansichten. Wählen Sie zuerst das Gerät aus, das Sie anpassen möchten.

Schritt 4: Klicken Sie auf das Responsive-Symbol

Klicken Sie auf das responsive Symbol neben der Einstellung. Dadurch wird die Überschreibung für das aktuell ausgewählte Gerät aktiviert, sodass Sie einen entsprechenden Wert eingeben können. einzige zu diesem Gerät.

Schritt 5: Geben Sie den neuen Wert ein

Geben Sie den gewünschten Wert ein (z. B. die Schriftgröße von 48px auf dem Desktop auf 28px auf Mobilgeräten ändern). Die Änderung wirkt sich nur auf die Ansicht des aktuell verwendeten Geräts aus.

Schritt 6: Wiederholen Sie den Vorgang für andere Geräte

Wechseln Sie gegebenenfalls zur Ansicht eines anderen Geräts und wiederholen Sie den Vorgang. Ihre Einstellungen werden für jedes Gerät separat gespeichert.

Schritt 7: Vorschau und Veröffentlichung

Verwenden Sie den Geräteschalter, um eine Vorschau Ihrer Seite auf allen Bildschirmgrößen anzuzeigen, und klicken Sie dann auf Gespeichert or Veröffentlichen wenn Sie mit dem Ergebnis zufrieden sind.

Tipps zur effektiven Nutzung responsiver Einstellungen

Um das responsive Einstellungssymbol optimal zu nutzen, befolgen Sie diese bewährten Vorgehensweisen:

• Beginnen Sie mit der Desktop-Version und optimieren Sie diese anschließend für kleinere Bildschirme. Die meisten Anwender entwickeln zuerst für Desktop-Computer, überprüfen aber immer auch Tablets und Mobilgeräte, um Probleme frühzeitig zu erkennen.
• Testen Sie nach Möglichkeit auf echten Geräten. Die Editor-Vorschau ist korrekt, aber die Ansicht auf einem echten Smartphone vermittelt den besten Eindruck von der Benutzererfahrung.
• Nicht jede Einstellung sollte überschrieben werden. Passen Sie nur das an, was wirklich angepasst werden muss – zu viele Überschreibungen erschweren die Wartung Ihres Designs.
• Behalte deine Tippziele im Auge. Schaltflächen und Links sollten auf Mobilgeräten mindestens 44×44 Pixel groß sein, um leicht antippen zu können.
• Achten Sie auf gut lesbare Typografie. Für ein angenehmes Leseerlebnis sollte der Fließtext auf Mobilgeräten im Allgemeinen zwischen 14px und 18px groß sein.