Ciao, wordpresser! 🙂
Stai leggendo un semplicissimo – e breve – articolo informativo, che può evitarti di lasciare alla concorrenza una fetta importante di clienti o lettori.
Se non sei alle prime armi, le mie parole potrebbero avere il sapore della banalità ma, come sempre, l’obiettivo è quello di guidare gli inesperti a ottenere il massimo risultato possibile, quindi…
Stop ai convenevoli e andiamo dritti al punto del discorso. 👇
INDICE
Cos’è la Cross-Browser compatibility?
Pensiamo per un attimo al famosissimo gioco per bambini: quello delle forme geometriche.
Perché ti faccio questo esempio?
È molto semplice…
Se il tuo sito non è compatibile con un dato Browser, quest’ultimo proverà a mettere il quadrato dentro al cerchio non ottenendo – ovviamente – i risultati sperati.
Ciò succede perché, ogni singolo Browser web a cui gli utenti si affidano, non tratta gli elementi grafici o di Markup alla stessa identica maniera dei suoi simili, e ne comporta che CSS e HTML vengono resi graficamente in maniera differente.
A volte la differenza è minima, quasi non visibile a occhio nudo.
Altre volte, invece, risulta così impattante da far pensare subito a un “sito rotto”.
Un risultato del genere, porterebbe i tuoi clienti in target a navigare verso altre acque, e tutto questo si tradurrebbe in meno lettori e meno vendite.
Quindi, una volta realizzato il tuo sito, dovresti verificare che esso risulti ottimizzato a 360°.
Ma devo ottimizzarlo per tutti i Browser esistenti? 😱
Se arrivati a questo punto, ti sei fatto una domanda del genere, fai un respiro profondo.
Va tutto bene, perché la risposta è: “Ovviamente NO!”.🙂
Dovresti cercare la compatibilità Browser solo con i più utilizzati, che secondo le statistiche di Startcounter aggiornate al 2022 sono:
- Google Chrome con il 66,13% degli utenti;
- Safari / Edge che hanno rispettivamente una percentuale di utilizzo di 11,87 e 11%;
- Firefox con il 5,65%;
- Opera con il 3,09%.
Del resto, chi è che ottimizzerebbe il proprio sito per renderlo perfettamente visibile anche sul Browser Vivaldi?… Se te lo stai chiedendo, esiste sul serio. 😂
Consigli utili 💡
Sapevi che puoi scoprire quale Browser utilizzano i tuoi utenti, utilizzando Google Analytics?
Ti basta accedere al tuo account e seguire il percorso: Report > Tecnologia > Dettagli sulla tecnologia e potrai consultare una tabella dettagliata! 😉
I due metodi per testare il tuo sito
Testare il tuo sito non è difficile, e puoi seguire due strade…
Iniziamo con quella che NON ti consiglio! ❌
Esistono diversi tool a pagamento, che ti permettono di “replicare” la navigazione da diversi Browser. Uno di questi è browserling.
Il problema è che puoi utilizzare la versione free per appena 3 minuti, poi devi procedere al pagamento, sborsando 19$ al mese. 😱
Stessa cosa per quanto riguarda browserstack…
di cui il piano mensile parte da una base di 29$ al mese.
Ne vale la pena?
Risposta: no, non ne vale la pena.
La strada più semplice, è scaricare i 4 Browser più utilizzati e navigare verso il tuo sito da ognuno di questi, in modo da effettuare i test per tutto il tempo necessario, senza scucire un euro dal tuo portafogli. 🙂
Ora, per chiudere il cerchio, ci basta rispondere alla domanda…
Come ottimizzare un sito in caso di scarsa compatibilità Browser?
Esiste un codice di reset del CSS sviluppato da Ian Stewart nel lontano 2012, che è in grado di “ripulire” qualsiasi formattazione di default di un dato Browser. 👇
/* =Reset
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
html {
font-size: 62.5%; /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
overflow-y: scroll; /* Keeps page centred in all browsers regardless of content height */
-webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
-ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
}
body {
background: #fff;
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
display: block;
}
ol, ul {
list-style: none;
}
table { /* tables still need 'cellspacing="0"' in the markup */
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
a:focus {
outline: thin dotted;
}
a:hover, a:active { /* Improves readability when focused and also mouse hovered in all browsers people.opera.com/patrickl/experiments/keyboard/test */
outline: 0;
}
a img {
border: 0;
}
Conclusioni
Siamo arrivati così alla fine di questa piccola guida.
Ti ricordo, come d’abitudine, che la sezione commenti è a tua totale disposizione per porre ulteriori domande o chiedere aiuto, quindi non essere timido. 🙂
Se invece non te la senti di resettare il CSS da solo, scopri il nostro servizio di assistenza WordPress qui sotto! 👇
L'assistenza WordPress con i clienti più tutelati del web
Risolviamo il tuo problema o sarai tu a guadagnarci!
Ti consigliamo anche
- su Guide WordPress
- scritto il
- su Guide WordPress
- scritto il
- su Guide WordPress
- scritto il
- su Guide WordPress
- scritto il
- su Guide WordPress
- scritto il