Disattivare i numeri di telefono blu su Safari e iOS

Pubblicato il 24 Settembre 2020
Aggiornato il 24 Settembre 2020

Negli ultimi tempi mi è capitato di portare a termine un sito per un cliente e di dover disattivare la funzione dei numeri blu per l’interazione dai dispositivi iOS per il browser Safari. Mi sono accorta infatti che, nella versione per Safari, non si vedeva il numero di telefono nel footer. Ohibò, come mai?

Ci è voluto un po’ per capirlo, ma poi ho notato che Safari modifica il colore del numero di telefono, trasformandolo in blu, e creando un link di collegamento. Che problema c’è? Ti viene spontaneo pensare. Il problema sorge nel momento in cui lo sfondo del footer, o del sito in generale, è blu o di un colore che crea poco contrasto tra il link e lo sfondo: a quel punto, comprenderai che il numero di telefono si vede pochissimo o non si vede affatto, provocando un discreto problema per quanto riguarda l’esperienza d’interazione (se t’interessa approfondire l’argomento, ne ho scritto qua) degli utenti che navigano con iPhone, per esempio. I quali, non c’è bisogno di dirlo, sono un bel po’!

Apro una parentesi che riguarda i dati di Google Analytics: probabilmente, col tempo, attraverso i dati e il comportamento degli utenti dai dispositivi Apple, avremmo notato una tendenza a non portare a termine l’obiettivo che potrebbe essere, appunto, il contatto telefonico, e piano piano avremmo individuato il problema. Ma per fortuna ce ne siamo accorti prima, risolvendo la problematica! Come? Te lo spiego qui di seguito.

Come disattivare la funzione numeri di telefono blu del tuo sito su iOS

Su un sito creato in HTML o comunque dove si ha pieno controllo del codice si può inserire un tag apposito che è:

<meta name="format-detection" content="telephone=no">

Io trovo più veloce aggiungere un CSS per impedire a Safari di modificare lo stile (lo si costringe a seguire il colore deciso sul sito). Ecco il codice che dovrai inserire nel Custom CSS del tuo sito WordPress:

a[href^=tel] {
text-decoration:inherit;
color: inherit;
}

Perché disattivare la funzione numeri blu per il tuo sito su Safari e iOS è così importante? Come dicevo sopra, si rischierebbe di annullare i contatti da questi dispositivi, rendendo nulla l’esperienza di questi utenti e vanificandone la permanenza sul sito. Il sito può essere veloce, navigabile, intuitivo, piacevole, stimolante, capace dunque di convertire i visitatori in micro e macro conversioni (contatti, appunto, oppure anche acquisti). Ma, se la fase finale, la call to action per attuare la conversione, non è visibile oppure non funziona, avremo fatto un terribile buco nell’acqua per il nostro cliente.

Ecco dunque un’altra lezione appresa da quest’esperienza: quando fai un sito, controlla sempre tutti i link e i dettagli con estrema attenzione, su ciascun browser e dispositivo.

Se ti serve una mano per disattivare la funzione numeri blu per il tuo sito su Safari e iOS, contattami, sarò felice di aiutarti.

Hola!

Sono Nicole,web designer e grafica freelance.

Scopri chi sono

Sono una web designer freelance

Mi occupo di sviluppo di siti web responsive, e-commerce, blog e grafica da circa 15 anni. Dal 2018 aiuto piccoli imprenditori, artigiani e liberi professionisti a portare la propria attività online con successo.

Mi occupo inoltre di formazione e consulenza in UI design per aziende, web agency e freelance, ed offro supporto e percorsi di mentoring a web designer che desiderano decollare con la loro attività.

Creazione siti web
Siti e-commerce
Branding

Formazione per web designer

FREELANCE

Se sei un web designer freelance alla ricerca di orientamento, chiarezza e supporto per prosperare nel mondo digitale in continua evoluzione, sei nel posto giusto! Il mio servizio di consulenza, formazione e mentoring è qui per te.

Scopri la formazione

Dal blog