Jiří Lex: Moderní web

Jiří Lex: Moderní webKdyž 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?

Webové stránky autora

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

Petr Václavek

Zobrazit příspěvky od Petr Václavek
Grafik na volné noze, kterého živí kreslení pro zahraniční microstock fotobanky, příležitostný fotograf, tvůrce dubánků, velký lenoch, čajopijec, a vášnivý čtenář.

20 Komentářů

  1. Jiří lex
    10. 3. 2016

    Dobrý den,
    děkuji za vaší recenzi.

    1. Máte tam pár nepřesností. Řešením dlouhého rolování, není jen klikání. Klikání je jen určitá alternativa. Řešením není klik, ale pohyb myši po elementech v menu. Jak ukazuje 3D šablona na závěr knihy.
    2. Autor neřeší jak má podle něj vypadat moderní web, ale jak může vypadat. Poukazuje na jiný styl webdesignu.
    3. Kniha není o CSS3. Jazyku CSS3 se záměrně věnuje jen okrajově. Poukazuje na tuto technologii jako možný zdroj pro zlepšení webu, který je tu nový.

    Odpovědět
  2. Radek P.
    10. 3. 2016

    Marjapanno to je kentus. To snad ani není možný. Díky za Řezáče a Staníčka

    Odpovědět
  3. Petr Václavek
    10. 3. 2016

    Jiří, děkuji za upřesnění.

    Odpovědět
  4. emilio
    10. 3. 2016

    Ježišmarjá to je exot. Chudák každý komu začne ten „3d expert“ radit.

    Odpovědět
  5. joseph
    10. 3. 2016

    Prosím o kontakt na dealera drog tohoto pána.. a to rychle:)

    Odpovědět
  6. Jakub Musil
    11. 3. 2016

    Ta kniha je proste vyssi level zabavy.

    Odpovědět
  7. Jelena
    11. 3. 2016

    Tak to je slušnej úlet. Vidím, že mi doma v knihovně chybí dost zásadní kousky…

    Odpovědět
  8. LubosMertak
    11. 3. 2016

    Pro Jiří Lex.
    Tohle myslíte vážně? Vždyť ten web je naprostý hnus. Pro lidi co špatně vidí úplně nepoužitelné. Poloprůhledné tlačítka, text v divu navigace splývá s pozadím, takže i já, který vidí naprosto v pořádku, mám problém s textem uvnitř navigace… těžkopádné animace. Říká Vám něco responzivní design?
    Připadá mi to spíš jako kniha „Jak to NEdělat pro lidi“.

    Pro Petra Vác.:
    Petře, máte chybku v odkazu na sytaxi o TEXY. Je tam místo…info/cs/syn­tax → /cz/, takže to míří na 404 🙂

    Odpovědět
  9. Vlaster
    11. 3. 2016

    Hvezdna pechota webdesignu. 🙂

    Odpovědět
  10. Chami
    11. 3. 2016

    Super kniha… na utření prdele 🙂

    Odpovědět
  11. htm
    11. 3. 2016

    Tak schválně, kolik z vás po přečtení nemělo slov? 😀

    Odpovědět
  12. lazywriter
    12. 3. 2016

    S recenzí knížky souhlasím, ale když už jsme u designu a použitelnosti, tak i tomuto blogu by prospělo, kdyby zabíral víc než necelou polovinu šířky monitoru.

    Odpovědět
  13. Nina
    12. 3. 2016

    Myslím, že s touto publikací se dá velmi dobře pracovat. Co velmi oceňuji, je odvaha autora otevřeně prezentovat svoje názory, včetně jejich zdůvodnění, myšlenkových postupů, prezentovat vhled do nitra. Smekám. Jen díky této odvaze jsme získali důležité informace. Potenciální autor další z řady publikací o dobrém webu (a nejen on) se může pak zaměřit na problematická místa a zpracovat je – tipy již velmi poutavě zpracoval autor článku, Petr Václavek.

    Také oceňuji konzistentnost publikace s autorovým webem, svědčí ve prospěch pravdivosti výpovědi. A že „prorazil“ jinak, než zamýšlel? Na „prohru“ i „vítězství“ se dá podívat konstruktivně i destruktivně, záleží na volbě. Z tohoto pohled je to skoro jedno. Ano, klade to pokročilé nároky na osobnost.

    Některé principy, z nichž autor publikace vychází, jsou uplatňované i v jiných prostředích. Např. „Up­outá i neg­ativní ob­sah, pravopis­né chy­by“. V akademickém prostředí se hovoří o tom, že publikace záměrné chyby, nepřesnosti, „diskutabilní“ myšlenky vyvolá velký ohlas (byť ve smyslu pobouření), diskuzi a v konečném výsledku velký počet citací. A to přesně to, čeho chtěl autor dosáhnout. Myslím, že se to vlastně podařilo i autorovi publikace, Jiřímu Lexovi.

    Myšlenkový postup od kopírování ostatních po depresi je obdobný mottu tuším z jedné z humoristických knížek Westlaka (doporučuje nevraždit, protože se pak může stát, že člověk i něco ukradne, pak bude lhát… a v konečném důsledku to povede ke špatné náladě – knížku jsme měla jen půjčenou, na webu jsem motto bohužel nenašla).

    A s čím souhlasím? Že je dobré překonat lenost, najít si čas a hrát si.

    Pozn. Ve formuláři Přidej komentář si dovoluji doporučit opravu „Email“ na česky správně „E-mail“. S vědomím toho, že mé znalosti českého pravopisu jsou limitované.
    http://priruc­ka.ujc.cas.cz/?…

    Odpovědět
  14. Jiří lex
    15. 3. 2016

    Sepsal jsem článek, který reaguji na kritiku, kterou zde spustilo pár lidí. Kolem projektu moderniweb.com.

    Článek naleznete zde: moderniweb.com/blog/20-let-vyvoje

    Ve stručnosti je kolem webu větší problematika, než je na první pohled vidět. Pokud vás tyhle věci zajímají.Můžete mi napsat na případné otázky odpovím, pokud to bude v mích silách. Přeci jen chápu, že musíte bavit svoje fanoušky na úkor druhého. 😉

    Odpovědět
  15. Petr Václavek
    15. 3. 2016

    Jirko, využiji vaší nabídky a měl bych tady pár otázek:

    1. co jste měl na základní a střední škole z češtiny za známku?
    2. kde jste se vyučil řemeslu webdesignerskému?
    3. jaké knihy jste o tvorbě webu četl?
    4. jaký cizí web se vám nejvíce líbí (klidně i více) – tedy chtěl bych vidět pár ukázek webů, které považujete za moderní.

    Předem díky za odpovědi.

    Odpovědět
  16. Jiří lex
    1. 4. 2016

    Dotazy rád odpovím,
    jen si prosím nahrajte toto rozšíření na blog, minimálně do téhle sekce, hned budou stránky vypadat jinak:

    body {
    background-position: 50% 0;
    }
    #middle {
    margin: auto;
    }
    #about-links {
    left: 142px; /* smazat left */
    margin-left: 152px;
    }
    #footer {
    margin: auto;
    }

    Odpovědi:
    1. Maturoval za 2. Literatura a sloh, pravopis byl vždy horší. To lhát nebudu 🙂
    2. Školy na to nejsou, nebo o nich nevím, učil jsem se z knih. Základy získal na Jihočeské univerzitě.
    3. Prakticky všechny co byli vydány v ČR za posledních několik let
    4. Nejdete je v knize mezi prvními obrázky

    Pozn.: pokud položíte otázku, musím také vědět, že jste ji položil. 😉

    Prosím ještě ohodnotit toto: http://moderni­web.com/3d/

    S trochou dalšího ladění s toho udělám novou titulku mích stránek.

    Děkuji

    Odpovědět
  17. jv
    2. 4. 2016

    Ten „Moderní web“ mi připomíná zlatá devadesátá…
    … ach, to retro. Doufám že jde jenom o dada.

    Odpovědět
  18. Galosoft s.r.o.
    14. 4. 2016

    Zvažujeme podání žaloby za ušlý zisk nebo fakturaci za velice tragicky zmařených 15-ti minut našeho života, které jsme věnovali návštěvě webu Jiřího Lexe a čtením tohoto článku. Nikdy by se tomu tak nestalo, kdyby se pan Jiří Lex neodvážil napsat do našeho studia s žádostí o kritiku knihy. Pokud jde o vtip, je to příklad negativní reklamy, která je ovšem také reklamou. Pokud o vtip nejde, silně panu Lexovi doporučujeme ústavní léčbu.

    Odpovědět
  19. sýr
    11. 1. 2017

    Odpověď pana Jiřího na otázky – bod 2.

    To je vážně k popukání 😀 Školy nejsou? Opravdu? V tom případě nevím, co jsem se svými spolužáky na oboru „Web a multimédia“ na FEL ČVUT celé ty dny studoval.

    Je pravda, že k tomu, aby se člověk živil webdesignem, nepotřebuje mít všechny školy světa, ale bohužel to ani neznamená, že webdesignerem je každý, kdo umí vytvořit html stránku.

    Odpovědět
  20. Wlk
    14. 6. 2017

    Petře, díky vám za tuto recenzi. Po letitých zkušenostech s tvrdošíjným prosazováním představ některých klientů, kteří přeci nejlépe vědí jak má ten který design vypadat, jsem myslel, že už mě nic nepřekvapí. Překvapilo! Tato kniha a weby autora jsou naprostým unikátem. Ani komik Pavlásek mne tolik nepobavil.

    Trochu děsivé je, že je vše myšleno vážně.
    Autorovi se nechci vysmívat, stejně tak, jako se neposmívám postiženým. Ba naopak, spoustě schopným ale méně sociálně zadatným lidem, by část jeho nátury a odvahy prospěla.

    Modlím se však, aby podobní lidé (z jakéhokoli oboru) nedostali nikdy příležitost učit naše děti…

    Odpovědět

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Skočit na začátek stránky