Ostatnio zmieniałem stronę firmową kolegi, która zdecydowanie pamiętała jeszcze czasy, gdy w telefonach internetu nie było, a co za tym idzie, nie dość, że wygląda sam z siebie “trącił myszką”, to również korzystanie z niej na urządzeniach mobilnych do najwygodniejszych nie należało. Teraz jest już zdecydowanie lepiej, bo poza pełnym RWD mamy też np. dedykowane elementy dla urządzeń mobilnych i komputerów stacjonarnych (i laptopów ;-)). Ale chyba największą radość u znajomego wywołały linki, po kliknięciu, w które np. telefon automatycznie proponował wykonanie połączenia telefonicznego pod odpowiedni numer. Nie jest to nowość dla mnie, bo staram się stosować tego typu linki od dawna, ale w końcu uznałem, że temat warto przenieść na górę listy tematów do opisania (oczywiście w Trello).

Alternatywne typy linków

Zacznę od tego, że nawet nie mam zamiaru przedstawić tutaj wszystkich “alternatywnych linków”, za którymi idą jakieś dodatkowe akcje, inne niż standardowe “otwórz stronę/adres”, bo jest tego naprawdę dużo, zwłaszcza że sporo programów/platform korzysta z własnych “prefiksów”, które może nie są standardem, ale jeśli ktoś korzysta z danej usługi, to u niego zadziałają.

W tym zestawieniu postaram się przedstawić kilka najpopularniejszych, z których sam korzystam – czy to na potrzeby własne, czy (stron) moich klientów.

Wyślij e-mail

Chyba najpopularniejszym linkiem alternatywnym, jest “maito”, dzięki któremu możemy stworzyć link, po kliknięciu którego uruchomi się aplikacja do wysyłania poczty e-mail.

Podstawowa struktura takiego linku wygląda tak:

<a href="mailto:[email protected]">Napisz do nas e-mail</a>

W efekcie otrzymamy:

• Adres e-mail: [email protected]

Możemy taki link rozbudować o automatycznie uzupełniany temat (zamiast spacji wstawiamy %20):

<a href="mailto:[email protected]?subject=Wiadomość%20z%20Webinsider.pl">Napisz do nas e-mail</a>

W efekcie otrzymamy:

• Adres e-mail: [email protected]
• Temat: Wiadomość z Webinsider.pl

A nawet treść – w tym przypadku razem z tematem (%0A oznacza przejście do nowej linii):

<a href="mailto:[email protected]?subject=Wiadomość%20z%20Webinsider.pl&body=Świetna%20strona.%0A%0APozdrawiam,%20Patryk">Napisz do nas e-mail</a>

W efekcie otrzymamy:

• Adres e-mail: [email protected]
• Temat: Wiadomość z Webinsider.pl
• Treść: Świetna strona. [2x nowa linia/enter] Pozdrawiam, Patryk

Możemy też jednym linkiem wywołać wiadomość do więcej niż jednej osoby:

<a href="mailto:[email protected],[email protected]">Napisz do nas e-mail</a>

W efekcie otrzymamy:

• Adres e-mail 01: [email protected]
• Adres e-mail 02: [email protected]

A nawet ustawić adresy DW/CC (do wiadomości) i UDW/BCC (ukryte do wiadomości):

<a href="mailto:[email protected][email protected]&[email protected]">Napisz do nas e-mail</a>

W efekcie otrzymamy:

• Adres e-mail: [email protected]
• Adres e-mail DW/CC: [email protected]
• Adres e-mail UDW/BCC: [email protected]

Choć o “końcu poczty e-mail” mówi się od lat, to ma się ona nadal świetnie, i jak patrze choćby po sobie czy znajomych to raczej nie zanosi się, by szybko miało się to zmienić, dlatego cały czas warto z tych linków korzystać, zresztą nie tylko z myślą o urządzeniach mobilnych. Choć z racji tego, że adresy e-mail są często pobierane ze stron internetowych przez różnej maści SPAM-boty, to warto rozważyć dodatkowe ich “zakodowanie” (e-mail encode).

Zadzwoń lub napisz

Choć linki dotyczące adresów e-mail uważam za przydatne, to jednak są na tyle powszechne (choć głównie w podstawowej formie), że to nie one zrobiły na moim koledze wrażenie. Prawdziwe “WOW” wywołał link podpięty pod numer telefonu, który po kliknięciu zaproponował wykonie bezpośredniego połączenia telefonicznego z tym numerem. Niektóre przeglądarki robią coś takiego z każdym numerek, który znajdą, ale mnie osobiście to bardziej wkurza niż cieszy. Co innego, gdy to ja mogę wybrać który link ma być… linkiem.

Link pozwalający wykonać połączenie telefoniczne wygląda tak:

<a href="tel:+48987654321">Zadzwoń na/pod nr +48 987 65 43 21</a>

W przypadku aplikacji Skype (w Polsce może nie aż tak, ale na świecie jest naprawdę popularna) link może wyglądać tak:

<a href="callto:USERNAME">Zadzwoń na Skype do USERNAME</a>

Lub tak (ten wariant preferuje, przynajmniej ostatnio):

<a href="skype:USERNAME?call">Zadzwoń na Skype do USERNAME</a>

Możemy też ze Skype zadzwonić na wybrany numer:

<a href="callto://+48987654321">Zadzwoń na/pod nr +48 987 65 43 21 przez Skype</a>

Lub rozpocząć “pogaduszki” na czacie:

<a href="skype:USERNAME">Napisz na Skype do USERNAME</a>

Troszkę mniej popularnym, ale zahaczającym o powyższe będzie link do wiadomości SMS:

<a href="sms:+48987654321">Wyślij SMS do +48 987 65 43 21</a>

W tym przypadku również można dodać do linku treść SMSa:

<a href="sms:+48987654321?body=Wiadomość%20z%20Webinsider.pl">Wyślij SMS do +48 987 65 43 21</a>

Choć o ile większość wcześniej przedstawionych linków powinna być rozpoznawalna prawidłowo przez większość przeglądarek, to w przypadku SMSa może się zdarzyć, że przeglądarka z której korzysta użytkownik nie rozpozna (zinterpretuje) prawidłowo takiego linku.

W tym miejscu wypadałoby wspomnieć jeszcze o linku “fax”, ale chyba nigdy z niego nie korzystałem – bo nawet abstrahując od aktualnej popularności faksów (choć są miejsca, gdy cały czas kolejne rolki folii pracują, by drukować przychodzące dokumenty), to jednak faks to nie tylko numer, ale i treść, i to bardziej skomplikowana (złożona) nić “Cześć, co u Ciebie słychać? Poklikamy?”.

CSS, czyli (o)stylowanie

Na sam koniec jeszcze słów kilka o tym, że takie linki można za pomocą CSSa dodatkowo ostylować, tak by wyglądały inaczej niż zwykłe linki:

a[href^="mailto:"] { }
a[href^="tel:"] { }
a[href^="callto:"] { }
a[href^="skype:"] { }
a[href^="sms:"] { }
a[href^="fax:"] { }

Do tego można skorzystać z pseudo-klas, tak by np. podstawić dodatkową ikonę przed lub za linkiem:

a[href^="tel:"]::before { }
a[href^="tel:"]::after { }

Gdzieś tam w moich notatkach przewijają się jeszcze jakieś elementy związane z “schema”, czyli danymi strukturalnymi, ale wydaje mi się, że nie ma co o tym tutaj pisać, bo każdy zainteresowany tym tematem (dane strukturalne) zapewne wie, z jakiego formatu i kiedy korzysta, i potrafi go też “zintegrować” z wybranym linkiem…