Nadszedł ten czas w miesiącu, w którym wypada napisać kolejny jakże interesujący artykuł na temat kolejnej strony internetowej. Jak zawsze doskonałym źródłem inspiracji są strony agencji interaktywnych. Nie inaczej będzie i w tym miesiącu, bowiem na moim celowniku znalazła się strona agencji Wow Now!.
- Zwykle pierwsze uruchomienie strony wykonuję przy pomocy Firefoksa z włączonym dodatkiem NoScript. Tym razem powitał mnie bardzo nieprzyjazny komunikat, że strona jest tak nowoczesna, że wymaga JS. Oczywiście komunikat jest po angielsku. Żeby było śmieszniej, komunikat jest nałożony na stronę (co widać po długości screena!), a po jego ręcznym usunięciu widzimy jeszcze bardziej kuriozalną rzecz: loader rozciągnięty na całą stronę! Jeszcze mało? Po usunięciu loadera, widzimy całą czarną stronę. Po pogrzebaniu nieco w kodzie okazuje się, że nic nie widać, bo… główny element jest przezroczysty (ma
opacity: 0). Po naprawieniu tego mankamentu, strona zaczyna wyświetlać listę projektów – bez działającego menu. To oznacza, że co najmniej połowa strony działa bez JS. Jedyna rzecz, która nie działa bez JS, to efekt parallax, który tutaj jest NAPRAWDĘ wszędzie, powodując przesyt. - Okazuje się, że strona ma dwie, niezależne nawigacje. Pierwsza, nawigacja strony, dostępna jest po naciśnięciu tradycyjnego przycisku hamburgera. Po obejrzeniu zapierającego dech w piersiach efektu offcanvas, dostajemy menu aż z trzema opcjami, z czego pierwsza… przeładowuje aktualną stronę (mówimy rzecz jasna o stronie głównej w tym momencie). Ale! Nie jest tak łatwo, bo po przewinięciu strony w dół, na górnym pasku nawigacyjnym pokazuje się drugie menu, zupełnie inne i po angielsku. Możemy sobie dzięki niemu odfiltrować kategorie projektów, podzielić się stroną na portalach społecznościowych, przejść w tryb pełnego ekranu i… otworzyć menu strony. Oczywiście to menu pojawia się dopiero po przewinięciu w dół, niemniej zrobiono to wadliwie i przy zaaplikowaniu filtra, który zostawi raptem kilka projektów, menu pojawia się zbyt późno.
- Nawigować klawiaturą po prostu się nie da. Obydwa menu, choć ukryte, są i tak możliwe do sfocusowania i znajdują się jako pierwsze w kodzie. I żeby było śmiesznie, większość linków w nich to zwykłe zaślepki, które powinny być przyciskami. A jeśli już komuś uda się przezwyciężyć tę trudność, to i tak nie domyśli się, gdzie jest obecnie focus.
- Okazało się, że hasło
Jesteśmy agencją digital
jest linkiem do podstrony O nas. Wypadałoby, żeby link wyglądał jak link. Żeby było zabawniej, ten sam tekst zastępuje po przewinięciu w dół logo na górnym pasku nawigacyjnym, równocześnie… przestając być linkiem. - Ta dziwna decyzja projektowa sprawia, że po przejściu na dowolną podstronę, powrót na stronę główną po lekkim przewinięciu strony wymaga albo kliknięcia Go to top w menu na pasku, albo kliknięcia pozycji Menu w menu na pasku (uhm…) i wybraniu opcji Portfolio. Irytujące.
- Efekt parallax na podstronach jest po prostu żenujący. Treść chowa się pod nagłówkiem, który wraz z przewijaniem się strony zmniejsza się i rusza niezależnie od reszty strony. Sprawia to wrażenie nie tyle dynamizmu, co mętliku.
- Kontrast na stronie również leży na całej linii, np. można pobawić się w szukanie przycisku menu na podstronach czy po prostu w… próbę przeczytania treści (białego tekstu na pomarańczowym tle).
- Podstrona Kontakt zupełnie nie zachęciła mnie do kontaktu. Zamiast wygodnego formularza kontaktowego, dostaję trzy wielkie kafle, z których aż jeden jest klikalny.
-
Kodu prawdę mówiąc nawet mi się nie chce oceniać (bo to typowa sieka WordPressowa), niemniej zwrócę uwagę na jedną rzecz:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">Obecnie toczy się dyskusja, czy takiego zapisu nie uznać za niezalecany. Mimo wszystko bowiem użytkownik sam wie lepiej, czy jakiś element strony musi sobie powiększyć, czy nie. Webmaster nie powinien się w to wtrącać – zwłaszcza, że mówimy o prostej stronie, a nie aplikacji z doskonale dostosowanym interfejsem.
Jedno trzeba im przyznać: miałem efekt wow
– Wow, jak źle!
.