Adobe Muse PAN. Responsive WebSites gestalten PUBLISHING AG

Transkript

1 Adobe Muse Responsive WebSites gestalten PAN PUBLISHING AG

2 Begriffe Responsive Gestaltung unter Berücksichtigung der gegebenen Eigenschaften des Ausgabegerätes durch Anpassung der Inhalte an die Browserbreite. Mobile WebSite Es wird für Desktop und Mobile je eine separate, meist statische WebSite gestaltet. Adaptive Website Eine feste Anzahl von «Breakpoints» zwischen denen das Layout jeweils statisch bleibt. 2 PAN Publishing AG

3 Nicht vergessen Übersicht Auflösungen 1. SmartPhones haben keine Browser-Ränder 2. SmartPhones kennen keinen «Rollover» 3. Farbraum für das Web und Mobiles ist srgb 4. Zunehmend mobile Internetnutzung WebSite Grundgestaltung mobileoptimiert 3 PAN Publishing AG

4 Liparische Inseln Unser Job Es soll eine einfache WebSite über die «Liparischen Inseln» erstellt werden. Landing oder Homepage Eine Seite für jede Insel WebSite 960 Pixel breit als Basis mit responsiver Breite Ab 500 Pixel Breite soll umgestaltet werden 4 PAN Publishing AG

5 Seitenbau 1. Starte Adobe Muse 2. Erstelle ein neues Dokument Aha das ist neu: Muse erlaubt eine variable Breite als Site-Eigenschaft Es kann eine minimale Seitenbreite definiert werden. 5 PAN Publishing AG

6 Seitenbau Seitenelemente Aha das geht auch: Objekte, die über die gesamte Browser-Breite gezogen werden sind automatisch an den Browser angepasst. 3. Gehe zur Musterseite 4. Erstelle Farbflächen und Farbbalken, die den linken und rechten Browser-Rand berühren, färbe Seite und Browserfenster ein 5. Setze den Titel «Liparische Inseln» ab 6. Schaue dir das Resultat in der «Vorschau» an 7. Das ist ja schon Responsive! Oha das ist neu Diese automatische Browserbreite kann auch in der Optionenpalette derfiniert werden 6 PAN Publishing AG

7 Seitenbau Bilder & Logos 10. Ups Bilder lassen sich nicht automatisch an die Browserbreite anpassen ;-(( 8. Lade das Logo (cmd-d) «Bilder & Logo»_«0 Logo»_«Logo Sizilien» 9. Lade das Titelbild Es soll ebenfalls browserfüllend sein «Bilder & Logo»_«0 Titel»_«Titelbild» Tipp Bildergallerien können an die Browsebreite angepasst werden 13. Lösche das Titelbild, nimm das Widget «Diashow» «Leer» und lade das Titelbild in die Diashow. 14. Vergib dem Container die Skalierung «An Browserbreite anpassen» 15. Das Logo soll statisch bleiben Vergib dem Logo die Skalierung «Ohne» 16. Vorschau 7 PAN Publishing AG

8 Seitenbau Inhaltsseiten 17. Dupliziere die Musterseite und lösche auf der 2. Musterseite alle Elemente, die nicht nötig sind 18. Erzeuge eine Inhaltsseite und lade das Bild der Insel «Panarea» «Bilder & Logo»_«1 Panarea»_«012» «023» 19. Lade den Text zu «Panarea» auf die Seite «Texte»_«1 Panarea» 20. Achte darauf, dass die Skalierung des Bildes auf «Responsive Breite und Höhe steht» 8 PAN Publishing AG

9 Seitenbau Boxentrick Obacht An dieser Stelle wird ein alter Muse-Trick nur ungern verraten nicht weitererzählen! Beim verkleinern der Seite auf die SmartPhone- Breite, wäre es nett, wenn das Bild und die Textbox sich untereinander anordnen würden. 20. Erstelle auf der Seite eine grosse leere Textbox 21. Aktiviere das Bild und schneide es aus mit «cmd-x» 22. Aktiviere die Textbox, wähle das Textwerkzeug 23. Kopiere das Bild als Text in die Box 24. Setzte den Text-Cursor zwischen die Elemente und definiere Zwischenräume 25. Sei sicher, dass die Skalierung auf «Responsive Breite» steht 9 PAN Publishing AG

10 Breakpoints Breakpoints sind Haltepunkte, an denen die Gestaltung ändert, wenn der Browser diese Grösse erreicht In der Regel werden Gestaltungen innerhalb der Zonen statisch gehalten Idealerweise wird eine Gestaltung zu Beginn statisch erzeugt und die responsiven Eigenschaften danach eingehaucht Muse-Dokumente aus Vorversionen sind logischerweise ebenfalls statische WebSites 10 PAN Publishing AG

11 Breakpoints Zwei statische Layouts 26. Öffne das Muse-Dokument: «Layout»_«statisch.muse» 27. Gehe auf die Musterseite 28. Skaliere in der Vorschau das Browser-Fenster und die siehst die Statik 29. Doppelklicke in den Seitenbereich und ziehe den Haltepunktregler auf 500 Pixel 30. Setzte mit dem «+»-Symbol einen Haltepunkt 31. Nun wird im «500er»-Bereich manuell ein neues Layout angelegt 11 PAN Publishing AG

12 Breakpoints Variable Layouts mit Breakpoint 32. Öffne das Muse-Dokument: «Layout»_«variabel.muse» 33. Gehe auf die Musterseite 34. Klicke in Haltepunktbereich «1200» und wechsle von «Fester» auf «Variable» Breite bei 1200 Pixel 35. Lege für folgende Elemente «Responsive Breite» fest: Navigation gelber Balken Textbox 36. Lege für folgende Elemente «Responsive Breite» fest: Bild 37. Lege für folgende Elemente «an Browserbreite anpassen» fest: Grau Balken unten und oben Roter Balken 12 PAN Publishing AG

13 Breakpoints Variable Layouts mit Breakpoint 38. Schiebe den Haltepunktregler nach links und beobachte die Skalierung 39. Bei ca. 700 Pixel setzten wir einen neuen Haltepunkt 40. Layoutanpassung 13 PAN Publishing AG

14 Dankeschön