DeadPixelPage.co.uk

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 postaci Indywidual 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 znacznik html 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, o alt 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ą, to alt 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 pomocy aria-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-wy alt?
  • 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…

4 komentarze do “DeadPixelPage.co.uk”

  2. 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….

    Odpowiedz
  3. Pingback: Wpadki i wypadki #4 — WebKrytyk.pl

Skomentuj lorien Anuluj pisanie odpowiedzi

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.