"Twoja strona jest brzydka". Najpoważniejsze błędy twórców serwisów WWW

Jak ustrzec się poważnych wpadek przy projektowaniu strony internetowej? Co zrobić, by użytkownicy mogli znaleźć serwis w Sieci - a gdy już go znajdą - by z upodobaniem do niego wracali?
W dniach 8-12 listopada odbywa się w Berlinie konferencja Microsoft Tech Ed Europe 2010. Jednym z głównych obszarów tematycznych imprezy są "Platformy sieciowe". Do tej kategorii zakwalifikowane zostały sesje, warsztaty i pokazy interaktywne dotyczące aplikacji sieciowych, przeglądarek internetowych, technologii tworzenia i optymalizacji serwisów WWW. W jednym z takich pokazów, pod obiecującym tytułem "9 things I hate about your website", miałem okazję uczestniczyć. Prezentację prowadził Pete Le Page, Senior Product Manager w zespole Internet Explorera.

Przedstawiciel koncernu wykazał największe wpadki przy tworzeniu stron internetowych.

Błędy w kodzie

Nawet jeśli serwis sprawia korzystne wrażenie od strony wizualnej, nie oznacza to, że spełnia wszystkie "techniczne" wymogi poprawnie skonstruowanego portalu. Przykładem takiego serwisu jest witryna linii lotniczych Continental. Validator W3C w momencie powstawania niniejszego tekstu doliczył się w kodzie źródłowym 1946 błędów.

P. Le Page: "Pamiętaj, że kod strony jest przetwarzany w przeglądarce internetowej, która musi ten kod "zrozumieć". Jeśli dostarczysz taki kod [jak w źródle Continental.com - redakcja] przeglądarka zacznie "zastanawiać się", co z tym zrobić i w końcu tworzyć coś, czego nie miałeś na myśli. Dlatego tak istotne jest tworzenie serwisów z kodem opartym na standardach sieciowych i sprawdzonym pod kątem poprawności składni".

Zawiła nawigacja

Kolejny błąd to tworzenie serwisów o niezbyt przejrzystej strukturze. Twórcy, w dążeniu do oryginalności (a niekiedy i po zachłyśnięciu się możliwościami oferowanymi przez nowoczesne technologie) budują strony, po których naprawdę ciężko jest się poruszać. Użytkownik wchodzi na stronę i... nie wie co dalej. Sytuacja, w której zmusza się internautę do klikania na chybił trafił poszczególnych elementów witryny, by sprawdzić, gdzie prowadzą, to dla webmastera przysłowiowy "samobój".

Dla poparcia tej tezy polecamy otwarcie strony firmy Genicap i odgadnięcie "na pierwszy rzut oka", czym się ona zajmuje.

Złe rozmieszczenie reklam

Reklama jest nieodłączną częścią wirtualnej rzeczywistości. Użytkownicy, którym ona przeszkadza, aktywnie korzystają z dodatków do przeglądarek, które blokują wyświetlanie banerów reklamowych. Patrząc na to, jak w wielu serwisach pozycjonowane są reklamy, można temu tylko przyklasnąć.

Komunikaty reklamowe powinny być jak najmniej inwazyjne i przede wszystkim nie przeszkadzać użytkownikowi w zapoznawaniu się z zawartością serwisu. Tymczasem właściciele stron, dążąc do maksymalizacji zysków z wyświetlanych reklam, umieszczają je w kluczowych miejscach portalu.

Ignorowanie zasad SEO

Do dziś funkcjonują witryny całkowicie pozbawione tekstu, który mógłby zostać zindeksowany przez wyszukiwarkę. Informacje są prezentowane w formie plików graficznych - tekstu zrobionego w Photoshopie czy w Fireworks. Taka witryna jest dla Google zupełnie niewidoczna. Dla przedsiębiorstwa, którego przetrwanie zależy od jego dostępności i liczby potencjalnych klientów, nieznajomość SEO to grzech śmiertelny.

Są to przypadki skrajne, wynikające z całkowitej nieznajomości zasad funkcjonowania w Sieci. Znacznie częściej zdarza się stosowanie SEO "na wyrywki" i nie do końca zgodnie z zasadami sztuki, np. ignorowanie słów kluczowych (zbyt mała ich ilość w treści strony) czy nieumiejętne używanie linków. Zamiast ukrywać łącze pod tekstem: "więcej informacji o [nazwa produktu]" używana jest fatalna forma "więcej informacji o [nazwa produktu] znajdziesz tutaj".

Niespójność struktury witryny

Występuje wtedy, gdy poszczególne fragmenty portalu - podstrony - różnią się wyglądem od reszty lub od strony głównej. Stosunkowo łatwo może popełnić ten błąd osoba lub firma, która za pośrednictwem strony WWW prowadzi działalność handlową i korzysta z zewnętrznych platform e-commerce.

P. Le Page zilustrował ten przykład otwierając stronę wereworthit.com. Strona główna serwisu i portalowy sklep to dwa różne światy- nie zachowany został nawet schemat kolorów. "Skąd użytkownik ma wiedzieć, że jego pieniądze trafiają do tej samej firmy, skoro w jednej chwili trafił na kompletnie inną stronę. Tworząc spójne witryny dajemy użytkownikom powód, by nam zaufali" - przekonywał przedstawiciel Microsoftu. Le Page zaleca zwłaszcza mniej doświadczonym twórcom stron użycie szablonów oraz wykorzystanie narzędzi do tworzenia tzw. favicons, czyli miniaturowych logotypów witryny, widocznych na pasku adresu.

"Content is King!"

Ale nie wszyscy o tym pamiętają. Treść powinna być wyznacznikiem jakości serwisu, tymczasem często twórcy stron traktują ich zawartość dość obcesowo - pozwalając sobie na literówki i błędy; prezentując ją w sposób całkowicie nieprzystępny bądź też zarzucając internautę całą masą informacji (patrz: havenworks.com).

Równie istotny w projektowaniu strony jest dobór kolorów. Chodzi zarówno o stosowanie takich barw, które nie zmęczą użytkownika zaglądającego na serwis, jak też o korzystanie ze spójnych schematów kolorystycznych. Prawidłowo skonstruowany serwis powinien być również łatwy w obsłudze. Składa się na nią zarówno wspomniana już przemyślana nawigacja i spójna struktura, jak i sposób, w jaki internauta korzysta z dostępnych w serwisie funkcji.
Tagi: Tech Ed Europe 2010, tworzenie stron, SEO
Oryginalny tekst został opublikowany na www.idg.pl
Ocena:
Twoja ocena:

Komentarze (19)

~mm

13-11-2010 20:44

2010-11-13 godzina 20:43 Result: 1986 Errors, 47 warning(s) Hi Hi Hi Hi Hi

~max

12-11-2010 10:23

Strona podana przez @PawelGIX również na IE7 wygląda okropnie. Pod IE6? Nie wiem, co by się musiało stać, żeby nazwać to poprawnym renderowaniem.

~Gość

11-11-2010 19:38

85.222, Tadziu, Ty rzeczywiście pisząc swoje bezsensowne wypowiedzi zlepiasz troszkę terminów znalezionych w sieci i starasz się brzmieć inteligentnie. Idź się zajmij roznoszeniem tych swoich ulotek których masz 40.000 jak się raz chwaliłeś. I naucz się co to jest asynchroniczność. Co do reszty to Wam się w głowach poprzewracało od walidatorów. Dla Waszej wiadomości, walidacja na stronach jaka jest obecnie jest NIC NIE WARTA!. Dobry walidator zanalizuje dokument, potem go poprawi a potem wskaże ilość takich poprawek co przekłada się na ilość błędów. Walidatory stosowane obecnie nie są miarodajne bo w momencie jak np nie zamkniecie jakiegoś znacznika to napiszą że kolejny nie powinien być otwarty/zamknięty, że następny nie powinien być otwarty itp. Koniec w końcu 1 błąd lub jedno błędne zastosowanie znacznika w tym walidatorze pokaże 2000 błędów przy obszernym dokumencie. Nie warto w walidator nawet patrzeć. Chyba że po skończonej robocie upewnić się że nic nie przeoczyliście.

KDT

11-11-2010 18:36

@PawelGIX - jeżeli chce się zasymulować niektóre elementy html5 to nie tylko IE6/8, ale i FF3.6x potrzebuje \"pomocy\" JS :) Dlatego na dziś trzeba podejść ostrożnie do nowych elementów 5 i stosować te, które przejdą przez IE8 lub, gdy to nie przeszkadza, użyć ich i olać wspomaganie JS. Dzisiejsza nauka 5 zaowocuje za te 2 lata, kiedy to najnowsze wersje wszystkich normalnych przeglądarek będą miały pełną obsługę HTML5. A dla badzIEwia jak zwykle powstaną protezy :)

PawelGIX

11-11-2010 17:41

Wam też komentarze wysyłają się 2 razy lub więcej? ^^

PawelGIX

11-11-2010 16:55

@KDT \'Jakoś tych kilka stron, które popełniłem w HTML5, nie potrzebowały haków, nawet dla IE6.\' To mnie zainteresowało. Z tego co czytałem to w IE6 z HTML5 jest kiepsko (http://d2o0t5hpnwv4c1.cloudfront.net/373_html5/final/index.html) i trzeba użyć JS (http://remysharp.com/2009/01/07/html5-enabling-script/) by widział niektóre znaczniki. Stosowanie haków w CSS uważam za błąd w sztuce - złe rozwiązanie. Doctype nigdy z palca i tak nie wpisywałem;) W teście HTML5, IE6 dostaje 12 punktów na 300.

~Gość

11-11-2010 16:07

Błędy z godz 16:01. Lekcja wstydu pomogła nieco. Ale co z tego jak błedy nadal są. 27 Errors, 56 warning(s)

KuboX

11-11-2010 16:04

Po prostu muszę to zrobić: Czemu widzisz drzazgę w oku swego brata, a nie dostrzegasz belki we własnym oku? Jak możesz mówić swemu bratu: \"Bracie, pozwól, że usunę drzazgę, która jest w twoim oku\", podczas gdy sam belki w swoim oku nie widzisz? Obłudniku, usuń najpierw belkę ze swego oka, a wtedy przejrzysz, ażeby usunąć drzazgę z oka brata swego.

KDT

11-11-2010 14:44

Widzę, że Tadzik nie tylko zaśmiecił ten temat kilkakrotnie powtarzając ten sam list, to jeszcze spowodował, że komenty wyświetlają się nie po kolei :> ___ Webmaster IDG będzie miał po świętach kupę roboty :D

~Gość

11-11-2010 13:27

I wy śmiecie pouczać innych???!!! buahahahaaa!!! Nie dziwne jak się zatrudnia takich specó"f" jak Wesoły to tak jest.

~Gość

11-11-2010 13:24

Błędy na tej stronie z godz. 13:20. CO ZA WSTYD!!! 1740 Errors, 47 warning(s)

KDT

11-11-2010 12:46

Nie piszę, żeby nie stosować wszystkich nowych elementów, a tylko tych najnowszych, które jeszcze uzgadniają w W3C, oraz tych z którymi mogą być kłopoty w IE. Np. większość znaczników przy inpucie można spokojnie zastosować, ale takiego automatycznego wywołania kodu JS na wyjściu z inputa już nie. Można też spokojnie nie zamykać niektórych tagów, np: , przez co kod nabiera pewnej elegancji. Już teraz stosowanie HTML5, to zbieranie kapitału doświadczenia na przyszłość. --- Gościu Tadziku - zamilknij, bo jak zwykle bełkotem zaśmiecasz serwis :)

KDT

11-11-2010 12:37

Jakoś tych kilka stron, które popełniłem w HTML5, nie potrzebowały haków, nawet dla IE6. Jeżeli coś ich potrzebuje to CSS, co niestety niektórzy mylą z HTML. Przewaga 5 nad 4.01 jest taka, że jest prostsza w realizacji, zaczynając od doctypu, który niemal każdy może zapamiętać i pisać z palca (!DOCTYPE html - prawda, że proste) i nie trzeba kopiować ze wzorców. Jest też lepszy w walidacji - trzeba pamiętać, że 4.01 to zachwaszczony bełkot, zwłaszcza gdy dodaje się napis Transitional. Wtedy to można spokojnie sobie darować wszelką poprawność kodu. A gdy chce się tak na serio trzymać standardów, a nie tylko udawać, to uporządkowany kod 5 uczy poprawnego pisania struktur, a przy swej pewnej elastyczności pozwala trzymać się niektórych swoich dotychczas stosowanych manier. Dodatkowy argument, to taki, że 5 jak najbardziej będzie bardzo długo zalecanym standardem W3C, więc warto już teraz go stosować, żeby potem nie musieć przerabiać stron. Jeżeli google go stosuje, to dlaczego Kowalski.IDG nie może go zastosować? Lubimy skanseny, czy co? :>

Gosc

11-11-2010 11:55

Ale walidator wc3 nie sprawdza zawartości plików dołączanych do danej strony sprawdzanej (a powinien i to rekurencyjnie). Lepiej jest kompilować strony html5 z javąscript i css3 itd, co umozliwia (po włączeniu) poprzednie i aktualne VS, przynajmniej wychodzą formalne błędy od razu bez marnowania czasu. Podobnie jak lepiej używać mvc3 (obecnie rc ale z pozwoleniem na produkcję) i prawdziwej asynchroniczności (async-await itp w tasku) zamiast ciezkich wątków w tle czy jeszcze gorej procesów gdzie nie konieczne, oraz wpółbierzności wbudowanej w język dla danych, pętli czy metod, tak samo predykatów - bo wszystko użyte poprawnie daje dużo krótsze i szybsze programy niz dowolna stara java, często szybsze niz mozolnie wklepywane w c++ warstwy logiki biznesowej czy dosstępowej .

PawelGIX

11-11-2010 11:38

@KDT tak, ale z HTML5 mamy moim zdaniem większy problem, a mianowicie część przeglądarek nie nie wyświetla poprawnie jednych elementów - bez hacków - albo w ogóle nie posiadają obsługi innych. Skoro mówisz żeby nie używać nowych elementów HTML5 to po co go stosować? nie lepiej pozostać przy HTML4.01? - by być całkowicie poprawnym. Zadaniem web developera jest radzenie sobie z ograniczeniami, a nie poddawanie się im.

KDT

11-11-2010 10:01

XHTML documents served as \'text/html\' will not be processed as XML [XML10], e.g. well-formedness errors may not be detected by user agents. Also be aware that HTML rules will be applied for DOM and style sheets (see C.11 and C13 of [XHTML1] respectively). Drogi Modrzewiu, proponuję się dokształcić: www.w3.org/TR/2002/NOTE-xhtml-media-types-20020801/ Nawet Strict może być serwowany jak text/html i nie oto mi chodzi w krytyce, czy może, czy nie, a oto, że przeglądarki mają rozumieć taki tekst jako kod HTML i nie przetwarzać go w sposób specyficzny dla XML-i. Czyli skoro IDG i reszta nieuków wysyła kod HTML (w tym momencie wadliwy kod), to niech robi to pod odpowiednim nagłówkiem, czyli HTML4.01 lub HTML5. HTML5 jest na ukończeniu, czyli defakto niewiele się zmieni, a jak już, to to najnowsze jego cechy. Wystarczy nie używać (zresztą przez najbliższe 2-3 lata nie powinno się tego robić) specyficznych cech tego języka niezrozumiałych dla takiego IE6/8, ale serwować nagłówek html5, a wszystkie przeglądarki, włącznie z IE6 (testowałem, to wiem) będą prawidłowo przetwarzały kod.

moon

11-11-2010 09:24

ten standard XHTML nawet wykorzystuja generatory stron jako chodzby np Jommla co do HTML5 on jest jeszcze w fazie wykanczania wiec nie ma juz ogloszonego stricto de facto ze jest zapiety na ostatni guzik od A do Z co sie stanie jak jeszcze cos w nim zmienia a ktos w tym standardzie na obecna chwile napisze to pozniej by sie nie trzymalo kupy wedlug W3C ... jedyna roznica midzy zwyklym html a xhtml to ze skladnia i pewne znaczniki sa juz przypiete do standardu xml aby latwiej mozna bylo pozniej przypiac to do baz danych :)

theModrzew

11-11-2010 00:01

@KDT, sam się nie ośmieszaj. Strona deklaruje XHTML Transitional, a Transitional może być serwowany jako text/html i jest to jak najbardziej poprawne, choć nie zalecane. Dopiero XHTML Strict musi być serwowany z odpowiednim MIME. Oczywiście nie zmienia to faktu że strona IDG tak stara, jak i nowa to techniczne i wizualne (ale to już kwestia gustu) porażki. (Sam fakt że właśnie próbuję ten komentarz wysłać po raz piąty o tym świadczy. Totalna amatorka.)

KDT

10-11-2010 22:42

\"Dlatego tak istotne jest tworzenie serwisów z kodem opartym na standardach sieciowych i sprawdzonym pod kątem poprawności składni\" Ciekawie się czyta taki tekst na stronie nie spełniającej standardów :) Już pominę, że ta strona wykazuje cytat: \"15 Errors, 11 warning(s)\" i skupię się na największym grzechu, o którym już nie raz tutaj pisałem: strona kodowana jako Xhtml wysyłana jako Typ MIME: text/html jest rozumiana przez przeglądarki jako HTML, bez X na początku - tak stanowi standard W3C i basta. Jeżeli koderzy IDG nie chcą się ośmieszać, niech zmienia kodowanie na HTML4.01 lub jeszcze lepiej na HTML5.

Polecane

PC World z prezentem!

Tak, zamawiam 12 wydań PC World po 14,09 zł każde (zamiast 19,90 zł) od numeru 6/2012.
Dodatkowo program Panda Antyvirus Pro 2012,
chroniący aż 3 komputery, dostanę za darmo.

PC World 6/2012
Nowy numer PC World 6/2011
Razem: 169


  • Z darmową wysyłką
Wyrażam zgodę na wykorzystywanie mojego adresu email do celów marketingowych. rozwiń »

Pobierz bezpłatnego e-booka

20 lat polskiej sieci
Ebook 20 lat polskiej sieci to kompletna charakterystyka polskiego internetu (oraz polskiego internauty). Odpowiadamy na pytanie, jak wygląda nasz kraj na tle bliższych i dalszych europejskich sąsiadów pod względem popularyzacji szerokopasmowych łączy internetowych i rynku mobilnego. Wymieniamy również wady i zalety korzystania z bezpłatnych punktów dostępowych.
Jeśli chcesz otrzymać darmowego e-booka, wpisz swój adres e-mail. Wyślemy Ci go natychmiast!
Wyrażam zgodę na wykorzystywanie mojego adresu email do celów marketingowych. rozwiń »