Kreatyni.pl

Pogłoski o mej śmierci były przedwczesne! I choć nie dawałem znaku życia przez długie miesiące i wiele czytników RSS spisało mnie już na straty, oto postanowiłem powrócić! Będzie to jednak powrót skromny (ostatnio bowiem nie należę do ludzi narzekających na nadmiar czasu), lecz mam nadzieję udany. Tym samym chciałbym także rozpocząć cykl mini-krytyk (a to dlatego, że i krytykowane strony będą mini!). Na pierwszy zaś ogień pójdzie strona Kreatyni.pl.

• Adres jest… dziwny – co do tego raczej nikt wątpliwości mieć nie będzie. Rozumiem przesłanie kryjące się za takim zabiegiem, tyle, że osobiście jest ono dla mnie zupełnie niewłaściwe. Połączenie kretyna z kreatywnością raczej przywodzi na myśl poparzone przez petardy kończyny niźli jakieś arcydzieła myśli ludzkiej. Tekst typu „Porażone umysły” wcale sprawie nie pomaga.
• Wszystko się rusza i przestawia pod myszką, jak w starych, dobrych kreskówkach. Jednakże to, co sprawdzało się w dobie czarno-białych telewizorów i Myszki Miki, niekoniecznie musi się sprawdzić w roku 2014 na stronie internetowej. Poza tym, ikonki maila i gg ruszają się wadliwie (można je łatwo „zawiesić”).
• Oczywiście coś, co się rusza pod myszką, kojarzy się automatycznie z elementem interaktywnym. Nic bardziej mylnego – zarówno e-mail, jak i gg są całkowicie nieklikalne. Na całej tej stronie tak naprawdę jest jeden jedyny link – do portfolio na behance.net. Czy przypadkiem nie lepiej byłoby tam po prostu przekierować?
• Pacam TAB i co widzę? Nic. Strona jest nieprzystosowana do nawigacji klawiaturą. Co prawda jest tutaj aż jeden focusowalny element, ale zupełnie nie reaguje. Z tego też powodu dla mnie strona jest po prostu nieużywalna.
• Patrząc na logo „Kreatyni. Porażeni umysłowo” widzę przed sobą grupkę zdesperowanych ludzi z głupawymi uśmiechami na twarzach, którzy próbują się dowiedzieć czemu zbite szkło kaleczy oczy… Nijak się to ma do webdevelopingu.
• Tyle ogólnych wrażeń – przejdźmy do kodu. Tradycyjnie zacznijmy od walidatora, który jest zadowolony.
• Natomiast outliner już nie. Ewidentnie brakuje tutaj głównego nagłówka (słówka „Kreatyni”), mamy za to motto grupy. Z punktu widzenia semantyki nie jest to najlepszy wybór. Podtytuły winny być oznaczone po prostu jako p, span. Ma to swoje uzasadnienie – trudno sobie wyobrazić treść będącą sekcją dla cytatu z Szekspira. Co więcej, motto jest rozbite na dwa nagłówki, co jest już zupełnie niezrozumiałe (połowa motta jest nadrzędna względem drugiej?).
• Dobra, to teraz rzut okiem na kod. Wbrew pozorom taka mała strona ma go całkiem sporo – to 1. znak, że coś tu jest przekombinowane. Na pierwszy rzut oka strona winna mieć ok. 8 elementów w kodzie. Tutaj jest ich zdecydowanie więcej.
• Standardowo – brak oznaczenia języka. AT znów musi zgadywać.
• Pierwsze, co rzuca się w oczy, to przemożna ilość JS w head. Ktoś tu nie zna podstawowych zasad.
• Zresztą ten JS to majstersztyk. Pliki gg.js i mail.js różnią się jedynie… selektorem. Z tego powodu jest duplikowane kilkadziesiąt linijek JS. Pomijając już fakt, że wszystkie pliki mają swoje osobne $(document).ready.

• setTimeout(function(){ $(div).css({'backgroundPosition': '-45px 0px'}); }, speed_over*10);
  		setTimeout(function(){ $(div).css({'backgroundPosition': '-90px 0px'}); }, speed_over*30);

  Ten kod nie ma sensu o tyle, że w jQuery animacja i tak jest robiona na timerach. Zrozumiałbym to gdyby to były timery rekurencyjne, ale nie są. Tak samo bezsensowny jest tutaj parametr speed_over – miałby sens gdyby służył do generowania poszczególnych czasów. W tym wypadku po prostu dokłada cegiełkę do zupełnie nieprzemyślanego kodu JS.

• Chyba warto też od razu wspomnieć o tym, że tak naprawdę te kody JS wcale nie są potrzebne. Wszystkie animacje na tej stronie można z powodzeniem zrobić w CSS, z ładnym fallbackiem dla pozostałych przeglądarek. Tutaj JS jest po prostu użyty dla szpanu (hint: nie wyszło).
• Oczywiście autor lubi być tak poprawny, że nie zauważył, że script[type], link[type] jest już niepotrzebne. W końcu wiadomo – truizmy zawsze ratują skórę.

• Natomiast CSS jest bardzo ładny:

  #all {
  		height : auto;
  		margin : 110px 0px 0px 5px;
  		}

  Wyrównanie do dwukropka podnosi czytelność kodu i marnotrawi transfer (no dobrze, w wypadku małych stron nie jest to aż tak istotne, ale już przy większych kobyłach każdy bajt się liczy). Chociaż jestem ciut zawiedziony – wszak CSS też można było podzielić logicznie na pliki, jak JS…

• link[rel*=shortcut] to wymysł IE – każda szanująca się przeglądarka nawet nie szuka tego słówka. Poza tym, jeśli i tak korzystamy ze standardowego favicon.ico, lepiej go wrzucić do głównego folderu strony i całkowicie usunąć ten tag.
• Zupełnie niepotrzebny section – nie wiemy ani czego to sekcja, ani jaka to sekcja, bo brakuje nagłówka. Tutaj po prostu winno być main (albo nie być nic). Sekcja jest tutaj wstawiona zupełnie przypadkowo – ot, mamy HTML5 – na co wskazuje div#all. Coś dzwoni, ale nie w tym kościele. Co więcej, section też jest ostylowany, co dodatkowo uwala kompatybilność z IE 8 a w przypadku tej strony to jest zupełnie niepotrzebny ruch.

• Gdyby nie ikonka słoneczka, byłoby trudno określić, że ten zbiór cyferek to numer GG. AT jednak nie widzi ikonek – dla niego to bezsensowna wstawka bez kontekstu. Z e-mailem sytuacja jest bardzo podobna, ale on ratuje się jeszcze tym, że… jest e-mailem. A rozwiązanie problemu jest proste:

  <dl class="contact">
  			<dt class="gg">Gadu-Gadu</dt>
  			<dd>numerek</dd>
  		</dl>

  A gdzie ikonka? Ha! Jest podczepiana do dt przy pomocy image-replacement (i tym samym eliminujemy bezsensowny, pusty element). Jeśli kogoś przeraża tak rozbudowany kod, zawsze zostaje [aria-label].

• <div class="one">ZOBACZ PRZYKŁADOWE <span class="projects">REALIZACJE</span></div>
  		<div class="two">ZOBACZ PRZYKŁADOWE <span class="projects">REALIZACJE</span></div>

  Ktoś tu ewidentnie nie lubi AT. Co dostaje czytnik ekranowy? Dwa razy ten sam tekst. Co słyszy użytkownik? Dwa razy ten sam tekst. Bo co zrobił webmaster? Wstawił dwa razy ten sam tekst… Tak się kończy pisanie pod wygląd!. A wystarczy zastosować [aria-hidden=true], [role=presentation] dla drugiego tekstu i już działa. A najlepiej drugi tekst w ogóle wyeliminować – są pseudoelementy w CSS i one doskonale się do tego nadadzą. Poza tym – po co krzyczeć w kodzie? Mamy text-transform.

• Logo nie istnieje, tak samo jak 90% elementów na tej stronie. Wystarczy wyłączyć CSS, żeby odkryć smutną prawdę – tu tak naprawdę nic nie ma.

Co tu dużo mówić: strona nie spełnia podstawowych norm. Jest po prostu… porażona umysłowo.