„Jednoduchý web?“ – Na příkladu portfolia Jana Velického

Bude to snadné, zdálo se

Když se nám ozval Jan Velický s požadavkem na redesign stránek, měl jsem hned jasno.

Jednoduchý web, unikátní vývoj tady nemá co dělat. Doporučíme mu, aby využil některou ze služeb typu Solidpixels, Wix nebo Webnode.

Představa klienta byla jasná a minimalistická. Během dvouhodinové schůzky jsme měli rozebrané požadavky a na stole zkreslený wireframe. Jedna stránka, na které budou videa a kontakt. Videa budou propojena se službou Vimeo. Nic víc.

Zbývalo najít tu správnou službu. A hlavně šablonu.

Znáte pana Velického?

Jan Velický je český kameraman, který pracuje pro značky jako Audi, Adidas, Guinness nebo Honda. Vytvořil celou řadu úspěšných komerčních videí a krátkometrážních filmů. Nám se třeba moc líbí tahle tři videa.

Ale realita byla jiná

Po týdnu spolu sedíme opět u stejného stolu s „překvapujícím“ výsledkem.
Jemu i nám se nepodařilo šablonu najít. V čem byl problém?

Od začátku jsme věděli, že chceme na první dobrou zobrazit katalog videí v podobě jednoduché mřížky. Když kliknete na náhledové foto, video se začne přehrávat. Už tahle myšlenka pátrání ztěžovala. Nehledáte totiž standardní úvodní stránku, která je prezentována v náhledech šablon, ale vlastně pouze jednu komponentu. A ta může být ukryta někde v hloubce šablony. Čas nutný k dobrému výběru tak narůstá.

Dalším problémem je, že se šablony snaží být příliš kreativní. V galeriích se střídají různé velikosti a formáty fotek. Pohyb kurzoru doprovázejí všemožné efekty. A my pro videa chtěli jen jednoduchou matici s jednotným formátem. Už třeba proto, aby se zákazníkovi lehce tvořily profilové obrázky pro jednotlivá videa.

A když už nakonec najdete modul či šablonu, která se blíží vaší představě, uvědomíte si, co všechno se bude muset ještě změnit. To máme:

• Zbavit se menu.
• Odstranit stránky a komponenty, které nebudete používat.
• Zredukovat HTML, CSS i JSS, aby stránky nebyly pomalé.
• Přizpůsobit barvy.
• Možná i font.
• Upravit samotnou komponentu.

Začínáte se potit.

A tak jsme to raději vzali od píky

A domluvili se, že se pustíme do vlastního vývoje. Na UX i grafice jsme se rychle shodli a naše prvotní návrhy jen doladili.

Kluci ve vývoji měli během pár dnů připravenou šablonu a nastudované rozhraní Vimeo. Tady bylo asi nejvíce práce. Nejprve jsme načítali vše z přímo z API pro Vimeo – tedy název videa, popisek, defaultní obrázky v náhledu videa a video samotné. Vše fungovalo. Jenom ta rychlost prostě nebyla to pravé ořechové.

A tak jsme nakešovali celý seznam včetně defaultních obrázků. A výsledek?

Protože i malý web chce své

Nakonec, i když je to mini web, tak to přece neznamená, že se mu budeme méně věnovat. Webová stránka prošla tedy důkladným technologickým testováním. Má vyplněná metadata. Lze ji jednoduše sdílet na sociálních sítích. Návštěvnost a interakce s obsahem měří Google Analytics. Zkrátka dostala a má vše, co by měl obsahovat každý pořádný web.

Web totiž zdaleka není jen HTML šablona. Je to zejména strategie a obsah. I v případě „nenáročného“ webu musíte věnovat pár hodin UX / UI, zamyslet se, jak bude zákazník stránky editovat, možná nastudovat nějaké API rozhraní, udělat drobné copy. A tak dále. V tom vám žádná šablona (pokud už tu správnou najdete) zatím nepomůže.

Co za vás šablona nezařídí

• Projektový management – chcete přece, aby váš projekt šlapal jako na drátku, stihl se v termínu a ve vysoké kvalitě.
• Obsahová strategie – ano, i u malého projektu se nad obsahem musíte zamyslet. Budete mít co, kde a jak publikovat? Zvládnete přípravu obsahu sami?
• UX / UI – rychlá skica, třeba na papír, nebo pomocí prototypovacího nástroje.
• Práce s logem – pokud logo neexistuje, budete muset nějaké základní, textové vytvořit a udělat faviconu webu.
• Upravit podobu a funkčnost šablony.
• Copywriting, copyediting – bez kvalitních textů to moc nepůjde. I kdyby šlo „jen“ o mikro copy v podobě navigačních textů a hlášek.
• SEO – také malý web by měl splňovat požadavky na fulltextové vyhledávání.
• Podpora sdílení stránek na soc. sítích – mít možnost nastavit titulek, popisek či obrázek pro sdílení.
• Návrh URL adres, případně přesměrování starých adres, pokud už web existuje.
• Technologické testování – mimifikace zdrojových souborů, rychlost, optimalizace obrázků, optimalizace množství načítaného kódu, optimalizace napojení na služby třetích stran (v našem případě Vimeo).
• Analytika – alespoň ta základní v podobě Google Analytics a Google Search Console.
• Nasazení na vývojový a produkční server.
• Nastavení logovacích a monitorovacích nástrojů – sběr chyb a hlášení nedostupnosti stránek.