Jiří Lex: Moderní web

Když jsem poprvé spatřil obálku této knihy a prohlédl si také web autora napadlo mě, že se jedná jen o převod nějaké letité knížky do jejího elektronického formátu. Jaké však bylo mé překvapení, když jsem zjistil, že jde o novinku (vydáno v lednu 2016). Neodolal jsem, začal jsem se pídit po detailech a nakonec jsem si ji sehnal na recenzi. Říkal jsem si, že přece nebudu soudit knížku podle vzhledu.

No řeknu vám, že ten vzhled je nakonec ještě docela dobrý, to co jsem našel uvnitř bylo o dost horší. Ale vezměme to popořadě – o čem kniha vlastně je – slovy autora:

Kniha se bude věnovat webdesignu. V úvahu se budou brát nové technologie s ohledem na psychologii a vypozorované chování uživatelů internetu. Nemálo se přihlíží i k historii lidstva a naší kultuře.

Skoro celá první polovina knihy řeší problém „co s dlouhým obsahem“. Řešení, která autor nabízí jsou následující: zkrátit obsah, omezit nebo nejlépe zrušit reklamu, sdělit informace místo textem raději obrazem, animací, zvukem, videem, použít 3d šablonu nebo podprahové nepřímé sdělení. Upřímně moc jsem nepochopil, proč by měl být dlouhý text na webu takový problém (slovy autora „smrtící“) – lidé prý nechtějí skrolovat a tak jim místo pohodlného otáčení kolečka na myši nabízí autor v podstatě klikání.

Další část se věnuje vzhledu webových stránek – skrytá tajemství, podceňovaná síla stínů, gradienty, přechody, zaoblené hrany, šířka řádku, volba fontu, barevný soulad, umístění menu, tvar šablony a poutače.

V následující části autor popisuje jak nastylovat tlačítka a odkazy, jak udělat jednoduchou (hodně krkolomně a nefelxibilně naprogramovanou) fotogalerii a různé drobné efekty (zobrazení / změna / objevení textu).

Závěr knihy obsahuje okomentované zjednodušené zdrojáky tvorby „3D šablony“.

Podtrženo sečteno, autor v knize řeší jak podle něj má vizuálně vypadat moderní web, většina jeho rad je založena na efektech, animacích, nových vlastnostech CSS3 a jquery. No jako proč ne, každý máme svůj názor, problém ale je, že u dnešních moderních webů se více než vzhled řeší jejich funkčnost, přístupnost, použitelnost a UX. A druhý (přímo do očí bijící) problém je, že představy autora, jak má vypadat moderní design webovýsh stránek, se hodně rozchází s realitou. Dnes už opravdu nejsou moderní velké stíny, gradienty a animace, tak jak je ve své tvorbě používá autor – nakonec posuďte sami, připadá vám toto jako moderní web?

Nevím jak vám, ale mě to připadá jako zlatá létá devadesátá. Rád jsem si při čtení zavzpomínal na doby, kdy tvorba webů byla opravdu tak jednoduchá, jak autor ve své knize popisuje.

Pokud se chcete v oblasti webdesignu něčemu naučit, zjistit jak se mají správně vytvářet (jste li budoucí webdesignér) nebo poptávat (jste li kupec, zadávající zakázku na vytvoření webu) moderní weby, přečtěte si knihu od někoho, koho weby skutečně živí a kdo je v oboru uznávanou autoritou – vřele můžu doporučit Web ostrý jako břitva od Jana Řezáče. Protože funkční web se opravdu už dávno nedělá podle vkusu autora, ale tak aby klientovi vydělával. Opravdu nestačí vzít WordPressovskou šablonu a dodělat do ní tlačítka s přechody, zaoblenými rohy a stíny. A co se týče nových vlastností CSS3, o těch si raději přečtěte v knize Vzhůru do CSS3 od Martina Michálka – probírá to mnohem podrobněji a řeší i problémy se staršími verzemi prohlížečů.

Abych jen nehanil, musím autorovi pochválit obálku knihy, dosti přesně ilustruje jeho představy moderního webu a perfektně odpovídá jejímu obsahu (to snad potenciální kupce dostatečně ochrání před její koupí).

Knihu bych doporučil jen skutečným odborníkům v oblasti webdesignu, kteří jsou v oboru alespoň 20 let, mladší profesionálové a laická veřejnost ji podle mě nedocení, slabší jedince by mohla snadno uvést na scestí.

Malé zamyšlení o elektronických knihách

Na recenzované knize jde dobře vidět jeden z problémů elektronických knih – tedy ten problém není ani tak v knize, máme tu demokracii a každý si může psát a vydávat co chce. V tomto případě je bohužel vydání elektronické knihy velmi levná záležitost (vzhledem ke knize papírové), díky tomu si může vydat knihu téměř kdokoliv, nástrojů je na to v současné době dosti, takže vzniká spousta hodně špatných knih.

V minulosti by autor s tímto rukopisem u klasického vydavatelství pohořel. Protože jedna z prvních věcí, co vydavatel udělá je to, že dá knihu posoudit odborníkovi, než do ní začne investovat. Touto kontrolou by kniha rozhodně neprošla.

Chápu, že malým nakladatelstvím je to jedno, jde jim jen o prodeje. Ale Docela mě mrzí, že takové kontroly nedělají alespoň renomovaní prodejci e-knih. Přitom by stačilo knihu otevřít a přečíst si pár odstavců – počet překlepů a opravdu velkých hrubek by byl docela varující i pro naprostého laika.

Výběr několika nejlepších myšlenek z knihy

Abyste si na závěr udělali lepší představu o autorových vizích a kvalitě knihy, vybral jsem několik webdesignérských perel:

Sma­jlí­ci a komiksové bublinky jsou dalším uměleck­ým stylem vhod­ným pro web. V té­to knize jej však budu popiso­vat jen okra­jově.

Z autorovy tvorby i vlastní knihy je zřejmé, že je velkým zastáncem animací ve webdesignu, níže je pár citací na téma animace webových elementů (tlačítka, odkazy, přechody mezi stránkami):

Ty­to an­imace se použí­va­jí převážně pro zpestření a pokus za­uj­mout návštěvní­ka. Po­zor. Setkal jsem se s tím, že mnozí takové zpestření nevní­ma­jí, a něk­terým dokonce i vadí. Je, ale možné, že záleže­lo jen na ak­tuál­ní náladě jed­notlivce.

Pokud použi­jete ně­jak­ou an­imaci nevhod­ně, sice část po­ten­cionál­ních uži­vatelů ztratíte, ale ta druhá část si nakonec ste­jně zvykne.

Ne­jed­nou jsem narazil na situaci, jak při prezentaci něk­do sedí a opako­vaně na­jíždí myší na tlačítko, jako kdy­by nemohl uvěřit, že tam je plynulá změ­na. Navíc to je i hravé, a lidé, kteří ne­jsou úplně za­hořk­lí, tu­to hravost ocení.

Uži­va­tel může být velice nadšen, a to je přes­ně to, co dnešní člověk potře­bu­je. Nadšení v dnešním světě velice čas­to opadá, a to prak­ticky ve všech společen­ských vrstvách a oborech. An­imace to sice zcela nes­pasí, ale malé nadšení při brouzdání na in­ter­ne­tu plném „nebezpečí“ může zved­nout náladu.

Něco o videu síle vstřebávání informací:

Všiměte si, že větši­na z nás u tele­vize velice rá­da usíná. Je to tím, že náš mozek je spoko­jený a teší se až bude mo­ci vytvořit ve spánku právě zmíněná propo­jení na zák­ladě nových poz­natků.

A taky o zvukových efektech ve webdesignu:

Ty­to znělky (spuštění, načtení, zo­brazní, za­vření, nahrání a podob­ně – řeč je o zvucích v operačním systému Windows) by se daly využít i jako velice za­jí­mavé zpestření právě pro we­bové stránky. Dokonce je můžeme tu a tam vidět, tedy spíš slyšet, i dnes. Naneštěstí větši­na we­bařů vy­chází s to­ho, že se ty­to zvuky nikde nepouží­va­jí, a tudíž ne­jsou tře­ba.

Neza­pomíne­jme, že uži­vatelé tele­fonů si mo­hou zt­lu­mit samot­né za­řízení, a pokud bu­dou zvuky na we­bu častější, tak větši­na uži­vatelů se přizpů­sobí.

Budoucnost se skrývá v 3D šablonách:

Není nic mod­ernějšího a lep­šího než opustit kla­sický 2D rozměr, na kterém dnes fun­gu­jí prak­ticky všech­ny we­bové stránky (až na pár vyjímek), a pustit se do dalšího vizuál­ního rozměru. Tím rozměrem je hloub­ka (chcete-?li do „Z“ neboli do per­spek­tivy).

Je tře­ba si ne­jprve odpovědět na otázku: K če­mu to je do­bré?

Ne­jen, že takové we­bové stránky pů­sobí lep­ším do­jmem, ale taky hned máte víc mís­ta pro prá­ci. Jak jsem již napověděl, je to těžší. Na­jed­nou se vám ob­jeví kvan­ta pros­toru, a pokud to budete dělat zod­pověd­něji, budete si muset oprášit znalosti vek­torové grafiky, ge­ome­trie a nebo i pokročilé matem­atiky.

Vy, které právě odrazu­ji, ne­zoufe­jte. Velice mod­erní je také el­emen­ty do pros­toru „střílet“ od oka.

Asi to nevíte, ale za úspěchem Googlu je z velké části bílá barva:

Pokud však chcete za­uj­mout co ne­jširší veře­jnost, musíte být napros­to nenásil­ní, neu­trál­ní a co možná ne­jstručnější.

Tu­to tak­tiku si asi ne­jlépe os­vo­jil Google. Na je­ho stránkách není z pohle­du grafi­ka sko­ro nic, a přesto jde o ne­jnavštěvo­vanější web na světě. Je to dáno z velké části bílou bar­vou a právě ab­sencí vše­ho nepod­stat­ného.

Až budete dělat další web, zkuste být tajemní:

Pokud chcete za­uj­mout, buďte záhad­ní a jako­by ně­co skrýve­jte, tedy ne­musí být hned všech­no vidět.

To­to pravid­lo čas­to používám na we­bu tak, že nechám vytvořit, či za­koupím složitý obrázek či pě­knou fo­tografii a vložím jí na pozadí we­bu. Tu­to tapetu pak překrývá samot­ný ob­sah stránek. Vtip je v tom, že nikdo tapetu nepotře­bu­je vidět, ale ne­jed­nou jsem se setkal se zájmem zjis­tit, jak vy­padá fo­tografie celá.

Tato touha může konec kon­ců pů­so­bit i na pod­vě­domí lidí, kteří se pak bu­dou pod­vě­domě snažit váš web prozk­oumat.

Nechodí k vám na web zákazníci? Zkuste přidat stíny!

Pokud neb­udete stíny použí­vat vůbec, a konkurenční web ano, může se stát, že návštěvníkům bude na vašem we­bu pod­vě­domě ně­co chy­bět, dokonce se mo­hou i hůře ori­en­to­vat v ob­sahu, ob­vzlášť je-?li váš web rozsáh­lý.

Pozor na hrany!

Proč použí­vat za­oblené hrany?

Je to těžší pro grafi­ka a další práce navíc. Nic velkého sice, ale i tak. Je to ně­co navíc. A v tom tkví hlavní důvod, proč využívám za­oblené hrany.

Dalším důvo­dem je čas­to zmiňo­vaný poc­it bezpečí. Bát se ne­musíte. Os­tré hrany na we­bu niko­ho k sm­rti nevy­děsí. Pokud však ony hrany za­oblíte, pů­sobíte na pod­vě­domí lidí v řádech asi jen de­setin pro­cen­ta je­jich pomyslné stup­nice stra­chu a možná i méně.

Zelené barvě se ve webdesignu raději vyhněte.

Ze­lená se sta­la bar­vou nebezpečí, pro­tože ji pod­vod­né stránky čas­to použí­valy k to­mu, aby vyz­vala uži­vatele ke kliku na pod­vod­ný od­kaz. Je také brá­na pro tlačít­ka jako kýčovitá.

Když chcete, aby váš web návštěvníka upoutal, zkuste další poutače:

Up­outá i neg­ativní ob­sah, pravopis­né chy­by, různé vady na kráse či de­signu, ste­jně jako také ex­trav­agance – přehnané účesy, ex­trémě odvážné oblečení nebo celkově ab­sur­di­ta a neprůměrnost. A pokud používáte zvuk, pak i od­chylky v melodiích, falešné tóny a va­da řeči. Lze hod­ně ex­per­imen­to­vat s hl­asitostí, če­hož čas­to využí­va­jí komi­ci a jiní bav­iči.

Autor mi také konečně objasnil, proč banky a eshopy mají ošklivý neaktualizovaný vzhled:

Hlavně muži v sobě ma­jí za­kó­dován poměrně sil­ný stra­ch z přehnaně krás­ných věcí, pro­to jsme v takových chvílích obezřet­ní (z to­ho důvo­du se in­ter­ne­tové banky a es­hopy zdráha­jí up­ravo­vat svůj vzh­led).

Použitelnost a přístupnost na prvním místě!

Kla­sický html od­kaz je v prohlížeči zo­brazen povětši­nou podtržený. S pří­cho­dem jazy­ka CSS se za­člo po­ma­lu ex­per­imen­to­vat s různý­mi vari­ace­mi, kdy se tře­ba od­kaz podtrhl 2× nebo byl schován v tex­tu bez podtržení odlišen jen ji­nou bar­vou.

Ty­to tech­niky ne­jsou ni­jak nevhod­né a už vůbec ne za­kázané. Naopak větši­na lidí reagu­je na jak­oukoli odlišnost v ob­sahu a spous­ta z nás bez vyzvání vyzk­ouší na tu odlišnost na­jet myší a otesto­vat, zda to je či není od­kaz. Dříve se i hod­ně klika­lo, ale lidé dnes už za­čí­na­jí být čím dál více opa­trnější a dá­va­jí si po­zor na to, na co klika­jí.

Hlavně nekopírujte, mohli byste upadnout do depresí!

Dnes se všich­ni snaží max­imál­ně vy­dělat za min­imál­ní úsilí, a pro­to vám sem připravím něko­lik už ho­tových řešení, která budete mo­ci snad­no okopírovat a vložit do svých pro­jek­tů.

Do­volím si však poznámku, že kopírování není úplně ideál­ní řešení. Stáváte se tak závis­lí na jiných, a pokud se vám přes­tane dostá­vat nových zdro­jů, můžete spad­nout až v ex­trém­ních pří­padech do de­presí, za­čít vyh­ledá­vat a krást ná­pady os­tat­ních. Lep­ší je tu­to lenost v sobě zlomit, na­jít si čas a zk­oušet stylem pokus omyl nebo si jen hrát a čekat, co s té hry vze­jde.

Hodnocení: 1/10 (ten jeden bod je za to, že jsem se u toho královsky bavil)

Jiří Lex: Moderní web; KKnihy.cz 2016;ISBN:978–80–88­061–55–7, vyšlo naštěstí jen elektronicky