InternetStandard.pl (runda druga)

Ta strona już raz trafiła pod ostrze naszej krytyki. Wtedy nie poszło jej najlepiej. Ostatnio jednak ciut się zmieniła (no dobrze – nie wiem czy ostatnio, ale z ciekawości ją odwiedziłem i zobaczyłem, że jakaś inna jest), dlatego też postanowiłem dać jej drugą szansę. Zwykle nikomu jej nie daję, ale… Trochu zmieniłem obyczaje 😉

  • Pierwsze wrażenie jest dość pozytywne. Strona sprawia wrażenie w miarę nowoczesnej i przejrzystej.
  • Ale wygląd to nie moja działka. Ja zajmuję się kodem, semantyką & that other fancy words. Zacznijmy od walidatora, który wciąż jest mocno zawiedziony.
  • Outline też nieciekawie wygląda. Dość skąpy i płaski jak na taką stronę. Brakuje też głównego nagłówka witryny.
  • Strona ma DOCTYPE z XHTML 1.0 Transitional. Szkoda, bo to tylko tryb prawie pełnej zgodności ze standardami. A jak wiadomo – prawie robi kolosalną różnicę.
  • Co prawda jest atrybut lang na html, ale odnoszę wrażenie, że to bardziej zasługa szablonów XHTML w Sieci a nie świadomości webmastera.
  • Kod GA znajduje się tuż za tagiem head. Nie jest to błędem (według Zakasa jest nawet optymalnym miejscem na statystyki) – skrypt nie zablokuje strony, gdyż i tak zasysany jest asynchronicznie. A przy jak najszybszym odpaleniu statystyk mamy większą szansę złapać użytkownika (bo np coś mu się nie spodoba i zechce szybko uciec). Natomiast sam kod można by zoptymalizować.
  • <link rel="icon" href="http://www.internetstandard.pl/favicon2013.ico"	type="image/x-icon" />
    	<link rel="shortcut icon" href="http://www.internetstandard.pl/favicon2013.ico"	type="image/x-icon" />

    W tym wypadku po prostu nazwałbym ten plik favicon.ico i zupełnie wywalił te tagi. [rel=icon] ma sens tylko wówczas, gdy serwujemy lepszą ikonkę dla wszystkiego, co nie przypomina IE (a przynajmniej gdy nie podajemy przy okazji [rel=shortcut] z taką samą ikonką).

  • 6 skryptów JS w head. Te powinny być na końcu body i zostać zminifikowane+skonkatenowane. No i stara wersja jQuery (można pokusić się o nowszą).
  • Style CSS są strasznie porozwalane (2 arkusze + kilka style, w tym w body!).
  • function clickWrapper(link, url, hash) {
    			link.href = url+'?redirect='+''+hash;
    			link.target = '_blank';
    		}

    Ładne cudeńko. Ale jak dla mnie zupełnie bezsensowne. No i po co ten target?

  • Kod akceptacji cookies jest żenującej jakości. strong robiące za pogrubienie i ten potwór:
    <a onClick="javascript:createCookie('cAkcept',1,365)" title="Zapoznałem się z informacją o stosowaniu cookies i akceptuję" class="cAkcept">X</a>

    Kłania się nieznajomość JS i encji &times;.

  • Kod obsługi cookies też niczego sobie. Korzysta z przestarzałego Date.prototype.toGMTString (zastąpionego obecnie przez Date.prototype.toUTCString) i wymaga jQuery, mimo, że całość operacji na dokumencie robi w „czystym” DOM. No i śmieszny jest $(document).ready w kodzie obsługi elementu, jeśli ten kod znajduje się tuż za tym elementem.
  • <div id="div_welcomescreen" style="display: none; height: 1000px;"><div style="text-align:right;padding: 3px 5px 3px 5px;height:40px; border-bottom: 1px solid #dfdfdf;"><img src="http://g1.internetstandard.pl/istandard/logo_welcomescreen.gif" alt="internetSTANDARD" style="float:left;" /><div id="div_welcomescreen_link" style="display :none;"><a href="javascript:welcome_stop_is()" style="color:#000;font-size:10px;font-family: arial;" class="link">pomiń reklamę »</a></div></div><table width="100%"><tr><td align="center" style="padding-top:50px;"><div id="div_welcomescreen_flash"></div></td></tr></table></div>

    Nie mam zielonego pojęcia do czego ten element ma służyć, ale jego kod jest fenomenalny.

  • #bilbo – czyżby lubili „Hobbita”?
  • Kod to divy wsadzone w divy otoczone divami. Divitis jest tutaj potężny.
  • <a id="logo" class="sprite" href="/"></a>

    Pusty element = zbędny element. Pusty link = bezsensowny element. Bez grafiki/CSS po prostu totalnie bezużyteczny. Do tego to jest logo, a więc powinien to być główny nagłówek całej witryny.

  • Szukajka nie ma label a przycisk wyszukiwania treści. Webmaster powinien zaznajomić się z pojęciem image-replacement.
  • #logowanie jest puste i czeka na wypełnienie poprzez AJAX-owe żądanie. Po co? Nie może od razu dostać tych danych z serwera?
  • ¾ linków w menu ma target. Nieładnie. A samo menu w niepotrzebnym div.
  • #lCentrum vs #main-photo-slider vs panelContainer vs scrollertop – mamy tutaj aż 4 konwencje nazewnicze w kodzie. O jakieś 3 za dużo. Do tego pełno stylów inline.
  • .tytulTDnia oczywiście nie jest tytułem. To tak jak wyrób czekoladopodobny. Niby to samo, ale jednak nie bardzo.
  • Ile divów potrzeba, żeby zrobić jeden slajd w sliderze? 6. Moje biedne slidery na liście mogą się schować.
  • <div id="stripNavR0" class="stripNavR"><a href="#">Right</a></div>

    Strzałki w lewo nie ma. Jest za to w prawo, ale za to angielska.

  • <div class="wyborNewsRed"></div>

    Bardzo dobry wybór newsów. Widzę wiele interesujących mnie tematów.

  • Oczywiście nawigacja dla slidera nie jest na liście, tylko upchnięta w divach i ozdobiona obrazkami o wdzięcznej nazwie blank.png.
  • Oczywiście tuż za sliderem jest wciśnięty kod JS go obsługujący. Ładnie zadeklarowane zmienne na początku, po czym… implikowana globalna. Nieładnie. Poza tym taka wstawka powinna być w zewnętrznym pliku.
  • <div class="clear"></div>

    Od lat taka prymitywna technika nie musi być stosowana. Istnieje choćby o wiele lepszy clearfix.

  • Pierwszy na stronie jest nagłówek h5 dla wiadomości. Tuż nad nim jest pusty link (ikonka RSS) a tuż po nim… lista z dwoma linkami (do najbardziej popularnych i komentowanych newsów). Skoro tutaj lista mogła być, to czemu dla slidera jej zabrakło?
  • Tytuły newsów oczywiście nie są tytułami. Cały markup newsów jest mocno niepokojący. Semantyki zero. Nawet obrazek do newsa posiada pusty alt. A pogrubienie licznika newsów jako strong. Przydałoby się trochę mikroformatu hFeed. I oczywiście POSH. Ale sądząc po klasie to i tak ma być to mięso armatnie do masakrowania.
  • Czy kod OpenX musi być wstawiony wraz z całym komentarzem z instrukcją obsługi? Dla mnie to marnowanie transferu.
  • <div class="moreDzial"><a href="/news" class="sprite moreDzial" title="więcej aktualności"><span>więcej aktualności</span></a></div>

    To cudo tworzy maluteńki przycisk. Ktoś lubi produkować nadmiarowy kod.

  • Mają nawet miniaturowego hobbita – #bilboMini.
  • O dziwo pozostałe newsy to lista. Brakuje tylko nagłówka „Inne newsy” (oczywiście można ukryć przed wizualnymi). Natomiast klasy .rowA i .rowB – można bardzo ładnie to zrobić przy pomocy :nth-child(odd/even) z CSS3.
  • W sumie kod jest pisany w dość logiczny sposób. CSS dla danego fragmentu kodu jest dołączany tuż przed tym fargmentem (bo a nuż nie trzeba będzie wyświetlać tego fragmentu, prawda?).
  • Odstęp jest zrobiony dzięki pustemu divowi o klasie .h15. Jak sama nazwa klasy mówi, div ma 10 pikseli wysokości. Trzeba pochwalić za wybór tak profesjonalnej i niezawodnej metody – marginesy z CSS są znane z tego, że nie działają w IE3.
  • Formularz subskrypcji ma co prawda label dla checkboxów, ale już dla pola służącego podaniu e-maila nie. W dodatku jest na nim najbardziej prymitywna i ohydna atrapa placeholder. Jeśli masz maila, który składa się z maksymalnej liczby znaków przewidywanej przez RFC, staraj się nie popełnić literówki. Inaczej będziesz musiał wpisywać go od początku. placeholder jest jednym z tych elementów, którego powinno się używać zawsze – nawet w zamian za błąd w walidacji. Oczywiście nie może być zastępstwem dla label, bo obydwa elementy służą do czegoś innego.
  • Sonda – podobnie jak logowanie – jest dociągana przez AJAX-a. Dość dziwna praktyka.
  • „Znajdziesz nas” to lista. Na pewno kod byłby prostszy niźli ta obecna divowa sieczka.
  • Stopka składa się z kilku list linków. I nie są one powiązane z serwisem aż tak nadto. Natomiast menu w stopce już listą nie jest. Priorytety?
  • Oczywiście dane kontaktowe nie sa w address.

Strona wygląda. I tyle. Kod jest pisany wyraźnie pod wygląd, bez patrzenia na semantykę czy dostępność. Zatem w przypadku InternetStandard zmienił się tylko krój garnituru – standardy pozostały takie same.

Jeden komentarz do “InternetStandard.pl (runda druga)”

  1. Odnośnie logowania i sondy być może cachuja cały „statyczny” content jakimś varnishem, dociągają content user’a ajaxem

Dodaj komentarz

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.