Macchina Modelli HTML5

Template HTML5 responsivo per auto con contenuti strutturati

HTML5 è lo standard di markup alla base delle interfacce automobilistiche e un template HTML5 per auto va valutato in base a come lo utilizza. Le sezioni del documento che vengono dichiarate, la descrizione di una scheda veicolo e il markup di foto e moduli: queste scelte determinano cosa succede quando le auto demo lasciano il posto alle auto reali in stock.

Sezioni semantiche dietro ogni scheda veicolo

I contenuti automobilistici si ripetono e un markup significativo ne garantisce la leggibilità. Una griglia di stock è un insieme di schede veicolo, ognuna con nome, prezzo e un breve elenco di specifiche. Un documento la cui struttura lo definisce è più facile da estendere rispetto a uno costruito con contenitori anonimi.

Scelte strutturali da verificare in una demo:

• "nav" e "header" che contengono l'identità della concessionaria e il percorso per accedere allo stock;

• "section" che separa le sezioni relative a inventario, finanziamenti e assistenza;

• "article" che contiene una scheda veicolo che può essere visualizzata autonomamente;

• "footer" che mantiene l'indirizzo della concessionaria e i dettagli di contatto separati dal flusso del documento.

L'ordine delle intestazioni è altrettanto importante. Nella visualizzazione dei dettagli di un veicolo, il nome del modello dovrebbe essere l'intestazione principale, con la galleria, le specifiche e i blocchi di richiesta informazioni sotto intestazioni separate, in modo che il layout corrisponda al modo in cui un acquirente legge la descrizione di un'auto. La stessa attenzione viene riservata al markup delle specifiche, poiché nome, prezzo e chilometraggio devono essere in un ordine che si ripete in ogni voce.

Contenuti multimediali complessi su schermi di piccole dimensioni

I contenuti automobilistici sono incentrati principalmente sulle immagini e HTML5 offre loro uno spazio adeguato. L'elemento "picture" e "srcset" possono gestire un'ampia immagine dello showroom su un laptop e una versione più leggera su uno smartphone, aspetto fondamentale quando un annuncio contiene venti fotografie.

Un video di presentazione può essere inserito in un elemento "video" con una propria cornice di anteprima, l'unico caso in cui un annuncio si merita davvero delle immagini in movimento.

L'aspetto meno evidente è l'ordine del codice sorgente: su uno schermo stretto, è il documento a decidere cosa vede per primo il visitatore, quindi il nome del modello, il prezzo e l'azione di richiesta informazioni dovrebbero precedere il testo secondario nel markup. Le modalità responsive di Nicepage ti permettono di verificare la stessa composizione anche su smartphone; la documentazione sulle modalità responsive illustra il flusso di lavoro.

Moduli compilati su smartphone

Anche un modulo di richiesta informazioni è strutturato in modo appropriato. I tipi di input svolgono un ruolo fondamentale: un campo per il numero di telefono che visualizza un tastierino numerico, un campo per l'indirizzo email che rileva gli errori di battitura e un campo per la data, ad esempio per un test drive o il ritiro di un'auto a noleggio.

Anche le etichette sono importanti. Un campo contrassegnato solo da un testo segnaposto scompare nel momento in cui qualcuno digita, proprio mentre l'acquirente sta cercando di ricordare quale modello intendeva utilizzare. Anche il testo alternativo descrittivo per le foto dei veicoli è fondamentale, poiché un annuncio perde di significato senza di esso.

Valuta un template HTML5 per auto in base a questi elementi: aree significative, contenuti multimediali che si adattano e moduli facili da seguire.