Moodive

Zadanie

Medzinárodné štúdio animovaných explainer videí. Hlavným obsahom portfólia je video, takže celý web stojí na tom, ako sa dá prezerať prácu bez čakania na načítanie.

Klasický karusel tu nefungoval — nútil návštevníka klikať a čakať, namiesto toho, aby videl objem práce naraz.

Čo sa riešilo

• Nahradenie karuselu dvojriadkovou nekonečnou marquee, ktorá ukáže objem práce na prvý pohľad
• AJAX filtrovanie kategórií bez znovunačítania stránky
• Tónovanie servisných kariet cez CSS mix-blend-mode podľa farieb projektu, ktorý je v nich
• Viacjazyčnú verziu webu
• Prehrávanie videa tak, aby nezhodilo rýchlosť stránky

Prečo klasický karusel v portfóliu videí nefunguje

Karusel núti návštevníka klikať a čakať, kým on chce vidieť objem práce naraz. Pri animačnom štúdiu je to zásadné — človek si má do pár sekúnd spraviť obraz o rozsahu a štýle, nie prekliknúť sa cez osem snímok.

Nahradili sme ho dvojriadkovou nekonečnou marquee, ktorá sa plynulo posúva do protismeru. Po načítaní je na obrazovke dvanásť projektov namiesto jedného. To je celý rozdiel.

Filtrovanie kategórií bez znovunačítania stránky

Filtre sme napojili cez AJAX, takže prepnutie kategórie nevyvolá načítanie novej stránky. Prakticky to znamená, že si návštevník prejde tri kategórie za pár sekúnd a nestratí pozíciu, na ktorej bol.

Technicky ide o volanie na admin-ajax.php, ktoré vráti len zoznam položiek, nie celú stránku. Marquee sa prekreslí na mieste. Adresa v prehliadači sa pritom aktualizuje, takže odkaz na konkrétnu kategóriu sa dá poslať aj uložiť do záložiek — to je detail, ktorý sa pri AJAX filtroch najčastejšie zabudne a potom sa filtrovaný pohľad nedá zdieľať.

Farebné tónovanie kariet cez mix-blend-mode

Servisné karty sa farebne prispôsobia projektu, ktorý je v nich, bez toho, aby sa pre každý projekt vyrábala vlastná grafika. Rieši to CSS vlastnosť mix-blend-mode, ktorá mieša vrstvy podobne ako v grafickom editore.

Karta má farebnú podkladovú vrstvu a náhľad videa nad ňou v režime miešania. Keď sa vymení video, tón sa prispôsobí sám. Klient tak môže pridávať projekty bez toho, aby sa pri každom riešilo, či farebne sadne do zvyšku stránky.

Video, ktoré nezhodí rýchlosť stránky

Video je najťažší obsah na webe a portfólio ich má na úvodnej stránke desiatky. Riešili sme to tromi vecami naraz: náhľady sa načítavajú až keď sa priblížia k obrazovke, prehráva sa krátka odľahčená slučka namiesto plnej stopy, a plné video sa spúšťa až na kliknutie.

Kľúčové je poradie. Prvý obraz, ktorý používateľ uvidí, sa musí načítať prednostne; všetko ostatné môže počkať. Bez tohto rozlíšenia web sťahuje desiatky megabajtov obsahu, ktorý nikto neuvidí, a metrika LCP sa prepadne.

Viacjazyčnosť

Štúdio pracuje medzinárodne, takže web beží vo viacerých jazykových verziách. Pri viacjazyčnom webe je najdôležitejšie to, čo nie je vidieť — správne hreflang odkazy medzi verziami, aby vyhľadávač vedel, že ide o preklady tej istej stránky, a nie o duplicitný obsah.

Čo si z toho môže vziať iné kreatívne štúdio

Ak je vaším hlavným obsahom vizuálna práca, web má jednu úlohu: ukázať objem a kvalitu skôr, než návštevník stratí trpezlivosť. To znamená viac práce naraz na obrazovke a menej klikania.

Druhá vec: portfólio, ktoré sa ťažko dopĺňa, prestane byť aktuálne do roka. Pridanie projektu má byť nahratie súboru a výber kategórie — nie zásah do šablóny. Ak to tak nie je, web zastarne bez ohľadu na to, ako dobre vyzeral pri spustení.

Ako to dopadlo

Portfólio sa prechádza plynulo a pridanie nového projektu je otázka nahratia videa a priradenia kategórie — nie zásahu do šablóny.