Panet.pl

O niektórych firmach zwykle się nie słyszy, dopóki nie natknie się na dobrze przeprowadzoną kampanię reklamową. Poczta pantoflowa od zawsze była jedną z najskuteczniejszych form reklamy i w Sieci w tym względzie nie zmieniło się absolutnie nic… No, może poza jednym: łatwiej jest walczyć z zalewem reklamowej propagandy.

O firmie Panet nie słyszałem, dopóki jej skuteczna reklama nie zawitała na moje ulubione forum webmasterskie. Wówczas postanowiłem się nieco bliżej przyjrzeć jej ofercie oraz sposobie jej prezentacji.

• Strona nie wygląda na responsywną. A szkoda, bo to de facto standard.
• Całkiem miłą odmianą jest to, że nie wita mnie wyskakujący komunikat o cookies – ta strona w ogóle nie posiada informacji o ich stosowaniu (co niekoniecznie znowu jest dobre).
• Nie byłbym sobą, gdybym nie próbował po freudowsku czy w inny dziwny sposób analizować nazwy. W tym wypadku moim 1. skojarzeniem (a pewnie nie tylko moim – może nie jest to skojarzenie w pełni świadome, ale gdzieś tam w mózgu to siedzi) było „Pa, net”. Raczej słabo jak na firmę pozycjonującą 😉
• Nie widzę po czym TAB-uję – to jeden z najpoważniejszych błędów usability. Ja naprawdę wolę nawigować po stronach przy użyciu klawiatury a coraz więcej stron skutecznie mi to uniemożliwia. Czuję się po prostu chamsko potraktowany.
• Formularz kontaktowy – klikam w etykietę pola… i nic, bo etykieta pola nie jest etykietą. Drugi podstawowy błąd użyteczności i dostępności. Dla osób niepełnosprawnych etykiety pól formularza są często jedynymi wskazówkami pozwalającymi rozszyfrować do czego one służą – tutaj tego po prostu nie ma.
• Te 3 kafelki prezentujące zakres działalności jak dla mnie powinny być klikalne w całości – nienawidzę szukać miniaturowego linka.
• Odnoszę wrażenie, że słowo marketing pojawia się tutaj zdecydowanie za dużo razy.
• Podstrony nie wyglądają zbyt zachęcająco – to suchy tekst. Jedynie podstrona kontakt ma jakikolwiek obrazek.
• Walidator wskazuje jeden błąd – nie jest jakiś poważny i raczej to wynik nieuwagi niźli niewiedzy.
• Outline również nie jest najgorszy, chociaż zdarzają się niezatytułowane sekcje. Niektóre nagłówki zdają się także być jedynie ze względu na SEO (jak „Panet – marketing internetowy”).
• Dostajemy świeżutki HTML 5 z niepotrzebną przestrzenią nazw. Za to jak zwykle brakuje określenia języka.
• Przy HTML 5 jedyną słuszną deklaracją kodowania jest wersja skrócona – każda inna to marnotrawienie transferu. Tak samo uważam niepotrzebnego slasha za takie marnotrawienie – to i tak nie jest XHTML. Nie wspominając już o link[type]
• Wydaje mi się, że panuje tutaj lekki divitis.

• <li>
  	<a href="/">
  		<span class="l"></span>
  		<span class="c">Strona główna</span>
  		<span class="r"></span>
  	</a>
  </li>

  Tak wygląda przykładowy link w menu. Pomijając już dużo mówiące nazwy klas, to ktoś tutaj ewidentnie nie wie czym są pseudoelementy. Zarówno .l, jak i .r doskonale się na nie nadają, gdyż pełnią jedynie rolę prezentacyjną a nie zawierają treść. Złota zasada głosi, iż pusty element to zbędny element i sprawdza się w 98% przypadków (te 2% to ekwilibrystyczne sztuczki z brokatowym tłem opadającym przy ruchu myszką falami na kursor – chociaż tutaj i tak można po prostu pozagnieżdżać elementy w sobie).

• Nawigacji brakuje opisu (nagłówka).

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

  W myśl wymienionej przed chwilą zasady, ten element jest zbędny. Można go z łatwością zamienić choćby na clearfix.

• W #top występuje br. Rozumiem jego użycie go tutaj, ale nie wiem czy aż tak bardzo konieczny tu jest. Ot, tak po prostu się zastanawiam.
• .content-top bardziej nadaje się na div. Złota zasada sekcji (czyli też artykułów) brzmi: jeśli coś nie ma (sensownego) nagłówka, to najprawdopodobniej nie jest sekcją. Tutaj ten element zdaje się być zamieszczony jako hook do stylowania a do takich rzeczy stworzono właśnie div.
• W .success znajduje się cytat – ciekawi mnie z czego to cytat? A jeśli to nie cytat – to dlaczego jest oznaczony jak cytat?
• .comp to kolejny przykład elementu, który z powodzeniem może zostać zamieniony na pseudoelement – jego przeznaczenie jest bowiem w pełni prezentacyjne.

• W przypadku tej małej sekcji „Skontaktuj się z nami”, mam garść uwag.

  • Zacznijmy od najbardziej oczywistej. Dane kontaktowe od razu nasuwają skojarzenie z elementem address, o którym można przeczytać w specyfikacji rzecz następującą:

    The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole.

    W przypadku strony firmowej dane kontaktowe do firmy są również informacjami kontaktowymi przeznaczonymi dla tej strony (brzmi pokrętnie, ale po 3. przeczytaniu tego zdania staje się logiczne ;)). Dlatego tutaj zasadnym się staje otoczenie tych informacji address. Co prawda następuje pewien zgrzyt, bowiem przy obecnym kodzie w teorii adres ten będzie odnosił się tylko do sekcji, w której się znajduje (czyli dostajemy… kontakt do sekcji „Kontakt” – how meta it is!), ale nie oszukujmy się – ten zapis jest tak bardzo nieżyciowy, że raczej nikt nie stosuje tego w ten sposób (chociaż w tym miejscu mam pytanie do czytelników: czy jakieś AT/parser w taki sposób przyporządkowują dane kontaktowe do poszczególnych regionów strony?) i IMO kiedyś spotka go los podobny do losu cite.

  • W chwili obecnej są dwie metody kontaktu, jednak nie mają one etykiet (ikonka zależna od CSS się nie liczy, bo nie niesie żadnej treści i znów łamie złotą zasadę, opisaną wcześniej). W przypadku braku CSS/obrazków (albo po prostu w trybie tekstowym) to, że to jest numer telefonu (a nie np. GG) musimy się przekonać empirycznie. Może w tym momencie zostanę potraktowany jak fanatyk, ale ja widzę tutaj ładną listę definicji.

    <dl>
    	<dt>Telefon</dt>
    	<dd><a href="tel:509070696">509 070 696</a></dd>
    	<dt>E-mail</dt>
    	<dd><a href="mailto:biuro@panet.pl">biuro@panet.pl</a></dd>
    </dl>

    W tym momencie można ładnie zastosować image-replacement dla dt i voilla! A czemu w numerze telefonu niełamliwa spacja? To już zostawię czytelnikowi do przemyślenia 😉

  • Skoro e-mail jest klikalny, to czemu numer telefonu już nie?
• .boxes brakuje nagłówka. A przecież można ją spokojnie nazwać „Nasze usługi” (i ukryć przed wizualnymi) i wówczas kafelki nabierają sensu (pewnie poleci za to hejt :D).
• Nie podoba mi się tutaj zastosowanie aside – skoro już wsadziliśmy to w sekcję, to bądźmy konsekwentni i powsadzajmy to w article. Chociaż jeszcze sensowniej wygląda mi odwrócenie sytuacji – article > section. Dlaczego? Bo „Nasze usługi” to spójna całość, którą można przenieść gdzie indziej (i jest sensowna sama w sobie, np w RSS) a poszczególne usługi są częściami (sekcjami) tej całości.
• Co jeszcze powiem o kafelkach? Otóż klasy .fist, .second, .last są po prostu zbyteczne. Można tutaj zastosować .box z polimorfizmem przy pomocy :first-child i :last-child (i zanim zjedzą mnie ci, którzy znają BEM i wiedzą, że klasy to najlepsze, co może się zdarzyć w CSS: ok, niech klasy zostaną, ale niech będą abstrakcyjne a nie ściśle związane z konkretną implementacją – w takim wypadku lepiej po prostu zastosować to, co daje nam CSS). A .icon znów łamie złotą zasadę i chyba już każdy wie czym być powinien. Nie wspominając już zupełnie o owym a > span, które korzysta z obrazka tam, gdzie starczyłaby zwykła encja » w treści linka.
• A już tak w miarę dobrze szło z outlinem i tu nagle h5 po h3! To tak jakby szeregowiec podlegał bezpośrednio generałowi.

• Co do samego oznaczenia tekstu:

  zajrzyj do zakładki OFERTA

  W tym wypadku słowo „oferta” otoczyłbym b, tak samo jak inne w ten sposób wyróżnione słowa w tekście (do niektórych można także zastosować strong w zależności od kontekstu). Wielkość liter bowiem nie ma znaczenia i jest aspektem czysto wizualnym, nie semantycznym. Dlatego też powinna być aplikowana przez CSS (text-transform).

• Poprawnie skonstruowany formularz winien mieć label i fieldset. A action nie powinno być puste.

  The action and formaction content attributes, if specified, must have a value that is a valid non-empty URL potentially surrounded by spaces.

  http://www.w3.org/TR/html5/forms.html#attr-fs-action

  Dziwię się, że walidator nie sprawdza na taką okoliczność. No i oczywiście mamy tu HTML 5 a wymagane pola są robione na czuja zamiast używać atrybutu [required].

• Sekcje w stopce nie mają nagłówków a powinny. A takie copyright w ogóle nie powinno być sekcją.
• Tyle o stronie głównej. Teraz słówko o losowo wybranej podstronie: na kilometr widać, że to jakiś WYSIWYG. Czemu? Bo lista nie jest listą a zbiorem myślników porozdzielanych br. I w sumie tyle o tej treści powiedzieć można.

• Jeszcze tylko mała uwaga na temat zawartości tej podstrony:

  Zaraz, zaraz ? ale takich firm jest wiele. Dlaczego więc Twój wybór miałby paść na PANET? Odpowiedź
  jest dość prosta ? uwielbiamy wyzwania. Nie mamy zamiaru ?łowić? klientów i wystawiać kolejnych
  faktur. Ta branża to nasze hobby. Na pierwszym miejscu
  stawiamy dobro klienta, czyli realizację wspólnie ustalonych założeń.

  Brzmi jak dobrze napisany tekst propagandowy. Szkoda, że to tylko tekst, bo na całej stronie nie ma ani jednej, przykładowej realizacji (o którą aż się prosi w sekcji „Tworzenie stron WWW!”).

• Trochę o CSS-ie też powiem. Otóż są załączane 2 czcionki – DinPL regular oraz DinPL bold. Osobiście użyłbym jednej, wspólnej nazwy dla nich (DinPL) i zróżnicował na podstawie tego, czym naprawdę się różnicują (czyli font-weight). Ale, patrząc na wszelkiej maści strony, jestem w przytłaczającej mniejszości.

• a, a:link, a:visited, a:hover, a:active, a:focus, a:hover {
  	text-decoration: none;
  	outline: none;	
  }

  Kocham przemyślane decyzje. Tak to jest gdy pisze się jedynie pod wygląd.

• Selektory typu nav#menu ul li a:hover span.l do najwydajniejszych nie należą. #menu a:hover .l dokładnie to samo robi.

Ufff, tyle. Niby jest dobrze, ale gdy spojrzy się głębiej, to od razu widać, że karoseria jest przerdzewiała. A szkoda. Kod zapowiadał się na dobry a okazał się zupełnie przeciętny. Mam dylemat czy przyznać tej stronie bądź co bądź dobrą kategorię Fifty-fifty, czy jednak Gniot. Jednak niesemantyczne użycie HTML 5 i błędy użyteczności przeważają i dlatego strona ląduje w najniższej kategorii, z dużą szansą na awans w przyszłości.