Auto HTML5-Vorlagen

Responsives HTML5-Template für strukturierte Fahrzeuginhalte

HTML5 ist der Auszeichnungsstandard für Fahrzeug-Oberflächen. Ein gutes HTML5-Template für Autos sollte daher danach beurteilt werden, wie gut es diesen Standard nutzt. Welche Bereiche das Dokument definiert, wie ein Fahrzeugeintrag beschrieben wird und wie Fotos und Formulare ausgezeichnet werden: Diese Entscheidungen bestimmen, wie die Fahrzeuge dargestellt werden, sobald die Demofahrzeuge durch echte Fahrzeuge ersetzt werden.

Semantische Bereiche hinter jedem Eintrag

Fahrzeuginhalte wiederholen sich, und eine aussagekräftige Auszeichnung sorgt für gute Lesbarkeit. Ein Fahrzeug-Grid besteht aus Fahrzeugeinträgen mit jeweils Name, Preis und einer kurzen Spezifikationsliste. Ein Dokument mit klarer Struktur lässt sich leichter erweitern als eines, das aus anonymen Containern besteht.

Strukturelle Entscheidungen, die in einer Demo geprüft werden sollten:

• „nav“ und „header“ enthalten die Informationen zum Showroom und den Weg zum Fahrzeugbestand;

• „section“ trennt die Bereiche für Bestand, Finanzierung und Service;

• „article“ enthält einen einzelnen Fahrzeugeintrag;

• „footer“ hält die Adresse und Kontaktdaten des Autohauses vom eigentlichen Inhalt fern.

Die Reihenfolge der Überschriften ist entscheidend. In der Fahrzeugdetailansicht sollte der Modellname die oberste Überschrift sein, gefolgt von Galerie, Spezifikationen und Anfrageblöcken mit jeweils eigenen Überschriften. So entspricht das Layout dem Leseverhalten eines Käufers. Die Spezifikationen erfordern dieselbe Sorgfalt, da Name, Preis und Kilometerstand in einer Reihenfolge angeordnet sein sollten, die in jedem Eintrag wiederholt wird.

Umfangreiche Mediendarstellung auf schmalen Bildschirmen

Bei Inhalten rund ums Auto stehen Fotos an erster Stelle, und HTML5 bietet dafür die optimale Lösung. Das „picture“-Element und „srcset“ ermöglichen eine breite Ansicht des Showrooms auf einem Laptop und eine kleinere Version auf einem Smartphone – besonders wichtig, wenn ein Angebot zwanzig Fotos enthält.

Ein Video-Rundgang kann in einem „video“-Element mit eigenem Rahmen platziert werden – der einzige Fall, in dem ein Angebot wirklich bewegte Bilder verdient.

Der oft übersehene Aspekt ist die Reihenfolge der Quellen: Auf einem schmalen Bildschirm bestimmt das Dokument, was ein Besucher zuerst sieht. Daher sollten Modellname, Preis und Anfrageblock im Markup vor dem sekundären Text stehen. Mit den responsiven Modi von Nicepage können Sie dieselbe Darstellung auch auf Smartphones überprüfen. Die Dokumentation zu den responsiven Modi beschreibt den Workflow.

Formulare, die Nutzer auf Smartphones ausfüllen

Auch ein Anfrageformular ist entsprechend formatiert. Eingabefelder spielen dabei eine wichtige Rolle: ein Telefonfeld mit numerischer Tastatur, ein E-Mail-Feld mit Tippfehlererkennung und ein Datumsfeld für Probefahrten oder Mietwagenabholung.

Beschriftungen sind ebenso wichtig. Ein Feld mit Platzhaltertext verschwindet, sobald jemand etwas eingibt – genau dann, wenn sich ein potenzieller Käufer an das gewünschte Modell erinnert. Beschreibender Alternativtext für Fahrzeugfotos ist ebenfalls unerlässlich, da eine Anzeige ohne ihn an Aussagekraft verliert.

Beurteilen Sie eine HTML5-Vorlage für Autos anhand dieser Kriterien: aussagekräftige Bereiche, anpassbare Medien und Formulare, die der Nutzer der Reihe nach ausfüllen kann.