Eine Seite in Aurora ist kein Textblock, in den man Bilder einfügt. Sie ist ein Raster mit 48 Spalten, auf dem man Zonen platziert und deren Ränder man mit der Maus zieht. Die Seite, die Sie gerade lesen, wurde genau so zusammengestellt.
Das Raster einer Seite, Zone für Zone
Der Tab Inhalt einer Veröffentlichung: jede Zone des Rasters, ihre Größe und ihr Inhalt auf einen Blick. Man fügt hinzu, verschiebt und ändert die Größe, ohne Code zu schreiben.
Das Raster und seine Zonenpalette
Jede Zone bekommt ihre Breite pro Bildschirmgröße, mit der Maus gezogen, dazu einen Versatz für mehr Luft, und sie kann aus der Spalte ausbrechen und den ganzen Bildschirm überspannen. Unten ordnet die Palette die 45 Zonentypen nach Verwendung: Text, Bild, Veröffentlichung, Video, Formular, Inhaltsverzeichnis, Stapel; das Auge neben jedem Typ öffnet sein Beispiel. Das Layout wird nur einmal geschrieben und gilt für alle Sprachen der Website.
Die Dokumentgliederung: was noch zu schreiben ist
Über dem Raster listet die Gliederung einer Auditvorlage ihre fünfzehn Abschnitte auf und zählt für jeden die Stellen in eckigen Klammern, die noch ersetzt werden müssen. Jede Kachel zeigt ihren Titel und ihre Einstellungen, etwa „Erhaben“ oder „Smartphone“.
Einen fertigen Abschnitt einfügen
In der Bibliothek bietet der Tab „Abschnitte“ ein Dutzend fertiger Anordnungen, maßstabsgetreu aus ihren Zonen gezeichnet: Karte und Smartphone, vier Karten im Quadrat, drei verglichene Konten, Beibehalten und Vermeiden. Selbst gespeicherte Abschnitte warten im Tab „Meine Abschnitte“.
Ein Beispiel für jede Zone
Der Tab „Zonen“ der Bibliothek zeigt jeden der 45 Typen in Aktion, vom Server im Design der Website gezeichnet, mit ihren eigenen Bildern. „Dieses Beispiel einfügen“ setzt es in die Seite, die Texte in eckigen Klammern zum Ersetzen.
Und für jeden Textblock
Der Tab „Blöcke“ macht dasselbe für die achtzehn Blöcke des Editors, vom Absatz bis zur Liste mit Symbolen. Aus einem Text geöffnet, über die Schaltfläche „Beispiele“ oder das Menü eines Blocks, landet das Beispiel in diesem Text, direkt nach dem Cursor.
Die Vorschau: die echte Seite in Smartphone-Breite
Der Tab Vorschau ersetzt das Raster durch die echte Seite, im Design der Website, in der Breite eines Computers, eines Tablets oder eines Smartphones. Ein Klick auf eine Zone in der Vorschau unterstreicht sie und öffnet ihre Einstellungen im Fenster daneben. Auf dem Smartphone stehen die Zonen untereinander, in der Reihenfolge, in der sie platziert wurden.
Eine geöffnete Zone: ihre Position und ihr Aussehen
Ein Klick auf eine Zone des Rasters öffnet ihre Einstellungen im Fenster daneben, das Raster bleibt dabei im Blick: ihr Typ, ihre Breite pro Bildschirmgröße, ihr Versatz, eine neue Zeile, ihr Hintergrund, ein erzwungenes helles oder dunkles Design, ihre Akzentfarbe und ihr Einblendeffekt. Was hier eingestellt wird, gilt nur für sie. Eine Werkzeugleiste liegt auf der Zone selbst: nach oben, nach unten, duplizieren, kopieren, zur Wiederverwendung speichern, löschen, mit der Möglichkeit, das Löschen rückgängig zu machen.
Vier Tabs: Inhalt, Anordnung, Stil, Sichtbarkeit
Die Einstellungen einer Zone sind in vier Tabs geordnet. Anordnung legt fest, wo sie sitzt: ihre Breite auf den 48 Spalten, ihr Versatz, ihre vertikale Ausrichtung, der Abstand darüber, ob sie beim Scrollen stehen bleibt oder die gesamte Bildschirmbreite überspannt.
Der Stil einer Zone
Der Tab Stil gestaltet die Zone: ein Hintergrund (Karte, Erhaben, Tönung, Akzent oder individuell), ein erzwungenes helles oder dunkles Design, die Farbe der Hover-Effekte und Markierungen sowie ihr Einblendeffekt.
Wer die Zone sieht und wann
Der Tab Sichtbarkeit plant eine Zone zwischen zwei Daten, beschränkt sie auf angemeldete Mitglieder, blendet sie auf dem Smartphone oder auf dem Computer aus und gibt ihr einen Ankerpunkt, damit ein Link direkt dorthin führt.
Ein breites Fenster zum Schreiben
Bei einem Text lässt sich das Fenster mit einem Klick verbreitern und der Editor nimmt den Platz ein, den er braucht; die gewählte Breite wird für das nächste Mal gespeichert. Das Raster bleibt daneben, die aktuelle Zone hervorgehoben.
HTML in einem echten Code-Editor schreiben
Wenn kein Block das Gewünschte kann, lässt der HTML-Block das Layout von Hand schreiben. Er wird in einem Code-Editor geschrieben: Farben, Zeilennummern, Einrücken mit der Tab-Taste, automatisch geschlossene Tags. Hier das Infoblatt der nächsten Sitzung, in drei Karten.
Links der Code, rechts die Seite
Im Vollbild wird der Block so angezeigt, wie die Website ihn zeichnen wird, und beim Tippen aktualisiert: dieselbe Bereinigung, dasselbe Design. Man sieht ihn am Computer, Tablet oder Smartphone, im hellen oder dunklen Modus, ohne zu speichern oder die Seite zu öffnen.
Ein Codeauszug, in seiner Sprache farbig dargestellt
Die Zone Code zeigt einen Auszug unverändert auf der Seite, als animiertes Terminal oder als Vorher / nachher. Sie wird mit demselben Editor geschrieben, farbig in der Sprache, die man aus elf auswählt, und jede Sprache der Website behält ihre eigenen Kommentare.
Auf dem Smartphone ein Blatt, das hochfährt
Auf einem kleinen Bildschirm wird dasselbe Fenster zu einem Blatt, das von unten über das Raster fährt. Man zieht es an seinem Griff auf, und die Zurück-Geste schließt es wieder.
Eine Liste, dreizehn Darstellungen
Die Zone Liste enthält Einträge (einen Titel, einen Text, ein Bild, einen Link) und zeigt sie wahlweise als nummerierte Schritte, Kennzahlen, häufige Fragen, Kundenstimmen, Logos, Zeitleiste, Angebotskarten, Team, Bilderzählung, redaktionelle Liste, horizontale Leiste, Karten mit Piktogramm oder Bildvitrine. Beim Wechsel der Darstellung geht nichts von dem Geschriebenen verloren.
Die 45 Zonentypen und was eine Zone kann
- Text und Bilder: Rich Text (Überschriften, Listen, Zitate, Hinweisboxen, Tabellen, farbige Überschriften), ein einzelnes Bild oder in einem Computer-, Smartphone- oder Browserrahmen, Galerie, Vorher / nachher zum Ziehen.
- Medien, Code und Diagramme: Video, Videowand, Audio mit Kapiteln, Dokument zum Herunterladen, farbiger Code mit Zeilennummern, Einbettung eines externen Dienstes, Balkendiagramm, Kurve, Ring oder Fortschrittsanzeige.
- Veröffentlichungen und Navigation: eine von Hand ausgewählte Veröffentlichung oder eine automatische, per Regel gewählte Liste, die sich von selbst aktualisiert; eine freie Liste, die Begriffe einer Taxonomie, ein aus den Überschriften erstelltes Inhaltsverzeichnis, eine Suche auf der Website.
- Zur Strukturierung der Seite: Tabs, eine Schaltfläche, eine Trennlinie (Strich, Abstand, Welle, Diagonale oder Schräge), ein Kopfbereich mitten auf der Seite, ein geteilter Block (einmal geschrieben, auf mehreren Seiten platziert, überall auf einmal korrigiert) und ein Stapel, eine Zone, die andere enthält, etwa für ein hohes Bild neben zwei übereinander gestapelten Zonen.
- Was der Besucher ausfüllt: ein Formular der Website, eine Umfrage, eine Terminbuchung auf Zeitfenstern, ein Angebotsrechner, die Kommentare der Seite, die Newsletter-Anmeldung und ihr DSGVO-Hinweis.
- Praktische Informationen: die Öffnungszeiten und kommende Schließungen, eine Verfügbarkeit, ein Countdown, eine Visitenkarte, die sich in den Kontakten speichern lässt, eine Adresse mit Wegbeschreibung, eine Karte mit Preisen, ein QR-Code.
- Netzwerke und Integrationen: ein Beitrag im Stil eines sozialen Netzwerks, der Instagram-Feed, die Google-Bewertungen, die GitHub-Aktivität, die letzte Aktivität der Website, eine Reisekarte Etappe für Etappe, ein Redaktionskalender, eine Präsentation.
- Eine Zone kann zu einem Band werden, das langsamer scrollt als die Seite, oder an ihrem Platz bleiben, während ihre Nachbarin scrollt.
- Ein Hintergrund (Karte, getönt, Akzentfarbe oder eine gewählte Farbe, ein Verlauf oder ein Bild), ein eigener Kontrast, ihre Akzentfarbe und die ihrer Hover-Effekte, über denen der Seite.
- Ein Einblenden beim Scrollen: Überblenden, Gleiten von unten oder von der Seite, Zoom oder Unschärfe.
- Nur zwischen zwei Daten angezeigt werden oder nur für angemeldete Mitglieder, und ein Ankerpunkt, damit ein Link direkt dorthin führt.