Envato Elements - pobierasz co chcesz, ile chcesz

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:

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:

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:

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:

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ć dodatkowa 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…

(!) Zgłoś błąd na stronie
Potrzebujesz profesjonalnej pomocy? Skontaktuj się z nami!
Spodobał Ci się artykuł? Zapisz się do naszego Newslettera - ZERO SPAMu, same konkrety, oraz dostęp do dodatkowych materiałów przeznaczonych dla subskrybentów!
Na podany adres e-mail otrzymasz od nas wiadomość e-mail, w której znajdziesz link do potwierdzenia subskrypcji naszego Newslettera. Dzięki temu mamy pewność, że nikt nie dodał Twojego adresu przez przypadek. Jeśli wiadomość nie przyjdzie w ciągu najbliższej godziny (zazwyczaj jest to maksymalnie kilka minut) sprawdź folder SPAM.
Monika ćwiczy przed kongresem ko..., ale dzięki motywowa Divi od Elegant Themes chyba nawet ona da radę...
WebInsider poleca księgowość wFirma
WebInsider korzysta z VPSa w HitMe.pl
WebInsider poleca VPSy DigitalOcean
WebInsider poleca serwis Vindicat
Napisz komentarz
wipl_napisz-komentarz_01Jeśli informacje zawarte na tej stronie okazały się pomocne, możesz nam podziękować zostawiając poniżej swój komentarz.

W tej formie możesz również zadać dodatkowe pytania dotyczące wpisu, na które – w miarę możliwości – spróbujemy Ci odpowiedzieć.
Linki partnerskie
Niektóre z linków na tej stronie to tzw. „linki partnerskie”, co oznacza, że jeśli klikniesz na link i dokonasz wymaganej akcji (np. zakup/rejestracja) możemy otrzymać za to prowizję. Pamiętaj, że polecamy tylko te produkty i usługi, z których sami korzystamy, i uważamy, że są tego na prawdę warte… :-)
Znaki towarowe i nazwy marek
W niektórych wpisach (oraz innych miejscach na stronie) mogą być przedstawione/użyte znaki towarowe i/lub nazwy marek, które stanowią własność intelektualną tych podmiotów, a zostały użyte wyłącznie w celach informacyjnych.
Spodobał Ci się artykuł? Zapisz się do naszego Newslettera!