> For the complete documentation index, see [llms.txt](https://one-loop.gitbook.io/help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/mobile-darstellung-von-webseiten-und-funnels-prufen.md). # Mobile Darstellung von Webseiten und Funnels prüfen Eine Seite kann am großen Bildschirm ruhig und übersichtlich wirken, auf einem Smartphone aber zu große Texte, ungünstige Bilder oder schwer erreichbare Schaltflächen zeigen. Der Seiteneditor bietet deshalb eine eigene Mobilansicht. Dort kannst du bestimmte Einstellungen für kleine Bildschirme gezielt anpassen, ohne die Desktopansicht mitzuverändern. Diese Anleitung hilft dir, eine Seite nachvollziehbar zu prüfen: erst die Desktopansicht als Ausgangspunkt festlegen, dann die Mobilansicht bewusst überarbeiten und anschließend beide Ansichten testen. ## Was sich zwischen Desktop und Mobil unterscheidet Die Geräteauswahl oben im Seiteneditor trennt die Arbeit in zwei Ansichten: | Ansicht | Wofür sie da ist | Was beim Ändern passiert | | ----------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | | **Desktop** | Ausgangspunkt für große Bildschirme | Eine dort gespeicherte Einstellung wird zunächst auch für Mobil verwendet, solange noch kein eigener Mobilwert vorhanden ist. | | **Mobil** | Eigene Anpassung für kleine Bildschirme | Eine hier gespeicherte Einstellung gilt nur für die Mobilansicht und ändert den Desktopwert nicht. | Das ist besonders wichtig bei Schriftgrößen sowie bei Breite und Höhe von Bildern. Wenn du später wieder in die Desktopansicht wechselst und dort einen Wert änderst, betrifft diese Änderung nur den Desktop. > **Merke:** Prüfe immer, welche Geräteansicht gerade aktiv ist, bevor du einen Wert speicherst. So verhinderst du, dass du die richtige Anpassung in der falschen Ansicht vornimmst. ## Vor dem Bearbeiten: ein klares Ziel festlegen Öffne nicht alle Einstellungen gleichzeitig. Entscheide zuerst, was Besucher auf dem Smartphone gut erledigen sollen, zum Beispiel: * eine Leistung verstehen, * ein Formular ausfüllen, * einen Termin anfragen, * eine Nachricht senden oder * einen wichtigen Link auswählen. Kontrolliere anschließend vor allem die ersten sichtbaren Inhalte. Dort sollten Überschrift, kurzer Nutzen, Bild und wichtigste Schaltfläche ohne langes Suchen verständlich sein. ## Zur Mobilansicht wechseln 1. Öffne die gewünschte Website- oder Funnel-Seite im Seiteneditor. 2. Suche in der oberen Leiste die Geräteauswahl, die zunächst die Desktopansicht zeigt. 3. Wähle die Mobilansicht aus. 4. Sieh dir die Seite von oben bis unten an, bevor du etwas änderst. 5. Wähle nur das Element aus, das du gerade verbessern möchtest. Rechts erscheinen dessen Einstellungen. 6. Passe einen Wert an und speichere die Seite. 7. Wechsle danach zurück zur Desktopansicht und kontrolliere, dass sie weiterhin stimmig aussieht. Die Originalansichten zeigen die Geräteauswahl direkt im Editor sowie ein schmaleres Seitenlayout für Mobil. Sie zeigen außerdem, dass die Einstellungsleiste beim jeweiligen Element erhalten bleibt. Die Ansicht ändert sich also, nicht der grundlegende Arbeitsablauf. ## Eine sichere Arbeitsreihenfolge Arbeite Abschnitt für Abschnitt statt nach Gefühl an vielen Stellen gleichzeitig: 1. **Desktop als Ausgangspunkt prüfen.** Kontrolliere Inhalt, Reihenfolge und grobe Gestaltung. 2. **In die Mobilansicht wechseln.** Sieh dir an, welche Werte bereits vom Desktop übernommen wurden. 3. **Den ersten sichtbaren Abschnitt prüfen.** Überschrift, kurzer Text, Bild und wichtigste Schaltfläche sollten ohne unnötiges Scrollen verständlich sein. 4. **Immer nur eine Einstellung ändern.** Zum Beispiel zuerst die Schriftgröße, dann erst den Bildbereich. 5. **Nach jedem Abschnitt die Vorschau ansehen.** So erkennst du sofort, welche Änderung welche Wirkung hatte. 6. **Zum Schluss beide Ansichten prüfen.** Eine gute Mobilansicht ersetzt den Desktoptest nicht. Diese Reihenfolge macht Fehler leichter rückgängig und verhindert, dass du später nicht mehr weißt, warum sich ein Bereich verändert hat. ## Texte für Mobil lesbar machen Für Texte zeigt die Quelle getrennte Größenwerte je Geräteansicht. Du kannst die Schriftgröße eines Elements zunächst für Desktop festlegen und anschließend in der Mobilansicht einen eigenen Wert hinterlegen. ### So passt du eine Schriftgröße getrennt an 1. Wähle in der gewünschten Ansicht das Textelement aus, zum Beispiel eine Überschrift. 2. Öffne in den Element-Einstellungen **Schriftgröße**. 3. Stelle den passenden Wert für die aktuelle Ansicht ein. 4. Wechsle über die Geräteauswahl zur anderen Ansicht. 5. Prüfe dort zuerst den übernommenen Wert. 6. Lege nur bei Bedarf einen eigenen Wert fest. 7. Speichere und kontrolliere beide Vorschauen. Die getrennte Schriftgrößensteuerung ist laut Quelle für Überschriften, Unterüberschriften, Absätze und Aufzählungen verfügbar. Außerdem zeigen die Originalansichten eigene Größenfelder in diesen Elementen: | Element | Getrennt prüfbare Textangaben | | ------------------------ | ------------------------------------------------------------------- | | **Fragen und Antworten** | Titelgröße und Inhaltsgröße | | **Schaltfläche** | Schriftgröße und Größe eines vorhandenen Untertexts | | **Bild mit Textbereich** | Überschriftengröße und Textgröße | | **Social-Media-Icons** | Unter anderem Schriftfamilie, Schriftgröße, Schriftstärke und Farbe | Nicht jedes Element muss auf Mobil einen eigenen Wert erhalten. Ändere ihn nur, wenn der übernommene Desktopwert zu groß, zu klein oder im Seitenfluss unruhig wirkt. ## Bilder in Desktop und Mobil getrennt steuern Bei Bildern lassen sich **Breite** und **Höhe** für Desktop und Mobil unabhängig einstellen. Das hilft, wenn ein Bild auf dem Smartphone zu dominant wirkt, zu viel Platz beansprucht oder sich nicht passend in seinen Bereich einfügt. ### Bildgröße gezielt anpassen 1. Öffne die Seite im Editor und wähle das betreffende Bild aus. 2. Wähle über die Geräteauswahl die Ansicht aus, die du bearbeiten möchtest. 3. Öffne die Bild-Einstellungen. 4. Suche die Felder **Breite** und **Höhe**. 5. Trage den gewünschten Wert ein. 6. Wähle die passende Einheit. 7. Wechsle zur anderen Geräteansicht und prüfe dort die Bildgröße. 8. Lege dort nur dann eigene Werte fest, wenn der übernommene Wert nicht passt. 9. Speichere und kontrolliere beide Vorschauen. Die Originalansichten zeigen dabei das Bild auf der Arbeitsfläche und die Felder **Width** und **Height** im Einstellungsbereich. Sie verdeutlichen außerdem, dass die Geräteauswahl vor dem Einstellen der Werte erfolgt. ### Die richtige Einheit auswählen | Einheit | Sinnvoll, wenn … | Darauf solltest du achten | | ------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------ | | **px** | ein Bild bewusst eine feste Größe behalten soll | Ein fester Wert kann auf kleinen Bildschirmen schnell zu groß wirken. | | **%** | sich die Breite am verfügbaren Bereich orientieren soll | Prüfe den tatsächlichen Bereich, denn die Prozentzahl bezieht sich auf dessen Größe. | | **rem** oder **em** | die Größe mit der Schriftgröße mitwachsen oder schrumpfen soll | Nutze diese Einheiten nur, wenn du die Wirkung bei mehreren Bildschirmgrößen prüfst. | Breite und Höhe dürfen unterschiedliche Einheiten verwenden. Du kannst zum Beispiel eine flexible Breite in Prozent mit einer festen Höhe kombinieren, wenn das für dein Seitenlayout sinnvoll ist. Wenn du in der Mobilansicht keine eigene Bildgröße speicherst, wird der Desktopwert übernommen. Bereits vorhandene Bilder bleiben unverändert, bis du sie selbst bearbeitest. ## Was nach dem Speichern passiert Die Speicherung bewahrt die Werte für die Ansicht, in der du gerade arbeitest: * Ein eigener Mobilwert für eine Schriftgröße ändert nicht den Desktopwert. * Ein eigener Desktopwert ändert nicht den bereits gespeicherten Mobilwert. * Ohne eigenen Mobilwert wird der Desktopwert weiterhin als Ausgangspunkt verwendet. * Bildgröße, Textgröße und andere sichtbare Eigenschaften müssen deshalb in beiden Ansichten geprüft werden. Speichere nicht erst nach einer langen Reihe von Änderungen. Ein Zwischenstand nach jedem fertigen Abschnitt macht es leichter, Unterschiede in der Vorschau zu erkennen. ## Vollständiger Test vor der Veröffentlichung Gehe vor der Veröffentlichung diese Liste durch: 1. Öffne die **Desktopansicht** und kontrolliere die wichtigsten Abschnitte. 2. Öffne die **Mobilansicht** und prüfe dieselben Abschnitte erneut. 3. Lies jede wichtige Überschrift und jeden Absatz: Nichts darf abgeschnitten oder unnötig klein sein. 4. Prüfe Fragen-und-Antworten-Bereiche: Titel und Inhalt müssen klar voneinander getrennt bleiben. 5. Kontrolliere Schaltflächen: Text muss lesbar sein und die Schaltfläche gut erreichbar wirken. 6. Prüfe Bilder: Sie dürfen den Inhalt nicht verdrängen und sollen im jeweiligen Bereich sinnvoll platziert sein. 7. Kontrolliere Reihen mit Social-Media-Icons auf Abstände, erkennbare Symbole und gut erreichbare Ziele. 8. Öffne die veröffentlichte Seite auf einem echten Smartphone und teste die wichtigen Links, Schaltflächen und Formulare selbst. 9. Wechsle nochmals zum Desktop zurück. Erst wenn beide Ansichten stimmig sind, veröffentlichst du. Die Editor-Vorschau hilft beim Gestalten. Ein Test auf einem echten Gerät zeigt dir zusätzlich, wie die Seite beim Scrollen und Antippen wirklich wirkt. ## Typische Probleme und ihre Lösung | Beobachtung | Wahrscheinliche Ursache | Nächster sinnvoller Schritt | | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | | Die Mobilansicht sieht fast genauso aus wie Desktop, obwohl sie angepasst werden sollte. | Es wurde noch kein eigener Mobilwert gespeichert. | In die Mobilansicht wechseln, das betroffene Element auswählen und dort einen eigenen Wert festlegen. | | Eine Änderung erscheint auf Desktop, aber nicht auf Mobil. | Die Änderung wurde nur in der Desktopansicht gespeichert; auf Mobil existiert bereits ein eigener Wert. | Mobilansicht öffnen, den dortigen Wert prüfen und bei Bedarf bewusst anpassen. | | Eine Überschrift nimmt zu viel Raum ein. | Die Desktop-Schriftgröße wurde übernommen. | In der Mobilansicht nur die Schriftgröße dieser Überschrift verkleinern und anschließend den folgenden Inhalt prüfen. | | Ein Bild wirkt mobil zu groß oder zu hoch. | Breite oder Höhe wurde aus der Desktopansicht übernommen. | Bild auswählen, Mobilansicht öffnen und Breite sowie Höhe mit einer passenden Einheit einstellen. | | Ein Bild verändert sich unerwartet nicht auf beiden Ansichten. | Es wurde nur eine Ansicht bearbeitet. | Die Geräteauswahl prüfen und die zweite Ansicht separat kontrollieren. | | Eine Seite wirkt nach vielen Anpassungen unruhig. | Mehrere Einstellungen wurden gleichzeitig verändert. | Zum letzten sicheren Zwischenstand zurückgehen und danach Abschnitt für Abschnitt testen. | ## Grenzen, die du kennen solltest * Die getrennte Einstellung gilt nur für Eigenschaften, die das jeweilige Element in der Geräteansicht anbietet. * Eine eigene Mobilanpassung macht die Desktopansicht nicht automatisch besser. Beide Ansichten bleiben ein eigener Prüfschritt. * Bildgröße und Textgröße allein lösen keine unklare Seitenstruktur. Ordne die wichtigsten Inhalte zuerst und reduziere unnötige Elemente. * Optimierte Bildmaße können den Seitenaufbau ruhiger machen. Sie garantieren aber keine bestimmte Ladezeit oder Suchmaschinenposition. * Originalbilder und Originalvideos aus den Quellen werden nicht in die eigene Dokumentation übernommen. Entscheidend sind die daraus geprüften Bedienhinweise. ## Praxisbeispiel: Angebotsseite für einen mobilen Erstkontakt Ein lokaler Dienstleister möchte, dass Interessenten auf dem Smartphone schnell verstehen, worum es geht, und eine Anfrage absenden können. 1. Das Team prüft zuerst die Desktopansicht: Überschrift, kurzer Einleitungstext, Bild und Anfrage-Schaltfläche sind vorhanden. 2. Anschließend wechselt es in die Mobilansicht. 3. Die Überschrift ist dort zu groß. Das Team wählt nur diese Überschrift aus und hinterlegt eine kleinere Mobil-Schriftgröße. 4. Das Bild nimmt zu viel Höhe ein. Das Team wählt das Bild aus, bleibt in der Mobilansicht und passt Breite und Höhe an. 5. Die Anfrage-Schaltfläche wird direkt nach dem Einleitungstext kontrolliert, damit sie beim Scrollen nicht übersehen wird. 6. Ein Bereich mit häufigen Fragen bekommt getrennte Größen für Titel und Antworttext, damit beides gut lesbar bleibt. 7. Nach dem Speichern testet das Team die Seite auf einem Smartphone: Text lesen, bis zur Anfrage scrollen, Schaltfläche auswählen und das Formular absenden. 8. Zum Schluss prüft es erneut die Desktopansicht. Dort bleibt das ursprüngliche Layout erhalten. Das Ergebnis ist keine zweite Website, sondern eine Seite mit sinnvoll ergänzten Mobilwerten: Besucher können den Inhalt auf kleinen Bildschirmen leichter lesen und die gewünschte Aktion schneller ausführen. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/mobile-darstellung-von-webseiten-und-funnels-prufen.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.