Kategorie
Choszczno Frontend

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

Nowa witryna Urzędu Miasta Choszczno – sprawdzenie pod kątem wydajności, użyteczności i dostępności.

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.

Stron Choszczno.pl na ekranie telefonu
Choszczno.pl na telefonie o najpopularniejszej wielkości ekranu (szer. 360 piks CSS)

Problem #1: Logo ucieka poza ekran

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

Logo ucięte w nagłówku
Logo wystaje poza ekran po rozpoczęciu skrolowania

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 😉

Strona Choszczno.pl na ekranie telefonu
Baner/slider i tab aktualności – nieczytelnie
Strona Choszczno.pl sekcja Dla Turysty
Sekcja „Dla Turysty” nieczytelnie
Choszczno.pl strona Segregacja odpadów
Strona Segregacja odpadów – Ups…

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;
  }
}
Tab aktualności
Uzyskany efekt
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;.

Problemy z polskimi znakami fontu Montserrat Normal
Problemy z polskimi znakami fontu Montserrat Regular z Google Fonts

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

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

Brak tłumaczeń motywu
Braki w tłumaczeniach motywu

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ż).

Przybornik dostępności (ekran telefonu)
Przybornik dostępności (ekran telefonu)

Włączony tryb wysokiego kontrastu
Włączony tryb wysokiego kontrastu

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

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

Najechanie kursorem działa
Najechanie kursorem (hover) działa
Problemy z nawigowaniem Tabem
Nawigowanie tabulatorem – nie

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 - a11y Online Tool
Interfejs WAVE’a

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).

Analiza wydajności wg GTmetrix
Analiza wydajności wg GTmetrix

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

Test wydajności mobilnej na PageSpeed Insights
Test wydajności mobilnej wg Google

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! 🙂

Czy ten post był przydatny?

Kliknij na ile gwiazdek oceniasz

Średnia: 4.6 / 5 (Oceniono 12 razy)

Bądź pierwszą osobą, która oceni ten post.

Dziękuję za ocenę! 🙂

Bądź ze mną w mediach społecznościowych

Przykro mi, że oceniasz post za nieprzydatny 🙁

Podpowiesz co można poprawić?

Twoje wskazówki:

7 odpowiedzi na “Nowa witryna Choszczno.pl – Czy można coś poprawić?”

Witam
Strona już teraz ma zainstalowaną dużą ilość wtyczek, dlatego ma słabe wyniki w testach, nie polecałbym instalowania nowych.
Wszędzie jest użyta ta sama czcionka, dlatego prościej jest napisać w CSS
body { font-family: Montserrat, sans-serif; }

Ilość żądań do serwera, łączna waga strony – to miary bezwzględne. „Prostsza” – rzecz względna.
Moja strona nie jest ani „świętą krową”, ani moją największą chlubą; zaniedbana, bo bardziej dbam o strony moich klientów. Szkoda tylko, że chcesz odwrócić uwagę od wątku (poprawienia omawianej przeze mnie witryny) sposobem „najlepszą obroną jest atak”.

Nikt nie musi się bronić, bo nikt nikogo nie atakuje 😉
Pozdr

P.S. Najpierw zadbaj o swoją stronę a później krytykuj innych 😉

Rafał Grzejszczyk uważaj bo cię zjedzą. Już szukają na ciebie haków hehehe.
Szczerze sie przyznam że nie znam o czym tu piszesz, poprawili coś z tego, czy zlali?

Tworzy się klimat grozy… Już zaczynam się bać 😀
Czy poprawili – nie mam za bardzo czasu; pobieżnie sprawdzając można stwierdzić, że nie.
Chyba tylko blok „Dla Turysty”, czyli ustawienia galerii Modula Image Gallery zostały poprawione.
Testery wydajności pokazują to samo: przeciążenie.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *