NowoczesnaStrona.pl

Wśród opinii prezentowanych na stronie microhost.pl znalazłem też jedną od NowoczesnaStrona.pl. Nazwa strony mnie zaciekawiła, więc postanowiłem przyjrzeć się jej nieco bliżej.

Wygląd i działanie

  • Pierwsze, co rzuca się w oczy, to fakt, że strona niekoniecznie wygląda nowocześnie. Podział strony na zaokrąglone boksy, niebeskie tła ze zdobieniami czy wypukłe przyciski przywodzi na myśl raczej poprzednią epokę webdesignu.
  • Z nowoczesnością kłóci się też przycisk służący do dodawania strony do ulubionych. Sama nazwa funkcji wypadła z użycia co najmniej kilka lat temu.
  • Inna rzecz, że ikonki w nagłówku są mikroskopijne i mam problem, żeby je dokładnie zobaczyć.
  • Na poszczególnych podstronach widać kolejny relikt minionej epoki: linki „wstecz” wykorzystujące JavaScript do nawigowania po historii przeglądarki.
  • Równie archaiczna jest lista newsów, z których najnowszy pochodzi ze stycznia… 2013 roku.
  • Lista newsów posiada także zbyt niski kontrast numeru newsa.
  • Na podstronie Kontakt znajduje się niedostępna już mapa Google.
  • Strona nie posiada certyfikatu SSL, co pośrednio odbija się także na jej wydajności (nie może używać HTTP/2).
  • Niektóre nieklikalne elementy wyglądają jak linki, co jest niewłaściwe z punktu widzenia UX.
  • Kolejność focusowania elementów przy pomocy klawiatury w niektórych miejscach jest niepotrzebnie zaburzona. Wypadałoby ją zostawić całkowicie bez zmian.

Kod

HTML

  • Walidator nie jest zadowolony.
  • Hierarchia nagłówków również jest zaburzona. Brakuje głównego nagłówka. Wydaje się, że nagłówki są tutaj nagięte pod pozycjonowanie, co odbija się niekorzystnie na dostępności.
  • Strona jest napisana w XHTML-u, co także wskazuje na jej dawne pochodzenie. Od ok. 2012 roku bowiem XHTML był sukcesywnie wypierany przez HTML 5.
  • Zdecydowanie za dużo skryptów (i to dużych!) jest wczytywanych w head. Dodatkowo blokują one rendering. Nie do końca jest także sens wczytywać zarówno mooTools, jak i jQuery. Zwłaszcza, że ta pierwsza biblioteka dzisiaj jest już de facto martwa.
  • Cały kod to mocny divitis.
  • <a href="javascript:void(0)"  onclick="ulubione('http://www.nowoczesnastrona.pl', 'Nowoczesnastrona.pl');" title="Ulubione"> </a>

    Ten link stosuje dwie złe praktyki. Nie dość, że jest niedostępny, bo nie posiada zawartości tekstowej (czyli jest nieczytelny dla choćby czytników ekranowych), to dodatkowo miesza warstwę treści z warstwą zachowania ([onclick]).

  • <input type="text" id="user-login" class="logininput" value="użytkownik" name="user" onblur="replaceTxtBack2('user-login', 'użytkownik');" onfocus="replaceTxt2('user-login', 'użytkownik');" />

    Obecnie cały ten kod JS można zastąpić atrybutem [placeholder]. Dodatkowo brakuje etykiety dla pola – nie ma znacznika label.

  • Większość linków ma atrybut [title], który duplikuje treść z linku. W takim wypadku ten atrybut można całkowicie pominąć.
  • W kodzie strony nie ma niemal żadnego akapitu.
  • Można się także natknąć na takie antyki, jak center czy font.
  • <span class="quick-cnt-icon"><img src="images/phone.png" alt="" title="" height="20" /></span>
							<span class="quick-cnt-text">509 955 799 (Orange)</span>

    Tutaj pusty [alt] dla ikonki pozbawia numer telefonu kontekstu, przez co nie wiadomo, czym on jest.

  • Duże partie kodu są wykomentowane.
  • W stopce nagłówki boksów i ich treść są rozdzielone. Nagłówki są zebrane razem przed boksami, a dopiero później następuje podzielona na części reszta. To zaburza kolejność czytania treści przez czytniki ekranowe.

CSS

Jeśli weźmiemy pod uwagę, że strona od 2013 prawdopodobnie nie była aktualizowana, to na dobrą sprawę dzisiejsza krytyka jest wycieczką archeologiczną. Strona na tamte standardy nie jest tragiczna. Niemniej mamy rok 2018 i nieco się pozmieniało.

10 komentarzy do “NowoczesnaStrona.pl”

  1. Fajnie, że nowy artykuł. Zaraz poczytam co to za błędy znowu porobili. Dzięki.

    Zjawiam się tutaj jeszcze z jedną rzeczą. Mam do Ciebie pytanie. Dalej będę wałkować elementy interaktywne. Przeglądając Twoje komentarze na 'fejsbuku’ w grupie Weekly WebDev Challenge pewna osoba poprosiła o ocenę strony, co oczywiście uczyniłeś i napisałeś tam jedną rzecz, ale nie jestem teraz do końca pewny czy chodziło o to co myślę bo proszący trochę zmienił kod źródłowy. Chcę zapytać jakich elementów html użyłbyś do stworzenia tych małych kropek do zmiany zdjęcia, które przeważnie spotykamy w dolnej części strony. Nie chodzi mi o strzałki, które przewijają zdjęcia. Jeśli nie wiesz o co mi chodzi to na stronie bootstrapa https://getbootstrap.com/docs/4.0/components/carousel/ jak zjedziesz tak do połowy strony to ich carousel ma opcję tych „przycisków”, ale oni zmienili to teraz na takie cienkie podłużne białe linie. Jeśli dobrze zrozumiałem napisałeś, że powinny być to przyciski [button]. Zanim zacznę pisać dalej chcę się upewnić czy dobrze zrozumiałem, że tak byś to właśnie zrobił?

    Odpowiedz

      1. Dlaczego nie elementy a? Skoro strzałki w image sliderze nie odsyłają nas w inne miejsca na stronie a tylko zmieniają zdjęcia i są w tagach a to w tej sytuacji też powinny być. Jak Ty to interpretujesz? Tak, że do każdego przycisku przypisujemy jedno zdjęcie, czyli jeden przycisk = dane zdjęcie. Każdy przycisk zawsze będzie wykonywał tą samą akcję, a więc [button]. Strzałki nie powtarzają cały czas tej samej czynności tylko każde naciśnięcie tak jakby przenosi nas w inny zakątek strony/jest inne. Tym się kierujesz?

        Odpowiedz

        1. Hm, zarówno strzałki, jak i te kropki, zrobiłbym jako button. a miałoby sens tylko wtedy, gdyby slider działał poprzez zmianę adresu (dodanie hasha). Wówczas każde zdjęcie = kolejny fragment strony. Takie slidery występują najczęściej w przypadku skryptów typu fullpage.js.

          W przypadku slidera, który nie zmienia adresu, skorzystałbym z button i potraktował zmianę zdjęcia jako akcję.

          Odpowiedz

          1. Jak oceniałeś jedną stronę na fejsie to jedna osoba miała właśnie slider i napisałeś, że strzałki do zmiany zdjęć powinny być w tagu a. Od początku mi to nie pasowało. Popatrzyłem na kilka stron ze sliderami i wszystkie jakie widziałem miały strzałki w tagu a. Pomyślałem sobie, że to ja pewnie jestem w błędzie skoro „wszyscy” zrobiliby inaczej ode mnie, ale dla mnie strzałka to też ewidentny button. Nigdzie nas nie przenosi a dwa to co napisałeś, że zdjęcie nie zmienia hasha. Tag a to tag a, powinien Cię gdzieś przenieść to, że zmienia zdjęcie jest zwykłą akcją pasującą tylko do buttona. Tak myślałem, że to wyjaśnimy. Dzięki.

          2. Aha jeszcze chciałem się Ciebie zapytać. Jaki tekst alternatywny byś wpisał w taki button? Jeśli byłyby to zwykłe czarne kropki czy inne to ja bym wpisał: 'Zdjęcie numer jeden’, 'Zdjęcie numer dwa’, 'Zdjęcie numer trzy’ itd. Kiedy czytnik ekranowy przeczyta taką informację osoba niepełnosprawna będzie wiedziała, że ten przycisk pokaże mi to zdjęcie a ten tamto, chociaż w sumie nie wiem, ale do czarnej kropki w alt nie wpiszesz co przedstawia zdjęcie bo to czarna kropka.

  2. Tekst alternatywny miałem na myśli tekst występujący obok czarnej kropki ukryty visuallyhidden

    Odpowiedz

    1. Całkiem możliwe, że miałem na myśli właśnie taką nawigację opartą na hashach, mówiąc wówczas o a. Tego typu nawigacja mogłaby być fallbackiem w chwili, gdy JS nie działałby. Wtedy całość by się opierała na :target z CSS.

      Co do etykiety tekstowej: chyba nie ma za bardzo lepszej alternatywy niż „Zdjęcie nr „.

      Odpowiedz

Skomentuj Łukasz Anuluj pisanie odpowiedzi

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.