Unsere Chrome Browser-Erweiterung “Better Mobile Editor”: Wann sie sinnvoll ist – und wie du sie nutzt
Die Idee hinter dem Raster, mit dem du bei Squarespace Inhaltsblöcke anordnen kannst, ist eigentlich super.
Eigentlich. Denn: Viele kämpfen immer wieder mit unschönen und ungewollten Abständen – vor allem in der mobilen Ansicht.
Vielleicht hast du es selbst schon bemerkt: In der Bearbeitungsansicht sind Überschriften auf einmal riesig. Und wenn du deine Website dann auf dem Handy öffnest, sehen sie wieder normal aus.
Das Problem dabei: Squarespace reserviert für Textblöcke Platz im Raster. Enthält ein Textblock Überschriften ist das viel Platz. Wenn die Überschriften dann auf dem Smartphone wieder kleinerer sind, entstehen die viel zu großen Abstände.
Genau da hilft dir unsere kleine Chrome-Erweiterung Better Mobile Editor.
Das Wichtigste auf einen Blick
In der mobilen Ansicht des Squarespace-Bearbeitungsmodus’ werden Überschriften sehr groß angezeigt. Dadurch wird für Textblöcke im Raster zu viel Platz reserviert – und auf der Live-Website entstehen unnötige Abstände.
Die von Everyblue entwickelte Chrome-Extension Better Mobile Editor dreht das um: Die Extension verkleinert Überschriften bewusst stark, damit du Textblöcke im Editor enger ziehen kannst – und auf der Live-Website keine ungewollten Abstände mehr hast.
Kurz gesagt:
Der Better Mobile Editior ist eine Chrome-Erweiterung. Du findest sie im offiziellen Chrome Web Store.
Die Erweiterung verkleinert die Überschriften H1–H4 im mobilen Bearbeitungsmodus.
Das ermöglicht dir, Textblöcke im Editor kompakter zu platzieren und ungewollte Abstände zu vermeiden.
Die Erweiterung hat keine Auswirkung auf die Live-Website – sie wirkt nur im Editor
Sie ist kostenlos, sammelt keine Daten und zeigt keine Werbung
So kannst du deine mobile Version sauber formatieren – und unschöne Abstände vermeiden.
Inhaltsverzeichnis:
Warum kommt es zu ungewollten Abständen, wenn ich meine Squarespace-Website auf dem Smartphone öffne?
Squarespace passt die Größe von Schriften in der mobilen Ansicht automatisch an die Fensterhöhe an. Also: Langes Smartphone → große Schrift, kurzes Smartphone → kleine Schrift.
Du siehst den Effekt, wenn du im Bearbeitungsmodus das Browser-Fenster kleiner ziehst. Dann werden alle Schriften automatisch kleiner. Bei Überschriften ist der Effekt besonders stark.
Das Problem dabei hängt mit dem Raster zusammen, an dem Squarespace alle Inhaltsblöcke ausrichtet. Denn: Im Bearbeitungsmodus reserviert Squarespace im Raster den benötigten Platz für einen Textblock – abhängig von der Schriftgröße im Bearbeitungsmodus.
Ein Beispiel: Eine Überschrift bekommt im Editor zwei Rasterzeilen zugewiesen. Auf dem Smartphone ist sie aber kleiner und würde locker in eine Zeile passen. Da aber zwei Zeilen reserviert sind, entsteht ein unnötiger Abstand zum nächsten Block.
Die Chrome-Extension “Better Mobile Editor” von Everyblue
Die ungewollten Abstände haben uns bei unseren Kundenprojekten echt gestört.
Eine einfache Lösung wäre, das Browserfenster beim Arbeiten sehr klein zu ziehen – aber das macht die Bearbeitung ziemlich mühsam.
Also haben wir selbst eine Lösung entwickelt:
Den Better Mobile Editor – eine Browser-Erweiterung für Chrome, die einfach die übertriebene Skalierung der Überschriften im Editor korrigiert.
Wenn du die Erweiterung aktivierst, reduziert sie automatisch die Schriftgrößen der Überschriften in der mobilen Ansicht des Editors. Squarespace reserviert dadurch weniger Platz im Raster – und die ungewolltenAbstände verschwinden.
An den tatsächlichen Schriftgrößen auf deiner Live-Website ändert sich natürlich nichts. Die Anpassung gilt nur im Editor.
Wenn der reservierte Platz nicht ausreicht, da die Überschriften auf derLive-Seite natürlich größer sind als bei aktivierter Erweiterung, ist das kein Problem. Squarespace streckt das Raster automatisch so weit, dass der Text komplett sichtbar bleibt.
Die Extension ist kostenlos, sammelt keine Daten und zeigt keine Werbung. Wir haben sie ursprünglich für uns gebaut – und teilen sie jetzt gerne mit dir.
Wo bekomme ich die Chrome-Extension “Better Mobile Editor”?
Der Better Mobile Editor ist eine Browser-Erweiterung für Chrome. Du findest sie im offiziellen Chrome Web Store und kannst sie dort kostenlos zu deinem Browser hinzufügen.
Im Store klickst du einfach auf den Button „Hinzufügen“, und schon ist die Erweiterung installiert.
Tipp: Du findest deine Erweiterungen, wenn du im Browser oben rechts auf das Puzzleteil klickst. Wenn du auf die Pinnnadel neben einer Erweiterung klickst, ist sie dauerhaft im Menü sichtbar – nicht mehr unter dem Puzzleteil versteckt.
Du kannst Erweiterungen auch jederzeit wieder aus deinem Browser entfernen.
Was macht die Chrome Extension “Better Mobile Editor”?
Der Better Mobile Editor macht genau eine Sache: Wenn er aktiviert ist, verkleinert er alle Überschriften deutlich. Das gilt ausschließlich im Bearbeitungsmodus der mobilen Ansicht.
Diese Anpassung passiert nur bei dir im Browser. Sie hat keine Auswirkungen auf deine Squarespace-Einstellungen oder auf die Live-Website.
Wenn du die Erweiterung deaktivierst oder den Bearbeitungsmodus verlässt, siehst du die Seite wieder genau so, wie sie auch Besucher sehen.
Wie nutze ich die Chrome-Extension “Better Mobile Editor”?
Nach dem du die Erweiterung hinzugefügt hast, kannst du sie aktivieren und dann dauerhaft eingeschaltet lassen.
Im Bearbeitungsmodus der mobilen Ansicht werden dir dann immer deutlich verkleinerte Überschriften angezeigt.
Zieh die Textblöcke anschließend auf die kleinstmögliche Höhe, um unnötige Abstände zu vermeiden.
Die mobile Ansicht des Squarespace-Bearbeitungsmodus mit dem deaktivierten Better Mobile Editor.
⬇⬇⬇
Die mobile Ansicht des Squarespace-Bearbeitungsmodus mit dem aktivierten Better Mobile Editor.
Fazit
Squarespace ist ein starkes Tool – aber die Skalierung der Schriftgrößen im mobilen Bearbeitungsmodus kann für falsche Abstände sorgen.
Unsere kostenlose Chrome-Erweiterung Better Mobile Editor schafft hier Abhilfe. Probiere es einfach mal aus!
Diese Artikel könnten auch spannend für dich sein:
Anleitung: So aktualisiert sich das Jahr in der Fußzeile deiner Squarespace-Website automatisch
Flodesk: Das Email-Tool, das Selbstständige SEHR überzeugend finden!
So baust du ein Cookiebanner für deine Squarespace-Website (mit Opt-in-Funktion!)
Schriften für deine Website finden: Hier findest du die Besten - und solche, die nicht ALLE haben!
