Erstellen hochauflösender Websites mithilfe von Adobe Muse

Verbesserungen in Adobe Muse CC 2014.3 | Februar 2015

Adobe Muse unterstützt jetzt HiDPI-Anzeigen, auf denen Windows läuft. Wenn Sie eine HiDPI-Hardware von Windows verwenden, werden Sie feststellen, dass die Benutzeroberfläche von Adobe Muse sehr viel schärfer angezeigt wird.

HiDPI steht für „High Dots Per Inch“ (hohe Punktzahl pro Zoll) und bezeichnet Bildschirme mit hoher Pixeldichte oder einfach hoher Auflösung. Mit höherer Pixeldichte können HiDPI-Bildschirme Text und Grafiken detailgenauer anzeigen als Standard-Displays. Beispielsweise kann ein Retina-Display, das auf dem Apple iPhone, iPad, iPod touch und auch einigen Windows-Geräten verfügbar ist, Text und Grafiken mit hoher Auflösung anzeigen.

In Adobe Muse erstellte Web-Designs können alle Vorteile der Anzeigequalität von hochauflösenden (HiDPI-) Bildschirmen, wie Apple-Retina-Displays, nutzen.

HiDPI in Muse zu nutzen ist ganz einfach:

• Ändern Sie die Auflösungseinstellung der Site zu HiDPI
• Erstellen Sie Bilder, die mindestens zweimal (2x) so groß sind wie auf der Site angezeigt

Wenn Sie eine HiDPI-Site aus Muse hochladen oder exportieren, enthält der generierte Code Bilder in Standardgröße und doppelter Größe und erkennt automatisch, welche Bilder verwendet werden sollen, wenn die Site auf einem HiDPI-Display oder einem Display mit Standardauflösung angezeigt wird.

Aktivieren von HiDPI in Adobe Muse

Über das Menü zur Auflösung im neuen Site-Dialogfeld haben Sie die Möglichkeit, zwischen HiDPI (2x) und Standard auszuwählen.

Sie können die Auflösungseinstellung ändern, nachdem Sie eine Site erstellt haben, indem Sie Datei > Site-Eigenschaften auswählen.

Erstellen von Elementen mit 2x-Bilddaten

Um alle Vorteile von HiDPI-Bildschirmen nutzen zu können, müssen die Elemente für eine Anzeige mit höherer Qualität eine höhere Auflösung haben. Die Größe eines Elements muss mindestens das Zweifache der Größe betragen, die auf der Website angezeigt werden soll.

2x-Bilder zu erstellen ist ganz einfach. Ein 2x-Element muss mindestens die doppelte Anzeigegröße haben als die Größe, die auf dem Bildschirm angezeigt wird. Beispiel:

Wenn Sie ein HiDPI-Element auf der Webseiten-Leinwand platzieren, optimiert Adobe Muse das Bild, indem die Größe auf 50 % reduziert wird. Die Reduzierung der visuellen Größe wird vorgenommen, um ein glatteres und effizienteres Gestaltungserlebnis zu ermöglichen. Solche Bilder werden im Elementebedienfeld durch 2x gekennzeichnet. Beachten Sie, dass Adobe Muse Daten des Originalelements beibehält, um eine höhere Pixeldichte bereitzustellen, wenn das Element auf einem HiDPI-Bildschirm angezeigt wird. Gerasterter Text sowie Effekte, die als Bilder ausgegeben werden, werden automatisch beim Veröffentlichen oder Exportieren mit 2x- und Standardgröße generiert.

Öffnen Sie das Elementebedienfeld (Fenster > Elemente), um sicherzustellen, dass Ihre Elemente 2x-Elemente sind und ausreichend Daten für die Anzeige mit höherer Qualität enthalten. Wenn ein Element genügend Daten enthält, wird das Symbol „2x“ daneben angezeigt. Wenn das 2x-Symbol nicht neben Ihrem Element angezeigt wird, enthält es nicht genug Daten, um mit der höchsten Qualität angezeigt zu werden, und wird in Standardauflösung angezeigt.

Exportieren von HiDPI-Bildern

Es gibt Sonderfälle, in denen Adobe Muse kein Bild mit hoher Auflösung als Bild mit 2x-Daten exportiert. Wenn Bilder auf die Größe von Containern skaliert werden, bei Seiten mit Hintergrundbildern, Diashows im Vollbildmodus usw., exportiert Adobe Muse bei der Veröffentlichung keine HiDPI-Version des Bildes. Genauer gesagt wird in folgenden Situationen nur die Standardversion des Bildes exportiert:

• 100 % Breite: Auf Seitengröße skalieren/Auf Fläche skalieren
• Vollbild-Diashow: Auf Seitengröße skalieren/Auf Fläche skalieren
• Browser/Seitenhintergrund: Auf Seitengröße skalieren/Auf Fläche skalieren

Beachten Sie außerdem, dass gekachelte Hintergrundbilder anders bearbeitet werden als Hintergrundbilder, für die „Auf Seitengröße skalieren/Auf Fläche skalieren“ ausgewählt wurde. Bei gekachelten Bildern stellt Adobe Muse beim Exportieren der Website sowohl Standardbilder als auch Bilder mit hoher Auflösung für Standard- und HiDPI-Bildschirme bereit.   Wenn Sie in Adobe Muse ein Bild mit hoher Auflösung mit 2x-Daten kacheln, wird es wie alle anderen Bilder behandelt und mit 50 % der Originalgröße auf der Webseiten-Leinwand platziert. Beim Exportieren wird das Bild mit halber Größe (50 %) in Standardauflösung und das native Bild mit hoher Auflösung mit 2x-Daten exportiert.

Berücksichtigen der Site-Besucher

Durch die HiDPI-Anzeige können Besucher Webinhalte in höchster Qualität anzeigen, da mehr Bilddaten verwendet werden. 2x-Bildgrößen führen zu Bilddateien, die vier Mal so groß wie ein Bild in Standardauflösung sind. Um HiDPI-Bilder ansehen zu können, müssen Site-Besucher 4-Mal mehr Daten laden. Damit Inhalte schneller auf HiDPI-Seiten angezeigt werden, exportiert Muse HiDPI-Elemente und Elemente in Standardauflösung. Die Elemente in Standardauflösung werden zuerst geladen und die HiDPI-Elemente werden zusätzlich zu den Standardversionen progressiv geladen.

Das HiDPI-Schaltflächen-Widget (ein/aus)

Für einige Besucher Ihrer Site ist das progressive Laden sehr praktisch. Für Besucher mit begrenzten Datenmengen oder anderen Verbindungen mit eingeschränkten oder teuren Downloadkontingenten kann diese Lösung jedoch problematisch sein. Für diese Site-Besucher haben Sie die Möglichkeit, das HiDPI-Schaltflächen-Widget (ein/aus) hinzuzufügen. Wenn die HiDPI-Schaltfläche (ein/aus) auf einer Seite platziert wird, lädt diese Seite zunächst nur die Standardauflösung und die HiDPI-Schaltfläche wird als deaktiviert angezeigt. Wenn der Besucher dann die HiDPI-Schaltfläche aktiviert, laden alle Seiten, die eine HiDPI-Schaltfläche (ein/aus) enthalten, ab diesem Punkt HiDPI-Bilder, bis der Besucher der Site HiDPI deaktiviert, den Browser schließt oder Cookies löscht. Seiten, die keine HiDPI-Schaltfläche (ein/aus) enthalten, laden immer HiDPI-Bilder, wenn sie auf einem HiDPI- oder Retina-Bildschirm angezeigt werden. Wird die Site nicht auf einem HiDPI-Bildschirm oder Retina-Gerät angezeigt, ist die Schaltfläche in einem nicht verfügbaren Status und nur Bilder in Standardauflösung werden geladen.