Twórcy stron internetowych prześcigają się w smaczkach ułatwiających użytkownikom korzystanie ze ich dzieł. Pokażę wam jak stworzyć link click to call.
Kliknięcie na taki link spowoduje uruchomienie aplikacji Telefon np. w smartfonie i wybranie numeru by móc błyskawicznie nawiązać połączenie. Stworzenie takiego linku jest banalne, o dziwo, bardzo rzadko spotykam tego typu udogodnienia na stronach internetowych.
Spis treści:
Klikalny numer telefonu na stronie
Oto jak powinien wyglądać kod HTML klikalnego adresu e-mail. Jest to link z adresem, który rozpoczyna tel:
<a href="tel:0048883535530">+48 88 35 35 530</a>
Format międzynarodowy numeru nie jest wymagany ale zalecany, no i… ładnie wygląda.
Częstą praktyką jest usuwanie znacznika w widoku PC a pokazywanie (czyli dynamiczne dodawanie go) na urządzeniach mobilnych. Jest to podyktowane tym aby nie wprowadzać zamętu na stronach w wersji desktop. Jest to według mnie zbyt drobnostkowe podejście do tematu i wolałbym ten link zostawić oszczędzając 3 linijki kodu. Tylko kwestią czasu jest kiedy linki takie będą obsługiwane także przeglądarki z widokiem desktop. Na dzień dzisiejszy dodatek komunikatora Skype rozpoznaje i obsługuje już tego typu linki.
Klikalny e-mail na stronie
W ramach dodatku podpowiem, że podobnie sprawa ma się z klikalnymi adresami e-mail. Funkcjonalność takiego linku wspierają zarówno urządzenia typu desktop jak i urządzenia mobilne. Link tworzymy analogicznie tylko zamiast prefiksu tel stosujemy mailto. Oto przykład takiego linku, który uruchamia program pocztowy w komputerze lub telefonie:
<a href="mailto:pawel@mansfeld.pl">pawel@mansfeld.pl</a>
Efekt „na żywo” możecie sprawdzić klikając na moje numery telefonów lub adres e-mail na stronie kontakt. Taki gadżet na pewno przyniesie sporo radości klientom ceniącym sobie czas i funkcjonalność waszej strony internetowej.
Jak już jesteśmy przy danych teleadresowych warto wspomnieć o korzyściach płynących ze stosowania danych strukturalnych lub jak kto woli danych uporządkowanych. Tutaj mamy do wyboru dwa wyjścia. Dane uporządkowane bezpośrednio w tagach html lub stworzenie skryptu z JSON-LD. Ale o tym, który warto stosować i jak to wygląda w praktyce piszę już w osobnym artykule: dane strukturalne.
Pamiętaj aby linki były łatwe do kliknięcia (miały odpowiednią wielkość o raz marginesy zewnętrzne i wewnętrzne) na ekranie dotykowym smartfona.
Link kliknij-zadzwoń to jedna z prostych sztuczek polepszająca User Experience strony internetowej – czytaj więcej w przykładach dobrego UX na stronie internetowej.
