Erste Schritte mit responsivem Design in Adobe Muse

Lesen Sie die Informationen in diesem Artikel für eine Einführung zu responsivem Design in Adobe Muse. Erfahren Sie, wie Sie responsive Websites für jedes Gerät erstellen.

Hinweis:

Adobe Muse wird nicht mehr um neue Funktionen ergänzt und der Support wird am 26. März 2020 eingestellt. Detaillierte Informationen und Unterstützung erhalten Sie bei den Häufig gestellten Fragen (FAQ) zum Ende der Produktlebensdauer von Adobe Muse.

Beim Erstellen einer responsiven Website sollte man davon absehen, Haltepunkte hinzuzufügen, die auf einem bestimmten Gerät, Betriebssystem oder einer Produktmarke basieren. Haltepunkte zu definieren, die auf diesen Faktoren basieren, kann zu erhöhtem Wartungsaufwand führen. Stattdessen sollten das Layout und die Inhalte Ihrer Website bestimmen, wie und wo Sie Haltepunkte hinzufügen.

Erfahren Sie mehr über den empfohlenen Design-Ansatz, um eine responsive Site mithilfe von Adobe Muse zu erstellen.

Erstellen Sie eine Site. Wählen Sie „Variable Breite“ im Dialogfeld „Neue Site“.

Um Leerraum und andere Design-Probleme zu vermeiden, legen Sie die Seitenabmessungen fest. Klicken Sie auf „Erweiterte Einstellungen“, um die minimale und die maximale Seitenbreite und minimale Höhe für Ihre Website festzulegen.

Wählen Sie „Variable Breite“ im Dialogfeld „Neue Site“ aus.
Wählen Sie „Variable Breite“ im Dialogfeld „Neue Site“ aus.

 

 

 

Öffnen Sie eine Musterseite oder eine einzelne Seite. Beachten Sie den Standardhaltepunkt bei 960 Pixeln.

Beachten Sie den Standardhaltepunkt bei 960 Pixeln.
Beachten Sie den Standardhaltepunkt bei 960 Pixeln.

 

 

 

Arrangieren Sie Ihre Seitenelemente wie Text, Bilder, Diashows und Widgets an diesem Haltepunkt.

Gestalten Sie Ihre Webseite.
Gestalten Sie Ihre Webseite.

 

 

 

Verwenden Sie den Regler, um verschiedene Browser-Breiten zu simulieren. Sie sehen so, wie Ihre Site in verschiedenen Browser-Breiten angezeigt wird.

Verwenden Sie den Regler, um zu sehen, wie Ihre Webseite in verschiedenen Browser-Breiten angezeigt wird.
Verwenden Sie den Regler, um zu sehen, wie Ihre Webseite in verschiedenen Browser-Breiten angezeigt wird.

 

 

 

Fügen Sie dort, wo Ihr Design umbricht, einen Haltepunkt hinzu. Beispielsweise sehen Sie im vorherigen Bild ein Textfeld, das die Breite überschreitet, wenn Sie am Regler ziehen. Fügen Sie einen Haltepunkt an der Breite hinzu, wo das Design umbricht.

Fügen Sie dort, wo das Design umbricht, einen Haltepunkt hinzu.
Fügen Sie dort, wo das Design umbricht, einen Haltepunkt hinzu.

 

 

 

Richten Sie Ihr Layout an dem neuen Haltepunkt aus, damit Ihre Site gut angeordnet aussieht.

Passen Sie Ihr Layout an den Haltepunkt an.
Passen Sie Ihr Layout an den Haltepunkt an.

 

 

 

Lassen Sie Ihre Site in der Vorschau bis auf die minimale Breite anzeigen. Fügen Sie Haltepunkte hinzu und optimieren Sie Ihr Layout, wo nötig.

Mit diesem Design-Ansatz sieht Ihre Site in jeder Browser-Breite auf jedem Gerät gut aus. Ihr Design funktioniert unabhängig vom Gerät oder der Bildschirmgröße.

Adobe-Logo

Bei Ihrem Konto anmelden