Wprowadzenie

Dla kogo jest ten dokument?

Dla każdego, kto tworzy strony internetowe. Opisane są tu najczęstsze i największe błędy techniczne i merytoryczne. Nawet doświadczeni webmasterzy mogą tutaj coś znaleźć, ponieważ niektóre błędy są tak powszechne, że wydają się być standardem.

Dlaczego się przejmować błędami?

Na dzień dzisiejszy jest 4285199774 stron w sieci (według Google) – przy tak dużej konkurencji nie można sobie pozwolić na błędy. W pogoni za dobrym wyglądem strony łatwo jest je popełnić i odstraszyć swoich odwiedzających.

Błąd #1

Największy błąd ze wszystkich błędów to nie słuchać dobrych rad. Nikt nie jest doskonały i nie należy się obrażać za konstruktywną krytykę.

Długo ładujące się strony

Czekanie przed pustym ekranem nudzi odwiedzających. Ilość danych koniecznych do wyświetlenia każdej strony nie powinna przekraczać 50kb. Chodzi o HTML, arkusz stylów i grafiki konieczne do poprawnego wyglądu. Ilustracje i opcjonalne bajery mogą załadować się później.

Jeśli generujesz długie strony przez PHP możesz je przesyłać skompresowane. W tym celu dodaj na początku <?php ob_start(ob_gzhandler); ?>
Dobrze kompresuj także grafikę. Używaj progresywnych JPG lub zoptymalizowanych PNG gdzie się tylko da. Photoshop generuje niepotrzebnie duże pliki, możesz je odchudzić za pomocą Jpegoptim.

Strona wejściowa

W większości przypadków strona wejściowa nie jest potrzebna. Obrazek z podpisem WEJDŹ nie pełni żadnej ważnej roli i nie jest wart nawet kliknięcia. Osoby wchodzące na stronę wiedzą gdzie trafiły, przecież nikt nie zgaduje adresów. Także intro mało kto będzie oglądać – minuta czekania nie jest warta zobaczenia animowanego logo firmy.

Stronę wejściową można umieścić, jeśli strona ma formę prezentacji lub galerii, wtedy taka strona pełni rolę okładki. Strony zawierające materiały dla dorosłych wręcz powinny mieć stronę wejściową.

Stronę trzeba oglądać na komputerze autora

Nie należy umieszczać zaleceń w jakiej rozdzielczości i przeglądarce strona powinna być oglądana. Nikt nie zmieni rozdzielczości ekranu ani nie zainstaluje Internet Explorera tylko po to, aby obejrzeć jakąś stronę.

Strona w budowie

Odwiedzających doskonale odstrasza napis strona w budowie albo martwe linki. Nawet, jeśli strona zawiera bardzo dużo treści zostanie uznana niekompletną i nie wartą oglądania. Odwiedzający, który natknie się na niedziałający link lub gorzej – prowadzący do pustej strony zrezygnuje z dalszego oglądania zakładając, że pozostałe linki też nie będą działać.

ISO 1250

Dla polskich znaków jest tylko jeden obowiązujący standard kodowania stron WWW: ISO—8859-2. Ewentualnie można użyć uniwersalnego UTF—8. Kodowanie znaków Windows (słusznie) nie zostało uznane jako standard i dla reszty świata znaczy on tyle samo, co kodowanie Zdzichu3000.

Taki tag meta powinien być umieszczony sekcji head strony: <META HTTP-EQUIV=Content-Type CONTENT=text/html; charset=ISO—8859-2">. Oczywiście sama deklaracja to za mało. Znaki muszą być napisane w tym kodowaniu. Rozwiązanie zagadki.

Animacje

Animacje mają negatywny wpływ na odbiór strony. Po pierwsze kojarzą się z reklamą. Po drugie rozpraszają i przeszkadzają w dłuższym czytaniu strony. Kręcący się znaczek @ (czyt. at) opatrzył się już każdemu internaucie. Pomrugujące logo we Flash jest cool najwyżej przez 3 sekundy.

Tylko Flash

Flash nie nadaje się do robienia w nim całych stron. Takie strony bardzo ciężko się ogląda – tekst jest rozmyty (albo poszarpany, zależnie od ustawień, ale prawie nigdy czytelny). Poruszanie się po stronie jest utrudnione – nie działają kółka myszy, nie ma możliwości otworzenia linku w nowym oknie, a często wciśnięcie Wstecz wychodzi ze strony. Aby strona była wyraźna i użyteczna tekst i linki muszą być zrobione w HTML.

Wyjątek stanowią strony, które prawie w całości składają się z grafiki, np.: prezentacje, filmiki.

Pop-upy i nowe okna

Należy unikać stosowania okienek pop-up (stosowanie ich do otworzenia strony w oknie np. 800x600 jest kardynalnym błędem). Dziś prawie wszystkie przeglądarki je blokują i (jeśli pop-up nie był zrobiony poprawnie) uniemożliwiają skorzystanie ze strony.

Coraz popularniejsze są przeglądarki oferujące przeglądanie w kartach (tabach), a w nich otwieranie nowych okien więcej utrudnia niż ułatwia. Nowe okno przeglądarki utrudni dostęp do kart w poprzednim oknie. Jeśli przeglądarka zamiast okien otwiera karty, to i tak przycisk wstecz na nowej karcie nie będzie działał.

javascript:(void)

Javascript nie jest zły do szpiku kości, tylko większośc twórców stron nie jest programistami i na ślepo kopiuje skrypty, które ktoś skopiował od kogoś, kto ledwo je zmontował na przykładzie cudzego skopiowanego skryptu. Skrypty po przejściu przez taki głuchy telefon są żenującej jakości i więcej z nich szkody, niż pożytku.

Trzeba pamiętać, że na Javascript nie można polegać. Użytkownicy coraz częściej wyłączają Javascript, czasem ze względu na bezpieczeństwo, czasem by pozbyć się atakujących zewsząd reklam i w końcu by nie oglądać padającego śniegu na stronie albo serduszek latających za kursorem. Wyszukiwarki internetowe indeksujące strony nie rozumieją Javascriptu – wszelkie elementy oparte o niego nie zostaną zindeksowane tym samym zmniejszając szanse strony na bycie znalezioną (to się tyczy również Flash).

Dlatego strona musi działać przy wyłączonym (nieobsługiwanym) Javascripcie. Oznacza to użycie odpowiedniego menu i zastąpienie idiotycznych pseudo-URLi javascript: lepszym rozwiązaniem.

Nie połam sobie spacji

Prawie nikt nie potrafi poprawnie użyć &nbsp; (od ang. non-breaking space, po polsku twarda spacja). Ten znak NIE służy do robienia wielkich odstępów (żadnych obiektów nie powinno się wyrównywać spacjami), NIE służy też do wymuszania napisów w jednej linii (od tego jest white-space: nowrap; w CSS). Twarda spacja służy do kontroli przenoszenia wyrazów do nowej linii (tzw. bękartów). Na przykład wieloczłonowe nazwy nie powinny być rozdzielane. Dobrym zwyczajem jest też wymuszenie przenoszenia przyimków i spójników (z, w, i, na, itp.) do nowej linii. W tym celu spację PO nich zamienia się na twardą. Na&nbsp;przykład tak.

Nazwy znaków specjalnych w HTML zawsze poprzedza się &, a kończy ; (średnikiem). Jeśli na stronie ma być znak & poprzedzający napis to MUSI być zapisany jako &amp; inaczej napis mógłby być pomylony z nazwą znaku. To się tyczy szczególnie adresów w kodzie HTML! Adres typu: example.com/?a=b&c=d należy zapisać w kodzie w postaci: example.com/?a=b&amp;c=d

Przeglądarkowy szowinizm

I tak 90% przeglądarek to Internet Explorer – to NIE jest dobre podejście. Nie można zmuszać wszystkich do używania IE, szczególnie dlatego, że jego popularność wcale nie jest proporcjonalna do jakości. W 99% przypadków w innych przeglądarkach strony są źle wyświetlane z winy autora. Przeglądarki mają prawo inaczej interpretować błędy.

Poprawność kodu HTML można łatwo przetestować on-line walidatorem konsorcjum WWW. Przejście przez walidator nie jest jeszcze oznaką świetności strony, ale przynajmniej informuje, że kod nie jest śmietnikiem.

Click Here

Dobrze nazwane linki ułatwiają szybkie poruszanie się po stronie. Linki kliknij tutaj, wejdź, itp. wymagają od użytkownika znalezienia i przeczytania ich opisu. Dlatego nazwy linków powinny mówić same za siebie (strona główna, ściągnij ten program), aby mogły być szybko wyłapane z tekstu.

.::. [ m0ja str0na ] .::.

Tytuł powinien jednym zdaniem opisywać, co się na stronie znajduje. Nie może być taki sam dla wszystkich podstron w jednym serwisie. Powinien być zrozumiały poza jego kontekstem (w wynikach wyszukiwania, zakładkach, historii odwiedzonych stron, itp.). Może zawierać nazwę serwisu na końcu (ważniejsze jest co strona przedstawia niż to gdzie jest). Artystyczny tytuł strony robi więcej szkody niż pożytku. Wyszukiwarki internetowe promują strony z dobrze podanym tytułem. Tytuł strony też jest nazwą zakładki – dziwne znaczki przeszkadzają w jej odnalezieniu (np. przy posortowanych alfabetycznie).

GIF/PNG vs JPG

Nie wszyscy zwracają uwagę na dobór formatu graficznego odpowiedniego dla każdej grafiki. Format JPG został stworzony z myślą o zdjęciach przedstawiających naturalne obrazy: kolorowe (ale bez jaskrawych kolorów), zawierające gładkie krawędzie i trochę szumu. Nie należy używać JPG do obrazów z ostrymi krawędziami i małą ilością kolorów tj. wykresy, schematy, napisy. Do takich grafik jest format PNG (czyt. ping). Grafiki można łatwo zniszczyć stosując zbyt małą ilość kolorów (GIF/PNG8) lub wymuszając zbyt duża kompresję w JPG. Parametry należy wyważyć tak, by plik był możliwie niewielki, ale zniekształcenia nie były widoczne na pierwszy rzut oka.

Niektóre programy graficzne słabo kompresują pliki PNG – da się to poprawić.

Nawigacja

Poruszanie się po stronie musi być proste i wygodne. Należy zadbać, aby z każdej podstrony można było dostać się na stronę główną, a miedzy kolejnymi podstronami można było przechodzić bez wracania na stronę główną. Nawigacja to nie miejsce na kreatywność – powinna być przejrzysta.

Jeśli obrazkom lub linkom prowadzącym na następną stronę dasz tytuł Next lub Następny to przeglądarka Opera ułatwi użytkownikowi nawigację. Podobnie jeśli w sekcji head strony dodasz tagi <link rel=typ href=adres> gdzie typ to Home, Next, Prev. Search i inne. Np.: <link rel=Home title=Strona główna href=index.html>

Zaśmiecony statusbar

Animowany tekst na statusbarze bardzo przeszkadza. Nie dość, że jest brzydki i denerwujący to jeszcze uniemożliwia odczytanie informacji, które umieszcza tam przeglądarka.

Opisy linków (pojawiające się na statusbarze lub w tooltipie) można łatwo i poprawnie zrobić atrybutem title znacznika a, np.:
<a href="https://justpaste.it/redirect/bledy-na-stronach-www/http%3A%2F%2Fexample.com" title="Przykładowa Strona">

Atrybut title można także użyć do opisywania obrazów (opis w alt ma zastępować obraz, a nie go uzupełniać)

Maczek

Nic tak nie drażni jak wielkości czcionek podane w pikselach. U autora na pewno strona wygląda świetnie, 9—pixelowa czcionka jest zgrabna i mieści się w ledwo trzymających się tabelkach. Tylko co z osobami, które używają wysokich rozdzielczości? Co z tymi, którzy mają słaby wzrok? (nie mówię tu o ciężkich inwalidach, prawie każdy po 50tce ma problemy z czytaniem drobnego tekstu, a i młodsi wryci w książki/monitory mają wady wzroku). Należy pozwolić przeglądarce ustalać wielkość liter podając je w procentach (najelastyczniej), opisowo (normal, small, itp.) lub chociażby w punktach (jednostka pt). Naprawdę nic strasznego się nie stanie, jeśli tekst się przeniesie do nowej linii. Dla odwiedzających jest o wiele ważniejsza możliwość przeczytania strony niż przesunięcie jakiegoś elementu o parę pikseli.

Spacje przed/po

Źle wstawione spacje przy znakach interpunkcyjnych powodują niezgrabny wygląd tekstu i złe przenoszenie do nowej linii. Nie należy robić odstępu przed kropką, przecinkiem, dwukropkiem ani wykrzyknikiem. Natomiast po odstęp jest wskazany. Nie robi się odstępów wewnątrz nawiasów, robi się na zewnątrz. Minus pełniący rolę myślnika/pauzy powinien być otoczony spacjami, a użyty jako minus/łącznik – nie.

Precz z Wordem!

Jeśli istnieje konieczność opublikowania na stronie jakiegoś dokumentu – niech to nie będzie Wordowy doc. Dokumenty Worda nie są kompatybilne nawet między różnymi wersjami samego Worda, o innych programach nie wspominając. Do prostych dokumentów wystarczy RTF, bardziej rozbudowane dokumenty można wyeksportować (a dokładniej wydrukować) do PDF za pomocą Adobe Distiller, dołączanego do pełnej wersji Adobe Acrobat (niestety komercyjnej, choć można znaleźć darmowe narzędzia).

Podsumowanie

Błędne błędy

Dokument ten oparłem o moje wieloletnie boje z surfowaniem i tworzeniem stron WWW oraz pracy przy DTP. Sugerowałem się zaleceniami konsorcjum WWW i różnymi stronami w sieci (godny polecenia jest podobny dokument na ygreg.com). Nie oznacza to jednak, że zjadłem wszystkie rozumy. Jeśli masz jakieś sugestie, nie zgadzasz się z którymś błędem lub masz pomysł na nowy zobacz jak się ze mną skontaktować.

Licencja: copyleft 

Źródło: porneL