WuJitsu.pl

12 lipca 2013 przez Comandeer | Opublikowany w Strony WWW

Tagi: ,

1

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.

Komentarze (1)

Wręcz nienawidze takich stron. Zero czytelności. Nigdy swoim klientom czegoś takiego bym nie zaoferował. Zresztą własne portfolio. Albo ma być przyciągające i ukazywać najwyższe standardy, albo lepiej w ogóle go nie mieć…

Napisz komentarz

Uwaga! Uprasza się komentujących, którzy chcą obrazić autora, aby najpierw dokonali niezbędnego researchu jego osoby. Z góry dziękujemy za poświęcony czas.