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 auf der Seite zum Ende der Produktlebensdauer von Adobe Muse.

Responsives Design wird in Versionen von Adobe Muse ab Februar 2016 unterstützt. Wenn Sie Websites in Versionen vor Februar 2016 erstellt haben, können Sie Ihre Sites in responsive Designs konvertieren.

Warum sollte ich zum responsiven Layout migrieren?

Wenn Sie ein bestehendes Adobe Muse-Projekt mit alternativem Layout haben, können Sie es zum responsiven Layout migrieren. Sie können aber auch mit alternativen Layouts weiterarbeiten.  

Responsive Sites sind in der Regel synonym mit viel Kodierung und komplexen Vorlagen. Adobe Muse bietet Ihnen erstmals die Möglichkeit, responsive Sites ohne jegliche Kodierung und ohne Raster oder Vorlagen zu erstellen. Darüber hinaus können Sie basierend auf einer einzigen Datei vollständig responsive Sites erstellen, die auf jedem Endgerät und bei jeder Bildschirmgröße richtig angezeigt werden. Separate Layouts gehören jetzt der Vergangenheit an!

Mit dem responsiven Design in Adobe Muse lassen sich auch Text und Bilder problemlos aktualisieren. Damit sind die Zeiten, in denen Sie stundenlang jedes einzelne Layout mit derselben Änderung aktualisiert haben, vorbei. Responsives Layout wird auch vom In-Browser Editing, einer App, mit der Site-Inhalt in einem Browser bearbeitet werden kann, unterstützt.

Adobe Muse bietet auch eine Reihe praktischer Funktionen bei der Gestaltung Ihrer Site. Sie können wählen, ob bestimmte Objekte an bestimmten Haltepunkten angezeigt oder ausgeblendet werden sollen. Beispielsweise können Sie wählen, ob beim Aufrufen Ihrer Site auf einem mobilen Gerät berührungsfreundliche Menüoptionen angezeigt werden sollen. Außerdem besteht die Möglichkeit, Objekte an einer Position zu fixieren oder Objekte an bestimmten Haltepunkten neu zu positionieren.

Lesen Sie weiter, um zu erfahren, wie Sie Ihre vorhandenen Adobe Muse-Sites zum responsiven Layout migrieren. Migrieren Sie Ihre Site zum responsiven Design und machen Sie Ihre Websites zukunftsfreundlich.

Wie werden alternative Layouts zum responsiven Layout migriert?

Bevor Sie Ihre Website zum responsiven Layout migrieren, sollten Sie eine Übersicht über das responsive Webdesign in Adobe Muse lesen.

So beginnen Sie mit der Migration Ihrer Site zum responsiven Layout:

  1. Öffnen Sie Ihre vorhandene Website.

  2. Öffnen Sie jede Seite in Ihrer Website und klicken Sie auf „Seite“ > „Seiteneigenschaften“.

    Klicken Sie auf „Seiteneigenschaften“.
  3. Ändern Sie auf der Registerkarte „Layout“ die Option „Feste Breite“ in „Variable Breite“. In diesem Fenster können Sie auch die minimale und maximale Seitenbreite, Ränder und Innenabstände festlegen.

    Klicken Sie auf „OK“.

    Ändern von „Feste Breite“ zu „Variable Breite“
    Ändern Sie im Fenster „Seiteneigenschaften“ „Feste Breite“ zu „Variable Breite“.

  4. Damit auch alle neu hinzugefügten Seiten variabel sind, klicken Sie auf „Datei“ > „Site-Eigenschaften“. Ändern Sie in diesem Fenster die Option „Feste Breite“ in „Variable Breite“.

  5. Wählen Sie die maximale Seitenbreite, Mindestbreite und Mindesthöhe für das Layout aus.

  6. Klicken Sie auf „OK“.

  7. Gehen Sie zur Musterseite und zu den einzelnen Seiten, um Ihre Seiten in fließendes Breite zu öffnen.

    Um Responsive Design effektiv nutzen möchten, deaktivieren Sie Bildlaufeffekte. Wenn Sie die Bildlaufeffekte für bestimmte Seiten beibehalten möchten, verwenden Sie für diese Seiten „Feste Breite“.

    Wenn Sie die Seiten in variabler Breite öffnen, ist für die Objekte auf der Seite standardmäßig eine feste Breite eingestellt. Die Objekte werden außerdem auf der linken Seite angeheftet.

  8. Ändern Sie die Objekte in variabel, sodass sie relativ zur Browserbreite skaliert werden. Klicken Sie mit der rechten Maustaste auf jedes einzelne der variablen Objekte und wählen Sie die responsive Option aus.

    Deaktivieren Sie die Fixierung, wenn Sie möchten, dass die Objekte variabel sind. Klicken Sie zum Deaktivieren der Verankerung mit der rechten Maustaste auf das Objekt und wählen Sie „Auf Seite verankern“ > „Variabel“.

  9. Verwenden Sie den Regler, um das Layout mit verschiedenen Seitenbreiten anzuzeigen.

    Sie werden bemerken, dass einige Widgets nicht variabel sind. Fügen Sie Haltepunkte an den Seitenbreiten hinzu, wo Widgets das Design umbrechen. Sie können das Widget für diesen Haltepunkt dann entweder skalieren oder ausblenden.

    Standardmäßig ist die Haltepunktleiste nicht sichtbar, wenn Sie mit einer Website arbeiten, die in früheren Versionen erstellt wurde. Klicken Sie auf „Ansicht“ > „Haltepunkte anzeigen“, um die Haltepunkte anzuzeigen.

    Anzeigen von Haltepunkten über das Menü „Ansicht“
    Klicken Sie auf „Ansicht“ > „Haltepunkte anzeigen“.

    Hinweis:

    Wenn Sie Ihr Layout im responsiven Design planen, gestalten Sie Ihre Seiten zuerst für die größte Seitenbreite. Zeigen Sie die Seiten dann mithilfe des Reglers mit unterschiedlichen Browserbreiten an. Wenn Ihr Design umbricht, fügen Sie Haltepunkte an diesen Breiten hinzu. Passen Sie dann Ihr Layout an diesen Haltepunkten an.

    Generell sollten die eingefügten Haltepunkte primär an das Layout Ihrer Site angepasst sein, nicht an die Bildschirmgröße der Mobilgeräte von Benutzern.

  10. Passen Sie die Größe und Position der Objekte an und formatieren Sie den Text, sodass das Layout bei allen Browserbreiten korrekt ist. Weitere Informationen zum Anordnen von Objekten in responsiven Layouts finden Sie unter Anordnen von Objekten.

    Hinweis:

    Wenn Sie Objekte anordnen, überprüfen Sie den Abstand zwischen den Objekten und den Abstand zwischen dem Objekt und dem Rand des Browsers. Unter Umständen müssen Sie die Objektplatzierung anpassen oder weitere Haltepunkte hinzufügen, um die Entwurfsprobleme zu beheben, die zwischen Haltepunkten auftreten.

  11. Prüfen Sie die Ausrichtung und die Lesbarkeit des Textes an allen Haltepunkten. Wenn Sie das Textfeld neu ausrichten oder den Text für bestimmte Seitenbreiten formatieren möchten, lesen Sie Formatieren von Text im responsiven Layout.

  12. Zeigen Sie die Änderungen in der Vorschau an, indem Sie den Regler auf bestimmte Haltepunkte ziehen, oder zeigen Sie die Änderungen in einem Webbrowser in einer Vorschau an.

  13. Löschen Sie alle alternativen Layouts Ihrer Website, die Sie möglicherweise für andere Geräte erstellt haben. Responsives Webdesign ermöglicht es Ihnen, Ihre Site für alle Geräte in einer einzelnen Arbeitsfläche zu migrieren und zu verwalten.

Ihre responsive Website kann nun veröffentlicht werden.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie