połączenia telefoniczne są rzeczą. Podobnie jak łącze zakotwiczenia, które stukasz, aby (prawdopodobnie) przejść do innej strony, są to łącza, które stukasz, aby zadzwonić pod numer na urządzeniu obsługującym telefon. Są tu już od jakiegoś czasu. Ale powodują wiele zamieszania. Na przykład wiele urządzeń automatycznie rozpoznaje numery telefonów i łączy za nas, ale nie zawsze.

jest wystarczająco dużo ruchu w sieci na urządzeniach mobilnych i mnóstwo aplikacji desktopowych, które są w stanie wykonywać połączenia, że warto wiedzieć więcej o połączeniach telefonicznych.,

domyślne użycie

mamy fragment dla linków telefonicznych na tej stronie, który kręcił się od 2011 roku:

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

działa to również na linkach tekstowych:

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

tel: jest nie tyle funkcją, co protokołem, podobnie jak http: I mailto: są protokołami dla <a>. Sama specyfikacja nie ma o tym nic do powiedzenia, chociaż HMTL5 zapewniło wsparcie dla niestandardowych programów obsługi protokołów, które pozwalają na użycie takiego protokołu.,

prawdopodobnie zastanawiasz się, dlaczegotel: można uznać za domyślne użycie w przypadku braku oficjalnej specyfikacji. Można to przypisać faktowi, że był to proponowany standard już w 2000 roku, a później przyjęty przez iOS, co czyni go de facto sposobem na około 2007. Istnieją inne protokoły oparte na telefonach (do których wrócimy później), ale skupimy się na tel: biorąc pod uwagę jego względne znaczenie.,

Obsługa przeglądarki

widzimy, żetel: pojawia się jako obsługa protokołu dla linków bez oficjalnej dokumentacji; a tam, gdzie nie ma dokumentacji, często widzimy różnice w obsłudze i zachowaniu przeglądarki. Nie oznacza to, że przeglądarki nie rozpoznają samego znacznika <a>. Zamiast tego przeglądarki mogą podejmować różne decyzje dotyczące tego, co robić po kliknięciu tego łącza. Na przykład przeglądarka może założyć, że inna aplikacja musi się otworzyć i uruchomi okno dialogowe z pytaniem, z której aplikacji korzystać. W innych przypadkach link może zostać całkowicie zignorowany.,

tr>

przeglądarka czy to link?,td>tak inicjuje połączenie telefoniczne
iOS tak uruchamia opcje połączenia, wiadomości, skopiowania lub dodania numeru do aplikacji Kontakty
Opera (OSX) tak uruchamia okno dialogowe potwierdzające użycie innej aplikacji
Opera (Windows) tak uruchamia okno dialogowe błędu, które nie rozpoznaje protokołu
Safari tak

stylizacja numerów telefonów

stylizacja numerów telefonów jest jak każdy inny link., W rzeczywistości, będzie dziedziczyć domyślne style dla kotwic:

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

powiedzmy, że mamy tylko style do zastosowania do łączy telefonicznych., Możemy to zrobić za pomocą pseudo selektora, który wyszukuje tel: tekst w podanym URL:

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

Tuts+ ma ładny trik za pomocą ::before pseudo selektora, aby dodać znak telefonu unicode przed wyświetlaniem numeru:

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

alternatywne połączenia telefoniczne

uwierz lub nie, tel: nie jest jedynym sposobem, aby zainicjować połączenie telefoniczne z linkiem. Oto kilka innych niestandardowych protokołów telefonicznych do naszej dyspozycji.,

  • callto: dokładnie tak jak tel: ale używane do inicjowania połączeń za pośrednictwem aplikacji Skype.
  • auto-detected: wiele przeglądarek automatycznie wykryje numer telefonu w HTML i połączy go za Ciebie—nie trzeba zmieniać znaczników. na przykład iOS całkowicie to zrobi, chociaż nie wydaje się, aby było to w przypadku Chrome na Androida.
  • sms: Pomiń połączenie i przejdź od razu do wiadomości tekstowej. Wydaje się, że jest to o wiele mniej obsługiwane niż tel: jest wśród przeglądarek, w tym mobilnych.,
  • fax: wróć do przyszłości za pomocą faksów. Jeszcze raz, nieskazitelna niezawodność.

najlepsze praktyki

to trochę zabawne mówić o najlepszych praktykach, jeśli chodzi o coś bez specyfikacji. Spec daje krótką opinię na temat pomysłu „Kliknij, aby zadzwonić” , ale oto kilka rzeczy, o których należy pamiętać podczas pracy z numerami telefonów i linkami.

zastanów się nad kontekstem

połączenie telefoniczne może stanowić doskonałe połączenie do działania, szczególnie w telefonach komórkowych, gdzie zmniejsza tarcie między treścią a rozmową., W tym samym czasie łącza telefoniczne można uznać za przeszkodę w środowisku stacjonarnym, w którym połączenie telefoniczne nie byłoby możliwe, gdyby urządzenie nie posiadało aplikacji, która je obsługuje.

jednym z pomysłów byłoby stworzenie klasy specjalnie dla linków telefonicznych i próba ich pokazania lub ukrycia w oparciu o to, co wiemy o przeglądarce. Modernizr i media queries są tutaj przydatne, choć całkowicie nieprecyzyjne.

użyj kodów krajów

kod kraju nie jest wymagany, ale może być miłym akcentem dla stron o ruchu międzynarodowym., Kody krajów mogą być poprzedzone +, ale to też nie jest wymagane.

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

Search Engine Optimization

eksperci SEO mogą mieć więcej do dodania niż ja, ale Google oferuje ustrukturyzowany format danych dla lokalnych firm i korzystanie z niego sprawi, że linki telefoniczne będą bardziej rozpoznawalne dla indeksujących, formatując je na stronach wyników wyszukiwania w sposób, który sprawia, że liczba jest znacznie bardziej przydatna., Dudley Storey zapewnia doskonały przegląd za pomocą następującego przykładu:

po drugiej stronie chcąc, aby Wyszukiwarki podążały za linkami telefonicznymi, możesz dodać rel="nofollow" do zniechęcaj do śledzenia i indeksowania linków. Może to być dobry pomysł, aby każdy link nie był oznaczony jako wezwanie do działania, ponieważ gąsienice internetowe byłyby skłonne próbować podążać za nim donikąd.,

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

wyłączanie wykrywania numerów w systemie iOS

jeśli planujesz dodać linki do telefonu do znaczników, możesz również rozważyć wyłączenie systemu iOS z automatycznego wykrywania numerów telefonów i nadpisanie stylów. Dodaj następujący dokument <head> aby go wyłączyć:

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

dalsze czytanie