Tanio-strony-internetowe.pl

29 lutego 2016 przez Comandeer | Opublikowany w Strony WWW

Tagi: ,

6

Napatoczyłem się dzisiaj na ciekawe zlecenie skontruowania responsywnej witryny szpitala wraz z systemem wirtualnej wycieczki. Przewidywany budżet to ok. 3.5 tysiąca złotych, a w wymaganiach widnieje m.in. znajomość zasad WCAG 2.0 (z czym wciąż są spore trudności nad Wisłą). Zgłosiło się kilku chętnych freelancerów i agencji. Z ciekawości przeglądnąłem ceny i zauważyłem, że ktoś jest skłonny zrobić to zlecenie za 150 zł. Niestety, nie podał on linku do swojej strony domowej, więc nie jestem w stanie naocznie się przekonać, czy aby na pewno ogarnia WCAG 2.0. Niemniej oferent z drugą najniższą stawką (399 zł) już takowy podał – Tanio-strony-internetowe.pl – toteż postanowiłem się tej stronie przyglądnąć nieco bliżej i sprawdzić, czy aby na pewno reklamowana jakość idzie w parze z jeszcze bardziej reklamowaną ceną.

  • Pierwsze, co rzuca się w oczy, to byczy slider z wolno poruszającymi się chmurkami. Nie rozumiem zamysłu, osobiście te chmurki mnie… wkurzają. Co więcej: slider jest trochę zepsuty. Na części slajdów pojawia się poziomy pasek przewijania, a boczny „pasek nawigacyjny” (czy czymkolwiek owe „latające” przyciski z prawej są) radośnie na nie najeżdża. Wydaje mi się również, że to „rozdarcie” z prawej strony powinno być nieustannie w tym samym miejscu – inaczej wygląda to ciut dziwnie, gdy „pasek nawigacyjny” zostaje w miejscu, a jego „źródło” ucieka w bok.
  • Pierwsze wrażenie? Jestem przytłoczony. Coś mi lata z lewej, coś mi lata z prawej, slajdy się zmieniają, chmurki poruszają… Na tej stronie przekroczono tę subtelną granicę pomiędzy estetyką a zbędnym efekciarstwem.
  • Zjeżdżam do sekcji Realizacje i… nic. I to dosłownie! Pustka, żadnych realizacji – za to bardzo dużo przerażającego, pustego miejsca. I znów bohaterem staje się „pasek nawigacyjny”, który najeżdża na interfejs slidera mającego prezentować realizacje.

    I tutaj dygresja: slidery najczęściej nie idą w parze z dostępnością. Wychodzą bowiem z założenia, że każdy użytkownik widzi i nie ma problemów z używaniem myszki, co – powiedzmy sobie to szczerze – jest wierutną bzdurą. Dostępny slider to taki, który jest ładnym dodatkiem a nie jedynym sposobem prezentacji treści.

  • Aktualności za to jeżdżą tam i z powrotem, wraz ze scrollem i bardzo łatwo je zepsuć. Jeśli już się bawimy w animowane pokazywanie sekcji, to zróbmy to raz i później pozostawmy ją widoczną.
  • Później następuje sekcja Opinie klientów, a w niej – Certyfikat zaufania klientów, który jest wystawiany przez Honaro.pl (prawdę mówiąc, pierwszy raz słyszę) na podstawie opinii klientów:

    Certyfikat Honaro jest świadectwem rzetelności firmy, wystawianym przez jej prawdziwych klientów. Opinie wystawiają jedynie zweryfikowani klienci, którzy korzystali z usług, bądź produktów firmy. Na wystawione opinie, firma nie ma wpływu, nie może ich edytować, usuwać, bądź moderować.

    Tanio-strony-internetowe.pl, zjedź do sekcji „Opinie klientów”

    Tuż pod tym wspaniałym tekstem znajduje się link Bądź pierwszy – podziel się swoją opinią!, co nie napawa zbytnim optymizmem. Co więcej: link jest źle ostylowany, przez co znika po najechaniu myszą bądź odwiedzeniu.

    Certyfikat zatem, moim zdaniem, tej witrynie raczej przyznany nie został, bo… nie posiada ona ani jednej opinii. Co więcej, certyfikat jest też używany jako denerwujący ozdobnik, lewitujący sobie po lewej stronie strony. Jest to na tyle denerwujący ozdobnik, że nawet nie odsyła do odpowiedniej sekcji strony…

  • A jak już przy sekcjach jesteśmy: linki w menu nie zmieniają adresu strony, a pasek nawigacyjny nawet nie składa się z linków! Znów zbędne efekciarstwo (smooth scrolling) triumfuje nad dostępnością i użytecznością. A szkoda, bo obydwie rzeczy można łatwo połączyć lub wręcz przerzucić na CSS.
  • W formularzu etykietki pól są praktycznie niewidoczne z powodu zbyt małego kontrastu między tłem a tekstem.
  • Dodatkowo nie widać faviconki, co wygląda ciut nieestetycznie.
  • Otwieram konsolę JS i widzę to:

    2016-02-29 21:36:00.578 http://localhost:1234/static/js/honaro.js Failed to load resource: net::ERR_CONNECTION_REFUSED

    Konsola JS

    Ktoś nie sprawdził przed puszczeniem na produkcję?

  • Strona nie wygląda zbyt przyjaźnie na urządzeniach mobilnych. Wszystkie przyciski są zbyt małe, żebym chociaż spróbował je pacnąć.
  • Przejdźmy to spraw technicznych. Witryna stoi na WordPressie, czego całkowicie w tym wypadku nie rozumiem. WordPress jest CMS-em, więc z góry zakłada, że zostanie użyty do witryny z wieloma podstronami. Tutaj mamy onepage… więc użycie całego WP jest całkowicie nieuzasadnione – typowa armata na muchę. Idealnie tutaj sprawdziłyby się rozwiązania typu Jekyll.
  • Przychodzi mi do głowy tylko jedno uzasadnienie tej decyzji: wykorzystanie gotowych komponentów. I to niestety widać po wynikach w PageSpeed Insights.
  • Do kompletu oczywiście dorzucam wyniki walidatora.
  • Ok, lecimy do kodu. Pierwsze, co mamy, to stary DOCTYPE dla XHTML 1.0. Obecnie nie ma sensu go używać:

    There’s absolutely no reason whatsoever for using an HTML4 doctype. Just put the <!DOCTYPE HTML> doctype on your HTML documents and make sure they’re served as text/html and be done with it. Move on with your life.

    HTML5 – Check it Before you Wreck it with Mike[tm] Smith

  • <title>Tanio Strony Internetowe » Just another WordPress site</title>

    Wypadałoby przynajmniej zmienić domyślny tytuł…

  • 6 arkuszów stylów i 7 skryptów JS – o wiele za dużo, zwłaszcza, że strona nie korzysta z HTTP/2! Dodatkowo skrypty należy umieszczać na końcu body albo bawić się w asynchroniczne wczytywanie.
  • Przy okazji z arkuszów stylów można się dowiedzieć, że strona korzysta z gotowego theme’u – co prawda został on mocno przerobiony.
  • I nagle w head trafiamy na to:

    <div id="rates" class="left">
        <div id="rates_title">Certyfikat Zaufania Klientów</div>
        <div id="rates_content">
            <script src="http://localhost:1234/static/js/honaro.js" type="text/javascript"></script>
            <div data-params='' data-id='54154' data-type='rates' data-width='400' data-height='370' data-lang='pl' id="rates_iframe"></div>
        </div>
    </div>

    Pomijając bzdurny adres skryptu, to co to robi w head?

  • <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
    	<span class="icon-bar"></span>
    	<span class="icon-bar"></span>
    	<span class="icon-bar"></span>
    </a>

    I oto odpowiedź na moje pytanie, czy firma ogarnia zasady WCAG 2.0. Gdyby ktoś miał wątpliwości: nie, nie ogarnia. Błąd w danym kodzie jest podstawowym błędem dostępności. Nie dość, że jest tutaj pomylony link z przyciskiem, to dodatkowo element ten nie posiada żadnej treści – nie jest zatem dostępny!

    W tym wypadku wypada zajrzeć do dokumentacji Bootstrapa, która tego typu rzeczy wyjaśnia (BS 3 radzi sobie całkiem znośnie z dostępnością):

    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    	<span class="sr-only">Toggle navigation</span>
    	<span class="icon-bar"></span>
    	<span class="icon-bar"></span>
    	<span class="icon-bar"></span>
    </button>

    Jak widać, tekst jest w elemencie .sr-only, czyli klasyczny .visuallyhidden.

  • <a class="brand" href="http://tanio-strony-internetowe.pl/"><img src="/wp-content/themes/sensitive/images/logo.png"/></a>

    Kolejny przykład braku znajomości kwestii dostępności. Z racji tego, że powtarzam to do znudzenia a i tak nikt tego nie stosuje, pozwolę to sobie odpowiednio zaznaczyć:

    KAŻDY OBRAZEK MUSI MIEĆ ATRYBUT [alt]!!!

    Jeśli twierdzisz, że jakiś obrazek nie musi mieć, to osobiście Ci to wytłumaczę pójdę płakać w kącie. Naprawdę – to są PODSTAWOWE KWESTIE DOSTĘPNOŚCI. Niezbędne minimum, które trzeba znać. Jeśli się tego nie zna, to nie powinno się siebie nazywać webdeveloperem.

    W tym wypadku wartością atrybutu [alt] powinna być nazwa strony, gdyż:

    • Jest to obrazek w linku, zatem jego opis powinien opisywać przeznaczenie tego linku.
    • Jest to obrazek w nagłówku strony (w dodatku stanowiący jego jedyną treść, zatem jego opis powinien być treścią nagłówka.

    Obydwa te punkty spełnia właśnie nazwa strony.

    Jeśli komuś sprawia trudność dobranie odpowiedniego [alt], to oprócz godzin nocnych z chęcią odpiszę na każdy mail poruszający tę kwestię. Ale zanim zaczniesz mnie męczyć, lekturka: oficjalny rozdział poświęcony dobieraniu [alt] w specyfikacji HTML5 (tak, jest cały rozdział poświęcony tej kwestii!).

    Natomiast co do kwestii loga jako nagłówka strony, pisałem już o tym na WK, więc można poczytać.

  • Zamiast krzyczeć w menu, lepiej zastosować text-transform: uppercase.
  • <li id="nawigacja_home" slide="banners"><div class="icon_menu active"></div><div class="navigation_name">Start</div></li>

    „Link” w „pasku nawigacyjnym”. Bez komentarza.

  • <div class="right_menu" id="menu_string"></div>

    Pusty element = zbędny element. Zwłaszcza, że mamy pseudoelementy ::before, ::after!

  • Puste linki, obrazki bez [alt], divitis… Strona pisana typowo pod wygląd, bez poszanowania dla semantyki czy dostępności.
  • <img id="chmurka_grafika_13" class="chmurka" src="/wp-content/themes/sensitive/images/chmurka.png" />

    Polecam odpalić Firefoksa z JAWS-em i odsłuchać sobie tych „chmurek”.

  • h1 powinno się użyć raz – dla nagłówka strony. Mit wielu h1 jest… no właśnie, mitem – i to w dodatku bardzo szkodliwym!
  • Myślałem, że karuzela z realizacjami po prostu się popsuła i dlatego nic nie ma, ale nie… Tam naprawdę nic nie ma.
  • <div class="add_this addV addthis_toolbox addthis_default_style addthis_16x16_style"
    	addthis:title="Aktualności | "
    	addthis:url="?p=1#1077">
    	<p class="moreTXT">Podziel się: </p>
    	<a class="addthis_button_facebook"></a>
    	<a class="addthis_button_twitter"></a>
    	<a class="addthis_button_naszaklasa"></a>
    	<a class="addthis_button_linkedin"></a>
    	<a class="addthis_button_compact"></a>
    	<a class="addthis_counter addthis_bubble_style"></a>
    </div>

    Ja wiem, że to wtyczka, ale takie praktyki są wręcz naganne. Wystarczy, że serwer AddThis padnie i dzielenie się nie zadziała. Gdyby te linki zostały wstawione tradycyjnie, wówczas działałyby zawsze, dla wszystkich. Stąd PE jest wciąż ważne.

  • <a name="1077" href="#1077" class="news_title_link"><h2 class="news_title"></h2></a>

    Kolejny dostępny element strony.

  • W kodzie strony JS jest porozrzucany wszędzie. Łącznie jest 30 znaczników script, z czego co najmniej 20 odwołuje się do zewnętrznych plików. Naprawdę potrzeba aż tyle JS do czegoś, co nie jest aplikacją webową, a prostą stroną-wizytówką?
  • Oczywiście formularz nie ma label, ale to już chyba nikogo nie dziwi…
  • <div class="span6" id="left_kontakt">
    	<H3>KONTAKT</h3>
    	<p id="kontakt_name">Tanio Strony Internetowe</p>
    	<p>ul. Szybka 7/5</p>
    	<p>53-648 Wrocław</p>
    	<p>tel: (071) 355 33 44</p>
    	<p>kom: 514 327 946</p>
    </div>

    Akurat blok adresu to jedno z tych nielicznych miejsc, gdzie zamiast akapitów należy użyć br.

  • Stronie przydałoby się trochę microdata/mikroformatów.
  • //console.log(result);

    Profesjonalne wyłączenie debugu na produkcji.

Cóż, chyba kolejny raz sprawdza się dowcip o człowieku, który chciał dwie strony: tanią i dobrą…

Niestety, poziom niewiedzy w polskim środowisku webdevu na temat semantyki i dostępności jest porażający. Każda strona, jaką przychodzi mi oceniać (czy to tutaj, czy na forach) łamie podstawowe zasady dostępności – choćby brak [alt] czy label. To po prostu smutne…

Komentarze 6 komentarzy

Ach, zdążyłeś przed północą 😉

Ja zawsze zdążę 😉

A co myślisz o WCAG 2.0 na tej stronie: http://parafiaboniewo.pl

Od razu mówię że jest to moja amatorska praca i może leżeć nieco semantyka, ale jestem typowym smaoukiem xD

Podstawową zgodność możesz sprawdzić np. przy pomocy narzędzia Wave → http://wave.webaim.org/report#/http://parafiaboniewo.pl/

Tak na szybko: potabuj sobie po stronie i zauważ, że często nie widać gdzie obecnie jesteśmy. Łatwo to naprawić przypisując style z :hover także dla :focus. Reszta nie wygląda źle 😉 Jak chcesz dłuższą krytykę, to kiedyś mogę sobie przysiąść i to zrobić.

Głównie staram się eliminować błędy i wdrażać standardy ucząc się z tego bloga. Ostatnio zająłem się usuwaniem iframe ze stron (mapa, wtyczka FB) robiąc je w JS. Czasami gubię się jeszcze w semantyce section / div i znacznikami h

(Miałem firmę ponad rok, ale konkurencja robiąca po taniości takie strony: http://cyjan.com.pl/strony/strona.html https://www.wvp.pl/ zabiła mi firmę, BO TANIEJ, w mojej okolicy takich firm i osób prywatnych jest już do groma)

Ta strona wygląda na 1 wielkie oszustwo. W realizacja opublikowali nie swoje prace np. http://frudesign.pl/rembud.html ? To wreszcie kto jest autorem tego?

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.