Creazione di Cross-Browser Compatibile Siti web
Inviato in termini di Prestazioni da WP Engine
Ultimo aggiornamento il 30 Maggio, 2019
Anche se la maggior parte delle persone bastone all’utilizzo di un solo browser, si hanno decine e decine di opzioni per desktop e dispositivi mobili. Idealmente, i siti Web visualizzerebbero perfettamente indipendentemente dal browser utilizzato. Tuttavia, questo non è sempre il caso, che è dove il test cross-browser entra in gioco.
Con un accurato test cross-browser, puoi assicurarti che il tuo sito web appaia e si comporti perfettamente in tutte le opzioni popolari. In questo modo, i tuoi visitatori avranno un’esperienza altrettanto grande, sia che utilizzino Chrome, Firefox, Opera o opzioni meno conosciute come SeaMonkey.
In questo articolo, parleremo un po ‘ di più dell’importanza dei test cross-browser. Poi andremo oltre alcuni passaggi per aiutarvi a creare un sito web compatibile cross-browser. Mettiamoci al lavoro!
Perché la compatibilità cross-browser è importante?
La maggior parte delle persone utilizza browser noti, come Google Chrome, Safari, Firefox e Opera. Tuttavia, sono disponibili molte più opzioni di quanto tu possa immaginare. Questo è un bene per il consumatore, ma il problema per te è che ogni browser è costruito in modo diverso. Ciò significa che il tuo sito Web potrebbe funzionare perfettamente su Chrome, ma riscontrare problemi su Firefox (solo per fare un esempio).
Nella nostra esperienza, la maggior parte degli errori che vedrai in un browser ma non in un altro sono problemi relativamente piccoli. Un elemento specifico del tuo sito potrebbe non vederlo, o una particolare funzionalità potrebbe non funzionare correttamente. Mentre questi problemi possono essere minori, devono essere affrontati se si desidera fornire la stessa esperienza a tutti i visitatori del tuo sito.
Idealmente, ti consigliamo di progettare il tuo sito web per essere cross-browser compatibile da zero. In questo modo, non rischierai di alienare gli utenti di un particolare browser. Nelle prossime sezioni, vi mostreremo come farlo.
Come creare un sito Web compatibile con cross-browser
L’idea di creare un sito Web compatibile con cross-browser potrebbe sembrare scoraggiante. Tuttavia, alcuni semplici passaggi possono fare molto per garantire che il tuo sito funzioni perfettamente sulla maggior parte dei browser. Parliamo di cosa sono!
Passo 1: Imposta un ‘Doctype’ per i tuoi file HTML
Quando un browser carica il tuo sito web, deve capire quale versione di HTML stai usando. Questo è importante, perché diverse versioni di HTML contengono regole diverse.
Un ‘doctype’ è un’istruzione che dice ai browser: “Ehi, questa è la versione di HTML che useremo!”In questo modo, i browser non dovranno fare alcuna ipotesi, che può diminuire il numero di errori che gli utenti incontreranno.
Fortunatamente, questo passaggio è straordinariamente semplice. Tutto quello che devi fare è aggiungere il seguente frammento di codice ai tuoi documenti HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Come noterai, questo frammento è per la versione 4.01 di HTML. Se invece si desidera utilizzare HTML5, è possibile utilizzare questo codice:
<!DOCTYPE html>
Il problema è che alcuni browser non giocano ancora bene con HTML5. Nonostante i suoi numerosi miglioramenti, il suo utilizzo può influire sulla compatibilità cross-browser, quindi dovrai valutare questo fatto insieme ai suoi vantaggi.
Passo 2: Usa le regole di ripristino CSS
Di solito, i CSS sono il principale colpevole degli errori di compatibilità del browser. Questo perché ogni browser ha il proprio set di regole CSS. Per dirla in un altro modo, il CSS del tuo sito potrebbe essere visualizzato in modo diverso a seconda del browser utilizzato dai tuoi visitatori.
Un modo per risolvere questo problema è usare un ‘CSS reset’. Questi sono set di regole che puoi aggiungere al tuo sito Web, che impostano una linea di base per il modo in cui i CSS funzionano tra i browser.
Ci sono diverse opzioni quando si tratta di reset CSS, ma uno dei nostri preferiti si chiama Normalizzare.css, a causa di quanto sia completo:
È possibile scaricare il normalizzare.file css dalla sua libreria GitHub e usarlo come punto di partenza per il CSS del tuo sito web. Questo ti aiuterà a massimizzare la compatibilità cross-browser sul tuo sito.
Fase 3: Usa librerie e framework compatibili cross-browser
Librerie JavaScript e framework ampi come Foundation e Bootstrap sono incredibilmente popolari in questi giorni. Se hai intenzione di utilizzare tali elementi per costruire il tuo sito web, puoi risparmiare un sacco di mal di testa utilizzando le opzioni amichevoli cross-browser.
Alcune librerie e framework sono stati sviluppati da zero per lavorare con il maggior numero possibile di browser. In generale, i framework più popolari, inclusi i due che abbiamo appena menzionato, sono costruiti per essere compatibili con il maggior numero possibile di browser.
Solo per essere sicuri, tuttavia, assicurati di controllare la documentazione per qualsiasi libreria o framework che intendi utilizzare. Nella maggior parte dei casi, troverete informazioni sulla compatibilità cross-browser piuttosto facilmente. Ad esempio, ecco la pagina di compatibilità di Foundation dalla sua documentazione:
Una piccola ricerca vi aiuterà a fornire un’esperienza straordinaria per tutti i visitatori, non solo quelli che utilizzano un particolare browser.
Test cross-browser
Anche se hai fatto uno sforzo per creare un sito Web compatibile con cross-browser, è comunque una buona idea controllare e vedere se tutto funziona come dovrebbe. Questo processo è relativamente semplice: tutto ciò che devi fare è caricare il tuo sito Web utilizzando più browser e verificare la presenza di errori.
Il problema è che ci sono molti browser là fuori. Per coprire le tue basi, ti consigliamo di concentrarti sulle prime cinque opzioni in base alla quota di mercato, che sono:
- Google Chrome
- Safari
- Firefox
- UC Browser
- Opera
Potresti notare che Microsoft Edge non ha fatto la lista. La sua quota di mercato è piuttosto piccola in questi giorni, ma è comunque buona pratica assicurarsi che il tuo sito funzioni anche con esso.
Naturalmente, l’installazione di cinque o sei diversi browser sul computer può essere un dolore. Ecco perché ci sono molti servizi che ti consentono di condurre test cross-browser online. Questo semplifica notevolmente il processo, e le tasse coinvolte sono di solito minori.
Non sacrificare la tua esperienza digitale
Non tutti i visitatori del tuo sito web utilizzeranno lo stesso browser. Ciò significa che se vuoi assicurarti che ogni utente possa godere del tuo sito web, dovrai eseguire alcuni test cross-browser.
Tieni presente, tuttavia, che anche se il tuo sito funziona perfettamente su tutti i browser, devi comunque utilizzare un host web di alta qualità se vuoi fornire la migliore esperienza digitale possibile. Con WP Engine, ottieni prestazioni incredibili e accesso a un supporto di livello esperto, quindi dai un’occhiata ai nostri piani!