Framer-Breakpoints, und wie deine Seite auf dem Handy heil bleibt

Framer-Breakpoints gibt es in drei Größen: Desktop, Tablet und Phone. Du baust auf Desktop, und deine Änderungen fließen nach unten in die beiden kleineren Größen. Änderst du etwas auf einer kleineren Größe, wird daraus ein Override, der genau dort bleibt. Fast jeder Mobile-Bug in Framer geht auf eine Sache zurück: eine feste Pixelbreite, die niemand auf Fill umgestellt hat.

Was die drei Framer-Breakpoints wirklich bedeuten

Framers eigene Produktseiten zeigen die Canvas-Tabs mit den Beschriftungen Desktop 1200 und Tablet 810. Der ausgelieferte Code auf framer.com sagt dasselbe. Die responsiven Bilder kommen mit Regeln für min-width 1200px, für 810px bis 1199.98px und für max-width 809.98px. Desktop deckt also 1200 und darüber ab. Tablet deckt grob 810 bis 1199 ab. Phone deckt alles unter 810 ab. Dein Layout muss alle drei Grenzen überstehen.

Änderungen fließen nach unten, Overrides nicht nach oben

Änderst du auf Desktop, fließt die Änderung in Tablet und Phone. Änderst du auf Phone, hast du einen Override gebaut, der nur dort lebt. Framer hebt jede Eigenschaft hervor, die du überschrieben hast, weil ihr Wert nicht mehr zum primären Breakpoint passt und sie deshalb keine Änderungen mehr erbt. Zum Zurücksetzen klickst du auf die Beschriftung der Eigenschaft und wählst Reset Override. Deshalb machst du zuerst das Desktop-Layout fertig und öffnest danach Phone. Jeder Override, den du zu früh setzt, ist eine Änderung, die du am Ende zweimal machst.

Feste Breiten sind der Grund, warum die Seite überläuft

Framer hat dazu einen kurzen Troubleshooting-Artikel, und der trifft es. Wenn deine Seite auf dem Phone-Breakpoint den Screen nicht ausfüllt, ist fast immer ein Element breiter als der Handy-Screen. Such nach zwei Dingen. Einer festen Breite wie 321px, wo du 100% oder 1fr wolltest. Und einer Max Width, die größer ist als ein Handy-Screen. Beides reparierst du im Bereich Size im rechten Panel. Setz Width auf 100% oder 1fr und nimm Max Width von allem runter außer von deinem Content-Wrapper. Dann veröffentliche neu, denn Änderungen auf dem Canvas erreichen die Live-Seite erst beim Publish.

Stack-Richtung und Padding erledigen den Rest

Auf Phone müssen die meisten horizontalen Stacks vertikal werden. Wähl den Stack aus, dreh die Richtung und zieh den Gap unter deinen Desktop-Wert. Dann kürz das Padding der Sections. 120 Pixel oben und unten wirken auf dem Desktop großzügig und auf dem Handy wie ein leerer Screen. Und 80 Pixel seitliches Padding lassen einen Handy-Besucher einen schmalen Textstreifen lesen. Vierzig und zwanzig sind vernünftige Startwerte. Geh jede Section auf dem Phone-Breakpoint durch und schrumpf alles, wodurch der Besucher durch Nichts scrollt.

Die Typografie braucht einen eigenen Durchgang

Eine 64 Pixel große Headline läuft auf dem Handy über sechs Zeilen und schiebt deinen Button unter den Fold. Reparier das einmal im Textstil statt Ebene für Ebene. Öffne Assets in der linken Sidebar, öffne den Stil, und such im Dialog Edit Style den Bereich Breakpoints und klick auf Add Breakpoint. Framer gibt dir Desktop (L), Tablet (M) und Mobile (S). Für jede Größe setzt du Schriftgröße, Zeilenhöhe, Laufweite und Absatzabstand. Stell deine H1 dort einmal ein, und jede H1 auf der Website folgt.

Teste so, wie deine Besucher es sehen

Zuerst eine Eigenheit. Framer deaktiviert einen Breakpoint, sobald er breiter ist als dein Browserfenster oder deine Monitorauflösung, auf einem kleinen Laptop kann die Desktop-Vorschau also ausgegraut sein. Framers Lösung: Fenster breiter ziehen, an einen größeren Monitor wechseln oder veröffentlichen und die Live-URL anschauen. Den echten Test machst du dann im Browser. Zieh das Fenster langsam von breit nach schmal. Achte auf den exakten Punkt, an dem eine Zeile nicht mehr passt, und reparier es genau dort statt an der Breakpoint-Grenze. Danach öffnest du die Live-URL auf deinem eigenen Handy über Mobilfunk und scrollst die ganze Seite durch. Eine Geräte-Emulation zeigt dir kein langsames Netz und keine Leiste eines In-App-Browsers.

Ein Responsive-Durchgang in zehn Minuten

Arbeite von oben nach unten, Section für Section. Setz jeden Wrapper auf 100% oder 1fr. Behalte genau eine Max Width, auf dem Content-Wrapper. Dreh horizontale Stacks auf Phone in die Vertikale. Halbier das Padding deiner Sections. Ergänz Breakpoint-Größen in den Textstilen für H1, H2 und Fließtext. Veröffentliche neu, öffne die Seite auf dem Handy und prüf, ob du den ersten Button ohne Scrollen siehst. Dieser Durchgang fängt das meiste ab, was schiefgeht, und nach ein paar Malen dauert er rund zehn Minuten pro Seite.