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.

17 komentarzy do “nFinity.pl”

  1. Napisałeś:

    „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ą.”

    Co w tym przypadku oznacza słowo „niestandardowe”? Że tylko przeglądarka chrome wspiera x-default a żadna inna już nie?

  2. A czy Twoja strona nie byłaby bardziej użyteczna dla osób niepełnosprawnych gdyby w Twoim nagłówku a dokładnie w tagu a dodałbyś title=’powrót do strony głównej’. Jakby nie było tytuł WebKrytyk.pl poprzez link pełni rolę elementu interaktywnego, który przenosi nas z powrotem na stronę główną z każdego miejsca na Twojej stronie. Taka sama sytuacja jest na Twojej drugiej stronie https://blog.comandeer.pl Wydaję mi się, że to pominąłeś z powodu tekstu, który znajduje się obok i który zostanie przeczytany przez czytnik ekranowy, ale tak czy siak moim zdaniem title=’wróć na stronę główną’ brzmi lepiej dla osoby niepełnosprawnej niż WebKrytyk.pl

    1. Przy dodaniu [title] „Powrót na stronę główną” zostałby co najwyżej przeczytany na końcu linku, po przeczytaniu nazwy strony. Można by nadpisać treść dla czytników ekranowych przy użyciu [aria-label], ale, prawdę mówiąc, nie jestem przekonany.

      Widzę, że ten wzorzec jest różnie stosowany. Na Internet bez barier jest dodany [title] po nazwie strony. Na stronie Fundacji Widzialni tekst w logo dla czytników ekranowych to po prostu „strona główna”. Ale za to na WebAIM.org czy stronie The Paciello Group link do strony głównej zawiera po prostu nazwę strony i nic więcej. W tym drugim przypadku jednakże link do strony głównej jest także w menu. Niemniej np. A11yproject również w logo zawiera wyłącznie nazwę strony.

      Myślę, że sama nazwa strony powinna być w większości przypadków zrozumiała i dostarczać informacji o tym, dokąd dany link prowadzi. Nie przeczę jednak, że fraza „strona główna” faktycznie może być przyjaźniejsza. Pytanie, na ile ta różnica jest istotna (osobiście myślę, że niezbyt). Niemniej nie mam pod ręką żadnych badań na ten temat. Musiałbym poszperać.

  3. Na http://internet-bez-barier.com/ widzę tylko ukryty tag &lta&gt na samym końcu, ale żadnego [title] tam nie ma, ale wiem o co Ci chodziło. W takim razie na Twojej kolejnej stronie https://www.comandeer.pl już zrobiłeś tak jak napisałem wyżej. Dlaczego? Przez to że ukryłeś Comandeer’s Homepage, title z linku zostanie przeczytane pierwsze? Czy kolejność będzie taka sama jak napisałeś w poście wyżej? Czy dlatego, że Comandeer’s Homepage pełni rolę alt dla background-image? Czy zastosowałeś wzorzec Heydona Pickeringa, czyli logo częścią menu, ale jeśli tak to po co ten title w linku?

    1. Jest na podstronach: <a class="header__homepage-link" href="http://internet-bez-barier.com/" title="strona główna" rel="home">

      Co do mojej strony domowej: tam znajduje się sam obrazek, bez żadnego tekstu obok. Stąd [title] jest także dla użytkowników myszki, żeby wiedzieli, co ten obrazek robi. Czytnik ekranowy i tak usłyszy tytuł strony (bo jest ukryty w sposób dostępny dla czytników), a dopiero potem [title].

      Natomiast wzorzec z logo jako częścią linku zastosowany jest dlatego, że główny nagłówek strony znajduje się poniżej.

  4. Rozumiem.

    Mam jeszcze jedno pytanie odnośnie jednego z Twoich artykułów, ale najpierw muszę zadać pytanie. Załóżmy, że tworzysz stronę internetową. Jesteś w header. Przy prawej krawędzi strony będą elementy menu a przy lewej ma być logo, ale klient zażyczył sobie, że logo ma być jako zdjęcie, czyli w tagu img, a całość otulona tagiem a bo po naciśnięciu w logo mamy wracać na stronę główną. Sytuacja wygląda mniej więcej tak:

    <a href="https://example.net" rel="nofollow">
                
            </a>
        
        
                       
                <a href="whatever.html" rel="nofollow">Whatever</a>
                <a href="wherever.html" rel="nofollow">Wherever</a>
                <a href="whenever.html" rel="nofollow">Whenever</a>

    i moje pytanie jest takie, co w takiej sytuacji wpiszesz w alt obrazka?

  5. Ja też bym tak zrobił, ale czytałem Twój artykuł na tej stronie http://kot-zrodlowy.pl, który nazywa się Najczęstsze błędy początkujących (i nie tylko) webdeveloperów. Chodzi mi o temat Obrazki w elementach interaktywnych a dokładnie o to:

    „Chyba najpopularniejszym przykładem tego typu obrazków jest podlinkowane logo. Tutaj błędem jest fakt, że w [alt] faktycznie pada słowo “logo”:

    W przypadku obrazków, które są jedyną zawartością linku czy przycisku, ich [alt] staje się opisem całego linku/przycisku. To oznacza, że opis obrazka powinien informować, do czego dany element służy. Informacja typu “Logo Nazwa Strony, link”, jaką poda czytnik ekranowy, jest bowiem niepoprawna. Nie jest to link do logo strony, lecz do strony głównej witryny. Stąd odpowiedni [alt] brzmiałby po prostu “Nazwa Strony” albo “Powrót do strony głównej”:

    i teraz ja uważam, że informacje jak najbardziej pomocne, ale lekko wprowadzające w błąd. Jeśli ktoś by na niego trafił i spotkał się z sytuacją jaką opisałem wyżej, która jest identyczna do Twojego przykładu:

    to tak naprawdę wahałby się czy w ten alt wpisać “Nazwa Strony” albo “Powrót do strony głównej”, gdzie w takiej sytuacji najbardziej poprawnie byłoby “Nazwa Strony” a “Powrót do strony głównej” opisałbym, że należy skorzystać jeśli użyjemy naszego loga gdzieś w ciele dokumentu albo w stopce czy w jakimś innym miejscu. Nie sądzisz?

    1. Tak po prawdzie napisałem obydwie wersje, bo – jak wskazałem w jednym z poprzednich moich komentarzy – obydwie wersje można znaleźć w Sieci. Niemniej wydaje mi się, że „Powrót do strony głównej”, połączony z nazwą strony, najbardziej pasuje do logo jako elementu menu nawigacyjnego.

  6. Comandeer w moim poście identyfikującym się numerami 1 lutego 2018 o 20:11 uciąłeś &ltimg&gt. Jakbyś mógł to poprawić bo jak ktoś to zobaczy to nie będzie wiedział o co chodzi a może się to komuś przyda. Dziękuję.

  7. „Niemniej wydaje mi się, że „Powrót do strony głównej”, połączony z nazwą strony, najbardziej pasuje do logo jako elementu menu nawigacyjnego.” i właśnie tego zdania brakuje mi w tamtym artykule.

    „Nie uciąłem, w ogóle go nie było. Może będzie lepiej wrzucać kod gdzieś na JSFiddle albo jako gist?”

    Wysyłałem. Tak samo poucinało w komentarzu 1 lutego 2018 o 21:04. Dobrze, następnym razem wstawię to w JSFiddle albo gist. Dziękuję za konwersację. Zainteresowałem się teraz Twoimi artykułami, także pewnie się jeszcze odezwę. Do usłyszenia.

Skomentuj Comandeer Anuluj pisanie odpowiedzi

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

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.