Nowa witryna Choszczno.pl – Czy można coś poprawić?

Nie ma rzeczy idealnych a prawdziwa cnota krytyk się nie boi. I to by było na tyle – jak mówi klasyk – z truizmów na wstępie. Wysilę się na krytykę konstruktywną, której przyświeca wygoda użytkowników serwisu (a trochę mniej samozadowolenie webmastera witryny ;).

O czym mowa?
– Niedawno wdrożony, odnowiony serwis internetowy Urzędu Miasta w Choszcznie.

Nawet zostałem nieśmiało zachęcony, więc wezmę go na tapet pod kątem szeroko rozumianej użyteczności (ang. usability) tudzież UX, gdzie bardziej szczegółowo chodzi o czytelność, dostępność (ang. accessibility) oraz wydajność (ang. performance).

Nie będzie to kompleksowy audyt, a nieodpłatne spojrzenie w „bebechy” i ich emanację wizualną na dosłownie kilku z brzegu stronach i zastosowanych szablonach. Co za tym idzie: absolutnie nie będę zajmował się zawartością merytoryczną.

Wg mnie projektanci stron, a bardziej chyba programiści, są bardzo otwarci na pomaganie sobie nawzajem (na wszelkich forach), co moim zdaniem nie jest tak często spotykane wśród innych profesji. Niech więc i organizm witryny Choszczno.pl ma szansę stać się ciekawym przypadkiem dla adeptów tworzenia stron WWW (a może i bardziej zaawansowanych web-majsterkowiczów).

Wizualne mankamenty interfejsu

Gdyby spojrzeć w statystyki używania stron WWW okazuje się, że większość ruchu pochodzi z urządzeń mobilnych. Zacznijmy więc od ekranu telefonu.

Problem #1: Logo ucieka poza ekran

Na desktopie, czyli dużym ekranie, też tak się dzieje po rozpoczęciu przewijania strony.

Na elemencie IMG obrazka logo nadany jest styl inline określający negatywny margines górny, na dodatek z dyrektywą !important, której radzę nie stosować, a w szczególności w atrybucie style, bo później nie ma szansy nadpisać nadanych wartości; na nic zdają się zalety kaskadowości i specyficzności CSS.

Rozwiązanie

Usunąć style inline.
Chodzi o to, żeby logo „podciągnąć” w górę w początkowej fazie, jeszcze gdy wyświetla się przybornik ikon nad menu głównym, tylko na większych ekranach, na których menu nie jest jeszcze zredukowane do ikony hamburgera. Z pomocą przyjdzie reguła @media (media query) i logika: nadaj negatywny margines górny, gdy główny element strony body nie jest jeszcze opatrzony (przez nasłuchy JavaScript) klasą scrolled.

@media (min-width: 992px) {
  body:not(.scrolled) #pe-logo {
    margin-top: -30px;
  }
}

Oczywiście można nadawać kolejne usprawnienia, np. po skrolowaniu zmniejszyć logo, żeby nie zasłaniać zbyt dużo ekranu, np.:

.scrolled #pe-logo {
  max-width: 180px;
}

Rekomendacja

Nie każda grafika nadaje się do prezentowania w wektorowym formacie SVG (Scalable Vector Graphics), jednak geometryczny wizerunek Choszcza aż się o to prosi! Bezszeryfowy krój Century Gothic w napisach logo też nie wymagałby zbyt dużej ilości wektorów do zdefiniowania krzywych.

Grafika SVG nie dość że jest zawsze ostra, lekka, to pozwala też na różne „zabawy”.
Poniżej przykład mojej inwencji – zmiana skali, koloru i redukcja elementów – po przeskrolowaniu.

See the Pen SVG Logo alternate sticky menu by Rafał Grzejszczyk (@Rafiozoo) on CodePen.

Problem #2: Na bakier z responsywnością

Uff, ciasno… Wredne te smartfony 😉

Rozwiązanie

Magicznego nie ma. Trzeba się pochylić nad dopasowaniem i uelastycznieniem tej różnorodnej treści:

Baner główny

Teraz rozmiar kontenera warunkuje wielkość fontów w środku, skalując proporcjonalnie (liczenie na bieżąco i modyfikacja DOM przez JavaScript).
Trzeba zmienić ustawienia slidera. Wiem, jest pioruńsko bogaty w opcje. Użyty Slider Revolution daje jednak możliwość dostosowania widoku do określonych breakpointów, a więc nie tylko desktop, a także tablet i mobile.

Taby na przewijarce aktualności

Przydałoby się odkryć trochę więcej tytułu newsa. Może tak:

@media (max-width: 768px) {
  .pe-panels.tabs.responsive .pn-list li.long a {
    padding: 1em .5em 1em 1em;
    text-align: left;
  }
  .pe-panels.tabs.responsive .pn-list li.long a span {
    display: block;
  }
}

Blok „Dla Turysty”

Trzeba wejść w ustawienia galerii Modula Image Gallery:
Responsive Settings → Custom responsiveness
i włączyć domyślne:

• Tablet Columns: 2
• Mobile Columns: 1

Obrazek Segregacja odpadów

W „pełnej krasie” to bardzo klarowna ikonografika. Na mobilach – żarcik.
Najprościej: pociąć obrazek wg kolumn i wstawić w blok kolumn; wystarczy polegać na domyślnych stylach w WordPressie.

Rekomendowałbym jednak nieuciekanie się do najprostszego rozwiązania – stanowczo lepiej kiedy tekst jest dostępnym tekstem, a nie obrazem, którego nie odczyta wyszukiwarka czy standardowy czytnik ekranu.

Aż się prosi, żeby zrobić z tego kawałek porządnej strony WWW w technice flexbox 🙂

Problem #3: Wadliwy font

Montserrat od Google obiecuje, że będzie się dobrze sprawował w każdej grubości swojego bogactwa. W rzeczywistości, na Windowsach przynajmniej (Chrome, Firefox, Opera, Edge, IE11), nie jest tak różowo.
Jest problem z grubością „Regular” – font-weight: normal; albo font-weight: 400;.

Oto próbki użycia webfontów kroju Montserrat z różnych źródeł:

• od Adobe
• lokalnie (pobrane z Cufon Fonts)
• od Google – dziwne prawda?

Rozwiązanie

Można by zrezygnować z wadliwej grubości 400 na rzecz font-weight: 500; (wtedy podlinkować właściwie CSS od Google), wybrać inne źródło, lub „od biedy” na odpowiednich selektorach dodać słowo kluczowe / fallback sans-serif, bo do takiej kategorii należy krój Montserrat. Podmianki nie będą wtedy razić, jak przy domyślnym dla Windows szeryfowym Times New Roman.

.page-header h1, .page-header .entry-title {
  font-family: Montserrat, sans-serif;
}

Problem #4: Braki w tłumaczeniach

Rozwiązanie

Edytować należy plik .PO, który zaktualizuje faktycznie wykorzystywany przez serwer .MO.
W przypadku Choszczno.pl arkusz tłumaczeń dla aktualnego motywu znaleźć możemy po standardowej dla struktury WP ścieżce:
https://choszczno.pl/wp-content/languages/themes/pe-business-pl_PL.po
Katalog /wp-content/languages/ daje gwarancję bezpieczeństwa pod kątem aktualizacji wtyczek czy motywów, tzn. że nasza wersja nie zostanie nadpisana.

Lokalnie wygodniej używać program Poedit (i wysyłać via FTP), ale online sprytniej chyba będzie wykorzystać wtyczkę Loco Translate.

Dostępność

O co chodzi?
– Już na samej górze strona Choszczno.pl sugeruje, że wspiera użytkowników niepełnosprawnych – ikona ludzika na wózku → przybornik udogodnień (wielkość czcionki, kontrast itd.).

Czy tak rzeczywiście jest?

Na pierwszy rzut oka – słabowidzącego – ikony są zbyt małe i zbyt blisko siebie, aby je łatwo rozpoznać i kliknąć czy tapnąć wygodnie.

Dołożenie w tym miejscu ikon BIP, kalendarza wydarzeń i Facebooka, bynajmniej nie ułatwia orientacji.

Niestety włączenie skontrastowanego stylu (w inwersji – na czarnym tle) wpędza użytkownika w większe tarapaty, ponieważ czytelność jest niedopracowana w bardzo wielu obszarach i, o zgrozo!, ikona poprawy dostępności ginie w mroku (logo i ikona menu gł. też).

Dostępność polega m.in. na umożliwieniu nawigowania przy użyciu klawisza Tab.

W trybie wysokiego kontrastu znów zderzenie z „mrokiem”.

Należy zatem zatroszczyć się o pseudoklasę :focus na selektorach elementów aktywnych: A, BUTTON, INPUT itp.

W analizie pomocne będą narzędzia online, np.:

• WAVE – Web Accessibility Evaluation Tool
• PowerMapper

Widzimy, że braki są choćby w „klasyku” a11y – atrybutach alt na obrazkach.

Warto spełniać standardy dostępności wg rekomendacji WCAG, przynajmniej na poziomie A. Niewątpliwie strony urzędów i instytucji powinny świecić tu przykładem.

Zobacz też: Jak zbadać dostępność strony?

Wydajność

Najdokładniej (i za darmo) sprawdzimy stronę pod kątem wydajności na GTmetrix (online raport dostępny jest czasowo, ale zawsze można pobrać dokładny raport PDF, patrz niżej).

Tester wydajności od Google – PageSpeed Insights też nie wygląda na zadowolonego.

Na co testery krzyczą najbardziej?
– Na zbyt duże, słabo zoptymalizowane obrazy.

Jeśli wrzucimy do WordPressa olbrzymi obrazek, to w sposób niekontrolowany puścimy go użytkownikom nawet o boku 2560 piks. Sporo.

Rozwiązania

Zabiegów może być tak dużo jak długa jest lista zaleceń w ww. raporcie wydajności. Może coś na początek:

1. Skorelować wielkości obrazów (WP → ustawienia mediów / własne definicje w functions.php) do faktycznie używanych szerokości „łamów”, a w szczególności głównego kontenera (tutaj: max. 1140 piks).
   Optymalizacja obrazów wymaga kompromisów.
   [Tematyka jest obfita.]
2. Skonfigurować wtyczkę, która obsłużyłaby cache’owanie stron, zarówno po stronie serwera jak i cache-control po stronie klienta. Przyda się też kompresja Gzip gotowego HTML-a.
3. Być może ta sama wtyczka obsłużyłaby minifikację (kompresję) i konkatenację (łączenie) arkuszy CSS oraz skryptów JavaScript.
4. Zaimplementować opóźnione ładowanie obrazów (ang. lazy loading) – nie tylko w zakresie galerii Modula, a gdzie się tylko da (poza górą above the fold).
5. Im więcej wtyczek, tym trudniej zapanować nad aplikacją. Warto zrewidować czy są niezbędne, a jeśli tak, czy potrzebne są ich dodatkowe zasoby (ang. assets), ich domyślnie ustawione style, które np. zaciągają kolejne biblioteki fontów, ikon itp.

W kategorii dostępności zakwalifikowałbym też niepokrycie stron ze starej wersji witryny. Wiem, niełatwe to zadanie – przenieść treści – i żeby dla setek adresów URL przygotować przekierowania 301 na serwerze, z parametrowych na tzw. SEO-przyjazne.

Żeby nie kończyć zbyt srogo – ogromna poprawa względem poprzedniej wersji.
Nie naraża się na krytykę swojej twórczości tylko ten, co nic nie robi, prawda?
Powtarzam swoją opinię: Logo jest klasa! Legenda Choszcza ożywa! 🙂

Miłego dnia! 🙂