Sedm letošních trendů webového designu

Překladový článek od Benjie Mosse popisující sedm trendů pro webový design roku 2014. A samozřejmě i rady, jak se s nimi vlastně vypořádat.

Nastal čas, kdy každoročně všichni weboví bloggeři sahají po křišťálové kouli, oprašují tarotové karty a celé hodiny upřeně zírají do svých šálků čaje ve snaze odhadnout trendy, které nás čekají v tomto roce. Výsledný seznam se pak z hlediska pravděpodobnosti pohybuje od něčeho, co je zcela jisté (Apple vydá nějaké nové zařízení) až ke zcela nepravděpodobným věcem (že tím novým zařízením bude televizor).

Článek byl přeložen s laskavým svolením serveru webdesignerdepot.com. Originální znění článku (EN) naleznete zde: 7 web design trends you’ll actually see this year (and how to survive them).

Pravdou ale je, že jen nesmírně vzácně se nějaký trend objeví zčistajasna, bez jakýchkoli předběžných náznaků. Když podrobíte stěžejní trendy současného roku hlubšímu zkoumání, zjistíte, že jejich kořeny se začaly vyvíjet už v roce 2013 (nebo ještě dříve). Přestože je nepochybně možné, že v roce 2014 se objeví nějaký revoluční koncept a stane se ohromně populárním, mnohem pravděpodobnější je, že to bude rok drobných vylepšování všeho, co se vylepšit dá (ať už na základě neutuchajícím technologického rozvoje nebo reakcí na něj).

Budoucnost webového designu je zřejmá už dnes, stačí se jen ohlédnout. Tento článek tedy popisuje sedm predikcí pro rok 2014, jejichž pravdivost se již prokazuje a nechybí ani rady, jak se s nimi vypořádat, abyste přežili ;-)

1) Postupný úpadek :hover

Pseudotřída :hover CSS je na webu jedním z nejoriginálnějších návrhářských pojetí. Je úzce svázána s kurzorem, indikuje, že se člověk chystá na něco kliknout, a vybízí ho, aby tak učinil. Ale jak je trh v současnosti stále více a více zaplavován zařízeními, která kurzor vůbec nepoužívají, je prospěšnost :hover vcelku sporná.

Nedávno jsem zaslechl rozhovor, v němž jeden designér tvrdil, že používat :hover je vlastně špatná praktika, protože vybízí UX designéry k tomu, aby přemýšleli v pojmech, s nimiž se většina koncových uživatelů vůbec nesetká (tj. navigace pomocí kurzoru). Rozhodně se dá ale říci, že na nových webech se efekty založené na tom, že někde podržíme kurzor, objevují méně.

Tip, jak to přežít. I když je pravda, že mobilní uživatelé během příštích dvanácti měsíců patrně převáží nad uživateli desktopových počítačů, procento desktopových uživatelů bude pořád ještě dvouciferné. Navrhovali jsme už pro takové platformy, například IE7, které měly mnohem menší podíl na trhu. Strategie nejdřív pro mobily (mobile-first) rozhodně neznamená nikdy pro desktopy, přičemž pseudotřída :hover bude časem mizet sama díky konceptu elegantní degradace (graceful degradation). Takže (alespoň pokud jde o mně), pseudotřída :hover má stále své opodstatnění, jen to už není životně důležitý nástroj.

2) jQuery ztrácí podíl na trhu

Když se knihovna jQuery objevila poprvé, bylo to hotové zjevení. I mne stále ještě udivuje, jak jednoduše se jejím prostřednictvím manipuluje za pochodu s prvky DOM (objektový model dokumentu), a ne pouze v v jednom jediném prohlížeči, ale napříč všemi! jQuery je zcela po zásluze jednou z nejoblíbenějších knihoven všech dob a pro mnohé se stala synonymem pro JavaScript, s weby budovanými v „HTML, CSS a jQuery“.

jQuery ovšem má i své kritiky a reptající hlasy, které v průběhu roku 2013 sílily. Zásadní námitkou proti jQuery je to, že je obrovská. Přestože se verze 2.0 odstranila podporu pro IE 6, 7 a 8, pořád se načítá hodně velký soubor – vadí to zejména na mobilních zařízeních. HTTP požadavek navíc, stejně jako dodatečné KB ke stažení, je mastná cena za něco tak jednoduchého, jako je třeba animační efekt opacity tween (postupný přechod mezi dvěma klíčovými snímky pomocí dodatečných snímků s různou průhledností). Stále větší množství lidí tak zjišťuje, že tradiční, leč nudný JavaScript, je rychlejší a efektivnější v téměř všech situacích s výjimkou velkého množství manipulací s DOM (kde knihovna jQuery opravdu exceluje).

Samozřejmě není moc pravděpodobné, že by jQuery někdy v brzké době vymizela – je to až příliš dobrá knihovna – ovšem její dominance na trhu, které se těšila poslední dva až tři roky, se začíná vytrácet.

Tip, jak to přežít. Obětujte trochu času a seznamte se s jazykem, který je v pozadí jQuery. Zjistěte si, jak funguje metoda document.getElementById(). Možná budete sami nakonec překvapeni, jak velkému množství tradičního JavaScriptu už rozumíte. Zároveň také zdokonalíte svou schopnost používat jQuery.

3) Zánik mobilního webu

Krajina webového designu se až příliš formuje podle subjektivních postojů, přechodných módních tendencí a předsudků webových designérů; mobilní web však byl odsouzen k záhubě už v okamžiku, kdy ho někdo navrhl jako alternativu k responzivnímu designu.

Mobilním webem se zde rozumí jakýkoli web, který je výlučně navržen pro zobrazování na nějakém mobilním zařízení, obvykle se jedná o nějaký chytrý telefon. Takový web pak běží paralelně s webem určeným pro desktopové počítače. Jinak řečeno, dva weby pro totéž místo jediného. Kdoví ví, možná i vy máte na své domovské stránce nápis „Optimalizováno pro rozlišení 1024 x 768“.

Samozřejmě existují dobré argumenty, proč pro nějaký byznys provozovat několik paralelních webů. Jde o různé způsoby použití – jako typický příklad může posloužit web nějaké restaurace, v němž desktopoví uživatelé budou patrně chtít zobrazit její jídelní lístek, zatímco mobilní uživatelé budou patrně chtít získat informace typu kontakt na restauraci nebo kudy se k ní dostanou. Ale tohle všechno bylo ztraceno v šíleném spěchu vyhovět mentalitě responzivního designu „jeden web pro všechna zařízení“, i s ohledem na to, že situací ve skutečném světě, které by ospravedlňovaly paralelní weby, je málo a bývají hodně od sebe vzdálené.

Tip, jak to přežít. Dobře si rozmyslete, zda máte pro vývoj několika paralelních webů opravdu dobrý důvod. Zamyslete se, zdali bude pro uživatele přínosné, pokud na různých zařízeních získají vždy odlišný obsah. Samozřejmě ale zajistěte, aby všechny weby, které budujete, byly vždy responzivní (variabilita velikostí obrazovek mobilních zařízení v tomto roce dále poroste).

4) Návrat bohatě vybavených médií

Poté, co Flash zažil střemhlavý pád, strhl sebou nejen též zdánlivě nezranitelnou pozici Adobe na trhu, ale také oblibu čehokoli, do se Flashi nějak podobalo. Klienti, kterým nebylo přesně jasné, co je vlastně na Flashi vlastně špatné, odmítali nejen vše, co nějak zavánělo Flashem, ale i cokoliv, co se nějak blyštilo či jiskřilo. Následovalo několik let politiky škrtů, kdy se designéři soustředili minimalistický design a klienti na nižší náklady.

Věci se začaly měnit na začátku roku 2013. Začala rychle narůstat obliba celoobrazovkových obrázků, textových animací, přechodových efektů mezi stránkami a webů tvořených jedinou stránkou, přičemž tento trend stále pokračuje. A ačkoliv neuvěřitelně podhodnocená kvalita HTML5 videa poslala bohatě vybavená média o pár let zpět, rok 2014 bude rokem změn.

Tip, jak to přežít. Používejte tohle jako své motto: „Protože něco mohu, neznamená, že musím.“ Poučte se z minulých chyb a používejte bohatě vybavená média (rich media) tak, aby projekty opravdu obohacovala, a snažte se, aby načítací časy (load times) byly vždy co nejmenší.

5) Obsah přichází o královskou korunu

Starou průpovídku „Obsah je král“ ospravedlňuje hodnocení od Google, designérské zásady i priority klientů.

Nekonečný průvod CMS (systémů pro správu obsahu) jako jsou WordPress, SquareSpace, Webydo a Drupal způsobuje, že designéři zjišťují, že nejenže stále víc a víc navrhují pro obsah, pro který nic navrhovat nemusejí, ale i pro obsah, který se pravidelně mění. Často se třeba ukazuje se, že obsah bývá často finalizován až mnoho měsíců poté, co se příslušná webdesignerská agentura přesunula na nové zelenější pastviny. Ačkoliv pro webový design to může být špatná zpráva, ta dobrá je, že klienti samotní stále víc chápou web jako nepřetržitý proces. Takový, který požaduje nejenom pravidelnou údržbu, ale i profesionální správu.

Tip, jak to přežít. Když je obsah ve stavu, kdy v něm permanentně probíhají nějaké změny, musíme za krále korunovat něco jiného – samotnou značku (brand). Ale nikoliv pouze její vizuální část (visual brand), jde také o nový tón hlasu, styl, jazyk a kvalitu. Uplatňujte flexibilní přístup a zaměřte se na navrhování systémů, nikoliv fixních stránek. Weby se nyní musejí navrhovat responzivně, a to nejen pro různorodá zařízení, ale i pro různorodý obsah.

6) Google nám (zase) udělá nějaký podraz

Zdá se, že tým z Mountain View mění algoritmy v noci z pátku na sobotu vždy, když si myslí, že jsou jediní, kdo o víkendu pracuje. Mnoho webových designérů už zažilo situaci, kdy přišli v pondělí ráno ke svému pracovnímu stolu a zjistili, že weby jejich klientů, které předtím byly v SERP na prvních místech, nyní chřadnou na stránce 8357 z celkem 8358 stránek. Divím se, že Google nepojmenoval některou z aktualizací „Hyena“. Není žádný důvod si myslet, že to bude v tomto ohledu v roce 2014 jiné, než jak tomu bylo v letech 2013 či 2012.

Tip, jak to přežít. Google stále radí jedno a totéž: vytvářejte dobrý původní obsah, který je cílený na lidské bytosti, ne na roboty. To, že jste až doposud měli nehoráznou kliku, neznamená, že ji budete mít pořád. Je na čase zajistit, aby vaše SEO bylo naprosto bezpečné a zcela férové. Velkou novinkou letošního roku je lokální SEO, takže svůj obsah zaměřujte tímto směrem.

7) SVG (konečně) vzlétne

Že se SVG (škálovatelná vektorová grafika) konečně odlepí od země, předpovídám už léta, a pokaždé se ukáže, že jsem se mýlil. Rok 2014 ale bude určitě rokem SVG, záleží jen, jak pevná bude naše láska k ikonám.

V posledních dvanácti měsících web stále víc sužují nálety ikon. Tam, kde kdysi vládl text, jsou nyní ikony. I malinké užitečné „menu“ indikující na mobilních obrazovkách navigaci bylo nahrazeno ohavnou ikonou hamburgeru, přitom zabírá přesně stejné množství místa, pouze je méně průhledná.

Ano, pro tyto účely je sice možné používat tzv. „ikonové fonty“, ale má smysl to vůbec dělat, když téhož efektu dosáhnete jen s malým množstvím kódu a bez toho, abyste museli načítat objemný soubor příslušného fontu?

SVG kromě toho řeší problematiku responzivního obrázku – je sice pravda, že obrázky, které jsou použitelné pro vektorový formát, jsou celkově omezenější než bitmapy, ovšem na druhou stranu, popularita plochého designu a módní ilustrace s bloky ve standardních plných barvách vytvářejí perfektní prostředí, v němž se může SVG konečně prosadit a dál vyvíjet.

Tip, jak to přežít. Pokuste se z nějaké kreslicí aplikace exportovat několik SVG souborů a pak se podívejte na kód. Je skvělé, že existují obrázkové aplikace, které vytvoří SVG za vás, ale opravdový mistr důvěrně zná a perfektně ovládá své nástroje. Pokuste se zvládnout ruční kódování SVG a pak už jen v průběhu roku 2014 shrabujte benefity (a stejně dobře se vám povede i později).

Závěr

Jaké trendy se podle vás rozvinou v roce 2014? Myslíte, že se stane něco revolučního? Podělte se s námi v komentářích se svými myšlenkami.

Informace o autorovi

Benjie Moss je editorem na WebdesignerDepot. Obvykle trénuje na maraton. Můžete ho kontaktovat na @BenjieMoss. Další články od Benjie Mosse.

About translation

• Original article: 7 web design trends you’ll actually see this year (and how to survive them) (Webdesignerdepot).
• Translation: RNDr. Jan Pokorný
• Language and expert collaboration: Miroslav Kučera.

Language of translation: Czech (for readers from Czech and Slovak republics). Translated with the permission of Webdesignerdepot. Other translations.