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 dlabody
. 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
zamiastaddress
. Dodatkowo pojawiają się nazwy klas ściśle związane z prezentacją (.white
). -
Jak wygląda filtr na podstronie „Portfolio”?
[cc lang=html]
- Strony www
- 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.
Kpina. Specyfikacja HTML określa aż 2 elementy interaktywne – element listy na pewno nie jest jednym z nich.
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 😉
Oczywiście jak zawsze świetna krytyka.
„Jak zapewne większość stałych czytelników (mamy takich?) ”
– Macie 😉
O stronie Juwenaliów w Poznaniu czytałem na Antyweb.pl 🙂
Najbardziej chyba poirytował mnie ten pseudo formularz, bez form.
A co z ludźmi, którzy wyłączyli JS’a? Dostaną hasha w ryj..
Może w swojej historii istnienia i przeglądania książek nie dotarli do rozdziału o formularzach..
Ach te gladness 😀 Jakiś czas temu pewna osoba z tego pseudo studia zleciła mi kod oraz poprawki pewnego forum nie dość że chcieli płacić sms’em to na dodatek zyskałem wszystkie hasła i loginy pewnej sieci gdzie miałem kontrolę nad serwerem dedykowanym jak i osobno forum, nie polecam 🙂