V dnešním článku se zaměříme na unikátní projekt, který jsme ve spolupráci s Etnetera Motion pro KPMG vyladili. Jednalo se o digitální magazín Marwick, který je ve svém oboru extra třídou a byla čest pro nás na projektu pracovat.
Pojďme se blíže podívat, jaké požadavky si na nás KMPG připravilo, proč potřebují změnu a jak jsme to zvládli. Spolupráce probíhala svižně a doufáme, že nebyla poslední.
Marwick je oblíbený magazín, kde najdete zajímavé články, analýzy a reporty, renomované konzultační společnosti KPMG.
Původní verze nevyhovovala nárokům klienta na funkcionalitu. Redaktoři nemohli stylizovat články, jak by si přáli a vizuální obsah nedosahoval velkým nárokům na kvalitní zobrazování. Celkově byl magazín už zastaralý a musel na řadu přijít komplexní redesign.
Nasadili jsme i analytické nástroje pro lepší vyhodnocování úspěšnosti obsahu a v neposlední řadě jsme se zaměřili hlavně na rychlost webu.
Pojďme tedy rozebrat jednotlivé požadavky, a jak jsme to všechno zvládli dodat v požadované kvalitě.
Klient přesně věděl, co chce, a díky tomu spolupráce probíhala hladce a pro nás byla radost na projektu pracovat.
Když máte spousty kvalitního obsahu, tak nechcete, aby zůstal neviditelný. Nekonečné čtení jsme implementovali pouze dovnitř článku, abychom zabránili rozhodovací paralýze uživatelem.
Jakmile si uživatel přečte první článek až na konec, tak je dost pravděpodobné, že se mu obsah zamlouval. Tak proč nejít s obsahem naproti?
Na konci článku máte na výběr ze 3 podobných článků a pokud si nevyberete, tak jednoduše vybereme jeden z nich a uživatel si bezprostředně může přečíst krátký úvod k článku. Poté se sám rozhodne, jestli se mu obsah zamlouvá nebo bude pokračovat v hledání.
Jaký to mělo výsledek? Bohužel předchozí web byl pouze rozcestníkem pro zobrazení PDF souborů, takže můžeme porovnávat pouze návštěvnost domovské stránky. Ta se oproti předchozímu období 2 měsíců až ztrojnásobila!
Faktorů bude určitě více, jak uvidíte v dalších bodech. Uživatelé ale na magazín nechodí pro Pixel perfect obrázky nebo typografii, ale za obsahem.
Hlavní kámen úrazu byla rychlost nekonečného načítání s tak náročnou grafikou, fontem a typografií. To se nám povedlo na jedničku a sami si můžete vyzkoušet, takovou rychlost nekonečného načítání od Pixmanů. Např. v článků o blockchainu.
Když máte na webu nekonečné čtení, tak je jasné, že patičku webu by jen tak někdo nenašel. Tu by našel snad jen Chuck Norris. :-)
Proto jsme museli přijít se statickou patičku, která perfektně ladí s designem magazínu. Má dvě možnosti zobrazení, minimalistickou a samozřejmě zvětšenou.
Kvůli klidnému čtení, jsme chtěli, aby patička “splynula” s okolím a uživatel si jí mohl zvětšit pomocí šipky pouze v případě, kdy se chtěl o webu dozvědět více.
Tady vidíme patičku v celé své kráse. Udělali jsme jí takto velkou, protože je jasné, že uživatel nevěnuje obsahu pozornost. Toho jsme chtěli využít a do více viditelné části dát odkazy, které jsou pro klienta důležité. Zejména tedy newsletter, kontakt a sociální sítě.
Tenhle požadavek nám šel přímo do noty. Pixmani zprovozňují na webu Pixel perfect kódování. Co to ale znamená?
Jak název napovídá, jde o mravenčí práci s lupou. Díky vysokým nárokům na grafiku jsme museli hlídat velikosti různých prvků, vzdálenosti mezi sebou a také mezery jednotlivých prvků od sebe navzájem.
Díky tomu jsme strávili spousty času s klientem v rámci připomínek ohledně grafických návrhů, redesignu a následně i “hotového” webu. Museli jsme si prostě hlídat každý Pixel, aby klient zůstal spokojený.
Velká výzva také byla přenést již zmiňované PDF dokumenty do digitální podoby takovým způsobem, aby si návštěvníci mohli užít jedinečný obsah na jakémkoliv zařízení. S tímto úkolem bylo vyvinuto spousty práce a bylo vypito enormní množství kafe, ale výsledek stojí za to.
Je radost pracovat s klientem, který přesně ví, co chce. Dostali jsme až děsivě přesné požadavky na grafické zpracování.
Měli jsme jasně dané fonty a typografii s jasně danými pravidly. Ať už ohledně zvýrazněné barvy, mezerami mezi písmeny - titulky - obrázky apod. Nikde jsme neměli volnou ruku. Všechno bylo předem dané.
Jedna z dalších výzev byla zobrazování obrázků v maximální kvalitě. Ať už se jednalo o retina obrazovky nebo velké monitory, všechno se muselo zobrazovat v nejvyšší kvalitě včetně plynulosti efektů.
To samozřejmě přitížilo rychlosti načítání stránek, s kterou jsme se museli poprat.
Klient měl přání, aby si redaktoři mohli články vizuálně poskládat sami, aby každý článek nebyl stejný a měli při vytváření obsahu volnost. Návštěvník ocení, že se každý článek bude zobrazovat trochu jinak a každý obsah potřebuje něco jiného.
Vytvořili jsme přes 22 grafických bloků, kde si můžou poskládat:
Samozřejmě na přání doplníme další. Oproti ostatním úkolům, tohle byla procházka růžovou zahradou.
Web je sám o sobě velice malý, a tak nevyžaduje žádnou velkou konfiguraci. Marwick běží na 4GB RAM a 2 jádrech CPU. Nevyužívá ani žádnou CDN, protože web je navštěvován hlavně z ČR. Jak jsme teda rychlost webu nakopli?
Magazín běží na našem vlastním CMS Merlin, o kterém se rozepisujeme v článku, jak u nás probíhá vývoj projektů.
“Minimalismus”. Minifikace v Javascriptu a CSS, co to jen šlo. Také jsme si dali záležet na lazy loadingu obrázků, aby se zbytečně nenačítali věci, které zrovna nejsou potřeba. Jakmile se potřebné zdroje načtou, tak předvídáme, kam bude uživatel klikat dále a před načteme to. Díky nekonečnému čtení a menšímu počtu prvků na magazínu, to ale nebylo těžké.
A cache? Hlavně minifikovaný Javascript a CSS. Tím jsme se zbavili největší otěže, protože na webu trvá hlavně to, jak se má obsah zobrazovat. Vzpomeňte si, jak přísné požadavky na vykreslení jsme od klienta dostali. Poslední věc, co ukládáme do paměti jsou vybrané SQL dotazy, které se často opakují.
Díky minimalismu jsme dosáhli skvělých výsledků, aniž bychom používali zkratky, jako je přemrštěný hardware nebo CDN. Google PageSpeed Insights nám ukazoval skóre nad 90% procent.
Na projektu byla radost pracovat. Je skvělé, když klient ví přesně, co potřebuje. Na nás byla hlavně ta “kódovací” část se kterou jsme si dost hráli a spousty jsme se přitom naučili.
Práce byla dodaná ve kvalitě, kterou klient požadoval, a to je vždycky náš cíl. Teď bude úspěšnost magazínu Marwick záviset hlavně na obsahu, tak se nezapomeňte občas mrknout na nové články a kdo to pro vás nakódoval. Hezké čtení. :-)
Byl to náš první projekt pro KPMG a doufáme, že nebyl poslední. Chceme poděkovat i Etnetera Motion za bezvadnou spolupráci na tomto projektu. Věříme, že všichni jsou s výsledkem spokojeni, stejně jako my.
Máte pro nás zajímavý projekt ke zpracování?
Copyright PIXMAN 2024
