NiekrytyKrytyk.com

Krytyka to ciężki kawałek chleba i każdy, kto kiedykolwiek choć przez krótką chwilę się nią zajmował, wie ile kosztuje nerwów (zwłaszcza już po dokonaniu aktu oceny). Nic więc dziwnego, że krytycy czasami siadają załamani w swym fotelu przed kominkiem, skrywają twarz w dłoniach i – cicho szlochając – zastanawiają się czemu nie wybrali spokojnego życia rolnika żyjącego w cichej, zielonej dolinie. Lecz gdy ta chwila słabości mija, zawstydzeni swą niepoprawną postawą roszczeniową wobec samych siebie, przystępują tym żywiej i bardziej ochoczo do pracy i spod ich rąk wychodzi kolejne dzieło pełne krytycznego spojrzenia na otaczającą ich rzeczywistość.

Niektórzy krytycy jednak stwierdzają, że nie wystarczy im już samo krytykowanie rzeczywistości. Oni pragną metakrytyki! Ah, jakże to wspaniałe móc skrytykykować krytykę, tudzież tworzącego ją krytyka! Brzmi dość kusząco, dlatego też postanowiłem dzisiaj porwać się z motyką na słońce.

• Po wejściu na stronę zostałem zaatakowany zewsząd. Tu jakiś box, tu reklama, tu pasek z przyciskiem, jakieś logo, informacja o cookies a w środku tego wszystkiego – wspaniałe, jedyne w swoim rodzaju okularki. Dość klaustrofobiczne pierwsze wrażenie – poczułem się osaczony ilością elementów (z czego ¾ było ozdobnikami!).
• Gdy już nieco ogarnąłem sytuację, zauważyłem, że zaserwowano mi autorski kursor. Może i pasuje tematycznie do strony, ale ma jedną, dyskwalifikującą go wadę: nie zmienia się po najechaniu na linki. Przecież duża część użytkowników po tym właśnie poznaje klikalne elementy – po łapce. Tu jej nie ma. Dość poważny błąd usability, zwłaszcza, że nie wszystkie elementy mają efekt :hover. Takie logo wgl nie reaguje – dopiero przypadkowe pacnięcie w nie (bądź spojrzenie w pasek stanu przeglądarki… Dobra, nikt tego nie robi) odkrywa ukrywający się pod nim link.
• Oczywiście żeby jeszcze bardziej utrudnić nawigację, outline dla linków jest wyłączony. Dzięki temu strona jest praktycznie nieużywalna dla osób posługujących się klawiaturą, w tym dla mnie (tak, kocham mój TAB i jeśli na twojej stronie nie działa, to już na nią nie wracam).
• Kolejnym elementem strony jest rzucający się w oczy pasek reklamy po prawej. Jak dla mnie wygląda to tak jakby stwierdzono, że przecież trzeba jakoś zarobić, więc na chamca zepchnięto stronę w lewo i wpakowano po prawej reklamy. Jak dla mnie wygląda to ordynarnie. Spodziewałem się jakiegoś ładnego wkomponowania reklamy w treść strony (zwłaszcza takiej designerskiej) a nie prymitywnego czarnego paska z boku.
• Oczywiście tuż później mój wzrok powędrował na górny pasek „Lubisz bitch doinformowany?”. Może mam dość dziwne poczucie humoru, ale mnie to wgl nie śmieszy. Poza tym „bitch” czytane choćby z akcentem australijskiego prawnika pracującego dla amerykańskiej firmy w Szkocji nijak mi „być” nie przypomina – prędzej kojarzy mi się z pejczem… Ale pacnąłem „Rozwiń” i moim oczom ukazał się slider. Webmaster jest mistrzem ergonomii – do maksimum wykorzystał minimum miejsca (czyżby w imię coolowości layoutu?). Niestety cierpi na tym zarówno usability jak i accessibility. Spece od tych rzeczy twierdzą dodatkowo, że jest to zupełnie nieefektywna metoda (tak, 99% ludzi i tak obejrzy tylko pierwszy slajd).
• No i okulary. Te nieszczęsne okulary… Przewijają się wraz ze stroną. Zachowują się jak te wszystkie nieznośne banery reklamowe, które jeżdżą wraz z tobą po całej stronie. Są jednak od nich o wiele gorsze: nie można ich wyłączyć. Gdyby te okulary po prostu sobie były, w jednym miejscu, to wszystko byłoby ok – ot, miły akcencik. Ale tak jedynie wnerwiają! No i zasłaniają tekst. Mógł być to ładny ozdobnik – wyszedł wnerwiający bajer.
• Dziwi mnie przejawiający się na stronie trend „Web 2.0” – „Stwórz swoje hasło”, „Stwórz swój cytat”… Mnie osobiście takie rzeczy wgl nie interesują. Oczywiście żeby się pobawić, potrzebne jest konto. I pewnie nikt by się na nie nie skusił gdyby jedyną frajdą z jego posiadania było tworzenie własnych cytatów, dlatego też przebiegły webmaster nałożył obowiązek posiadania konta dla wszystkich przejawiających chęć skomentowania wpisów na blogu/filmików/innych dzieł Niekrytego… No cóż – zapewne zmniejszy to ilość spamu (albo i nie – CAPTCHA jest tak wysokiej jakości, że można ją sobie darować), ale jest cholernie niewygodne. Skoro Niekryty i tak ma fanpage na fejsie, to dlaczego nie posłużono się tutaj logowaniem właśnie przez niego? Albo czemu nie zastosowano Disqusa? Na pewno takie rozwiązania byłyby mniej męczące dla użytkowników i więcej z nich założyłoby konta.
• Żeby potestować kilka rzeczy, owe konto założyłem. Oczywiście musiałem odznaczyć ptaszka przy polu newslettera (uwielbiam, gdy z góry decyduje się o tym co chcę dostawać) a następnie przewinąć stronę (bo top zajmuje zbyt dużo miejsca z winy okularków) by zobaczye dalsze instrukcje wysłano mi na maila. Otóż rzeczona wiadomość miała małe problemy – link jest niewidoczny. Na szczęście jest klikalny. Aktywowałem konto i z powodzeniem się zalogowałem.
• Skąd wiadomo, że jestem zalogowany? Bo tuż nad menu jest malutki napis z nickiem (a logowanie i tak po e-mailu…) oraz pojawił się link „Wyloguj”.
• W edycji profilu czekał mnie szok – w polu edycji profilu ptaszek przy newsletterze znów postawiony. Nieładnie! Czyżby to, że pomyliłem się przy przepisywaniu CAPTCH-y od razu oznaczało, że przy odświeżeniu formularza zgadzam się na newsletter?
• W sumie to konto to mi za dużo opcji – oprócz trzech wyżej wymienionych – to nie daje. Tym bardziej rejestracja jest tutaj fanaberią i niepotrzebnym udziwnianiem.
• Prawdę powiedziawszy, konto założyłem tylko po to, by przetestować opcję przypomnienia hasła. Myślałem, że otrzymam swoje hasło mailem a tu niespodzianka – dostałem linka do resetu hasła. Miłe zaskoczenie.
• Z ciekawości pacnąłem na zakładkę „Kontakt”. Liczyłem na efektowny formularz kontaktowy a tym czasem ujrzałem trochę suchego tekstu z podanymi dwoma adresami e-mail – obydwoma na GMailu. Przy posiadaniu własnej domeny taki zabieg wygląda niestety niezbyt profesjonalnie. Czyż nie lepiej byłoby mieć adres typu krytyk@niekrytykrytyk.com?
• A jak strona wygląda bez JS? No cóż, nieciekawie. Wszystko się rozpadło i de facto strona jest nieużywalna. A to nie jest webaplikacja, która musi mieć JS. Wypadałoby wiedzieć coś o PE.
• Tyle na temat tego, co widać na pierwszy rzut oka. Teraz przejdźmy do tych bardziej technicznych rzeczy. Na początek ilość żądań i wielkość strony. 108 żądań to zdecydowanie za dużo a ponad 22 sekundy do pełnego załadowania strony odstrasza. Oczywiście mówimy tu o stronie wczytanej z cache, stąd te zadziwiające 143KB danych. Po pacnięciu ctrl+f5 ukazuje nam się prawdziwy rozmiar strony – 1.5MB. A czas ładowania u mnie wzrasta do 34 sekund. Nie jest dobrze. Takie ilości danych wczytują raczej aplikacje niźli zwykłe strony internetowe. A na tej nawet nie ma jakichś bardziej skomplikowanych rzeczy! Zdecydowanie trzeba obniżyć ilość zapytań HTTP i rozmiar strony.
• Walidator nie jest zadowolony, a outline nie zachwyca.
• Oczywiście strona jest w trendy HTML5. Niestety webmasterowi zostały przyzwyczajenia z XHTML, dlatego dostajemy niepotrzebną przestrzeń nazw (kosztem nieobecnego atrybutu lang) oraz – jak dla mnie – zbędny slash.
• W przypadku HTML5 jedyną sensowną wersją deklaracji kodowania jest skrócony zapis meta[charset] – każdy inny to marnowanie transferu.

• <link href="/favicon.ico" type="image/x-icon" rel="icon" /><link href="/favicon.ico" type="image/x-icon" rel="shortcut icon" />

  Bardzo dobrze, że jest link[rel=icon]. Niepotrzebnie natomiast jest wersja link[rel=shortcut] i to jako druga. Co więcej, obydwie wersje są w tym wypadku zbędne, gdyż linkują do standardowego /favicon.ico – przeglądarki same pobiorą sobie ikonkę.

• <meta name="description" content="Niekryty Krytyk" />
  	<meta name="keywords" content="Niekryty Krytyk" />

  Jak dla mnie niezbyt wyszukane. A gdzie choćby „Booya!”, tudzież „goddammit” w słowach kluczowych?

• Wydaje mi się, że meta[name=robots] jest tutaj zbędne – plik robots.txt powinien starczyć.
• 5 plików CSS. O 4 za dużo. Z powodzeniem można to złączyć w jeden (i już mamy mniej żądań HTTP). Co więcej, normalizacja jest załączana jako druga, a więc style są nadpisywane domyślnymi. Oczywiście pierwszy arkusz wcale nie jest autorski, tylko jest domyślnym z H5BP (a gdzie reszta Boilerplate’a? W HTML-u go nie widać!) – z pozostawioną pustą sekcją stylów zdefiniowanych przez autora… Przynajmniej ten komentarz można było usunąć – byłby mniejszy wstyd. Z kolei arkusz fonts.css wczytuje jedynie czcionki. Uwielbiam, gdy dla trzech linijek na krzyż tworzy mi się kolejne żądanie HTTP – totalnie nieekonomiczne rozwiązanie.
• Później tradycyjnie lecą skrypty JS, które powinny być wczytywane na końcu body. W head powinien pozostać tylko Modernizr. Mamy łącznie 8 skryptów, z czego 3 związane są bezpośrednio lub pośrednio ze sliderami – nie dało się zastosować jednego skryptu? Czyżby dostosowanie jednego pluginu było trudniejsze od użycia 3 różnych (pomijając napisanie autorskiego, idealnego skryptu)? A 8 skryptów to za dużo – można z powodzeniem pomyśleć o konkatenacji, tudzież AMD/CommonJS/innej modułowości i dociąganiu skryptów w ramach potrzeb. Ahh, i wersje jQ i jQ UI można by nowsze dać.
• Cała strona podzielona jest na 2 części: section i aside a to błąd. Jak już, owa sekcja powinna być main. Co więcej, obydwie części strony nie mają swoich nagłówków (dlatego outline wygląda dziwnie).

• <div id="glasses"></div>

  A oto i sławetne okularki. Nie dość, że wkurzają swoim zachowaniem, to jeszcze są bezsensownym, pustym elementem – jeśli coś i tak nie działa bez JS, to niech będzie wstawiane przez JS. Poza tym osobiście wstawiłbym to jako obrazek/tło a nie kombinował z dodatkowym elementem (bo pusty element = zbędny element).

• Później leci slider z doinformowania, gdzie linki nie dość, że mają target, to dodatkowo są one puste.
• Czemu coś, co ma klasę .slideTitle nie jest nagłówkiem?

• Jesteś wielBITCHielem tworzenia wierszy, opowiadań, esejów, felietonów, epopei, sonetów, fraszek, epitafiów…?

  Może jestem jakiś dziwny, ale mnie takie zabawy sUoVne wgl nie śmieszą. A wielokropek ładniejszy wychodzi przy zastosowaniu encji … 😉

• <a href="http://niekrytykrytyk.com/blog/" target=""><img src="/img/hometabs/4_230.jpg" alt="" /></a>

  Zagadka: co jest treścią odsyłacza obrazkowego? Tak, atrybut alt obrazka. Tutaj zatem mamy puste hiperłącze – najbardziej bezsensowną rzecz na stronie. Elementy interaktywne muszą mieć treść – tyle w temacie. Mamy do dyspozycji alt, image-replacement, ARIA… A i tak dostajemy pusty link.

• <a href="http://niekrytykrytyk.com/blog" class="arrowRightBlock inheritBg" target=""></a>

  A tutaj to już wgl mamy pusty link. Webmasterze, nie koduj w tę stronę! Nie pisz pod wygląd – pisz semantyczny kod. Wyłącz obrazki, CSS i JS i zakoduj stronę tak, by miała sens bez tych wszystkich dodatków. I dopiero wówczas, gdy będzie go miała, nałóż na taki semantyczny, czysty HTML warstwę prezentacji (CSS) i zachowania (JS). Inaczej wychodzą potworki tego typu, które nie są strawne dla AT i userów, którzy przeglądają Sieć w ciut inny sposób (np ja).

• <a href="javascript:void(0);/" target=""><img src="/img/hometabs/5_230.jpg" alt="" /></a>

  Szlocham patrząc na ten kod. Polecam poczytać porneLa i robić poprawne linki. A jeśli to coś nie odsyła do innej strony, to jest to przycisk nie link (przycisk – akcja, link – przejście do innej strony; przecież to proste do rozróżnienia).

• Oczywiście do tego dochodzą krzyki, typu „KONKURS ROZWIĄZANY” – od tego jest w CSS text-transform:uppercase.

• <a href="#" class="arrowTop inheritBg"></a>
  	[...]
  	<a href="#/" class="button borderHover hoverBg fright">rozwiń ^</a>

  Doskonałe przykłady pomylenia hiperłącza z przyciskiem.

• Powiem z czystym sumieniem: divitis.

• <div id="pageBgLeft"></div>
  			<div id="pageBgRight"></div>

  A nie ładniej zagnieździć te elementy w sobie? Albo po prostu zastosować multiple backgrounds z CSS3 i przeprosić użytkowników starszych IE.

• header i nav wewnątrz sekcji odnoszą się do tej sekcji, nie do strony. A to pewna subtelna, semantyczna różnica.
• Logo winno być klikalnym nagłówkiem całej strony – inaczej outline jest urwany i nie wiadomo do czego się odnosi.
• Jak dla mnie kod „dołączacza” do Facebooka jest przekombinowany. Szczególnie nie podoba mi się ten krzyk i hr – po prostu pobawiłbym się display i border-bottom dla span.

• <a href="/profile/wlasne_haslo/" class="makeOwn makeOwnSlogan">Stwórz<br />własne hasło</a>

  Nie lubię wymuszania przełamania linii ze względów estetycznych. To tak jakby przymocować psu kokardę do nosa, żeby ładniej się prezentował.

• Filmiki do obejrzenia można walnąć jako section w article (choć obecna teraz lista też najgorsza nie jest). No i powinny mieć tytuły. Natomiast od dat jest time. A obrazek – zamiast brzydkiego tła wstawianego przez style inline – mógłby być po prostu ilustracją. Byłoby IMO ładniej i przejrzyściej.

• <p class="comments">10</p>
  						<p class="votesYes">448</p>
  						<p class="views">9781</p>

  Nie lubię nieopisanych liczb w HTML. Wtedy trzeba z kontekstu próbować się domyślić co oznaczają. Może by tak aria-label? Albo jeszcze lepiej – lista definicji z image-replacement dla dt (żeby ukryć tekstowy opis i na jego miejsce wstawić ikonkę).

• <i>Zobacz wszystkie filmy</i>
  		<span>Zobacz wszystkie filmy</span>

  Czemu zduplikowana treść? Tak, zgadliście – i robi za ikonkę. Problem w tym, że AT przeczyta dwa razy ten sam tekst (a ja bez CSS-a też go 2 razy dostanę). Jak już ratowałoby to aria-hidden, tudzież [role=presentation]. A najlepiej wstawić taką ikonkę jako :before dla span. Poza tym polecam poczytać w specyfikacji HTML5 co tak naprawdę robi i.

• <h2>WYWIAD</h2>

  Dwa poprzednie nagłówki obeszły się bez krzyku, natomiast ten (jak i pierwszy od filmików) krzyczą. Po co? Od tego jest CSS.

• Jak dla mnie coś, co ma klasę .head, również powinno być nagłówkiem.

• <p class="quote">
  		Teraz już wiem, czemu jestem taki nienormalny. Mi mama podawała zupę zawsze? z lewej strony!		  <img src="/img/main/cite_end.png" alt="" />	</p>
  	
  	<p class="from">Jak jeść zupę?</p>

  Oto przykład w jaki sposób nie robić cytatów. Webmaster wychodzi widocznie z założenia, że jak coś wygląda na jadalne, to jest jadalne. Niestety bardzo łatwo jest się na tym przejechać. Coś, co wygląda jak cytat niekoniecznie nim jest. Akapit z klasą .quote automagicznie cytatem się nie stanie. Tak samo jak obrazek z pustym alt nie stanie się cudzysłowem. Już nie wspominając o .from (książkowy przykład dla cite) i niewłaściwym użyciu niełamliwej spacji. To powinno wyglądać mniej więcej tak:

  <blockquote><p>Teraz już wiem, czemu jestem taki nienormalny. Mi mama podawała zupę zawsze? z lewej strony!</p></blockquote>
  	<cite>Jak jeść zupę?</cite>

  Oczywiście ten cudzysłów zamykający wstawiony jako :after.

• Przydatne linki jako slider? Czemu? To mogłaby być spokojnie normalna lista. Nie ścieśniajmy treści na chama!

• <a href="#" id="backTop"></a>

  Kolejny link, niemający prawa działać bez CSS i obrazków.

• Czemu kod od polityki ciasteczek jest rozwalony na dwa znaczniki script? Dodatkowo – czemu do obsługi jednego bzdurnego ciasteczka dociągany jest cały plugin obsługi ciastek?
• Z innych ciekawostek JS-owych:

  setTimeout('checkSlider()', 5000);

  Tym samym niepotrzebnie wywołujemy sobie eval. A co wgl robi ta funkcja?

  //jeszcze nie był nigdy rozwinięty slider - rozwiń z automatu

• Gdy widzę funkcje o nazwach typu resizeSections, to już wiem, że strona nie jest responsywna i robi mi niepotrzebne obliczenia. I mam rację. A wystarczy przecież kilka media queries.
• W CSS mamy height:100% zarówno dla html, jak i body. Bez border boxa na 100% pojawi się nam niepotrzebny suwak pionowy przy małej ilości treści.

• font-size: 82%; /* 13px */

  Zatem istnieją ci szaleńcy, którzy pikseli nawet do ustalenia rozmiaru czcionki nie stosują 😀

• :hover {
  	cursor:url('../img/main/kursor.png'), -moz-zoom-in;
  }

  Skrajnie głupi pomysł, naprawdę.

• a:link, a:active, a:visited, a:focus {
  	outline: none;
  }

  Ten pomysł również jest skrajnie idiotyczny.

• Strona wymaga co najmniej 1006px szerokości – nie jest zatem zoptymalizowana pod mobilne.

• transform: rotate(-3deg);
      -o-transform: rotate(-3deg);
      -ms-transform: rotate(-3deg);
      -moz-transform: rotate(-3deg);
      -webkit-transform: rotate(-3deg);

  Bezprefiksowe powinno definiować się na końcu, gdyż vendorskie zachowania mogą się różnić od tych ustandaryzowanych.

I to by było na tyle. Sama strona pozostawia wiele do życzenia. Owszem, po Niekrytym spodziewałem się czegoś nieszablonowego, ale nieszablonowe nie znaczy nieużyteczne i niedostępne. Strona łamie kilka podstawowych zasad usability (brak łapki na linku i reakcji na TAB) oraz accesibility (puste linki i obrazki bez alt). Te błędy – w moich oczach – dyskwalifikują stronę WWW.

P.S. Czekam na ciętą ripostę, bo zepsuła mi się krajalnica do chleba.