Odsyłacze#
Wskazówki#
Na zakończenie działu umieszczę kilka rad w jaki sposób prawidłowo opisywać i eksponować hiperłącza. Wbrew pozorom jest to dość istotne zagadnienie, z którym każdy powinien się zapoznać jak najwcześniej. Uwagi w głównej mierze poruszają sposób tworzenia i formatowania treści umieszczanej wewnątrz znaczników <a>...</a> czyli tzw. anchor text.
Wyróżnienie#
Odsyłacze muszą w jasny i czytelny sposób wyróżniać się spośród masy tekstowej. Użytkownicy nie powinni sami zgadywać gdzie lub w co mogą kliknąć. Najlepiej zastosować w tym celu dwie własności tekstu: kolor oraz podkreślenie.
Zakładając, że opis linku jest kolorowy, z podkreślenia możemy zrezygnować w przypadku menu nawigacyjnego lub dużego zbioru odsyłaczy. Wspomniane elementy strony należy odpowiednio uwydatnić np. dodatkowym tłem.
Najlepiej będzie zarezerwować podkreślenie tylko i wyłącznie dla odsyłaczy, nawet jeśli nasze linki prezentujemy bez podkreślania. Zazwyczaj elementy podkreślone są odbierane jako "kliklne", użytkownicy mogą być zdezorientowani i rozczarowani, jeśli podkreślony tekst nie spełni ich oczekiwań.
Odmienne kolory dla odnośników nieodwiedzonych i odwiedzonych#
Linki nieodwiedzone należy oznaczać kolorami żywszymi, jaśniejszymi i bardziej nasyconymi niż odsyłacze odwiedzone. Hiperłącza odwiedzone powinny mieć kolor ciemniejszy, nudniejszy.
Dwa kolory powinny być wariantem lub odcieniem jednej barwy, wskazując na wyraźne powiązanie między sobą. Korzystanie z drastycznie różnych kolorów (np. pomarańczowy i zielony) utrudnia użytkownikom zrozumienie relacji między tymi dwoma rodzajami hiperłączy i utrudnia identyfikację, który kolor jest odpowiedzialny za poszczególny stan linków.
Najbardziej charakterystycznym kolorem wskazującym na odsyłacz jest barwa niebieska i jej odcienie. Dlatego dla zwykłego tekstu najlepiej stosować inną kolorystykę.
Wskazanie odsyłacza#
Nie ma potrzeby odmiennego ostylowania linków wskazywanych przez kursor myszy. Czyniąc to sprawiamy, że strona wydaje się bardziej zaśmiecona w czasie poruszania myszką po ekranie.
Od reguły możemy odstąpić w sytuacji kiedy np. zrezygnowaliśmy z podkreślenia linków. Dodatkowe efekty wizualne będą drogowskazem w czasie użytkowania witryny.
Przy wskazywaniu nie należy stosować pogrubiania tekstu, które niepotrzebnie powoduje jego przemieszczanie.
Odpowiednia treść#
Odsyłacze należy oznaczać zrozumiałymi opisami tekstowymi, które jasno definiują swoją zawartość. Użytkownik zazwyczaj powierzchownie przegląda witrynę w poszukiwaniu odnośnika do interesujących rzeczy. Nie powinien zastanawiać się nad każdym łączem, które zobaczy - warto szanować jego czas. Stosowanie zwrotów typu "tu", "kliknij tu", "zobacz" jest kardynalnym błędem. Takie opisy nie niosą ze sobą żadnej konkretnej treści. Wielu czytelników w ogóle je zignoruje.
Bez prawidłowych opisów użyteczność (usability) strony zostaje ograniczona.
Instrukcję obsługi mojego nowego skryptu opisałem <a href="#">tu.</a>Przedstawiam <a href="#">instrukcję obsługi</a> mojego nowego skryptu.Odpowiednie oznaczanie łącz służy nie tylko zwiększeniu ogólnej użyteczności witryny, ale ułatwia także przeglądanie jej osobom niedowidzącym. Korzystają one często z programów wyszukujących linki w tekście. Jeśli otrzymają listę z rezultatami typu "kliknij tutaj", niewiele im to pomoże. Dodatkowo prawidłowe hiperłącza pomagają w pozycjonowaniu witryny, co sprzyja pojawianiu się jej na znacznie wyższych miejscach w obrębie wyników wyszukiwania.
Jawne adresy#
Linki prowadzące do zewnętrznych stron należy odpowiednio opisywać. Jeśli adresy są długie, lepiej krótko scharakteryzować stronę (treść) niż podawać pełną ścieżkę dostępu.
Odwiedź koniecznie <a href="#">ten</a> portal.Odwiedź koniecznie portal <a href="#">benchmark.pl</a>.Powierzchnia#
Osobnym zagadnieniem jest sama powierzchnia linków. Im większy odnośnik tym łatwiej w niego kliknąć. Dla hiperłączy tekstowych najlepiej stosować odpowiednio długie opisy. W przypadku menu nawigacyjnego dobrym pomysłem jest zmiana wyświetlania elementu <a> z liniowego na blokowy. Wówczas zajmie on całą szerokość elementu nadrzędnego.
Nigdy nie należy robić linków jednoznakowych. Uwaga dotyczy szczególnie odsyłaczy mających służyć do nawigowania między podstronami wątku forum lub długiego artykułu podzielonego na części.
Kod:
<a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">»</a>Efekt:
1 2 3 »Kod:
<a href="#">[ 1 ]</a> <a href="#">[ 2 ]</a> <a href="#">[ 3 ]</a> <a href="#">[ Następna Strona ]</a>Efekt:
[ 1 ] [ 2 ] [ 3 ] [ Następna Strona ]Nie należy przesadzać i w drugą stronę tzn. podlinkowywać całych akapitów lub większych objętościowo treści. Internaucie znacznie łatwiej jest decydować o przydatności linków wtedy, gdy nie musi czytać zbyt wiele tekstu obejmującego hiperłącza.
Tytuł#
Za pomocą atrybutu title możemy odpowiednio opisać hiperłącze i tym samym ułatwić czytelnikowi rozpoznanie zawartości, do której prowadzi odnośnik. W przypadku długiego opisu odsyłacza, lepiej umieścić jego skróconą treść a dokładniejsze wyjaśnienie przedstawić w tytule.
Słabo opisane linki są niechętnie odwiedzane przez internautów. Warto więc poświęcić trochę czasu na ich właściwe przygotowanie. Dzięki temu zmniejszymy dezorientację użytkowników i tym samym zwiększymy użyteczność strony.
Atrybut title wpływa na pozycjonowanie stron w wyszukiwarkach internetowych. Przy tworzeniu tytułu należy przestrzegać kilku reguł:
- tytuł powinien być krótki (60-80 znaków)
- tytułem może być nazwa strony do której prowadzi odsyłacz (jeśli jest inna od aktualnej strony)
- tytuł może zawierać nazwę podstrony (jeśli po kliknięciu nadal zostajemy na tej samej stronie)
- tytuł może opisywać więcej szczegółów na temat strony do której prowadzi odnośnik
- w tytule mogą pojawić się informacje opisujące potencjalne utrudnienia po przeniesieniu na nową stronę (np. wymagane logowanie, obsługa JavaScript, otwarcie programu pocztowego)
- jeśli nazwa linku (anchor text) jest oczywista to nie warto dodawać tytułu (nie ma sensu zmuszać użytkownika do czytania tej samej informacji dwukrotnie)
Prosty przykład:
<p>Bardzo ciekawą opinię na temat XHTML-a wyraził PorneL w swoim słynnym
<a href="http://pornel.net/xhtml" title="Irracjonalne uwielbnienie dla XHTML">artykule</a>.</p>Efekt:
Bardzo ciekawą opinię na temat XHTML-a wyraził PorneL w swoim słynnym artykule.
Podsumowując, tytuł linku nie zwalnia z prawidłowego wyróżniania i tworzenia poprawnych opisów odsyłaczy. Jest on tylko uzupełnieniem, pomagającym w przekazywaniu pewnych dodatkowych treści.