Tutorial: ein statisches HTML-Design portieren #

Dieses Tutorial ist für Designer, die statische HTML-Seiten bekommen haben (von einer Agentur, aus einem Styleguide oder einem gekauften Template) und sie in ein funktionierendes Exponential-Design umwandeln müssen. Planen Sie für eine typische Website mit fünf Seitentypen einen Tag ein.

Inhalt #

1. Schritt 1: Bestandsaufnahme
2. Schritt 2: Assets ins Design
3. Schritt 3: Der Rahmen wird zum Pagelayout
4. Schritt 4: Seitentypen werden zu View-Templates
5. Schritt 5: Fester Inhalt wird zu Template-Code
6. Schritt 6: unterwegs aufräumen

Schritt 1: Bestandsaufnahme #

Listen Sie die Seitentypen des Mockups auf und ordnen Sie jeden Exponential zu:

Schritt 2: Assets ins Design #

mockup/css/*.css     ->  design/mytheme/stylesheets/
mockup/js/*.js       ->  design/mytheme/javascript/
mockup/img/*         ->  design/mytheme/images/
mockup/fonts/*       ->  design/mytheme/fonts/

Korrigieren Sie relative url()-Pfade im CSS (../images/..., ../fonts/...). Laden Sie das CSS mit einem ezcss_load und die Skripte mit ezscript_load (Stylesheets laden). Ersetzen Sie einen CDN-Link zu einer Bibliothek durch eine lokale Kopie (Externe Ressourcen und CDNs).

Schritt 3: Der Rahmen wird zum Pagelayout #

Nehmen Sie den gemeinsamen Rahmen des Mockups; ersetzen Sie den Inhaltsbereich durch {$module_result.content}; teilen Sie Kopfbereich, Fußbereich und Menü in Teile pagelayout/*.tpl auf (Das Pagelayout). Ersetzen Sie:

Schritt 4: Seitentypen werden zu View-Templates #

Für jeden Inhalts-Seitentyp ein Override mit eigenem Template (Tutorial: eine Vollansicht überschreiben). Fügen Sie das Markup des Mockups ein und ersetzen Sie die Platzhaltertexte durch Felder:

<h1>{$node.name|wash}</h1>
<div class="lead">{attribute_view_gui attribute=$node.data_map.intro}</div>

Schritt 5: Fester Inhalt wird zu Template-Code #

• Lorem ipsum wird zu Feldern des Inhalts.
• Wiederholte Elemente (Karten, Teaser) werden zu einem {foreach} über ein fetch und eine line-Ansicht.
• Texte der Oberfläche („Read more“, „Search“) laufen über i18n.
• Daten über l10n.

Schritt 6: unterwegs aufräumen #

Statische Templates tragen oft Gewohnheiten, die in Exponential nicht überleben:

• Inline-<style>, style="", onclick="" und Inline-Skripte: Verschieben Sie sie in Dateien (CSP-sicheres Design);
• fehlende alt, übersprungene Überschriften, ein div als Knopf: Beheben Sie sie jetzt (Barrierefreiheit: Grundlagen für Themes);
• feste Farben: Machen Sie daraus Token, was Ihnen später den dunklen Modus gibt (Design-Token);
• left/right in CSS: logische Eigenschaften, für Sprachen von rechts nach links.

Verwandte Seiten #

• Tutorial: eine Theme-Erweiterung anlegen
• Ein Ausgangs-Theme wählen
• Freie Dokumentation: Diese Seite darf unter der GNU FDL 1.3 frei kopiert, übersetzt und verbessert werden.