WuJitsu.pl

Trzymałem dziś w ręku przedstawiciela gatunku Samsung, podgatunek Mini, dlatego też przyszło mi do głowy, aby i na WebKrytyku zawitała jakaś krytyka w wersji mini. W tym celu musiałem sobie upatrzyć jakąś lichych rozmiarów ofiarę. I trafiłem na taką – prostą stronę-wizytówkę firmy (grupy?) Wujitsu tworzącej strony.

• Po wejściu na stronę ogarnęła mnie lekka konsternacja. Jodełka na środku, jakieś niewyraźne słowa w tle… Dość długą chwilę zajęło mi odkrycie, że całość treści ukryta jest pod :hover na drzewku. Jak dla mnie bardzo nieintuicyjne rozwiązanie, zwłaszcza, że na :focus już nie działa! A co z tym na mobilnych?
• PoTABowałem sobie trochę po stronie i zauważyłem, że outline jest wyłączony a poza widokiem usera kryje się link. Nieładnie, nieładnie! Ciekawe czy Google o tym wie?
• W wersji polskiej znajduje się link do wersji angielskiej (ledwo widoczny, wciśnięty w lewy górny róg), natomiast w wersji angielskiej brakuje analogicznego linku do wersji polskiej.
• Tyle jeśli chodzi o wrażenia – więcej o tak prostej stronie po prostu powiedzieć się nie da 😉 Natomiast o rzeczach technicznych na pewno będzie można powiedzieć dużo. Zacznijmy od adresu strony: wpisałem wujitsu.pl i przekierowało mnie na www.wujitsu.pl. Jak dla mnie niepotrzebne – uważam, iż www is deprecated.
• Nawet na tak prostej stronie można popełnić błędy syntaktyczne.
• Outline również do najładniejszych nie należy.
• HTML5 z html[lang] – zaczyna się nawet dobrze.

• <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

  Ten kod najlepiej słać jako nagłówek HTTP. Ludzie z H5BP przeprowadzili nawet badania nad tym i wyszło, że ten tag nie zawsze działa a nagłówek – a i owszem.

• Jest meta[name=robots], ale jest też robots.txt. Według mnie ten tag jest wówczas zbędny.
• Ikonka w png serwowana przez link[rel=icon]. Brakuje natomiast pliku /favicon.ico, o który zapewnie będzie słał requesty IE.
• Niepotrzebnie są tutaj wstawione atrybuty type dla CSS i JS. Dla CSS dodatkowo jest niepotrzebne media. No i widać pewną niekonsekwencję: apostrof vs cudzysłów.
• 4 skrypty. Można skonkatenować. No i jQuery w dość starej wersji. Poza tym te skrypty powinny być na końcu body.

• //hide containers to fadeIn before page loads
  	document.documentElement.className = 'jsActive';
  	var headTag = document.getElementsByTagName('head')[0];
  	var styleTag = document.createElement("style");
  	var text = document.createTextNode("#formatka div#webfolio,#main_content, .Hide { display: none; }");
  	styleTag.appendChild(text);
  	document.getElementsByTagName("head")[0].appendChild(styleTag);

  Bardzo fajne rozwiązanie. Szkoda, że przekombinowane. Do tego nieefektywne selektory (podwójne id).

• Nie wiem po co dla IE>6 jest ładowany kod do obsługi przezroczystych png.
• Całość treści upchnięta jest w section (stąd taki dziwny outline). Raczej powinno być main z sekcjami w razie potrzeby.
• Prostotę strony potwierdza nawigacja, składająca się aż z jednego elementu: zmiany języka na angielski. Lista zatem jest tutaj niepotrzebna. Trzeba też zwrócić uwagę na pewien subtelny szczegół: section > nav raczej oznacza nawigację wewnątrzsekcyjną, nie ogólną.
• W nazwach klas widać niekonsekwencję – .site_text vs .strona.
• Cały .site_text > article jest przesunięty poza ekran. W połączeniu z wyłączonym scrollowaniem i de facto przezroczystym kolorem czcionki, jest niedostępny dla użytkownika. Rozumiem, że to jest ten fragment kodu związany z optymalizacją SEO/SEF z oferty?

• <h2 class="strona"> webdesign gfx wielki format design kodowanie html5 css, cięcie plików PSD, PSD2 to TML, zarządzalne strony internetowe </h2>

  Ten nagłówek generuje te niewyraźne słowa w tle. Dziwne rozwiązanie, zwłaszcza, że części z nich użytkownik nie widzi (z powodu zablokowanego scrollowania).

• Jodełka okazuje się być logotypem (jak dla mnie to bardziej logo) i jest wsadzona w figure. A powinna być IMO nagłówkiem całej strony.
• W treści jest brzydkie użycie br – wymuszanie przełamania linii w celach estetycznych jest po prostu śmieszne.

• <a rel="internal" href="#" class="contact"><img src="gfx/kontakto.png" class="kontaktoimg"  alt="kontakt" title="kontakt z nami" /></a>

  Znów kłania się porneL. A przecież wystarczy wstawić link do odpowiedniej podstrony. I zagwarantować, że ta podstrona wyświetla tekst a nie wymaga JS tak sobie, od czapy. A jak już chce się bawić takimi marionetkami, to sobie można ją wygenerować w JS a nie taką ciuciubabkę uprawiać.

• Ordynarny preload poprzez ukryty div#preloadimg. A można kulturalniej.

• <noscript><div id="jsdown"><p>Wyłączona obsługa javascript uniemożliwia<br />poprawne wyświetlenie zawartości strony.</p></div></noscript>

  Jeśli na stronie znajduje się hoverowany obrazek i de facto nic więcej, to niemożliwość działania tego bez włączonego JS oznacza tylko i wyłącznie, że strona jest źle zaprojektowana i wykonana. Taką stronę można z powodzeniem wykonać nie wykorzystując wgl JS.

• html {
    overflow-x:hidden;
    overflow-y:hidden;
    overflow:hidden;
  }

  Pomijając już samą bzdurność tego zabiegu, to przecież overflow jest shorthandem dla overflow-y i overflow-x.

• Iditis + od lat nieużywane -moz-opacity i inne tego typu rzeczy.
• W JS z kolei kilka osobnych $(document).ready przypinających zdarzenia myszki przez metodę hover. Z powodzeniem można to przerzucić do CSS i dodać animację przy pomocy transitions.

Jak widać, rozmiar strony nie zawsze przesądza z góry o rozmiarze krytyki. W tym wypadku dla małej strony można było powiedzieć dość dużo na temat tego, w jaki sposób działa.

Niestety, dla mnie strona zostaje zdyskwalifikowana już na starcie, ponieważ nie dość, że wymaga myszki (a ja lubię posługiwać się klawką), to jeszcze jej obsługę opiera w pełni na JS. Wniosek: dla mnie strona jest nieużywalna. I obawiam się, że dla większości mobilnych również. Rozwiązania oparte na :hover prawie nigdy nie są specjalnie intuicyjne. W tym wypadku również tak jest. A szkoda – można to było rozwiązać w bardziej konwencjonalny sposób.