DopnijSwego.pl

Od dawna doskonale wiadomo, że telewizja to jedno wielkie manipulacyjneinformacyjne medium a jego głównym fundamentem jest nic innego, jak reklama. I mimo że jestem mistrzem cynicznej obojętności, jedna reklama mnie? zainspirowała. Zainspirowała do tego, by powiększyć swe mistrzostwo w sarkastycznym marudzeniu.

Mą ofiarą padnie dziś strona reklamowana przez ciut sztywnawą parę panów – DopnijSwego.pl.

• Wchodzę i widzę dwóch smutnych panów w garniakach. W obliczu ostatnich wydarzeń jest to dość niepokojące.
• Chcę zaznaczyć tekst, który znajduje się w obecności dwóch panów – nie da się. Tekst nie jest tekstem – to ordynarny, chamski obrazek. A najbardziej chamska jest część Dowiedź się jak dopiąć swego! – aż chce się kliknąć a tu zonk. No i jest zasadnicza różnica pomiędzy dowiedzeniem się a dowiedzieniem się. Ktoś nie zna polskiego (albo jest skrajnym filozofem)?
• W lewym górnym logo powinno zawierać logo serwisu. W tym wypadku mamy logo właściciela, które dodatkowo przenosi na stronę ING. To poważny błąd użyteczności. Użytkownicy są przyzwyczajeni do klikalnego loga, prowadzącego do strony głównej. Przeniesienie ich do zupełnie innego serwisu jest mocno nieintuicyjne. Logo banku powinno być z prawej strony (tam, gdzie obecnie jest redundantny napis ING BANK ŚLĄSKI). Za logo genialnie posłużyłaby pomniejszona wersja napisu DopnijSwego.pl ze zdjęcia smutasów.
• Linki w stopce również odsyłają do zewnętrznej strony. Przydałaby się chociaż ikonka informująca o tym. No i oczywiście zastosowano [target], które dodatkowo podkreśla oddzielność serwisów.
• Z tymi linkami to w ogóle fajna sprawa. Link odsyła do adresu http<b>s</b>://e.ingbank.pl/polityka-prywatnosci a zostajemy przekierowani do http://www.ingbank.pl/indywidualni/tabele-i-regulaminy/regulacje/polityka-prywatnosci. Tak, zgadza się – bank pozbawia nas bezpieczeństwa.
• Serwis, zgodnie z tym, co widać w menu po lewej stronie, jest podzielony na 3 części: Jak dopiąć swego, Wygraj i dopnij swego oraz Pożycz i dopnij swego. Przeglądając dwa pierwsze działy można dojść, że adresy są konstruowane według zasady nazwa-działu/podstrona. Dzięki temu dostajemy przejrzyste adresy. Oczywiście wymyślona przez nas przed chwilą zasada nie istnieje i taka opcja jak Sprawdź ofertę, będąca w sekcji Pożycz i dopnij swego ma adres http://dopnijswego.pl/ki/. I w tym momencie szlag trafił user friendly URI-s.
• Ok, sprawdzę sobie czy Polacy snują, czy raczej realizują – pacam przycisk Zobacz. I co widzę? Że treść to niekliklany, lekko rozmyty obrazek. To jest po prostu ŻE – NA – DA. Przerabialiśmy to już.
• Postanowiłem się sprawdzić. Wchodzę i? każe mi się decydować na ile guzików zapiąć koszulę albo wypełniać szklankę. Że co? Zero sensownych pytań, tylko pseudopsychologiczne zabawy i to z myszką. Strona jest responsywna, więc postanowiłem sprawdzić czy ten quiz działa na mobilnych. Cóż, mój telefon poległ. Skoro robimy wersję responsywną, to raczej powinna działać na urządzeniach mobilnych. No i dziwnym pomysłem jest brak wyłączenia zoomu przez przeciąganie palcami w aplikacji, w której główną interakcją jest? przeciąganie palcami. Strzał w stopę.
• Ok, powiedzmy, że zainteresowałem się ofertą, więc przeszedłem na podstronę Sprawdź ofertę. To zmyślny sposób na powiedzenie daj nam swoje dane. Cóż, formularzyk ładny. Dziwi mnie jedynie przycisk Rozwiń przy każdej ze zgód, toteż klikam. I formularz przysłania mi napisany nieczytelnym maczkiem jakiś prawny bełkot odnośnie danej zgody. Użyteczne. Oczywiście wszystkie komunikaty błędów są pisane tę samą czcionką, co zwykły tekst w formularzu, dzięki czemu strasznie się wyróżniają. Natomiast próba wypełnienia tego formularza na komórce pokazuje smutną prawdę: wszystkie te pola są ordynarnymi polami tekstowymi. Dzięki temu komórka proponuje mi wypełnienie PESEL-u za pomocą liter.
• Próbuję się przemieszczać TAB-em i co widzę? W tym sęk, że nic. Kolejna strona ma mnie w dupie.
• Przejdźmy do spraw technicznych. Walidator pokazuje, że jest mały sajgon w metatagach.
• Outline wygląda dość sensownie – niestety tylko na 1. rzut oka. ING Bank Śląski jest nieodpowiednim nagłówkiem dla tego serwisu. Powinien on brzmieć tak, jak nazwa strony – zatem głównego nagłówka upatrywałbym w drugim w hierarchii. Drażni także nienazwana sekcja.
• Spojrzyjmy w kod. Widać HTML5. Dobrze to rokuje.
• Dla tagu html niepotrzebne są klasy warunkowe dla IE. Dla tak prostej strony można zapewnić dobre wyświetlanie dla IE8+. Starsze wersje po prostu nie istnieją. Nie reanimujmy trupów!
• Oczywiście brak określenia języka. Tutaj dla AT i tak nie zrobi to różnicy, bo 85% treści to grafiki.

• <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1">

  Brak skalowanie, więc pinching na telefonie nie powinien zoomować? ale zoomuje. Czemu? Bo kilka linijek później jest to:

  <meta name="viewport" content="width=device-width, initial-scale=1">

  Czyli krótko mówiąc: burdel w kodzie.

• <meta http-equiv="cleartype" content="on">
  <meta name="HandheldFriendly" content="true">
  <meta name="MobileOptimized" content="320">

  To nie do końca wina tej strony. To po prostu defekacja poszczególnych browserów. Bo jak wiadomo tam, gdzie są 3 standardy, to musi powstać i 4. Inna rzecz, że raczej jedynym sensownym tagiem z tych jest meta[name=viewport] (a za meta[http-equiv=cleartype] MS należy się nagroda za pomysłowość – ban na pomysły? żeby nas nie pogrążyli ich ilością), który i tak winien być w CSS.

• meta[http-equiv="X-UA-Compatible"] jest nagłówkiem HTTP i jako taki powinien być słany.
• meta[name=robots] a pliku /robots.txt oczywiście ni ma.
• Kolejny schizofreniczny kod, który miejscami cierpi na X-a.
• 6 arkuszy stylów (8, jeśli mamy IE) – o 5 (7) za dużo. Dodatkowo większość ciągnięta z https://e.ingbank.pl i Google Fonts – czyli dodatkowe odpytywanie DNS-ów. Oczywiście style ciągnięte z e-banku to aż jedna regułka. Ktoś używa klas warunkowych a i tak marnuje transfer.

• <link rel="stylesheet" href="/assets/css/normalize.css">
  		<p>vs</p>
  		<pre><code class="language-markup"><link rel="stylesheet" type="text/css" media="all" href="https://e.ingbank.pl/get/image/globalne/alt-css/kamp-poz-ki.css" />

  Dwóch różnych webmasterów, czy po prostu czyste lenistwo i przekopiowanie ze starego serwisu?

• HTML5 Shiv serwowany jest każdemu. Śmieszy, tym bardziej, że od razu pod tym leci seria komentarzy warunkowych dla IE? No, chyba, że one też przekopiowane.
• [rel^=shortcut] to wymysł IE. Najlepiej po prostu mieć plik /favicon.ico.

• <script>
  __assets   = '/assets/';
  </script>

  Implied globals to czyste zło. Ktoś tu nie umie w JS.

• <h1>
  	<a onclick="ga_stat('home')" href="http://www.ingbank.pl" target="_blank"><img src="/assets/img/ing-logo.png" alt="ING Bank Śląski"></a>
  </h1>

  Ok, to jest nagłówek i nawet ma ładny [alt]. Ale, jak już wspominałem, to nie jest logo tej strony, na co wskazuje nawet <a href="//pornel.net/target">[target]</a>. A statystyki GA można przypiąć o wiele ładniej niźli poprzez przestarzałe on? w kodzie.

• p.label w menu powinno być albo nagłówkiem (wówczas pozbywamy się nienazwanej sekcji z outline’u), albo etykietą (czyli przypięte do nav przez [aria-labelledby]) – w innym wypadku jest zwyczajnym akapitem.
• Struktura tego menu aż się prosi o wykorzystanie listy definicji (dt jako nazwy grup i dd jako linki do każdej z nich) – jest to rozwiązanie bardziej semantyczne i prostsze od trzech odivowanych list.

• <div id="content-bg"></div>

  Pusty element = zbędny element.

• Większość elementów tutaj jest pozycjonowana absolutnie/fixed – to są po prostu puzzle; czuć stroną pisaną jedynie pod wygląd.
• #quiz-home jest zdecydowanie main a nie section.
• Nie powinno się używać zagnieżdżanych h1 – nikt bowiem nie zaimplementował outline’u z HTML5.

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

  Jak już mówiłem, pusty element to zbędny element. Tę ikonkę można wstawić po prostu jako tło albo – jeśli jesteśmy hardcorami – jako ::before.

• <h2><a href="/jak-dopiac-swego/5-wskazowek">5 wskazówek jak <br>dopiąć swego</a></h2>

  Oszalał – zwykły nagłówek, co się czepia?! – zakrzyknie co bardziej rozgarnięty czytelnik. Otóż nie czepiam się samego nagłówka, tylko jego wspaniałych stylów:

  #quiz-home .box h2 br {
  	display: none;
  }

  Prawda, że cudowne?

• Menu to zawsze lista, o czym webmaster zapomniał tworząc stopkę. Fajkę (|) wstawia się w listę dzięki li + li:before choćby.

• <div style="overflow: hidden; height: 0;">

  Do czego służy ten element? A no do wsadzenia w niego wszystkich JS. Bez sensu. No i po co ciągnąć jQuery UI? Na szczęście widać, że customowa wersja, więc nie jest aż tak tragicznie.

• Jak mówiłem, treść na większości podstron to obrazki. Jak są wstawiane?

  <div class="image">
  	<img src="/assets/img/badania-mowia.jpg" alt="">
  </div>

  Kolejna strona pisana pod wygląd, która dodatkowo ma całkowicie w tyłku niepełnosprawnych (i Google przy okazji). Po to do jasnej cholery jest [alt], żeby obrazki MIAŁY opisy. Pomijając już fakt, że na tym obrazku jest sam tekst. Marnotrawienie transferu i tyle. Czyżby designer zaprojektował ulotki a na stronie miała być ta sama treść i webmasterowi się nie chciało?

• Formularz kontaktowy wstawiony jako iframe. No bo po co inwestować w SSL dla nowej domeny, skoro można wstawić formularz z już tak zabezpieczonej strony?
• Formularz wygląda źle poza ramką – był zaprojektowany tylko i wyłącznie w celu wstawienia w nią (trochę śmieszne). Kod jest całkowicie masakryczny i mdło mi się robi od niego, ale przynajmniej jest label.

Odnoszę wrażenie, że strona została zrobiona na szybko i jedynym kryterium był wygląd. Cała reszta (dostępność, użyteczność, semantyka) leży (a i wygląd dupy nie urywa). A szkoda, bo Kudłatego lubię.