Come mai il mio sito si visualizza in modo diverso dai diversi browser?
Avere un sito web simile su diversi browser è stato un problema costante per i web designer di tutto il mondo. La ragione è semplice – la visualizzazione di un sito web dipende da molte variabili diverse, ad esempio:
- Come il browser interpreta la pagina
Un sito web è solo un insieme di istruzioni che descrivono come un sito dovrebbe apparire. Sta al browser visualizzarlo leggendo l’intero codice del tuo sito e procedendo a riprodurlo. Ci sono, tuttavia, delle differenze nell’interpretazione dei codici e i diversi browser interpreteranno la stessa pagina in modo leggermente diverso. Per questo motivo dovresti verificare, durante lo sviluppo del sito, come quest’ultimo viene visualizzato nei diversi sistemi operativi e nei diversi browser. Puoi utilizzare il seguente strumento online per vedere come vengono visualizzate le tue pagine sui diversi browsers:
Un buon sito web dovrebbe apparire lo stesso e tutte le sue funzionalità dovrebbero funzionare in qualsiasi browser.
Purtroppo non esiste una soluzione facile. È necessario verificare le specificità di ogni browser che non riesce a visualizzare correttamente il tuo sito web ed apportare le modifiche necessarie al codice. Tali problemi di compatibilità possono verificarsi non solo in diversi browser, ma anche causa di una vecchia versione del browser che non supporta completamente gli standard più recenti.
- L’OS del visitatore (sistema operativo)
Se il tuo sito web utilizza pulsanti di presentazione, pulsanti di selezione, caselle di controllo e campi di modifica, tutti saranno visualizzati a seconda del sistema operativo del visitatore. I font del browser hanno anche la tendenza a sembrare leggermente diversi quando vengono eseguiti su un PC, un Mac o un computer Linux.
Un’area in cui i siti quasi sempre sembrano diversi è su pagine con form. Diversi sistemi operativi e browser rendono i pulsanti sui moduli e le caselle di testo completamente diverse. Su un PC, i pulsanti di presentazione predefiniti sono quadrati e piuttosto piatti, in un Mac i pulsanti di presentazione predefiniti sono ovali ben ombreggiati. Ad esempio, un pulsante di invio può sembrare un rettangolo grigio sul tema classico di Windows e come un ovale se si utilizza lo stile di XP. Come soluzione, è possibile creare pulsanti personalizzati per il tuo sito web.
Il codice di un pulsante standard di presentazione corrisponde al seguente:
<input type="submit" />Puoi sostituirlo con il seguente codice per specificare l’immagine del pulsante di invio:
<button name="submit" type="submit" value="Submit"><img alt="" src="submitimg.gif" />Submit</button>
- La risoluzione dello schermo del visitatore
La risoluzione dello schermo influisce molto sul modo in cui viene visualizzato un sito web. Ad esempio, se crei le tue pagine a 1024×768 non si visualizzeranno nello schermo di un visitatore con risoluzione dello schermo impostata a 800×600.
Per risolvere questo problema, dovresti evitare di utilizzare dimensioni statiche per il tuo sito web, e.s. invece di impostare la larghezza con width = 1024px puoi usare width = 100%. Questo non risolverà tutti i problemi, ma permetterà alla pagina di adattarsi allo schermo.