- Learn
- Guida siti per dispositivi mobili
- Ottimizzazione della struttura HTML
Ottimizzazione della struttura HTML
Alla luce dei test e dell’osservazione del codice di marcatura dalla home page del portale Italia.gov.it è possibile elencare rapidamente una serie di aspetti che sarebbe bene correggere in vista di una pubblicazione per dispositivi mobili:
- andrebbe eliminato il reindirizzamento lato-client che si verifica all’apertura del file index.html: non abbiamo infatti la certezza che tutti i browser, soprattutto quelli meno performanti, siano capaci di spostarsi sulla pagina di destinazione;
- si dovrebbe cambiare la DTD di riferimento (passando almeno ad un XHTML transitional);
- si dovrebbero eliminare tutti gli elementi e gli attributi deprecati dalla nuova DTD;
- tutti gli elementi importanti della pagina dovrebbero essere associati ad un ancora di destinazione di eventuali link interni;
- queste ancore potrebbero essere sfruttate per costruire ed inserire ad inizio pagina un menu di accesso rapido per saltare direttamente ai contenuti o ad altre sezioni della pagina non appena questa viene visualizzata dal browser;
- dovrebbero essere tolti tutti i riferimenti ad immagini di natura puramente decorativa e spostare il loro richiamo nel foglio di stile per lo schermo desktop;
- sarebbe opportuno controllare ed eventualmente migliorare i testi alternativi delle immagini che, invece, appartengono al contenuto e sono quindi cruciali per la fruizione;
- si dovrebbero inserire gli elementi noscript sia per la funzione che apre il pop-up sia per il contatore a fondo pagina;
- andrebbe modificato il richiamo di eventi dipendenti dal dispositivo di interazione con l’applicazione di eventi logici;
- nel caso del menu di navigazione principale potrebbe essere interessante l’applicazione dell’attributo acceskey ai link assegnando ad esso valori numerici (richiamabili quindi anche dalle tastiere alfanumeriche dei cellulari);
- dovrebbe essere migliorato l’ordine di linearizzazione: idealmente questo requisito potrebbe essere pienamente soddisfatto passando ad una tecnica di impaginazione priva di tabelle;
- dovrebbero essere eliminati dal codice XHTML tutti i riferimenti a larghezze o ad altezze di elementi (per esempio, le dimensioni delle immagini o l’ampiezza delle tabelle) e si dovrebbe spostare tali indicazioni nel CSS per il desktop; simili dimensioni, inoltre, andrebbero specificate in forma percentuale, se possibile.
- si potrebbe infine alleggerire il codice eliminando numerosi spazi e cambi di riga interni al codice sorgente;
Infine, andrebbe aggiunto il richiamo ad un css ottimizzato per i dipositivi mobili attraverso un’istruzione come:
<style type=”text/css” media=”handheld”>
<!–
@import url(“stile/stile_mobile.css”);
–>
</style>
Vedremo nella prossima lezione come costruire praticamente questo CSS.
Se vuoi aggiornamenti su Ottimizzazione della struttura HTML inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Build real-time applications with Javascript
Alcune indicazioni importanti di UX design per aggiornare lo stato delle applicazioni in real time, mentre l’utente sta interagendo. Implementare […]