nFinity.pl

Dawno już w sumie nie przyglądałem się stronie żadnej agencji interaktywnej, więc pora to nadrobić! Dzisiaj padło na nFinity, bo ta nazwa ostatnio obiła mi się o uszy.

Wygląd i działanie

  • Pierwsza rzecz, jaka mnie bardzo pozytywnie zaskoczyła, to fakt, że strona jest niemal w pełni funkcjonalna bez JS-a. Niemal, bo nie da się otworzyć menu, a dodatkowo część linków jest zrobiona źle i nie działa bez skryptów. Niemniej do najważniejszych części strony da się dostać przy pomocy linków w treści, a nawet i formularz kontaktowy działa.
  • Gorzej jest z nawigacją klawiaturą. Bardzo często elementy nie reagują w ogóle na klawiaturę lub reagują w sposób, który jest bardzo słabo widoczny. Żeby było śmieszniej, klawiatura przejeżdża przez menu nawet pomimo tego, że jest ono zamknięte.

    Niemniej są elementy, do których można dostać się wyłącznie przy pomocy klawiatury, jak np. link do numeru telefonu jest nieklikalny, ale uzyskuje focus po przetabowaniu do niego.

  • Walidacja formularza jest po angielsku, co wygląda dość dziwnie na polskiej stronie.
  • Kafelki na samej górze po kliknięciu w obrazek przenoszą mnie do innej strony – niemniej nie są to linki (nic nie pokazuje się w pasku stanu przeglądarki, a dodatkowo nie działa to bez JS). Linkami jest dopiero tekst znajdujący się w kafelkach. Bardzo dziwne rozwiązanie, które dodatkowo sprawia, że tego typu klikalne elementy są niedostępne.
  • Całkowicie nie rozumiem, czemu menu zostało zaprojektowane w taki sposób. Miejsca jest na tyle w nagłówku strony, że menu można by tam spokojnie zmieścić, bez uciekania się do przycisku. Zwłaszcza, że wjechanie wielkiej, białej płachty z linkami (i to w dodatku ze scrollbarem!) nie jest jakimś mega efektem i nie wygląda estetycznie.

    Oczywiście przycisk otwarcia menu nie jest przyciskiem, zatem ani nie otworzę menu z poziomu klawiatury, ani czytnik ekranowy nie zauważy, że ten element jest klikalny. Tak samo przyciskiem nie jest przycisk zamykający menu – to super źle zastosowane hiperłącze.

  • Zauważyłem link Zapytaj o ofertę, więc otworzyłem go w nowej karcie. Przechodzę do niego… i zonk, bo jestem na szczycie strony głównej. Link bowiem prowadzi w niebyt, podczas gdy powinien odsyłać w odpowiednie miejsce danej podstrony. To jest coś, co jest wbudowane w Sieć – wystarczy tego nie zepsuć.
  • Przez stronę przewija się kilka sliderów z opiniami. Mała, szara czcionka na szarym tle jest niemal niewidoczna – tak samo białe strzałki przesuwające opinie.

    Oczywiście warto od razu zauważyć, że strzałki te nie są przyciskami, przez co po raz kolejny utrudnione jest posługiwanie się nimi. Przyciski bowiem reagują na naciśnięcie spacji, a te strzałki – nie bardzo.

  • Bardzo duża część treści jest duplikowana pomiędzy podstronami, np. na każdej podstronie znajduje się ogólna informacja o agencji interaktywnej. Dodatkowo dokładnie ta sama informacja pojawia się na dedykowanej podstronie O nas. Jak dla mnie tego typu informacja powinna znaleźć się raz, na stronie głównej. Podobnie ma się sytuacja z duplikacją informacji o klientach. Nie dość, że jest odpowiednia podstrona, Nasi klienci, to dokładnie te same informacje są przedstawione na stronie głównej. Chociaż bardziej mnie ciekawi, po co dedykowana podstrona Kontakt, skoro jedyne, co zawiera, to… stopka widoczna na wszystkich innych podstronach. Wydaje mi się, że ta strona o wiele lepiej funkcjonowałaby w modelu SPA i dla tego modelu była tworzona.
  • W wersji mobilnej strony nie zorientowałbym się, że naciśnięcie na logo klienta wyświetli dodatkowe informacje, gdybym wcześniej nie widział wersji desktopowej. W tym wypadku powinno to być raczej całkowicie inaczej przedstawione – tak, by nie trzeba było klikać.
  • W wersji mobilnej slidery z opinami również nie mają intuicyjnej obsługi. Zakładałbym, że gest przewijania palcem powinien zmienić opinię – a tak się jednak nie dzieje. Co więcej, wprowadza to niespójność w interfejsie strony, ponieważ górne kafelki zmieniły się na slider, który można w taki sposób obsługiwać.
  • Inna rzecz jest taka, że na ekranie mojego telefonu jakakolwiek treść na górnych kafelkach pojawia się dopiero po dość znacznym przewinięciu ekranu (jakieś 2.5 ekranu). Jak dla mnie to nieco marnowanie miejsca i… mojego czasu.
  • Strona jest oparta na WordPressie, który w tym wypadku jest, moim zdaniem, przesadą. To bardzo prosta strona, składająca się praktycznie wyłącznie z tekstu i kilku obrazków. Tutaj bardzo dobrze sprawdziłyby się generatory statycznych stron, pokroju Jekylla.
  • Strona nie jest serwowana przez HTTPS, co oznacza, że nie korzysta z dobrodziejstw HTTP/2 ani nie może być PWA.

Kod

  • Nie będę się skupiał na całym kodzie – zwłaszcza, że to WordPress – niemniej chciałbym zwrócić uwagę na kilka szczegółów. Jednym z nich jest zastosowanie DNS prefetchingu, co może nieco przyśpieszyć wczytywanie zasobów pobieranych ze wskazanych domen. Osobiście jednak zastanowiłbym się, czy preloading nie okazałby się wydajniejszy.
  • Opis znajdujący się w znaczniku meta[name=description] nie zmienia się pomiędzy podstronami.
  • <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    Ten znacznik wymusza renderowanie strony przy pomocy najnowszego silnika IE. Część chrome=1 z kolei pozwalało na użycie Chrome Frame – rozwiązania Google, które odpalało silnik Chrome’a wewnątrz IE. Niemniej to rozwiązanie wycofano ponad 3 lata temu.

  • <link hreflang="pl" href="http://nfinity.pl/pl/" rel="alternate" />
    <link hreflang="en" href="http://nfinity.pl/en/" rel="alternate" />
    <link hreflang="x-default" href="http://nfinity.pl/" rel="alternate" />

    Ten kod sugeruje, że strona ma dwie wersje językowe („język” x-default to niestandardowe rozszerzenie Google oznaczające domyślną wersję językową), niemniej strona pod adresem /en również jest po polsku. Inna rzecz jest taka, że po wejściu na wersję angielską, nie ma sposobu, by wrócić na domyślną.

  • <a href="http://nfinity.pl">
    	<svg id="logo-1" data-name="logo 1" xmlns="http://www.w3.org/2000/svg" width="200" height="45" viewBox="0 0 350 30">
    		[…]
    		<title>logo_white</title>
    		[…]
    	</svg>
    </a>

    W tym wypadku treść alternatywna SVG (a zatem jego tytuł ze znacznika title) staje się równocześnie treścią linku, która zostanie odczytana choćby przez czytniki ekranowe. To sprawia, że link do strony głównej uzyskuje całkowicie bezsensowny tekst „logo_white”, który nie jest nawet poprawnym słowem.

  • <!-- Button to close the overlay navigation -->
    	<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">
    		<span class="menu-text">Menu</span>
    		<img src="http://nfinity.pl/wp-content/themes/nfinity/img/x.png"/></a>
    
    <!-- Overlay content -->
    <nav class="overlay-content" role="navigation">
    	[…]
    </nav>
    […]
    <span onclick="openNav()" class="u-pull-right menu-button">
    	<span class="menu-text">Menu</span>
    	<img src="http://nfinity.pl/wp-content/themes/nfinity/img/=.png" />
    </span>

    Liczba zbrodni popełniona na kodzie obsługi menu jest wręcz przerażająca. Przyciski menu mają jasno określone wymagania (przykładowa implementacja). O obrazkach natomiast napisałem już chyba wszystko, co mogłem.

  • Warto też zwrócić uwagę na hierarchię treści, która jest całkowicie zaburzona.
  • <a href="javascript:" id="return-to-top"><i class="fa fa-arrow-up"></i></a>

    Tradycyjnie źle wstawiona ikonka + niedziałający link.

  • <p><strong>Nfinity.pl Sp. z o.o. </strong></p>
    <p>ul. Wandy 7/4 <br />53-320 Wrocław</p>

    Akurat w tym wypadku zastosowanie akapitów jest błędem. Blok adresowy bowiem jest spójną strukturą i akapity do niego nie pasują. Dodatkowo nie widzę powodu, dla którego nazwa firmy miałaby być otoczona strong. W tym wypadku wręcz idealnym kandydatem jest b, stworzone do wizualnego wyróżnienia pewnych fragmentów tekstu, ale bez nadawania im dodatkowej ważności.

  • Formularz bez label. A szkoda, bo nie byłoby to trudne to zrobienia w tym wypadku – wystarczy zamienić span.floating-label na label.floating-label.
  • Liczba dołączanych arkuszy stylów i skryptów jest wręcz przerażająca. Przecież to nie jest aplikacja, a prosta strona informacyjna! Niektóre, dobrze zrobione, aplikacje internetowe wczytują mniej zasobów!

Kolejna strona, która wygląda efektownie, niemniej pod spodem stosuje bardzo dziwne i niekoniecznie dobre praktyki. W tym wypadku dziwi to tym bardziej, że wiele z wymienionych tutaj problemów dałoby się rozwiązać minimalnym wręcz nakładem pracy i lekkim przemyśleniem struktury treści.

2 myśli na temat “nFinity.pl”

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *