QuarkXPress wird mit einer Auswahl sorgfältig erstellter Vorlagen geliefert, um Ihnen einen schnellen Einstieg in die Erstellung einer responsiven Website zu ermöglichen, wenn die Zeit knapp ist.
Aber Sie können Ihre kreative Kraft wirklich zur Geltung bringen, wenn Sie die Vorlagen hinter sich lassen und beginnen, Ihre eigenen Seiten zu erstellen. Sie können dies tun, indem Sie das Flex-Tool verwenden, um Container zu erstellen, indem Sie vorhandene Elemente in Container umwandeln oder, was vielleicht am nützlichsten ist, indem Sie Blöcke und Elemente aus dem Fenster Flex Layout Blocks in das Layout ziehen.
Der Root-Container
Mit einem festen Layout können Sie eine Druckseite buchstäblich in eine feste HTML5-Seite umwandeln. Wenn Sie lediglich ein Druckdokument erstellen und ihm eine grundlegende Interaktion geben müssen, könnte das die richtige Lösung sein. Für Flex ist jedoch die Struktur der Seite wichtig. Das Schwierigste an Flex ist, sich darüber klar zu werden.
Damit der Webbrowser (Safari, Chrome, Explorer usw.) die Seite korrekt und responsiv rendern kann, muss sich im Wesentlichen alles in etwas anderem befinden, mit einem Root-Container, der alle anderen Dinge enthält. Verwenden Sie den Flex Object Browser von Window, um zu sehen, wie das funktioniert. Es lohnt sich, dies zunächst anhand einer Vorlage zu untersuchen.
Wenn Sie mit dem Flex Tool nur ein paar Behälter herstellen, liegen diese nicht ineinander. Auf der Seite und auf manchen Websites sieht es vielleicht gut aus, aber wenn es auf einem anderen Gerät angezeigt wird, ist es unvorhersehbar und mit ziemlicher Sicherheit nicht das, was Sie wollen. Dies muss jedoch kein Problem sein, da Sie sie einfach im Flex Object Browser ausschneiden und dann in den gewünschten Container einfügen können.
Container können sich in anderen Containern befinden, und Sie erhalten dann eine Hierarchie aus Zeilen, Spalten und Objekten. Dinge können sich in anderen Dingen befinden, vorausgesetzt, sie befinden sich alle im Root-Container.
Messfeld: Container und Flex
Wenn Sie das Messfeld mit einem ausgewählten Flex-Objekt überprüfen, werden zwei neue Registerkarten angezeigt: Container und Flex. Der Container nimmt die gesamte ihm zur Verfügung stehende Breite ein – wenn es sich um den Root-Container handelt, dann ist das die Breite Ihres Geräts oder des Browserfensters. Wenn es sich in einem anderen Container befindet, ist es die Breite, die ihm durch die Aufteilung dieses Containers zur Verfügung steht.
Die Registerkarte „Container“ im Bereich „Messungen“ bestimmt, wie der Container enthalten ist. „Horizontal“ bedeutet beispielsweise, dass die darin enthaltenen Elemente in horizontaler Reihenfolge angeordnet werden; „vertikal“ bedeutet, dass sie in vertikaler Reihenfolge angeordnet werden. Wrap bestimmt, was passiert, wenn der Behälter zu klein für die darin enthaltenen Dinge wird. Der Container kann auch über eine Polsterung verfügen, die als interner Rand dient.
Die Flex-Registerkarte bestimmt, wie sie reagiert, wenn der Container, in dem sie sich befindet, ihre Größe ändert. Sie legen im Wesentlichen Regeln dafür fest, was es tun soll – was ist seine maximale Breite, was ist seine minimale Breite und so weiter.
Sie können alle diese Eigenschaften unabhängig voneinander festlegen, aber es geht auch schneller.
Flex-Layoutblöcke
MitWindow>Flex Layout Blocks erhalten Sie Blöcke, die Sie auf Container ziehen können, um die Seite schnell zu erstellen. Denken Sie daran, dass Sie nach dem ersten Layout immer etwas hineinziehen müssen. Wenn Sie es verpassen, schneiden Sie es einfach aus und fügen Sie es mit dem Flex Object Browser ein.
Diese Blöcke sind wesentliche Flex-Elemente, die bereits mit allen Container- und Flex-Eigenschaften vorbereitet wurden, die sie zum Funktionieren benötigen. Diese wurden nach Webstandards erstellt, sodass Sie sich nicht fragen müssen: „Was ist eine gute Polsterung?“
Unten in diesem Bereich befindet sich ein hilfreicher Breadcrumb-Trail, damit Sie sehen können, wo Sie sich in der Hierarchie befinden.
Vom Netz
Sie werden feststellen, dass Sie beim Erstellen des Layouts die Möglichkeit haben, ein Raster anzugeben. Dies wird viel mehr Spalten enthalten, als Sie normalerweise in einem rasterbasierten Papierlayout verwenden würden. Flex verwendet dieses Raster, um zu bestimmen, wie Dinge reagieren. Aber das lässt Sie mit der Frage zurück: Wie kann ich dafür sorgen, dass meine Website „gestaltet“ aussieht, anstatt einfach nur ein klobiger, klumpiger Tisch zu sein?
Die Antwort ist, dass Ihre grafischen Elemente nicht rechteckig sein müssen. Sie können dies erreichen, indem Sie PNG- und SVG-Dateien mit transparentem Hintergrund verwenden (oder Vektorgrafiken aus anderen Quellen, die QuarkXPress zur Ausgabe in SVG umwandelt).
Innerhalb der Containerhierarchie kann jeder Container sein eigenes Bild haben, ebenso wie alles, was die Dinge im Container tun. Mit anderen Worten: Sie können Bilder mit Ebenen übereinander platzieren und dabei transparente Hintergründe verwenden, sodass die Ebenen unterschiedlich animiert werden und sich unterschiedlich bewegen, wenn die Größe des Browserfensters geändert wird. Es dauert ein paar Versuche, bis Sie erkennen, wie mächtig das ist. Danach müssen Sie sich davon abhalten, es zu pingelig zu machen.
Halten Sie es sauber
Die meisten Animationen, die in festen Layouts verfügbar sind, sind auch in Flex verfügbar. Bevor Sie es damit übertreiben, denken Sie daran, dass das Layout von Natur aus selbstanimierend ist, da sich die Elemente bei der Größenänderung im Verhältnis zueinander bewegen. Zu viel Bewegung wird den Menschen, der tatsächlich versucht, Ihre Website zu verstehen, nur verwirren. Also halte es einfach, halte es sauber.
Empfohlener flexibler Workflow
Beim Experimentieren macht es Spaß, alle möglichen Dinge auszuprobieren, aber zu einem bestimmten Zeitpunkt möchten Sie etwas mit Flex arbeiten, und an diesem Punkt benötigen Sie einen guten Workflow. Noch mehr als beim Drucken kann man sich leicht in den Möglichkeiten verlieren. Hier ist ein Workflow, der Ihnen helfen kann:
1) Zweck
Bestimmen Sie den funktionalen Zweck dieser Website. Daraus ergibt sich alles.
2) Zielgruppe
Wer wird es nutzen: 15-jährige Gamer oder 60-jährige Bankmanager? Nicht nur der Stil, sondern auch die Art der Interaktion und der Grad der Verspieltheit werden sich ändern.
3) Nachricht
Die Website muss den Benutzer zu den Kernbotschaften führen. Das bedeutet, dass sie beim Biegen immer noch hervorstehen müssen.
4) Miniaturansicht
Skizzieren Sie auf einem Blatt Papier eine Miniaturansicht davon, wie es aussehen soll, bevor Sie beginnen.
5) Elemente
Halten Sie Ihre Grafik- und Textelemente bereit. Oft sind diese aufgrund von Druck- oder Branding-Arbeiten bereits vorhanden. Wenn Sie transparente Objekte verwenden möchten, stellen Sie sicher, dass Sie diese mit Transparenz als PNG-Dateien speichern.
6) Bauen Sie auf dem Referenzfenster auf
Erstellen Sie die Seite mithilfe der Layoutblöcke so, dass sie zu Ihrem Miniaturbild passt. Tun Sie dies in der Standardgröße und testen Sie es mithilfe der HTML5-Seitenvorschau.
7) Beuge es
Formen Sie die Seite in einem Desktop-Browser um und beobachten Sie, wie sie reagiert. Machen Sie sich Notizen darüber, wie es anders reagieren soll. Gehen Sie dann zurück zur Registerkarte „Flex“ im Bereich „Messungen“, um Änderungen vorzunehmen. Möglicherweise müssen Sie auch zum Container darüber gehen – denken Sie daran, dass Änderungen, die Sie an den Containereinstellungen des Objekts vornehmen, sich auf die darin enthaltenen Objekte auswirken, nicht auf sein eigenes Verhalten.
8) Verknüpfen und animieren
Wenn der Flex wie erwartet funktioniert, fügen Sie Links und Animationen hinzu, z. B. Rollover-Schaltflächen. Dies ist auch der Punkt, an dem Sie speziellen HTML-Code hinzufügen können, den Sie möglicherweise als Codeschnipsel übernommen haben. Jedes Objekt kann als Mini-Website innerhalb der Seite fungieren und alles bereitstellen, was dieser Code tut.
9) Legen Sie Alt-Tags und Metadaten fest
Für jedes Grafikelement muss sein Alt-Tag festgelegt sein, um HTML5-kompatibel zu sein. Legen Sie diese einzeln unter „Element“ > „Exportoptionen“ fest. Für Objekte, die keinen Inhalt haben, wie z. B. Füllgrafiken, können Sie auf das Kontrollkästchen „Artefakte“ klicken. Legen Sie die Metadaten unter Layout>Metadaten fest. Dies wird für Suchmaschinen von entscheidender Bedeutung sein.
10) Bereitstellen und testen
Wenn die Site – oder dieser Teil – fertig ist, stellen Sie sie auf einem Webserver bereit und testen Sie sie auf Smartphones, Tablets, Smart-TVs und verschiedenen Browsern auf Mac und PC. Gehen Sie beim Web davon aus, dass es nicht funktioniert, wenn Sie es nicht getestet haben.
Sehen Sie sich das Tutorial an Designorientierte Websites.