Gladness.pl

Dawno nic nie pisałem, toteż trza by nadrobić zaległości. Mam kilka witryn na oku, które wręcz proszą się o opisanie tutaj (bynajmniej nie z powodu semantyczności swego kodu), lecz dzisiaj – mam nadzieję – będzie coś lżejszego. Jak zapewne większość stałych czytelników (mamy takich?) zauważyła, mam wręcz alergię na wszelkiego typu firmy webmasterskie, toteż znów rzucę okiem na stronę jednej z nich – Gladness.pl.

• Nazwa z góry narzuca duże wymagania. W końcu nie zadowalam się byle czym. Prawdę powiedziawszy byłbym strasznym klientem dla takich firm – obawiam się, że doprowadziłbym niejednego do rostroju nerwowego. Niemniej po zakończeniu współpracy z firmą Ukontentowanie chciałbym móc powiedzieć I’m glad!
• Outline dla linków jest prawie niewidoczny – niespecjalnie ułatwia to nawigację klawiaturą. Z myszką też nie jest lepiej, bo większość elementów nie ma stanu :hover. Często, oprócz łapki, przydałoby się jakiekolwiek inne zaznaczenie, że dany element jest interaktywny.
• Skoro slider na głównej ma aż jeden slajd, to po co jest sliderem? W tym momencie to marnowanie transferu przez dociągany skrypt do jego obsługi.
• Podobny zarzut można wysnuć w stosunku do dolnego slidera ze sliderami. No, chyba, że faktycznie są swoim własnym klientem.
• Dane kontaktowe w stopce mogłyby być klikalne. Podniosłoby to ich użyteczność, głównie na mobilnych, gdzie wystarczyłoby kliknąć w numer telefonu.
• Wydaje mi się, że górne menu jest ciut za wysokie w czasie przewijania strony. Na szczęście strona jest responsywna i na małych rozdzielczościach owo menu jest statyczne.
• Na podstronie „Kontakt”, mapa Google po prostu pokazuje mi Wrocław. Raczej nie chodziło o wycieczkę krajoznawczą.
• Oczywiście formularz nie ma label. Ten element jest w specyfikacji HTML od co najmniej 1998 i do dziś pozostaje szerzej nieznany dla webmasterów. A jego stosowanie to jedna z podstawowych zasad dostępności.
• Filtrowanie kategorii w portfolio powinno działać bez JS. Co prawda całe portfolio jest dostępne i bez JS, ale w tym wypadku taki filtr można bez problemu zrobić używając podstawowej funkcjonalności Sieci – URI. Tak, wystarczy skorzystać z wewnętrznych kotwic i co najwyżej upiększyć ten mechanizm w JS. Ten sam zarzut tyczy się tabów na stronie głównej, ale tam jest zdecydowanie gorzej – treść nie jest dostępna bez JS! A przecież od dawna jest :target i cały ten mechanizm (w jednym i drugim przypadku) można zrobić przy pomocy tandemu HTML + CSS.
• Jak już jesteśmy przy bezsensownych linkach – czemu logo linkuje w próżnię? Powinno po prostu linkować do /.
• No i trzeba od razu zauważyć, że link do strony głównej linkuje do /index.html, zamiast po prostu do /.
• Najlepsza i tak jest podstrona „Pobierz”, bo po prostu jej nie ma.
• Ok, po takim wstępie przejdźmy do kodu. Walidator nie jest zachwycony a outline jest strasznie wybrakowany.
• Oczywiście dostajemy trendy HTML 5. Niestety jego zastosowanie kończy się na DOCTYPE. Nawet deklaracja kodowania jest w nieskróconej, marnującej transfer postaci.
• Brakuje określenia języka dokumentu.
• 3 arkusze stylów – o 2 za dużo. To samo dotyczy skryptów, których są 4 – powinny być maksymalnie 3 i to na końcu body.
• [rel^=shortcut] to wymysł IE a on nie zrozumie ikonki w PNG. Taką ikonkę można serwować normalnym przy pomocy [rel=icon] i trzymać /favicon.ico jako fallback dla reszty.
• Po co [type] dla CSS i JS?
• Osobiście wyciągnąłbym adresy z Google Fonts i wsadził do swojego arkusza.
• Kod cierpi na divitis.
• [cc lang=html]

  Pomijając już fakt, że to główny nagłówek strony, to dodatkowo jest to pusty element. Pusty element to zbędny element. Tym gorzej jeśli jest on interaktywny – wówczas jest dodatkowo całkowicie bezsensowny. Ewidentnie strona jest pisana pod wygląd, na co też – niestety – wskazuje reszta kodu.

• Menu to lista – to jedna z podstawowych zasad pisania stron. Tutaj jest złamana.
• Pusty .margin_page, który ma zastępować… górny padding dla body. Cóż, wizualnie nie ma różnicy, prawda?
• Kod slidera to po prostu jakaś kpina. Kilka pustych elementów, bezsensowny nagłówek (wstawiony nie wiadomo z jakiego powodu) i krzyk w kodzie (od tego jest CSS).
• [cc lang=html]

  Autorom strony polecam się zapoznać co to jest AT i w jaki sposób czyta strony WWW.

• Taby z ofertą aż proszą się o nagłówki i odpowiednie linki do każdej sekcji. Tu tego nie ma.
• Ostatnie projekty to lista. Tutaj to zbiór pustych elementów, które nie mają jakiegokolwiek sensu.
• Zatrważające jest to, że na tej stronie praktycznie wszystkie linki nie mają treści. To jest pisane czysto pod wygląd, bez zwrócenia jakiejkolwiek uwagi na kwestie dostępności i użyteczności.
• Oczywiście dane kontaktowe w stopce są wsadzone w span zamiast address. Dodatkowo pojawiają się nazwy klas ściśle związane z prezentacją (.white).

• Jak wygląda filtr na podstronie „Portfolio”?

  [cc lang=html]

• Strony www

Kpina. Specyfikacja HTML określa aż 2 elementy interaktywne – element listy na pewno nie jest jednym z nich.

• Oczywiście Facebook jest podlinkowany z nieśmiertelnym [target] doczepionym do pustego linku.
• Najlepsze jest to, że formularz kontaktowy na stronie „Kontaktu”… nie jest formularzem. Całość jest… słana AJAX-em. Ktoś se jaja robi i nie zna podstawowych założeń poprawnie wykonanej strony internetowej. Powiem więcej: AJAX nałożony na zwykły formularz jest łatwiejszy do wdrożenia i utrzymania. A jeśli ktoś mi powie, że tutaj jest link zamiast przycisku, bo się lepiej styluje, to każę mu się obudzić z 10-letniej śpiączki.

Najlepiej cały kod strony podsumowuje cytat ze strony głównej:

Od dawien dawna ludzie to wzrokowcy.

Dokładnie to można powiedzieć o autorach – stworzyli wspaniały pobielany grób.

PS Żeby zaktywizować Was, drodzy czytelnicy, zostawiam Wam zadanie: zastanówcie się co złego jest na stronie Juwenaliów w Poznaniu 😉