Lesen Sie diesen Artikel, um zu erfahren, wie Sie Websites für mobile Geräte oder Smartphones 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 auf der Seite zum Ende der Produktlebensdauer von Adobe Muse.

Sie können Websites für mobile Geräte erstellen und gestalten, indem Sie responsives Webdesign in Adobe Muse nutzen. Dank des responsiven Layouts können Sie eine einzelne Muse-Datei für die Erstellung von Websites für alle Geräte, einschließlich Smartphones, verwenden.

Bestimmen Sie zunächst die Browserbreite, für die Sie Ihre Website erstellen möchten. Sie können dann damit fortfahren, die Website zu entwerfen. Weitere Informationen über das Erstellen von Websites für Mobilgeräte mit einem responsiven Layout finden Sie unter Erstellen von responsiven Websites.

Wenn Sie ein alternatives Layout ausschließlich für mobile Websites gestalten möchten, lesen Sie den folgenden Artikel.

Gestalten von Websites nur für mobile Geräte

Mit Adobe Muse können Sie Site-Layouts für Webinhalte erstellen, die auf Desktop-Computern, Smartphones und Tablets angezeigt werden können. Mithilfe der mobilen Designfunktionen können Sie alternative Layouts für Smartphones und Tablets sowie für Desktop-PCs erstellen.

Adobe Muse enthält Einstellungen, wie z. B. einen 100 % Breiten-Umschalter und „Footer immer unten“, um sicherzustellen, dass Designs auf den unterschiedlichsten auf dem Markt erhältlichen Gerätebildschirmen gut gerendert werden. Mit Adobe Muse können Sie vertraute Arbeitsabläufe verwenden, um ansprechende Designs für jede mögliche Bildschirmabmessung zu erstellen.

So erstellen Sie ein alternatives Layout für mobile Geräte:

  1. Öffnen Sie Adobe Muse und klicken Sie auf „Datei“ > „Neue Site“.

    Wählen Sie „Feste Breite“ aus, um Sites für spezifische Geräte zu erstellen.
    Wählen Sie „Feste Breite“ aus, um mobile Websites zu erstellen.

  2. Wählen Sie „Feste Breite“ aus und klicken Sie dann im selben Dialogfeld auf „Erweiterte Einstellungen“.

    Erweiterte Einstellungen für neue Sites
    Erweiterte Einstellungen für das Erstellen einer neuen Site.

  3. Geben Sie die „Maximale Seitenbreite“ an.

    Bestimmen Sie die entsprechende Browserbreite für Mobiltelefone und geben Sie den Wert ein.

  4. Geben Sie die Ränder und Innenabstände für Ihre mobile Site ein. Geben Sie die folgenden Informationen ein:

    • Seitenbreite und -höhe: Ermöglicht es Ihnen, die anfänglichen Abmessungen der Seite festzulegen. Muse erhöht die Höhe der Seite automatisch, während Sie weitere Inhalte hinzufügen. Deshalb wird kein Höchstwert für die Seitenhöhe festgelegt.
    • Spalten und Spaltenbreite: Spalten teilen eine Muse-Webseite visuell in gleiche Teile, sodass Sie die Designelemente genau ausrichten können. Muse legt die Spaltenbreite für die angegebene Anzahl von Spalten und den Wert für den Abstand zwischen den Spalten automatisch fest.
    • Ränder und Innenabstände: Ränder schaffen einen freien Bereich um die Webseite herum, außerhalb des Designbereichs. Innenabstände ermöglichen die Schaffung freier Bereiche innerhalb des Designbereichs der Webseite.

    Klicken Sie auf „OK“.

    Sie können nun mit der Gestaltung Ihrer Layouts für die mobile Website beginnen.

Hinzufügen eines Telefon-Layouts zu einer bestehenden Adobe Muse-Site

Wenn Sie ein neues Projekt erstellen, können Sie zunächst eines der Layouts entwerfen und anschließend innerhalb der gleichen Muse-Datei zusätzliche Layouts erstellen.  Wenn Sie eine Site veröffentlichen oder exportieren, generiert Adobe Muse automatisch eine Datei namens „sitemap.xml“, die eine Liste aller Seiten für alle Layouts enthält. Die „sitemap.xml“-Datei wird zusammen mit den anderen Site-Elementen hochgeladen. Das verbessert die Suchmaschinenoptimierung (SEO) einer Site, da es Suchmaschinen die Indexierung der Site erleichtert, sodass Seiten in den Suchergebnissen korrekt platziert werden.

Um ein neues mobiles Layout für ein Smartphone zu erstellen, ist einer der ersten erforderlichen Schritte die Überprüfung des Inhalts einer bestehenden Site, um festzulegen, welche Elemente für die Smartphoneanzeige notwendig sind. Da Smartphonebenutzer häufig unterwegs sind und Inhalte auf einem kleineren Bildschirm ansehen, ist es wichtig, das Design zu vereinfachen und nur nützliche Inhalte anzuzeigen, die einfach über einen Touchscreen verwendet werden können.

  1. Öffnen Sie die vorhandene Muse-Datei, der Sie ein alternatives Telefon-Layout hinzufügen möchten.

  2. Öffnen Sie jede Seite in Ihrem Projekt und klicken Sie auf „Seite“ > „Alternatives Layout hinzufügen“ > „Telefon“.

    Hinzufügen von Telefon-Layout-Optionen
    Fügen Sie ein Telefon-Layout hinzu, um eine mobile Website zu erstellen.

  3. Sie können das Menü verwenden, um ein bestehendes Layout zum Kopieren auszuwählen. Wählen Sie im Rahmen dieses Artikels die Option Desktop, um das Desktop-Layout in das Telefon-Layout zu kopieren.

    Beachten Sie, dass Sie die Möglichkeit haben, auch den Siteplan, die Seitenattribute und die Browser-Füllung zu kopieren. Lassen Sie die Standardeinstellungen stehen, um die bestehenden Desktopinformationen in das Smartphonelayout zu kopieren.

  4. Klicken Sie auf „OK“, um das Dialogfeld zu schließen und das Telefon-Layout hinzuzufügen.

    Muse erstellt nun einen Siteplan für das Smartphonelayout. Seitennamen, Site-Struktur und Attribute der Musterseite werden kopiert. Die Schaltfläche für das Smartphonelayout wird nun nicht mehr mit einem Pluszeichen (+) neben dem Namen angezeigt, da dieses Layout nun zum Muse-Projekt hinzugefügt wurde.

    Beachten Sie, dass der tatsächliche Seiteninhalt nicht zum Miniaturbild des Smartphonelayouts hinzugefügt wird. Dies ist absichtlich geschehen, damit Sie die Möglichkeit haben, nur den Inhalt zu kopieren, den Sie tatsächlich auf den Seiten Ihres mobilen Layouts haben möchten. Wenn Sie den gewünschten Inhalt zu jeder neuen Seite hinzufügen, können Sie die Größe an die kleineren Abmessungen von Mobilgeräten anpassen.

    Sie können neue Seiten hinzufügen, indem Sie rechts auf der Startseite auf das Pluszeichen klicken. Nachdem Sie die Sitemap eingerichtet haben, können Sie mit dem Design des mobilen Layouts beginnen.

    Im nächsten Abschnitt erfahren Sie, wie Sie die Musterseiten für das Telefon-Layout einrichten.

    Erstellen Sie die Sitemap für das mobile Layout, indem Sie neue Seiten hinzufügen
    Erstellen Sie die Sitemap für das mobile Layout, indem Sie neue Seiten hinzufügen.

Einrichten der Musterseite und Hinzufügen von häufig verwendeten Webseitenelementen

  1. Doppelklicken Sie in der Planungsansicht auf die A-Musterseite des Smartphonelayouts, um sie in der Entwurfsansicht zu öffnen.

  2. Legen Sie in der Oberfläche „Browser-Füllung“ das Hintergrundbild fest.

  3. Klicken Sie im Bildabschnitt auf Bild hinzufügen. Wählen Sie die Datei aus, die Sie als Hintergrundbild festlegen möchten.

    Fügen Sie Bildoptionen hinzufügen
    Fügen Sie der Musterseite für das Smartphonelayout ein Hintergrundbild hinzu.

  4. Wählen Sie im Menü Anpassen die Option „Auf Füllung skalieren“ und klicken Sie dann auf die mittlere Position.

  5. Klicken Sie auf den grauen Bereich außerhalb der Seite oder auf eine beliebige Stelle im Steuerungsbedienfeld, um die Oberfläche Browser-Füllung zu schließen.

Hinzufügen von Hyperlinks für die Site-Navigation

In Adobe Muse können Sie mithilfe von Hyperlinks ganz einfach Verknüpfungen zu externen Seiten, herunterladbaren Dateien, Abschnitten in Webseiten usw. erstellen. Die Einrichtung einer geeigneten Navigation auf Ihrer Site ist wichtig, um sicherzustellen, dass Besucher problemlos durch die Seiten Ihrer Website navigieren können. Mit einer korrekt formatierten Site-Navigation optimieren Sie Ihre Website auch für Suchmaschinen. Weitere Informationen finden Sie unter Erstellen von Hyperlinks.

Im Dropdown-Menü Hyperlinks werden Seiten- oder Ankerlinks aufgeführt, die zu Ihrer Sitemap hinzugefügt wurden. Beginnen Sie mit der Eingabe des Namens der Seite oder des Ankers, um nach den richtigen Verknüpfungen zu suchen. Sie müssen nur die ersten Buchstaben eingeben und das Hyperlinkmenü filtert die Ergebnisse und zeigt sie in einer Dropdown-Liste an. Auf diese Weise können Sie problemlos auf die Hyperlinks zugreifen, die Sie rasch aktualisieren möchten.

Hyperlinks Optionen
Filtern Sie die Liste der Verknüpfungen, indem Sie die ersten Buchstaben in das Menüfeld „Hyperlinks“ eingeben.

Hinzufügen von Inhalt zu den Telefon-Layoutseiten

Zunächst stellen Sie die Homepage fertig.

  1. Klicken Sie auf die Registerkarte „Interior (Telefon)“. Kopieren Sie die gesamte Gruppe von vier nummerierten Schaltflächen.
  2. Springen Sie mithilfe der Funktion „Gehe zu Seite“ zur „Homepage (Telefon)“, und fügen Sie die Gruppe ein. Die Hyperlinks, die Sie im vorherigen Abschnitt hinzugefügt haben, werden beibehalten. Daher weisen nun die Homepage und die Musterseite „Interior“ (Innen) dieselbe Navigation auf.
  3. Verschieben Sie die Gruppe mit dem Auswahlwerkzeug in die Mitte der Homepage, und zwar in den unteren Bereich der Fußzeile.
  4. Klicken Sie auf die Registerkarte „Scratch (Desktop)“, um zur Seite „Scratch“ zurückzukehren. Kopieren Sie den Textrahmen im Block ganz links, in dem sich der Text „There's more than one way to solve a problem“ befindet.
  5. Klicken Sie auf die Registerkarte „Homepage (Telefon)“, und fügen Sie den Textrahmen ein. Verschieben Sie den Textrahmen mit dem Auswahlwerkzeug so, dass er sich mittig über der Gruppe von Schaltflächen befindet.
Das Homepage-Design ist abgeschlossen
Das Homepage-Design ist abgeschlossen.

Als Nächstes fügen Sie den Seiteninhalt der Seite „Section 01“ (Abschnitt 01) hinzu.

  1. Klicken Sie auf die Registerkarte „Scratch (Desktop)“, um zur Seite „Scratch“ zurückzukehren. Wählen Sie das weiße, abgerundete Hintergrundrechteck und drei Textrahmen im zweiten Block von links aus. Die drei Textrahmen enthalten den Kreis 01, den Platzhaltertext für „Section 01“ (Abschnitt 01) und die orangefarbene Schaltfläche „Telefon“. Kopieren Sie die ausgewählten Elemente.
  2. Drücken Sie Befehlstaste+J (Mac) oder Strg+J (Windows), und geben Sie die ersten Buchstaben von „Section 01“ (Abschnitt 01) ein. Drücken Sie den Abwärtspfeil, um die Telefonseite „Section 01“ (Abschnitt 01) auszuwählen, und drücken Sie die Eingabetaste bzw. den Zeilenschalter, um die Seite in der Entwurfsansicht zu öffnen.
  3. Fügen Sie die Elemente auf der Seite „Section 01“ (Abschnitt 01) des Telefon-Layouts ein. Zentrieren Sie sie mit dem Auswahlwerkzeug und mithilfe der Hilfslinien, die vorübergehend angezeigt werden, auf der Seite.

Die Seite „Section 01“ (Abschnitt 01) soll eine kurze Einführung in das Unternehmen bieten und es Mobilbenutzern ermöglichen, das Unternehmen problemlos anzurufen. Wenn Sie Websites für Mobilgeräte entwickeln, können Sie einen neuen Verknüpfungstyp hinzufügen, der die Wählfunktion des Smartphones aufruft, um eine Nummer zu wählen. Dies ist eine hervorragende Funktion, weil potenzielle Kunden auf diese Weise sehr einfach ein Unternehmen anrufen können.

Führen Sie folgende Schritte durch, um eine Verknüpfung, mit der eine Telefonnummer gewählt wird, zu einem mobilen Layout hinzuzufügen:

  1. Wählen Sie mit dem Auswahlwerkzeug die Schaltfläche „Telefon“ aus.
  2. Geben Sie im Menüfeld „Hyperlinks“ Folgendes ein: „tel:“ und dann eine Telefonnummer. Beispielsweise so:
    tel:+14155551234

Dies ist das Format, an dem mobile Browser eine Telefonnummernverknüpfung erkennen.

  1. Drücken Sie die Eingabetaste bzw. den Zeilenschalter, um die Verknüpfung zu speichern.

Hinweis: Wenn Sie es vorziehen, eine E-Mail-Verknüpfung zu erstellen, können Sie das folgende Format in das Menüfeld „Hyperlinks“ eingeben:
mailto:designers@design-is-fun.com

Nachdem Sie den Hyperlink zur Schaltfläche „Telefon“ hinzugefügt haben, ist das Design der Seite „Section 01“ (Abschnitt 01) abgeschlossen.

  1. Klicken Sie auf die Registerkarte „Scratch (Desktop)“, um zur Seite „Scratch“ zurückzukehren. Wählen Sie das weiße, abgerundete Hintergrundrechteck, den grünen Kreis 02, den Textrahmen „Section 02“ (Abschnitt 02), die eingebettete Karte und die grüne Schaltfläche „Map“ (Karte) aus. Kopieren Sie die ausgewählten Elemente.
  2. Drücken Sie Befehlstaste+J (Mac) oder Strg+J (Windows), und geben Sie die ersten Buchstaben von „Section 02“ (Abschnitt 02) ein. Drücken Sie den Abwärtspfeil, um die Telefonseite „Section 02“ (Abschnitt 02) auszuwählen, und drücken Sie die Eingabetaste bzw. den Zeilenschalter, um die Seite in der Entwurfsansicht zu öffnen.
  3. Fügen Sie die Elemente ein, die Sie in Schritt 1 auf der Seite „Section 02“ (Abschnitt 02) des Telefon-Layouts kopiert haben. Zentrieren Sie sie mit dem Auswahlwerkzeug und mithilfe der Hilfslinien auf der Seite.

Die Seite „Section 02“ (Abschnitt 02) enthält eingebetteten HTML-Code, der auf der Google Maps-Website generiert wurde, um eine interaktive Karte zu erstellen.

Wenn Sie bereits das Tutorial „Erste Schritte mit Muse“ durchgearbeitet haben, haben Sie Quellcode von Google Maps von der Google-Website kopiert und ihn mit der eingebetteten HTML-Funktion von Muse auf der Seite eingefügt.

Der Code von Google Maps enthält bereits Unterstützung für Touchscreen-Fingergesten, sodass Besucher mit entsprechenden Geräten einfach mit der Karte interagieren können. In diesem Beispielprojekt werden die Kartenabmessungen bereits angepasst.

Wenn Sie jedoch die Abmessungen des eingebetteten HTML-Inhalts in Ihren Projekten ändern möchten, können Sie mit der rechten Maustaste auf den Inhalt klicken und „HTML bearbeiten“ wählen, um den Code im HTML-Fenster anzuzeigen. Sie können die Höhen- und Breitenwerte im Code bearbeiten, um die Karte zu skalieren, sodass sie auf einen kleineren Bildschirm passt.

Skalieren eingebetteter HTML-Elementabmessungen im Code
Wenn eingebettete HTML-Elemente skaliert werden müssen, können Sie die Abmessungen im Code bearbeiten.

Wenn Sie das Fenster „HTML bearbeiten“ geöffnet haben, klicken Sie auf „OK“, um es zu schließen, ohne Änderungen vorzunehmen.

  1. Wählen Sie die Schaltfläche „Map“ (Karte) aus.

Diesmal fügen Sie einen Hyperlink zu einer externen Website (Google Maps) hinzu, sodass Besucher mit Mobilgeräten die Vollversion der Karte in einem neuen Browserfenster anzeigen können.

  1. Kopieren Sie den folgenden Hyperlink und fügen Sie ihn in das Menüfeld „Hyperlinks“ ein:

https://maps.google.com/maps?q=adobe+systems,+san+francisco&hl=en&sll=37.269174,-119.306607&sspn=17.492546,19.160156&hq=adobe+systems,&hnear=San+Francisco,+California&t=m&z=14

  1. Klicken Sie auf das Wort „Hyperlinks“ auf der linken Seite neben dem Menü „Hyperlinks“. Aktivieren Sie im daraufhin angezeigten Dialogfeld das Kontrollkästchen „Link in einem neuen Fenster bzw. einer neuen Registerkarte laden“. Geben Sie außerdem in das Feld „QuickInfo“ folgenden Text ein: Map to Adobe Fremont (Karte zu Adobe Fremont).
Hyperlinkoptionen
Den Link so einstellen, dass er in einem neuen Fenster bzw. einer neuen Registerkarte geladen wird, und eine QuickInfo hinzufügen.

  1. Klicken Sie auf eine Stelle außerhalb des Dialogfelds „Hyperlinks“, um es zu schließen.

Als Nächstes fügen Sie den Seiteninhalt der Seite „Section 03“ (Abschnitt 03) hinzu.

  1. Klicken Sie auf die Registerkarte „Scratch (Desktop)“, um zur Seite „Scratch“ zurückzukehren. Wählen Sie das weiße, abgerundete Hintergrundrechteck, den violetten Kreis 03, den Textrahmen „Section 03“ (Abschnitt 03), das Kontaktformular und die Schaltfläche „Submit“ (Senden) aus. Kopieren Sie die ausgewählten Elemente.
  2. Drücken Sie Befehlstaste+J (Mac) oder Strg+J (Windows), und geben Sie die ersten Buchstaben von „Section 03“ (Abschnitt 03) ein. Drücken Sie den Abwärtspfeil, um die Telefonseite „Section 03“ (Abschnitt 03) auszuwählen, und drücken Sie die Eingabetaste bzw. den Zeilenschalter, um die Seite in der Entwurfsansicht zu öffnen.
  3. Fügen Sie die Elemente ein, die Sie in Schritt 1 auf der Seite „Section 03“ (Abschnitt 03) des Telefon-Layouts kopiert haben. Zentrieren Sie sie mit dem Auswahlwerkzeug und mithilfe der Hilfslinien auf der Seite. Die Stile, die auf die Desktop-Version des Kontaktformular-Widgets angewendet wurden, werden beim Kopieren zum Telefon-Layout beibehalten. Die einzige Änderung, die vorgenommen wurde, war die Skalierung des Formulars und seiner Elemente, um sie an einen kleineren Bildschirm anzupassen.

Die Seite „Section 03“ (Abschnitt 03) enthält ein Kontaktformular-Widget, das serverbasierte Business Catalyst-Skripts und -Datenbank verwendet, um die gesendeten Formulardaten zu verarbeiten. Wenn Sie auf „Veröffentlichung“ klicken und die Dateien der Website von Muse hochladen, funktioniert das Formular automatisch.

Hinweis: Zwar können Sie andere Provider zum Hosten Ihrer fertigen Muse-Website verwenden, doch müssen Sie in diesem Fall den Code etwas modifizieren, um Kontaktformulare funktionsfähig zu machen, die nicht auf Business Catalyst-Servern gehostet werden.

In diesem Beispielprojekt wurde die für das Kontaktformular die CAPTCHA-Funktion nicht aktiviert. CAPTCHA ist eine Einstellung im Menü „Optionen“ für Kontaktformular-Widgets, die Sie hinzufügen können, um zu bestätigen, dass das Formular von einem Menschen und nicht einem Skript oder Spam-Bot gesendet wurde. Die CAPTCHA-Oberfläche zeigt ein Bild mit einer Reihe von Zeichen an, die der Besucher korrekt eingeben muss, bevor die Mitteilung über das Formular gesendet werden kann. Zwar können Formulareinsendungen durch Spam-Bots lästig sein, doch in diesem Fall sollten Sie die Benutzerfreundlichkeit der Site auf einem Mobiltelefon berücksichtigen. Wenn das Ausfüllen des Formulars zu schwierig ist, machen sich Besucher möglicherweise nicht die Mühe, ihre Nachricht zu senden.

Die Seite „Section 03“ (Abschnitt 03) ist nun abgeschlossen. Es ist nicht notwendig, einen Hyperlink zur Schaltfläche „Submit“ (Senden) hinzuzufügen, da dies bereits vom Kontaktformular-Widgets übernommen wurde.

Die letzte Seite des Telefon-Layouts, „Section 04“ (Abschnitt 04), enthält ein Diashow-Widget. Widgets in Muse wurden für alle modernen Desktop- und mobilen Browser entwickelt und getestet. Sie brauchen daher nichts zu ändern, um die Diashow auf einem Touchscreen wiedergeben zu können.

Führen Sie folgende Schritte aus, um den Inhalt von der Scratch-Seite des Desktop-Layouts auf die Seite „Section 04“ (Abschnitt 04) des Smartphonelayouts zu kopieren:

  1. Klicken Sie auf die Registerkarte „Scratch (Desktop)“, um zur Seite „Scratch“ zurückzukehren. Wählen Sie das weiße lange Hintergrundrechteck, den roten Kreis 04, das Diashow-Widget und den Textrahmen „Section 04“ (Abschnitt 04) aus. Sie können mit dem Auswahlwerkzeug klicken und über alle Elemente ziehen, um sie alle gleichzeitig auszuwählen. Kopieren Sie die ausgewählten Elemente.
  2. Drücken Sie Befehlstaste+J (Mac) oder Strg+J (Windows), und geben Sie die ersten Buchstaben von „Section 04“ (Abschnitt 04) ein. Drücken Sie den Abwärtspfeil, um die Telefonseite „Section 04“ (Abschnitt 04) auszuwählen, und drücken Sie die Eingabetaste bzw. den Zeilenschalter, um die Seite in der Entwurfsansicht zu öffnen.
  3. Fügen Sie die Elemente ein, die Sie in Schritt 1 auf der Seite „Section 03“ (Abschnitt 03) des Telefon-Layouts kopiert haben. Zentrieren Sie sie mit dem Auswahlwerkzeug und mithilfe der Hilfslinien auf der Seite. Die Stile, die auf die Desktop-Version des Kontaktformular-Widgets angewendet wurden, werden beim Kopieren zum Telefon-Layout beibehalten. Die einzige Änderung, die vorgenommen wurde, war die Skalierung des Formulars und seiner Elemente, um sie an einen kleineren Bildschirm anzupassen. Wenn Sie Widgets mit interaktiven Funktionen (z. B. Diashow-Widgets) zu in Muse erstellten mobilen Layouts hinzufügen, werden Sie feststellen, dass das Optionsbedienfeld folgende Option enthält: Wischen aktivieren. Diese Einstellung ist standardmäßig aktiviert. Daher werden alle Widgets, die Sie Ihren mobilen Designs hinzufügen, automatisch so eingerichtet, dass Besucher auf Touchscreens tippen und entsprechende Gesten verwenden können. Die Seite „Section 04“ (Abschnitt 04) enthält ein Diashow-Widget, das ein entsprechendes Bild anzeigt, wenn auf eine Miniatur getippt wird. Die Diashow ist so konfiguriert, dass beim Wechseln zwischen den Bildern in der Galerie ein horizontaler Übergang verwendet wird. In diesem Beispiel muss der Benutzer selbst tätig werden, um die Fotos anzuzeigen. Sie können jedoch das Diashow-Widget auch so einstellen, dass es beim Laden der Seite die Bilder automatisch wiedergibt.

Hinweis: Wenn Sie die Diashow-Widgets für die Verwendung der Übergänge „Verblassen“, „Horizontal“ oder „Vertikal“ konfigurieren, wird durch den Code in Muse automatisch die Wischgeste aktiviert, sodass Besucher mit Touchscreen mit dieser Geste durch die Bilder der Diashow blättern können.

Im nächsten Abschnitt Erstellen mobiler Layoutdesigns in Muse erfahren Sie, wie Sie Elemente mühelos über alle mobilen Plattformen hinweg aktualisieren und Ihre Muse-Site für jedes mobile Layout veröffentlichen.

Aktualisieren und Optimieren von Elementen für Ihre mobile Website

Verglichen mit Desktopcomputern haben Tablets und Smartphones einen deutlich leistungsärmeren Prozessor, langsamere Verbindungsgeschwindigkeiten und weniger Speicherkapazität. Diese Einschränkungen müssen beim Entwickeln und Bereitstellen von Website-Designs für mobile Geräte berücksichtigt werden.

Muse enthält Funktionen, die Ihnen helfen, die in mobilen Layouts angezeigten Grafiken zu optimieren, um sicherzustellen, dass die Website schnell geladen wird und gut funktioniert.

  1. Drücken Sie die Befehlstaste/Strg+7, um das Desktop-Layout anzuzeigen, und doppelklicken Sie dann auf die A-Musterseite für den Desktop, um sie in der Entwurfsansicht zu öffnen.
  2. Öffnen Sie das Elementebedienfeld, indem Sie auf die entsprechende Registerkarte im Bedienfeldfenster klicken, um sie zu aktivieren. Wenn es geschlossen ist, wählen Sie stattdessen „Fenster“ > „Elemente“ aus.
  3. Wählen Sie das große Hintergrundbild mit den grünen Hügeln aus. Das Element wird im Elementebedienfeld markiert.
  4. Klicken Sie auf den Namen des Elements (background.jpg), um die Liste der Instanzen zu erweitern, die in der Site verwendet werden. Beachten Sie, dass die Hintergrundbilddatei dreimal mit zwei verschiedenen Symbolen aufgeführt wird. Dies weist darauf hin, dass sie im Telefon- und im Desktop-Layout verwendet wird.
Elementebedienfeld
Überprüfen Sie die Instanzen von „background.jpg“ im Elementebedienfeld, um zu ermitteln, wo das Element in der Website vorhanden ist.

Bei dieser kleinen Beispiel-Website ist die Liste der Elemente noch recht überschaubar, doch wenn Sie größere Sites erstellen, kann die Liste länger und unübersichtlicher werden.

Um einfacher durch die Liste der Elemente navigieren zu können, können Sie den ersten Punkt für jedes Element auswählen und auf den Pfeil links daneben klicken, um die Gruppe auszublenden. Klicken Sie erneut darauf, wenn Sie sie wieder erweitern und die vollständige Liste der Instanzen anzeigen möchten, in denen das Element im Website-Projekt verwendet wird.

Wenn Sie die Elemente suchen möchten, die für ein bestimmtes Layout verwendet werden, klicken Sie auf die Spaltenüberschrift ganz rechts im Elementebedienfeld, wo die Symbole für Desktop, Tablet oder Telefon angezeigt werden. Dies bewirkt, dass die Liste der Elemente sortiert wird und die Elemente für jedes Layout in einer zusammenhängenden Gruppe angezeigt werden.

Elementebedienfeld
Klicken Sie auf eine beliebige Spaltenüberschrift im Elementebedienfeld, um die Liste der Elemente entsprechend zu sortieren.

Wenn Sie eine Grafik ändern und alle Instanzen der Grafik (in allen Layouts) dadurch aktualisieren möchten, können Sie mit der rechten Maustaste auf den Namen des Elements klicken und im Kontextmenü die Option „Original bearbeiten“ wählen.

Wählen Sie „Original bearbeiten“, um das Element für die gesamte Site zu aktualisieren
Wählen Sie „Original bearbeiten“, um das Element für die gesamte Site zu aktualisieren.

Die platzierte Originaldatei wird in Photoshop, Fireworks oder einem anderen Bildbearbeitungsprogramm geöffnet, in dem sie erstellt wurde, damit Sie rasch Änderungen vornehmen können.

Wenn Sie die geänderte Originaldatei speichern und zu Muse zurückkehren, wird im Elementebedienfeld ein Warnsymbol angezeigt, um Sie darauf aufmerksam zu machen, dass die Version der Grafik in der Website nicht mehr der Quelldatei entspricht. Klicken Sie erneut mit der rechten Maustaste auf die Datei und wählen Sie „Element aktualisieren“, um alle Instanzen der Grafik zu aktualisieren und die neue Version zu verwenden.

Mit der Aktualisierungsfunktion werden alle Vorkommen des Elements in der Site auf den neuesten Stand gebracht
Mit der Aktualisierungsfunktion werden alle Vorkommen des Elements in der Site auf den neuesten Stand gebracht.

Anzeigen der Vorschau von mobilen Layouts

Es gibt mehrere Möglichkeiten, mit denen Sie eine Vorschau der von Ihnen erstellten Website-Designs anzeigen können:

Klicken Sie in der Entwurfsansicht des Desktop-Layouts auf „Vorschau“, um HTML, CSS und JavaScript vom integrierten Webkit-basierten Emulator rendern zu lassen. In der Vorschau können Sie sehen, wie Ihre Layouts in einem Browser angezeigt werden, bevor Sie die Site online veröffentlichen und mit einem Gerät testen.

Klicken Sie in der Entwurfsansicht des Telefon-Layouts auf „Vorschau“, um die eine Vorschau des Telefon-Layouts zu sehen. Wählen Sie im Menü „Vorschaugröße“ nacheinander die Optionen „iPhone 4“, „iPhone 5“, „Samsung Galaxy S III“ und „Nokia Lumia 920“, um das Layout auf unterschiedlichen Bildschirmgrößen zu sehen.

Anzeigen der Vorschau eines mobilen Layouts
Das Menü „Vorschaugröße“ wird bei der Vorschau von Seiten im Telefon- oder Tablet-Layout angezeigt.

Klicken Sie auf das Symbol rechts neben dem Menü „Vorschaugröße“, um zwischen der Anzeige des Layouts im Hoch- und Querformat zu wechseln.

Die Vorschaugröße enthält mehrere vordefinierte Höhen-/Breitenverhältnisse, die den gängigsten Smartphone-Bildschirmgrößen entsprechen.

Einige Smartphone-Bildschirme sind breiter, beispielsweise der des Motorola Droid. Wenn ein Besucher über eine breitere Anzeige verfügt, skaliert die Viewport-Funktion von Muse automatisch die Darstellungsbreite, um sie an die Größe des verfügbaren Bildschirms anzupassen.

Im Vorschaumodus können Sie auf Hyperlinks klicken und durch die Site navigieren. Sie können einen Bildlauf durchführen, um eine Wischgeste zu simulieren, aber um einen realistischen Eindruck zu bekommen, sollten Sie die Site auf dem Gerät zu testen.

Wenn Sie im Vorschaumodus auf die Schaltfläche „i“ neben dem Menü „Vorschaugröße“ klicken, wird ein Vorschaumodus-Hinweis mit einem Link zu einem Adobe-Tool namens Edge Inspect angezeigt. Mit Edge Inspect können Sie eine Chrome-Browsererweiterung verwenden, um mobile Geräte mit Ihrem Computer zu verbinden und sie dann mit dem Inhalt, der in Ihrem Chrome-Desktop-Browser angezeigt wird, zu synchronisieren.

Mithilfe von Edge Inspect, Chrome und der Adobe Muse-Option „Vorschau in Browser“ können Sie eine Site auf Ihrem Desktop-Computer anzeigen, und dieselbe Seite wird automatisch auf den angeschlossenen Geräten angezeigt. (Achten Sie darauf, Chrome als Standardbrowser festzulegen.)

Bei Bedarf können Sie auch das Tool Reflection eines Drittherstellers kaufen, mit dem Sie auf dem Bildschirm Ihres Desktop-Computers eine Emulation Ihres Geräts sehen können, das über dieselbe Netzwerkverbindung angeschlossen wird. Während Sie mithilfe des Smartphones oder Tablets durch eine Site navigieren, emuliert der Emulator den Touchscreen Ihres Geräts.

Zusatzfunktionen für mobile Layouts

Footer immer unten

Wie in früheren Versionen von Muse können Sie Hilfslinien ziehen, um den Bereich unter der Seite zu definieren und den Fußzeilenbereich festzulegen. Sie können auch jedes Inhaltselement als Fußzeilenelement festlegen, sodass es entweder unter der in den Site-Eigenschaften festgelegten Seitenmindesthöhe oder unterhalb des vorhandenen Seiteninhalts angezeigt wird (je nachdem, was länger ist).

Das Definieren von Fußzeileninhalt ist sehr hilfreich, wenn eine Site aus Seiten unterschiedlicher Länge besteht, da die Fußzeilenplatzierung in vertikaler Richtung angepasst und immer am unteren Rand der Seiten angezeigt wird, ohne den Seiteninhalt zu überlappen.

Standardmäßig ist die Option „Footer immer unten“ aktiviert. Dies ist eine Eigenschaft, die speziell für Besucher mit großen Desktop-Bildschirmen entwickelt wurde. In den meisten Fällen sollten Sie diese Option für Ihre Websites aktiviert lassen. Auf diese Weise bleibt die Fußzeile an der gewünschten Position, auch wenn das Browserfenster erheblich größer als das Webseitendesign ist, wie dies beispielsweise beim Apple Cinema Display der Fall ist.

Um zu sehen, wie dies funktioniert, können Sie eine Muse-Site in einem Browser anzeigen und aus der Seite herauszoomen. Wenn der Seiteninhalt im Verhältnis zum Browserfenster zu klein wird, wird im Bereich unterhalb der Fußzeile das Browserfenster angezeigt, statt die Fußzeile bündig am unteren Rand zu belassen.

Beim Erstellen neuer Sites in Muse werden Sie feststellen, dass die Option „Footer immer unten“ im Dialogfeld „Neue Site“ aktiviert ist.

Optionen für „Neue Site“
Das Kontrollkästchen „Footer immer unten“ ist beim Erstellen neuer Sites automatisch aktiviert.

Im Allgemeinen empfiehlt es sich, die Funktion „Footer immer unten“ beim Entwickeln von Sites zu verwenden. Wenn Sie aber feststellen, dass die Seiten wesentlich länger angezeigt werden als gewünscht (weil eine Site nur sehr wenig Seiteninhalt hat und die Seiten relativ kurz sind), können Sie die Option jederzeit deaktivieren, indem Sie das Kontrollkästchen im Dialogfeld „Seiteneigenschaften“ deaktivieren.

Deaktivieren Sie die Option „Footer immer unten“ in den Seiteneigenschaften.
Nach dem Erstellen einer Site aktualisieren Sie die Seiteneigenschaften und deaktivieren Sie die Option „Footer immer unten“.

Verankerte Elemente

Der von Muse generierte Code wird getestet, um sicherzustellen, dass er auf allen modernen Webbrowsern und Plattformen wie erwartet angezeigt wird und funktioniert.

Einer der Netzstandards, bei dem es Unterschiede zwischen Desktop- und mobilen Browsern gibt, ist die Unterstützung für verankerte Seitenelemente. Wenn Sie Websites für Desktop-Browser entwickeln, können Sie ein Element auswählen und es mit der entsprechenden Option im Steuerungsbedienfeld im Browserfenster verankern. Verankern ist hilfreich, um eine einheitliche Navigation zu erzielen. Es ist außerdem hilfreich, wenn ein Element immer im selben Bereich einer längeren Seite bleiben soll, unabhängig davon, wie weit der Besucher auf der Seite nach unten rollt.

Zur Drucklegung dieses Artikels werden verankerte Objekte von mobilen Browsern nicht einheitlich unterstützt. Daher müssen beim Entwickeln von Telefon- und Tablet-Layouts alternative Strategien für verankerte Objekte verfolgt werden.

Beim Entwickeln von Telefon- und Tablet-Layouts werden Sie feststellen, dass die Verankerungsoptionen deaktiviert und inaktiv sind.

Verankerte Elemente
Die Verankern-Schnittstelle im Steuerungsbedienfeld ist beim Entwerfen von mobilen Layouts nicht verfügbar.

Veröffentlichen einer Site mit mobilen Layouts

In Muse können Sie Sites mit mehreren Layouts mit derselben Methode veröffentlichen, die Sie normalerweise verwenden, um Desktop-Sites zu veröffentlichen. Es ist hilfreich, zunächst Test-Sites zu veröffentlichen und die Liveversion auf mobilen Geräten anzuzeigen, um die Designs auf kleineren Bildschirmen zu testen.

Klicken Sie auf „Veröffentlichen“ oder wählen Sie „Datei“ > „Auf FTP-Host hochladen“, um die Site-Dateien zum Hostserver hochzuladen.

Wenn Sie eine Muse-Site mit mehreren Layouts veröffentlichen, wird sie unter einer einzelnen URL veröffentlicht. Daher müssen Sie nur einen einzigen Domänennamen wie diesen registrieren:

http://www.my-site.com

Wenn Sie eine Site mit zwei oder drei verschiedenen Layouts veröffentlichen, generiert Muse auch den Code mit Erkennungsskripten, anhand derer ermittelt wird, mit welcher Art von Computer oder Gerät und mit welchem Browsertyp der Besucher auf die Seite zugreift.

Der Erkennungscode ermittelt die Plattform und Browserversion und zeigt dann automatisch das richtige Layout an. Sie brauchen überhaupt nichts zu tun, und dennoch wird sichergestellt, dass Besucher mit einem Tablet das Tablet-Design und Besucher mit einem Smartphone das Telefon-Design sehen. All dies geschieht hinter den Kulissen.

Mit den neuen mobilen Layoutfunktionen in Muse können Sie Ihre mobilen Layouts optimieren, damit Benutzer von mobilen Geräten nicht unnötigerweise größere Dateien herunterladen. Dank der alternativen Layoutfunktion werden nur kleinere, skalierte Grafikdateien heruntergeladen, sodass die Site auf allen Plattformen und mit allen Browsern eine gute Leistung erzielt.

Weitere Informationen zum Arbeiten mit Muse finden Sie in den Artikeln und Tutorials auf der Adobe Muse-Hilfeseite.

Verwenden von „Gehe zu Seite“, um Website-Inhalte zwischen Layouts zu kopieren

Klicken Sie auf die Registerkarte „Musterseite (Desktop)“, um die Desktop-Musterseite in der Entwurfsansicht zu aktivieren.

In Muse können Sie mithilfe des Navigationswerkzeugs „Gehe zu Seite“ mühelos zwischen Layouts umschalten. Diese Schaltfläche wird in der Entwurfsansicht in jedem Projekt angezeigt, das mehrere Layouts enthält.

  1. Klicken Sie auf die Schaltfläche „Gehe zu Seite“.
Schaltfläche „Gehe zu Seite“
Die Schaltfläche „Gehe zu Seite“ sieht aus wie ein Pfeil, der zu einer Seite zeigt.

Beim Arbeiten mit mehreren Layouts ist es hilfreich, rasch zwischen zwei oder mehr Seiten schnell hin- und herwechseln zu können, um Inhalte mühelos kopieren und einfügen zu können.

Hinweis: Neben dem Klicken auf die Schaltfläche „Gehe zu Seite“ können Sie auch die Tastenkombination Befehlstaste+J (Mac) oder Strg+J (Windows) verwenden.

Das Dialogfeld „Gehe zu Seite“ wird angezeigt. Es enthält ein Textfeld, in das Sie die ersten Buchstaben eines Seitennamens Ihrer Website eingeben können, sodass Sie problemlos zu dieser Seite springen können, ohne immer wieder zur Planungsansicht zurückkehren zu müssen.

  1. Geben Sie die ersten drei Buchstaben des Namens der Seite ein, die Sie suchen möchten. In diesem Beispiel geben Sie die ersten drei Buchstaben im Wort Musterseite ein: mus.

Das Feld durchsucht die Site nach allen entsprechenden Seitennamen und zeigt sie in der Liste unten an.

  1. Drücken Sie zweimal auf den Abwärtspfeil, um die „A-Musterseite (Telefon)“ auszuwählen, und drücken Sie dann die Eingabetaste bzw. den Zeilenschalter, um sie zu öffnen.

Die „Musterseite (Telefon)“ wird in der Entwurfsansicht geöffnet und kann bearbeitet werden.

Eine weitere hervorragende Möglichkeit zum Wechseln zwischen den verschiedenen Layouts einer Website sind die neuen Tastaturbefehle:

  • Befehlstaste/Strg-Taste+7 zeigt das Desktop-Layout an
  • Befehlstaste/Strg-Taste+8 zeigt das Tablet-Layout an
  • Befehlstaste/Strg-Taste+9 zeigt das Telefon-Layout an

Diese Tastaturbefehle sind nur aktiv, während Sie eine Site bearbeiten, in der das entsprechende Layout vorliegt. Experimentieren Sie mit diesen neuen Tastaturbefehlen, um einen bevorzugten Arbeitsablauf für das Wechseln zwischen Layouts und bestimmten Seiten zu entwickeln.

Als Nächstes erstellen Sie eine zweite Telefon-Musterseite und fügen dann die Gestaltungselemente hinzu.

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