Jestem człowiekiem o nieograniczonej niczym ambicji. Tak, mam manię wielkości i codziennie na dobranoc czytuję sobie Wielką Improwizację Konrada. Niczym Prometeusz jestem wtedy wolny i rozsadzam każdą granicę… Co też teraz uczynię i kolejna strona, jaka pojawi się na WebKrytyku, będzie pochodzić z Wielkiej Brytanii.
Zaraz, zaraz!
– oburzy się co bardziej rozgarnięty czytelnik – przecież Webkrytyk ma za zadanie krytykować jedynie strony polskie!
Otóż, moi drodzy, nie zapomniałem o tym! Strona, którą dziś oceniam to strona polskiej firmy webdeveloperskiej w UK. I zanim zaczniemy niepotrzebnie deliberować nad wykładnikami prawdziwej polskości, szybko przystąpię do krytyki.
- Nie wita mnie informacja o cookies – ta strona ich po prostu nie używa. Plus za to.
- Nazwa firmy brzmi niepokojąco – Dead Pixel Design. No cóż, martwy piksel raczej kojarzy mi się z brakiem designu niźli czymś pozytywnym. Turpizm nie zawsze się sprawdza.
- Prawdę powiedziawszy większośc elementów tutaj nie ma żadnego efektu hover. Martwota pikseli?
-
A uniquely designed website with as many pages as you need.include ( gallery , contact form)administartion tools Unlimited email addresses.
Nie wygląda to składnie. Pojawiają się także błędy gramatyczne, jak np
Dead Pixel Design are a professional website design company that builds high graphic design websites to your required needs, business or personal.
. Jednak najbardziej rozśmieszył mnie kwiatek w postaciIndywidual Paypal
. Piękny polglish. -
Po zmianie jezyka powyżej cytowany tekst wygląda następująco:
Profesjonalna strona internetowa ktora posiada rowniez panel admina w tym ilosc stron bez limitu ( galleria , formularz kontaktowy)nie limitowane emaile.pomoc i obsluga
No cóż… Dalej jest to nieskładne i pełne błędów ortograficznych. No i – gdzie się podziały polskie znaki?!
- Wracając jednak do wersji angielskiej (która wygląda na „kanoniczną”) – większość strony zajmują opinie klientów. Fajnie, że jest się czym pochwalić, ale myślę, że komentarze FB są już zbędne.
- Socialki w stopce (czyli nad komentarzami FB – tutaj to one pełnią rolę stopki…) prowadzą odpowiednio do głównej Twittera, strony domowej Skype’a i Google. Giganci rynku dziękują za darmowe pozycjonowanie – zapewne te linki pozwoliły im poprawić PageRank.
- Kolejna strona, która ma mnie głęboko w poważaniu. Znów wyłączono
outline
dla linków. Tak się zraża bardziej świadomych klientów! - Strona kontaktu – 3 maciupkie nieklikalne dane. Równie dobrze można by to wstawić w stopkę, gdyby ta strona ją miała.
- Firma nazywa się Dead Pixel Design a na większości podstron nie ma obrazków. Proof? Podstrona „About us” – suchy tekst, na 3 długości ekranu. Jedyne urozmaicenie to wskaźniki listy oraz przyciski do przykładowych stron (inna rzecz – czemu to chmura?).
-
<meta name="author" content="JMLnet.pl" />
Oto co widnieje w kodzie większości przykładowych stron. Outsourcing cichcem? Nie natrafiłem nigdzie o informacji o współpracy tych firm/korzystaniu z gotowych rozwiązań. Według mnie powinna być o tym informacja.
- Jak już jestem na tej stronie – autor twierdzi, że umie w HTML 5. Pytanie brzmi co on uznaje za HTML 5 i czy na przykład w zakres tego wchodzi wiedza o ARIA i tworzeniu dostępnych stron internetowych? Tak samo co to znaczy znać Photoshopa? Wymieni mi z pamięci wszystkie dostępne filtry graficzne, gdy obudzę go o 3 w nocy? To są jedynie piękne frazesy – od dawna wytykane jako błąd. Ahhh – no i nie można znać AJAX-a bez znajomości JS-a.
- Tyle z rzeczy na 1. rzut oka. Zagłębmy się w kod. Strona zabiła walidatora.
- Outline, owszem, jest, ale jest bezsensowny.
- Komentarze warunkowe na
html
, poczynając od IE 6 i kończąc na nie-IE. Źle, gdy tak prosta strona wymaga osobnego targetowania dla wszystkich wersji IE. To znak, że coś jest źle zaprojektowane. - Język strony został oznaczony jako amerykański angielski. Ktoś tu najwyraźniej jest złośliwy.
-
A teraz najlepsze!
<!--[if !IE]> <html dir="ltr" lang="en-US"> <![endif]-->
Taki zapis komentarza warunkowego dla nie-IE nie spełnia swojej roli, bo… tag
html
jest po prostu zakomentowany, czyli jest bezużyteczny (inne przeglądarki go nie widzą a IE widzi i nie może użyć, bo mu wyraźnie nie pozwoliśmy). W efekcie strona dostaje znacznikhtml
wygenerowany dynamicznie przez browsera, a więc pozbawiony wszystkich atrybutów (w tym określenia języka). Strzał w stopę. - Jest mieszany styl XHTML-owy z HTML-owym. To brak konsekwencji…
- …i być może właśnie dlatego strona cierpi na schizofrenię. Zarówno tytuł, opis, jak i słowa kluczowe, podane są w jednym znaczniku podwójnie – po angielsku i polsku. Po co? Dwie wersje językowe to dwie wersje językowe – nie budujmy wieży Babel!
meta[name=robots]
jest absolutnie zbędne i można je spokojnie w tym wypadku zastąpić przez/robots.txt
.- 10 (sic!) arkuszy stylów. O 9 za dużo. Podstawowa zasada optymalizacji głosi: minimalizować ilość żądań HTTP. A my tu mamy tonę żądań. No i dodatkowo atrybut
[media]
– czyżby ktoś nie słyszał o media queries? - 2. podstawowa zasada: JS na koniec
body
. Cóż, tu mamy do czynienia z recydywą, który łamie dwie zasady naraz. Google nie jest zachwycone. - jQuery w wersji 1.7.2 – przecież to prehistoria.
-
<body class="no_js responsive page-template-home-php stretched">
I już widać niekonsekwencję w nazewnictwie. Co do
.no_js
– są lepsze sposoby. - Cała strona cierpi na poważny divitis. A część znaczników przecież może z powodzeniem odnieść korzyści z przepisania na HTML 5 (który przecież autor ponoć zna).
-
<div id="logo" class="group"> <a href="index.html" title="Dead Pixel Design"><img src="images/logo.png" title="Dead Pixel Design" alt="Dead Pixel Design" /></a><a target="_blank" href="http://www.w3.org/standards/webdesign/htmlcss" id="loga"><img src="images/projektowanie_stron_www_01.png" title="CSS" alt="Design Website | Projektowanie stron www" /></a><a target="_blank" href="http://jquery.com/"><img src="images/projektowanie_stron_www_02.png" title="JQUERY" alt="Design Website | Projektowanie stron www" /></a><a target="_blank" href="http://www.mysql.com/"><img src="images/projektowanie_stron_www_03.png" title="MYSQL" alt="Design Website | Projektowanie stron www" /></a><a target="_blank" href="http://www.photoshop.com/"><img src="images/projektowanie_stron_www_04.png" title="PHOTOSTOP ,CS4,CS5.CS6" alt="Design Website | Projektowanie stron www" /></a> </div>
O nagłówkach strony już pisywałem. O
[target]
pisywał porneL. Niestety, oalt
artykułu nie ma (pomijając kilkadziesiąt przykładów w specyfikacji).alt
ma opisywać rolę obrazka, zatem jeśli jest to logo CSS i służy pokazaniu, że nasza firma posługuje się tą technologią, toalt
winien brzmieć po prostu „CSS” (albo „Używamy CSS”) a nie być marną próbą pozycjonowania.Pomijając już fakt, że te obrazki to lista wykorzystywanych technologii, zatem winna być listą z nagłówkiem opisującym co to za lista.
-
<div id="sidebar-header" class="group"> <div class="widget-first widget yit_text_quote"> <blockquote class="text-quote-quote">jezyk / language:</blockquote> <cite class="text-quote-author"><a href="index_pl.html"><img src="images/flag_pl.png" title="Polish | Projektowanie stron www" width="46" height="37" /></a><a href="index.html"><img src="images/flag_eng.png" title="English | Design Website" width="46" height="37" /></a></cite> </div> </div>
Oto wręcz perwersyjny przykład pisania pod wygląd. Od kiedy wybór języka to cytat? Semantyka zwija się w powolnej agonii. I znów ten nieszczęsny
alt
. Autorowi polecam zamknąć oczy, włączyć NVDA i posłuchać co jego strona ma do powiedzenia… a raczej co tam pseudoSEO-wo bełkocze.No i lista języków jest… no właśnie, listą.
-
<div class="clearer"></div>
Pusty element=zbędny element. No i od tego akurat jest clearfix.
- Krzyk w menu – od ekspresji jest CSS, nie HTML.
- Linki w menu dropdown typu
a[href=#]
powinny raczej być przyciskiem a nie linkiem (link odsyłający nigdzie nie jest linkiem). -
<img src="images/shadows/shadow-938.png" /> <!-- END MAIN NAVIGATION --> <div id="header-shadow"></div> <div id="menu-shadow"></div>
Kolejne przykłady pisania pod wygląd. Znów polecam posłuchać co AT odczyta w zamian za ten obrazek (który jest tak naprawdę tłem w CSS).
- Slider ma tutaj chyba jeszcze najładniejszy kod (chociaż style inline brużdżą). No i ta wstawka JS – w niej
$(document).ready
jest bez sensu, bo element, do którego się odwołujemy już istnieje. - Klasa
.hentry
jest zarezerwowana dla mikroformatu hAtom i jej użycie tutaj jest zupełnie nieuzasadnione (tym bardziej, że jest źle użyta!). -
<a class="thumb"><img src="images/projects/1.jpg" alt="0081" title="0081" /></a>
Link, który nie jest linkiem i obrazek z tragicznie-żałosnym
alt
– po prostu dobrana para, robiąca wszystko jedynie na pokaz. - „Latest projects” to nagłówek rzędu trzeciego, natomiast sekcja – logicznie mu podległa – jest rzędu drugiego. Książę ciemięży króla.
-
<div class="box-sections"> <img src="images/icons/set_icons/checkbox-checked.png" alt="Unlimited Page" class="icon" /> <h4><span style="line-height:32px">Unlimited Page</span></h4> <p>A uniquely designed website with as many pages as you need.</p> </div>
Tu obrazki winny mieć pusty
alt
(tak, właśnie wtedy kiedy są poprawne ;)). Czemu? Bo informacja jest duplikowana w nagłówku. Starczy połączyć obrazek z nagłówkiem przy pomocyaria-labelledby
. - Opinie klientów to cytaty. Bardzo fajnie byłoby rozpisać to na
article
. No i do jasnej cholery – czemu zdjęcie klientki ma SEO-wyalt
? - Socialki winny być listą.
- I jeszcze 3 JS na koniec. Bo za mało go było wcześniej.
-
/*************** RESET CSS FILE DO NOT EDIT ME ***************/
Krew mnie zalewa jak webdeveloperzy widzą takie komenty i nawet się nie zastanawiają co tam jest. A tam hacki na trupa i wyłączenie outline’u dla linków.
No ale przecież nie można edytować.
- A w głównym arkuszu stylów co najmniej 3 style pisania. Konsekwentnie niekonsekwentni.
No cóż – powiem krótko: wstyd mi za to, że polskie środowisko webmasterskie wysyła na eksport produkty takiej jakości…
Piękna recenzja. Aż głowa boli, gdy pomyślę, że miałbym poprawiać stronę po takich ludziach lub nawet zwyczajnie jej używać.
mnie ta fima zrobila strone polskieimprezy.co.uk….koszmar …:( czy ktos moze mi pomoc? gosc z dead pixel powiezial, ze owszem poprawi mi ale musze mu powiedziec co…. pomozcie ….co nalezy poprawic by dzialala poprawnie….
Przepraszam, że dopiero teraz odpisuję. Wydaje mi się, że to, co powiedziano na forumweb swego czasu (http://www.forumweb.pl/oceny-stron-www/www-polskieimprezy-co-uk,84247) wystarczy, żeby udowodnić mu co i jak należy poprawić. Jeśli to wciąż za mało, to zawsze mogę przygotować coś więcej 😉