Table of contents
- Błędy w stronach WWW
- Wprowadzenie
- Błąd #1
- Długo ładujące się strony
- Strona wejściowa
- Stronę trzeba oglądać na komputerze autora
- ISO 1250
- Animacje
- Tylko Flash
- Pop-upy i nowe okna
- javascript:(void)
- Nie połam sobie spacji
- Przeglądarkowy szowinizm
- Click Here
- .::. [ m0ja str0na } .::.
- GIF/PNG vs JPG
- Nawigacja
- Zaśmiecony statusbar
- Maczek
- Spacje przed/po
- Precz z Wordem!
- Podsumowanie
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
Nie wszyscy mają stałe łącza. W niektórych miastach/miasteczkach czasem nawet nie ma możliwości użycia czegokolwiek szybszego, niż modem. Najtańsza Neostrada jest tylko 2× szybsza od modemu. Są też użytkownicy łączący się przez komórki, gdzie transfer bywa powolny i drogi.
Czekanie przed pustym ekranem nudzi odwiedzających. Ilość danych koniecznych do wyświetlenia każdej strony nie powinna przekraczać 100KB–200KB. Chodzi o HTML, arkusz stylów, skrypty i grafiki konieczne do poprawnego wyglądu, żeby można było zacząć czytać stronę. Ilustracje i opcjonalne bajery, które mogą załadować się później, mogą być znacznie większe.
Na prędkość ładowania i pierwszego wyświetlenia strony wpływa nie tylko jej objętość, ale także ilość plików (zażądanie każdego pliku daje dodatkowe opóźnienie), a nawet kolejność ich użycia w dokumencie (np. skrypty blokują ładowanie innych plików). Yahoo! zajęło się analizą tego problemu i stworzyło rozszerzenie dla Firefoksa, które ocenia architekturę strony pod tym kątem oraz najlepszy kompresor skryptów.
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"); ?>
. Można kompresować wszystko na serwerze przez mod_gzip
lub mod_deflate
Apache/Lighttpd.
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
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ą.
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ę 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 innej przeglądarki tylko po to, aby obejrzeć jakąś stronę. Kliknięcie “Google” jest o wiele wiele szybsze i wygodniejsze.
“ISO” 1250
Dla polskich znaków obowiązujący standard kodowania stron WWW to ISO—8859-2 lub UTF—8. Kodowanie znaków Windows 1250 dla reszty świata znaczy on tyle samo, co kodowanie Zdzichu3000.
UTF—8 potrafi zapisać tysiące razy więcej znaków, niż kodowania ISO i do tego jest rozszerzalny, więc to prawdopodobnie ostatnie kodowanie, jakie będzie potrzebne w przewidywalnej przyszłości.
Zarówno ISO jak i kodownaie Windows są już dziś przestarzałe. Powinno się używać wyłącznie UTF—8.
Niezależnie od tego, którego kodowania używasz, musisz je zadeklarować. Dla kodowania UTF—8 taki tag meta powinien być umieszczony sekcji head strony (to jest uproszczona wersja dzięki HTML 5):
<meta charset=UTF-8>
Nie używaj Notatnika Windows! Jako domyślne kodowanie używa on Windows 1250. Przestawienie go na Unicode też nie pomoże — Notatnik do każdego pliku będzie doklejał (zazwyczaj) niewidoczny znak BOM, który powoduje problemy w różnych przeglądarkach i serwerowych jękach programowania. Koniecznie użyj jakiegoś normalnego edytora.
Animacje
Animacje mają negatywny wpływ na odbiór strony. Kojarzą się z reklamą i na początkowo (przez fenomen ślepoty bannerowej) będą automatycznie ignorowane przez użytkowników. Przy dłuższym czytaniu zaczną rozpraszać i przeszkadzać. 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
Da się uniknąć niektórych z typowych problemów Flash przez sztuczki we Flash i JavaScript, ale zrobienie tego porządnie wymaga wiedzy eksperckiej.
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, choć w dzisiejszych przeglądarkach nie trudno je zrobić za pomocą DHTML (zob. jQuery).
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.
Popularne 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. W nowo otwartych oknach/kartach nie będzie działał przycisk “Wstecz” — najczęściej używany przycisk w przeglądarkach.
Lightbox wcale nie jest lepszy. Ma większość negatywnych cech pop-upów, a ponadto jest modalny (blokuje dostęp do strony).
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ć. Niektórzy użytkownicy 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).
Zazwyczaj zrobienie jednej strony, która działa z JS i bez jest łatwiejsze, niż robienie osobnych stron
Dlatego strona musi działać przy wyłączonym (nieobsługiwanym) Javascripcie. Nie wymusza to rezygnacji z zaawansowanych efektów. Po prostu wymaga sprytniejszej konstrukcji strony. Na przykład odpowiedniego menu i zastąpienia idiotycznych pseudo-URLi “javascript:” lepszym rozwiązaniem.
Nie połam sobie spacji
Prawie nikt nie potrafi poprawnie użyć
(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. 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 (unikanie “wiszących spójników”). W tym celu spację po nich zamienia się na twardą. Na
przykład tak.
Nazwy znaków specjalnych w HTML zawsze poprzedza się &
(etką), a kończy ;
(średnikiem). Jeśli na stronie ma być znak &
poprzedzający jakieś słowo to musi być zapisany jako &
, inaczej słowo mógło by być wzięte za 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 HTML w postaci: example.com/?a=b&c=d
Przeglądarkowy szowinizm
Obecnie IE ma mniej, niż połowę rynku.
“I tak 90% przeglądarek to Internet Explorer” — to nie jest dobre podejście. W przypadku stron na komórki “I tak 90% przeglądarek to Safari” jest równie ignoranckie.
Standardy internetowe są niezależne od przeglądarki. Dziś bez problemu da się zrobić zaawansowaną stronę pod wszystkie przeglądarki z wyjątkiem starych wersji IE, które potrzebują specjalnego traktowania. Łatwiej jest zmusić IE do zachowywania się jak normalna przeglądarka, niż zmusić wszystkie inne przeglądarki do zachowywania się jak stara wersja IE.
Kurs BrowseHappy uczy porządnego pisania pod nowoczesne przeglądarki.
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ść — nawigacja musi 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
elementu a
, np.:
<a href="http://example.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ść pisma podana 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 jednostkach em
/procentach (najelastyczniej). 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 będzie PDF, a nie 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, a bardziej rozbudowane dokumenty można wyeksportować do PDF za pomocą Open Office, Adobe Distiller lub jednego z wielu alternatywnych programów.
PDF może działać bardzo szybko — wystarczy użyć FoxIt Reader albo dowolnego innego czytnika, który nie jest produktem Adobe. To Acrobat jest do kitu, nie PDF-y.
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. 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ć.