Mit ArcGIS Experience Builder können Sie unterschiedliche Seitenlayouts für Ihre Web Experiences erstellen und konfigurieren, damit sie auf Bildschirmen jeder Größe gut funktionieren. Die Konfiguration jedes Layouts basiert auf adaptivem Design, bei dem Sie spezielle Designs für große, mittelgroße und kleine Bildschirme erstellen können. Jedes Layout ist eine Adaption der Experience, die eine größere Flexibilität für mehr App-Anpassung und bessere Nutzung von Bildschirmgrößen und unterschiedliche Inhalte bietet.
Die Vorlagen können bei mehreren Bildschirmgrößen verwendet werden. Wenn Sie eine Vorlage für leere Vollbild-Apps oder leere Bildlaufseiten auswählen, ist für diese das Auto-Layout für Geräte mit mittelgroßem und kleinem Bildschirm aktiviert. Dadurch bleibt die Synchronisation aller Widgets mit den Widgets im Layout für das Gerät mit großem Bildschirm erhalten. Außerdem werden die Widgets automatisch angeordnet.
Um ein separates Layout für ein Gerät mit mittelgroßem oder kleinem Bildschirm zu erstellen, klicken Sie auf die Schaltfläche Benutzerdefiniert neben dem Layout der Seite oder des Fensters. Danach können Sie Widgets und Fenster für das ausgewählte Bildschirmgerät manuell anordnen und ihre Größe anpassen.
Wenn Sie Layouts für Geräte mit kleinen Bildschirmen bearbeiten, werden die folgenden großen Konfigurationsfenster, die sonst auf der Zeichenfläche angezeigt werden, stattdessen innerhalb der Ränder des Builders angezeigt:
- Fenster Schnellformat der Widgets "Schaltfläche", "Trennlinie" und "Ansichtsnavigation"
- Fenster Dynamischer Inhalt
- Fenster Widget hinzufügen in den Widgets "Platzhalter" und "Raster"
- Fenster Vorlage auswählen für Seiten, Kopfzeilen, Fußzeilen, Fenster, Blöcke und Tabellen
Tipp:
Um die Layouts für unterschiedliche Bildschirmgrößen und Geräte zu testen, klicken Sie auf Live-Ansicht auf der Builder-Werkzeugleiste. Mit einer Live-Ansicht können Sie nachprüfen, ob der Inhalt ordnungsgemäß angepasst wurde, bevor Sie diesen speichern und veröffentlichen. Sie können auch experimentieren, indem Sie einige Einstellungen ändern und die interaktiven und dynamischen Widgets manipulieren, um zu sehen, wie sie funktionieren.
Die ausstehende Liste
Um in einem Geräte-Layout ein Widget oder eine Bildschirmgruppe zu entfernen, klicken Sie auf die Schaltfläche In ausstehende Liste verschieben 
auf der Werkzeugleiste. Damit wird das Widget oder die Bildschirmgruppe in der Zeichenfläche des aktuellen Geräts entfernt. Danach wird die Konfiguration gespeichert, damit Sie sie bei Bedarf wieder zum Layout hinzufügen können. Wenn Sie die Option für das benutzerdefinierte Layout aktiviert haben, werden weitere Widgets, die einem anderen Gerätemodus hinzugefügt werden, dem aktuellen Gerät nicht hinzugefügt. Sie können sie manuell aus der Liste der ausstehenden Elemente hinzufügen.
Hinweis:
In den Widgets in der ausstehenden Liste sind die meisten ihrer Einstellungen gespeichert, darunter alle Inhaltseinstellungen, die jeweiligen Style-Einstellungen wie Hintergrund und Rahmen sowie alle Aktionseinstellungen. In Widgets werden die allgemeinen Layout-Einstellungen aus der Registerkarte Style, wie z. B. Größe und Position, nicht beibehalten.
Die ausstehende Liste wird auf der Registerkarte Ausstehend im Fenster Widget einfügen angezeigt. Widgets, die in mindestens einem Gerätemodus in der App angezeigt werden, werden in einer Liste unter Andere verwendete Geräte angezeigt. Die folgenden Symbole zeigen an, in welchen Gerätemodi die einzelnen Widgets vorhanden sind:
: Auf Geräten mit großem und mittelgroßem Bildschirm verwendet.
: Auf Geräten mit großem und kleinem Bildschirm verwendet
: Auf Geräten mit mittelgroßem und kleinem Bildschirm verwendet.
: Auf Geräten mit großem Bildschirm verwendet.
: Auf Geräten mit mittelgroßem Bildschirm.
: Auf Geräten mit kleinem Bildschirm verwendet.
Widgets, die derzeit in keinem Gerätemodus auf der Zeichenfläche angezeigt werden, werden unter Alle nicht verwendeten Geräte angezeigt. Klicken Sie auf Löschen, um diese Widgets in der ausstehenden Liste zu entfernen.
Meldungsaktionen und ausstehende Liste
Widgets, die Sie in die ausstehende Liste verschieben, können nicht als Ziel für Meldungsaktionen fungieren.
Wenn Sie in den Einstellungen eines Widgets auf der Registerkarte Aktion Meldungsaktionen festlegen, werden die Widgets in der ausstehenden Liste nicht als verfügbare Ziele aufgeführt.
Wenn Sie ein Widget, das bereits das Ziel einer Meldungsaktion ist, in die ausstehende Liste verschieben, wird diese Meldungsaktion nur für die Gerätemodi deaktiviert, in denen Sie das Widget in die ausstehende Liste verschoben haben. Auf der Registerkarte Aktion in den Einstellungen des Widgets "Quelle" werden Symbole angezeigt, die den Gerätemodus angeben, in dem die Aktion konfiguriert und aktiv ist.
Im Express-Modus können Sie nur Meldungsaktionen für das aktuelle Gerätemodus-Layout anzeigen, das Sie gerade betrachten.
Tipp:
Weitere Informationen zu den Einstellungen, die in Experience Builder zum Optimieren für mobile Geräte verfügbar sind, finden Sie im Lernprogramm Ein App-Layout für mobile Geräte optimieren.
Best Practices für das Design von responsiven Layouts
Beachten Sie beim Entwerfen von Layouts für Ihre Experiences die folgenden Best Practices:
- Wählen Sie einen geeigneten Layout-Typ aus.
- Feste Layouts sind sinnvoll, wenn Elemente an ihrer Position bleiben und nicht entsprechend der Größe des Inhalts verschoben werden sollen. Sie eignen sich für Dashboard-Designs und modale Dialogfelder.
- Mit Fließrichtungs-Layouts können Inhalte je nach Bildschirmgröße automatisch gestapelt und verschoben werden. Sie eignen sich am besten für responsive, scrollfähige Inhalte wie lange Seiten mit viel Text, Bildern und Karten.
- Layout-Widgets, einschließlich der Widgets "Zeile", "Spalte" und "Raster", eignen sich für komplexe, strukturierte Layouts. Jedes dieser Widgets ermöglicht die flexible Platzierung und Ausrichtung von Widgets in einem Container.
- Machen Sie sich mit den Optionen zum Festlegen der Größe und Position vertraut, und wenden Sie sie strategisch an.
- Die Verwendung von Pixeln (px) empfiehlt sich, wenn Sie die Größe genau festlegen möchten, beispielsweise für Kopf- und Fußzeilen sowie andere Elemente, die auf verschiedenen Bildschirmgrößen gleich bleiben sollen. Diese Einheit eignet sich für Elemente in Desktop-Layouts und Elemente mit fester Größe.
- Die Verwendung von Prozentsätzen (%) empfiehlt sich, wenn Höhe und Breite relativ zu übergeordneten Containern responsiv sein sollen. Mit Prozentangaben werden die Elemente flexibel an unterschiedliche Bildschirmgrößen angepasst. Diese Einheit eignet sich für adaptive Bildschirmgrößen, die auf Tablets und Smartphones skaliert werden.
- Mit Automatisch legt Experience Builder die Größe und Position der Widgets anhand ihres Inhalts fest. Die Option eignet sich für dynamische Texte oder Bilder, bei denen sich der für den Inhalt benötigte Platz ändern kann. Verwenden Sie Automatisch, wenn Sie davon ausgehen, dass die Größe eines Elements variieren kann.
- Mit Strecken wird ein Element so angepasst, dass es den gesamten Container ausfüllt. Die Option eignet sich für Hintergrundbilder, Karten und alle anderen Inhalte, die den verfügbaren Platz vollständig ausfüllen sollen. Bei kleinen Bildschirmlayouts sollte diese Option nur mit Bedacht verwendet werden. Durch das Strecken vieler Widgets können kleine Bildschirme überladen wirken.
- Beginnen Sie mit großen Bildschirmlayouts, und bearbeiten Sie dann kleinere Layouts.
- Nachdem Sie ein großes Bildschirmlayout erstellt haben, verwenden Sie das Gerätemoduswerkzeug, um es auf Geräten mit mittleren und kleinen Bildschirmen anzuzeigen.
- Verwenden Sie ggf. die Layout-Option Benutzerdefiniert, um das Layout für Geräte mit mittleren und kleinen Bildschirmen anzupassen.
- Automatische Layouts synchronisieren Elemente über Bildschirmgrößen hinweg, sind jedoch möglicherweise nicht für komplexe Widget-Anordnungen geeignet.
- Mit benutzerdefinierten Layouts können Sie Widgets neu positionieren, ausblenden oder ihre Größe anpassen, um sie auf kleineren Bildschirmen benutzerfreundlicher darzustellen.
- Sorgen Sie für ein einheitliches Layout.
- Verwenden Sie einheitliche Abstände und Ausrichtungen, um eine optisch stimmige Experience zu erzeugen.
- Wenden Sie einheitliche Schriftschnitte und -farben sowie Abstände und Lücken für Widgets in allen Layouts an.
- Konfigurieren Sie Kopf- und Fußzeilen mithilfe der Werkzeuge Kopfzeile und Fußzeile in den Seiteneinstellungen, damit sie auf allen Seiten einheitlich angezeigt werden.
- Zeigen Sie eine Vorschau an, und testen Sie das Layout.
- Verwenden Sie das Werkzeug Live anzeigen, um das Layout im Builder zu testen.
- Verwenden Sie das Werkzeug Vorschau, um eine Vorschau der App in einem Browserfenster anzuzeigen. Sie können die Größe des Browserfensters ändern, um eine Vorschau Ihrer App auf verschiedenen Bildschirmgrößen anzuzeigen.
- Stellen Sie sicher, dass auf kleinen Bildschirmen Elemente nicht übereinander liegen oder über den Bildschirmrand hinausragen, Widgets nutzbar und lesbar sind und scrollfähige Bereiche keine wichtigen Navigationselemente oder Schaltflächen verdecken.