Stworzyć udaną stronę internetową to nie lada sztuka… Nowym webmasterom brakuje doświadczenia, a stare wygi walczą z wyrobionymi przez lata nawykami. Z tego artykułu dowiesz się, jakie błędy są najczęściej popełniane oraz jak ich unikać.
Trzymam właśnie podręcznik do nauki języka
HTML sprzed kilku lat. Treść tego \”historycznego\”
dokumentu najlepiej oddaje fakt, jak
wiele zmienia się w projektowaniu stron internetowych
każdego roku. Autor krok po kroku pokazuje
nam, jak stworzyć dobry design strony w oparciu
o ramki. Dobry, czyli pełen różnej maści obrazków,
okraszony sympatycznym tłem oraz interesującym
podkładem muzycznym.
W dobie nowoczesnych przeglądarek, web 2.0
i XHTML taka publikacja byłaby nie do pomyślenia.
A jednak, część starych nawyków przetrwała do
dzisiaj, mimo że wiele z nich jeszcze w latach 90.
uznawano za obciach. Oto przegląd najczęściej
popełnianych przez webmasterów błędów.
Ile można czekać?
Pierwszy na naszej liście jest czas ładowania
stron. Oczekiwanie na stronę zniechęca potencjalnych
użytkowników. Pewnie i tobie zdarzyło się
zamknąć okno przeglądarki po kilku sekundach
wpatrywania się w nieruchomy pasek stanu. Choć
obecnie dysponujemy już często bardzo szybkimi
łączami, nie można zapominać o tym, jak ważne
jest, aby stworzyć stronę lekką i przemyślaną.
Dotyczy to nie tylko zagraconego kodu strony,
ale także nadmiernej ilości plików graficznych
i multimedialnych! Jeśli nie możesz ograniczyć
liczby grafik, popracuj przynajmniej nad ich kompresją.
Darmowe programy, takie jak edytor GIMP
(http://gimp.org), świetnie radzą sobie z odchudzaniem
zbyt ciężkich plików JPG. Niekiedy warto także
wybrać inny format graficzny, jak np. doceniany na
świecie format PNG.
Witam na stronie…
Nie ma chyba nic tak irytującego, jak wstępna
animacja (tzw. intro), która ma nas zachęcić do
dalszego przeglądania strony. Nie lepiej sprawdza
się również w tym miejscu tekst ze wstępem.
Wchodząc na daną stronę, zwykle wiemy, czego
ona dotyczy i co może nam zaoferować. Jeśli w danym
przypadku jest inaczej, wystarczy zapoznać się
z treścią serwisu, zamiast tracić czas na czytanie
tego, co ciekawego miał nam do przekazania autor.
Strona wejściowa warta jest umieszczenia
tylko wówczas, gdy zawiera coś uzasadniającego
jej istnienie, czyli nie tylko samo zaproszenie do
wejścia. Bywa ona przydatna np. w serwisach,
które mają postać multimedialnych prezentacji lub
galerii zdjęć.
Oglądaj w rozdzielczości…
Nadal nie brakuje serwisów, które nie wyglądają
dobrze we wszystkich rozdzielczościach ekranu.
O ile do niedawna problem dotyczył stron, które
nie mieściły się na małym ekranie w rozdzielczości
800×600 i wymagały co najmniej rozdzielczości
1024×768, o tyle obecnie problemem są strony,
które prezentują się źle na zbyt dużych ekranach.
Mogą się o tym przekonać właściciele nowych
monitorów panoramicznych, gdy strona zamiast
wyświetlić się na środku ekranu, przylega do jednej
z jego bocznych krawędzi. Nie jest to problem
na monitorze 17-calowym, ale już w przypadku
22-calowego lub większego stanowi poważne
utrudnienie.
Tymczasem wystarczy niekiedy dodać tylko kilka
prostych linijek w pliku CSS, aby mieć pewność,
że będzie się ona dobrze prezentować tak przy
rozdzielczości 800×600, jak i 1600×1200.
Należy także zwrócić szczególną uwagę na dostosowanie
kodu strony do wymogów wszystkich
popularnych przeglądarek. Oprócz Internet Explorera,
liczą się także przeglądarki Firefox oraz Opera,
a na świecie również Safari. We wszystkich tych
programach strona powinna wyglądać co najmniej
podobnie, jeśli nie identycznie. Nie jest to tak trudne,
jak się wydaje, bowiem w przeciwieństwie do
IE, alternatywne przeglądarki dobrze radzą sobie
ze standardami sieciowymi, w podobny sposób
interpretując kod HTML i CSS.
Strona w budowie
Innym rekliktem przeszłości są znaki \”Strona
w budowie\”. Uzasadniano to różnie, ale informacja
ta bardziej odstraszała, niż zachęcała do ponownych
odwiedzin. Jeśli coś nie jest skończone, bądź nie
jesteś nawet pewien, czy dane działy zagoszczą
później w serwisie, po prostu nie kieruj do nich
ruchu! To bardzo denerwujące, gdy jeden z trzech
odnośników prowadzi do podstrony z sympatycznym
(mimo wszystko) robotnikiem, dzierżącym młot
pneumatyczny i tabliczkę \”Under Construction\”.
Błędne kodowanie
Obowiązujący standard kodowania polskich
znaków na stronach WWW to ISO-8859-2 lub
UTF-8. Warto dokładnie zakodować to sobie
w głowie, aby uniknąć problemów związanych
z brakiem polskich liter, a w konsekwencji nieczytelnym
tekstem w przeglądarce.
Do niedawna wielu webmasterom zdarzało się
stosować kodowanie Windows 1250. Jednak Windows
to nie jedyny system operacyjny na świecie.
Chyba nie chcesz, aby użytkownicy Linuksa lub
maców byli dyskryminowani, a co za tym idzie, nie
mogli zapoznać się z twoimi materiałami?
Edytory graficzne zaśmiecające kod
Choć pozornie składanie w całość wyglądu strony
w edytorach WYSIWYG jest łatwiejsze i pozwala
na osiągnięcie zamierzonego efektu bez dokładnej
znajomości kodu, jest to narzędzie wyłącznie dla
osób mających pojęcie o ich ograniczeniach. W rękach
niedoświadczonego webmastera prowadzi do
zaśmiecenia kodu.
Za przykład warto wziąć popularny wśród
początkujących webmasterów program FrontPage.
W starszych wersjach program ten samodzielnie
generował zupełnie nieprzydatne wpisy i znaczniki.
Ostrożność wskazana jest także podczas korzystania
z popularnego darmowego edytora NVU
(http://www.nvu.pl) lub wywodzącego się z niego
KompoZera (http://www.kompozer.net). Chociaż
NVU to bardzo wygodny i udany program, warto
uważnie sprawdzać każdą linijkę kodu, aby uniknąć
takich wpadek jak np. oddzielanie akapitów
znacznikiem {html}
{/html} zamiast wstawianiem ich
w oddzielne paragrafy {html}
{/html}.
Nieprzejrzysta nawigacja
Nawigacja po stronie musi być prosta i wygodna.
Należy zadbać o to, aby z każdej podstrony
można było szybko powrócić na stronę główną.
Natomiast przechodzenie pomiędzy kolejnymi podstronami
powinno odbywać się już bez konieczności
korzystania z menu na stronie głównej.
Pamiętaj, że nawigacja to nie miejsce na
kreatywność – powinna być przejrzysta. Warto
zatem w miejsce graficznych odnośników stosować
odnośniki tekstowe, opisane w intuicyjny sposób.
Zadbaj o to, aby w całym serwisie układ menu
był podobny, a same odnośniki odróżniały się od
zwykłego tekstu, głównie kolorem.
Zły dobór kolorów
Przemyślany dobór kolorów na stronie ma
bowiem wpływ nie tylko na jej wizerunek, ale
i użyteczność. Ich zestawienie powinno być
efektowne, lecz zarazem odpowiadające kryteriom
dostępności.
Istnieje wiele metod dobierania kolorów
na stronie. Z pewnością jednak warto przyjrzeć
się schematom kolorystycznym zastosowanym
w projektach cenionych stron i tam szukać inspiracji.
Z pomocą przyjdą także aplikacje w rodzaju
ColorSchemer (http://colorschemer.com), czyli
narzędzia internetowego służącego do zestawiania
współgrających ze sobą kolorów.
Ale fajnie się kręci!
Animowane elementy są na stronach internetowych
niewskazane. Strona służy przekazaniu
informacji w możliwie najlepszy, najszybszy
i najciekawszy sposób. Animacje w niczym tutaj
nie pomagają, a w dodatku odwracają uwagę od
właściwej treści.
Warto w tym miejscu zainteresować się Flashem.
Zacznijmy od tego, że nie jest on właściwym
narzędziem do kompletnego tworzenia zwykłych
stron internetowych. Po pierwsze – strony
wykonane w tej technologii są znacznie cięższe od
tradycyjnych witryn. Ponadto sprawiają problemy
z nawigacją, zarówno zwykłym uzytkownikom,
którzy odruchowo kliknęli na przycisku \”Wstecz\”
i ku ich zaskoczeniu opuścili stronę, jak i robotom
wyszukiwarek, które nie potrafią zindeksować tak
napisanego kodu. Oczywiście Flash świetnie nadaje
się do tworzenia multimedialnych elementów
czy zamieszczania urywków filmów w serwisie.
Bywa także z powodzeniem wykorzystywany do
tworzenia efektownych stron WWW i artystycznych
portfolio, które mają za zadanie prezentować
umiejętności graficzne autora. Wtedy odrobina
szaleństwa jest w pełni uzasadniona.
Obecność ramek w serwisie…
…najlepiej ogranicz do minimum! Sytuacje,
gdy są one faktycznie niezbędne można policzyć
na palcach jednej ręki, tymczasem ich zastosowanie
może mieć opłakane skutki dla nawigacji
na stronie. Dlaczego nie powinno się stosować
ramek? Spowalniają one ładowanie się strony,
uniemożliwiają dodanie konkretnej podstrony
do zakładek, utrudniają jej wydrukowanie, nie
pozwalają na zamieszczanie odsyłaczy do konkretnych
podstron. Mało? To może na dokładkę
dorzucę, że uniemożliwiają zapis strony na dysk,
a otworzenie hiperłącza w nowym oknie najczęściej
całkowicie psuje układ strony i uniemożliwia
nawigację…
Pomijanie znacznika ALT
Dodawanie opisów ilustracji w znaczniku ALT
ma większy sens, niż to się na pozór wydaje. Ich
obecność ułatwia działanie programom odczytującym
tekst na stronie dla osób niedowidzących.
Ponadto są one wykorzystywane przez roboty
wyszukiwarek w celu indeksacji grafik. Przy okazji
mogą również pełnić formę graficznych wskazówek
wyświetlanych po przytrzymaniu kursora myszki
nad daną ilustracją.
Niewłaściwe stosowanie twardej spacji
Cieszy fakt, że coraz mniej webmasterów nadużywa
w kodzie strony twardych spacji. Zwłaszcza
że wśród tych korzystających trudno byłoby
znaleźć poprawnie używających tego narzędzia.
Twarda spacja, oznaczana w kodzie jako {html} {/html}
(non-breaking space), nie służy do wyrównywania
obiektów czy tekstu. Nie powinno się jej również
wykorzystywać do rozciągania wierszy ani kolumn.
Twarda spacja służy wyłącznie do przenoszenia
wyrazów do nowej linii. A i to ze szczególnym
wskazaniem na przyimki oraz spójniki, które
w normalnym druku nie występują na końcu linijki.
W tym właśnie celu spację następującą po nich
zamienia się na {html} {/html}.
Blokady, zakazy i nakazy
Na pewno nieraz trafiłeś na informację taką,
jak: \”Przepraszamy, ale aby pobrać plik, musisz się
zarejestrować\”. To marne rozwiązanie. Zdecydowana
większość użytkowników po przeczytaniu tego
typu informacji opuszcza stronę i już nigdy więcej
na nią nie wraca. To samo dotyczy forów dyskusyjnych,
gdzie do przeczytania postów potrzebna jest
wcześniejsza rejestracja.
Inny rodzaj ograniczenia to spotykany np.
na blogach skrypt powstrzymujący możliwość
używania prawego przycisku myszy. Wychwalany
niegdyś jako doskonały pomysł na walkę
z plagiatorami, dzisiaj już tylko irytuje. A dla internautów
korzystających w przeglądarce internetowej
z gestów myszy jest wręcz przekleństwem.
Rozmiar liter: 10 px
Jeden z podstawowych błędów popełnianych
przez webmasterów to podawanie wielkości liter
w pikselach. Jako że jest to wartość stała, niezależnie
od rozdzielczości i ustawień użytkownika,
tekst wyświetlany będzie czcionką o rozmiarze
x pikseli.
W praktyce oznacza to, że przy każdej zmianie
rozdzielczości pojawią się inne problemy. Na małych
ekranach tekst będzie zbyt duży, a w przypadku
najwyższych rozdzielczości 9-czy 10-pikselowa
czcionka będzie zupełnie niewidoczna! Aby tego
uniknąć, należy pozwolić przeglądarce na samodzielne
ustalanie najbardziej proporcjonalnego
rozmiaru liter, podając wielkość czcionki w procentach,
opisowo lub chociażby w punktach.
Błędna interpunkcja i ortografia
Solidny autor strony zawsze dba o poprawną
ortografię oraz interpunkcję. Wszelkie błędy w tekście
mają wpływ na to, jak użytkownicy odbierają
twoją stronę. Jeżeli mimo usilnych starań, nadal
popełniasz błędy ortograficzne, możesz zawsze
sprawdzić treść swojej strony w edytorze tekstu
z wbudowanym słownikiem ortograficznym. Funkcję
sprawdzania wpisywanego tekstu udostępniają
już także niektóre przeglądarki internetowe, np. Firefox.
Zwracaj także uwagę na poprawną interpunkcję.
Niewłaściwie wstawione spacje przy znakach
interpunkcyjnych powodują niezgrabny wygląd
tekstu i nieprawidłowe przenoszenie wyrazów do
nowej linii.
Brak aktualizacji
Dobra strona WWW powinna być stale aktualizowana.
Aktualność i rozwój strony to najważniejsze
elementy utrzymujące przy niej czytelników.
Nikt nie będzie miesiącami zaglądał na twoją
witrynę, by wreszcie zobaczyć coś nowego. Jeśli
chcesz tworzyć ciekawy serwis, będziesz potrzebował
samozaparcia, ambicji i chęci do działania.
Systematyczne aktualizacje to także pewność,
że strona będzie powoli wspinać się w górę w indeksach
wyszukiwarek. Pamiętaj tylko o tym, aby
działać krok po kroku, zamiast wrzucać hurtem do
serwisu nowe materiały co miesiąc lub dwa. Może
to bowiem przynieść więcej szkody niż pożytku.
Podsumowanie
To oczywiście nie wszystkie błędy, które zdarza
się popełniać twórcom stron, także tym bardziej
doświadczonym. W zasadzie jest ich tak wiele, że
bez problemu wypełniłyby kilka kolejnych artykułów.
Najważniejsze jednak, aby stale doskonalić
swój warsztat, czyli cały czas tworzyć i tworzyć.
Powodzenia!
Najbardziej irytujące błędy, które wpływają
na dostępność strony WWW
Nieczytelna konstrukcja odnośników {html2}{/html2}
Pierwszym i chyba najczęstszym błędem wpływającym na problemy z dostępnością strony jest niewłaściwy
sposób konstruowania odnośników za pomocą znacznika {html}{/html}. Opisywanie odnośników
tekstem w rodzaju \”kliknij tutaj!\” w zasadzie wymarło i jest zastępowane przez tekst, który w sensowny
sposób określa zasób, do którego odsyłacz prowadzi.
Jednak to tylko jedna z trzech zasad konstruowania poprawnego odsyłacza tekstowego. Druga zasada
mówi o tym, że tekst odsyłacza powinien mieć odpowiednią długość, dzięki czemu kliknięcie w niego
nie będzie trudne. Trzecia zasada nakazuje wyróżniać odnośnik inną właściowością niż tylko kolor
– czyli np. widocznym podkreśleniem.
Kolor tekstu a obrazki tła
Kolejnym często spotykanym błędem jest pomijanie właściwości background-color dla tekstu, którego
tłem jest obrazek, a pod którym znajduje się z kolei element mający identyczny lub zbliżony kolor do
koloru tekstu. Powoduje to, że po wyłączeniu pobierania obrazków w przeglądarce, użytkownik może
nie zauważyć linków lub innych elementów strony.
Pamiętaj, że wielu internautów przegląda strony w ten sposób – najczęściej wówczas, gdy korzystają
z połączenia przez telefon komórkowy, gdzie płaci się za każdy pobrany pakiet danych.
Błędne wykorzystanie znacznika alt
Inny spotykany błąd polega na umieszczaniu opisanego atrybutu alt dla graficznych elementów strony,
niebędących jej treścią, a jedynie elementami layoutu. Tymczasem przyjęta zasada mówi, że jeśli
element graficzny jest tylko ozdobnikiem na stronie, to wyświetlany powinien być z poziomu CSS. Jeśli
już z jakiegoś powodu musimy wyświetlić ozdobnik poprzez znacznik {html}{/html}, atrybut alt powinien pozostać pusty.
