telefonlänkar är en sak. Som en ankarlänk du trycker på för att (förmodligen) gå till en annan sida, det här är länkar du trycker på för att ringa ett nummer på en telefonkompatibel enhet. De har funnits länge. Ändå orsakar de mig mycket förvirring. Till exempel kommer många enheter automatiskt att känna igen telefonnummer och göra länkningen för oss, men inte alltid.

det finns tillräckligt med webbtrafik på mobila enheter och massor av stationära appar som kan ringa, att det är värt att veta mer om telefonlänkar.,

standardanvändning

Vi har ett utdrag för telefonlänkar på den här webbplatsen som har hängt runt sedan 2011:

<a href="tel:1-562-867-5309">1-562-867-5309</a>

detta fungerar också på textlänkar:

<a href="tel:1-562-867-5309">Click to Call!</a>

tel: är inte så mycket en funktion som det är ett protokoll, mycket på samma sätt.sätt att http: och mailto: är protokoll för <a> taggfunktionen. Spec själv har inget att säga om det, även om HMTL5 gav stöd för anpassade protokollhanterare, vilket gör det möjligt att använda ett sådant protokoll.,

du undrar förmodligen varför tel: kan betraktas som standardanvändning i avsaknad av en officiell spec på den. Du kan kreditera detta till det faktum att det var en föreslagen standard så långt tillbaka som 2000 och senare antogs av iOS, vilket gör det de facto sätt att gå med ungefär 2007. Det finns andra telefonbaserade protokoll (som vi kommer till senare), men vi kommer att fokusera på tel: med tanke på dess relativa framträdande.,

webbläsarsupport

vi sertel: dyka upp som en protokollhanterare för länkar utan officiell dokumentation; och där det inte finns någon dokumentation ser vi ofta skillnader i webbläsarsupport och beteende. Det betyder inte att webbläsare inte känner igen<a> – taggen själv. Istället kan webbläsare fatta olika beslut om vad man ska göra när den länken klickas. Till exempel kan en webbläsare anta att en annan app behöver öppnas och kommer att utlösa en dialogruta som frågar vilken app som ska användas. I andra fall kan länken ignoreras helt och hållet.,

webbläsare länkar den?,td>ja initierar telefonsamtal
iOS ja utlöser alternativ för att ringa, meddelande, kopiera eller lägga till numret till Kontaktappen
Opera (OSX) ja Triggers dialog som bekräftar användningen av en annan app
Opera (Windows) ja utlöser en feldialogruta som inte känner igen protokollet
Safari ja startar FaceTime

styling telefonlänkar

styling telefonnummer är som alla andra länkar., I själva verket kommer det att ärva standard styling för ankare: 

a { color: orange; text-decoration: none;}

låt oss säga att vi bara stilar att gälla för telefonlänkar., Vi kan göra det med en pseudoväljare som söker ut tel: text i en given URL:

a { color: orange; text-decoration: none;}

Tuts+ har ett trevligt trick med ::before pseudoväljare för att lägga till Unicode-telefontecken innan numret visas:

a:before { content: "\260e"; margin-right: 0.5em;}

alternativa telefonrelaterade länkar

tro eller ej, tel: är inte det enda sättet att initiera ett telefonsamtal med en länk. Här är några andra anpassade telefonbaserade protokollhanterare till vårt förfogande.,

  • callto: exakt somtel: men används för att initiera samtal via Skype-appen.
  • auto—detected: många webbläsare kommer automatiskt att upptäcka ett telefonnummer i HTML och länka upp det för dig-inget behov av att ändra markeringen. iOS, till exempel, kommer helt att göra detta, även om det inte verkade vara fallet för Chrome på Android.
  • sms: hoppa över samtalet och gå direkt till SMS. Detta verkar vara mycket mindre stöds än tel: är bland webbläsare, inklusive mobil.,
  • fax: gå tillbaka till framtiden med faxmaskiner. Återigen, spottig tillförlitlighet.

bästa praxis

det är ganska roligt att prata om bästa praxis när det gäller något utan SPECIFIKATIONER. Spec ger en kort åsikt om” Klicka för att ringa ” idé, men här är några saker att tänka på när man arbetar med telefonnummer och länkar.

överväga sammanhanget

en telefonlänk kan göra för en utmärkt call-to-action, särskilt på mobiltelefoner där det minskar friktionen mellan innehållet och samtalet., Samtidigt kan telefonlänkar betraktas som ett hinder för en skrivbordsupplevelse där ett telefonsamtal inte skulle vara möjligt om enheten saknar en app som stöder den.

en idé skulle vara att skapa en klass speciellt för telefonlänkar och försöka visa eller dölja dem baserat på vad vi vet om webbläsaren. Modernizr och media frågor är praktiskt här, men helt oprecisa.

använd landskoder

en landskod krävs inte men kan vara en fin touch för webbplatser med internationell trafik., Landskoder kan föregås av en + men det krävs inte heller.

<a href="tel:+01-562-867-5309">1-562-867-5309</a>

sökmotoroptimering

SEO-experter kan ha mer att lägga till på detta än vad jag gör, men Google erbjuder ett strukturerat dataformat för lokala företag och använder det kommer att göra telefonlänkar mer igenkännliga för sökrobotar, formatera dem på sökresultatsidor på ett sätt som gör antalet mycket mer angripbart., Dudley Storey ger en utmärkt översikt med följande exempel:

på baksidan av att sökmotorer ska följa telefonlänkar kan du lägga till rel="nofollow" för att avskräcka länkar från att följas och indexeras. Detta kan vara en bra idé för någon länk som inte betecknas som en uppmaning till handling eftersom sökrobotar skulle vara benägna att försöka följa den till ingenstans.,

<a href="tel:+01-562-867-5309" rel="nofollow">1-562-867-5309</a>

stänga av Nummerdetektering i iOS

om du planerar att lägga till telefonlänkar i din markering, kanske du också vill överväga att inaktivera iOS från automatisk detektering av telefonnummer och åsidosätta dina stilar. Lägg till följande dokumentet <head> för att stänga av det:

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

Ytterligare läsning