Web Design Blog / Web:

Link kliknij-zadzwoń (i klikalny e-mail)

Data publikacji: 2 stycznia 2014

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.

Oto jak powinien wyglądać link:

<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.

W ramach dodatku podpowiem, że podobnie sprawa ma się z 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.

Źródła

https://developers.google.com/web/fundamentals/native-hardware/click-to-call/

Link kliknij-zadzwoń (i klikalny e-mail)
4.7 (93.33%) głosów: 12


Komentarze

Brak komentarzy.

Dodaj swój komentarz