Jaký byl rok 2017 ve webdesignu

Publikováno: 19.1.2018

#Webdesign

Co oboru přinesl loňský rok? Když dovolíte, vezmu to zcela subjektivně, očima frontend designéra a autora Vzhůru dolů.

Celý článek

Text vyšel původně na autorově webu Vzhůru dolů.

Spousta úmrtí (například Windows Phone, Bower a skoro i Internet Explorer a Photoshop) je vyvážená radostí z toho, jak se daří nedávným novým přírustkům (systémy designu nebo AMP, SVG a progresivní webové aplikace – PWA).

Taky myslím, že obor dospěl. Alespoň jeho špička. A že ona špička to u nás dělá fakt výtečně.

Nejdřív mě ale prosím dovolte malou retrospektivu. V roce 2007 jsem se na blogu zeptal známých na jejich názor na český webdesign. Podívejme se na to s odstupem.

Co jsme řešili před deseti lety?

  • Geografickou a cenovou dostupnost internetu
    Dobrá zpráva: tohle už skoro vyřešené máme. Teď už jen ukecat ty mobilní operátory. :-)
  • Snad už brzké vymření Internet Exploreru
    Verze pět. Pět! Nevím jak vás, ale mě se teď právě naježily chlupy na zádech…
  • Kopírování byznys modelů a uživatelských rozhraní českými službami
    Řeší dnes takové blbosti ještě někdo? Ze studií mezitím vyšlo zjevné – že je pro uživatele výhodné, když se podobně fungující služby ovládají podobně.
  • Českou lokalizaci služeb od Google
    Ano, máme ji teprve deset let! Taky máte pocit, že Google mluví česky už od starého Egypta?
  • Opomíjení webdesignu v okolním profesním mainstreamu
    Už se snad tak moc neděje. Nebo to neřešíme? Každopádně díky #zapixely a dalším propagačním aktivitám.

A na závěr jedna moc fajn věc. Lokální služby už dávno nejsou jen takové to, co je opatrně zaměřené na lokálního uživatele:

A co se stalo v roce 2017?

IE vymírá a svět směřuje k vládnutí Chrome

Jediný relevatní Explorer je dnes jedenáctkové verze, starší obvykle nemusíme díky minimálnímu rozšíření mezi uživateli řešit. Ostatní prohlížeče tak nějak stagnují nebo v tržních podílech klesají. Včetně Firefoxu. Chrome to válcuje, ale podíly ostatních prohlížečů naštěstí zanedbatelné nejsou a nebudou.

Windows Phone je mrtvý

Je mi to líto. Uživatelsky to byla invenční a celkově dobře udělaná platforma. Ale přišla třetí, takže se spoustě firem pro ni nevyplatilo dělat aplikace. A když chyběly aplikace, lidé platformu přestali používat. Tady je historie platformy a pak nesmrtelné video, kde se Steve Ballmer směje iPhonu:

Bower je mrtvý

Autoři prvního frontendového správce balíčků doporučili přejít na Yarn.

Photoshop postupně odchází z webdesignu

Podle různých statistik se vloni poprvé více pro interface design využíval Sketch. Adobe navíc přišlo s nástrojem Adobe XD, takže v budoucnost Photoshopu pro návrh obrazovek už nevěří ani mateřská firma. Konečně.

Jo a – světovou scénu zaujal Ivan Kuckir z Prahy, který naprogramoval Photoshop v prohlížeči. Plnohodný ne, ale i tak boží. Podívejte se na Photopea.

Bootstrap 4 se skoro stihl narodit

Po třech letech vývoje… je stále v betě. Ale nové vlastnosti jsou moc fajn. (Pozn. red.: těsně před publikací tohoto článku Boostrap 4 konečně vyšel. Vítej!)

Revoluce v layoutu: Flexbox už (snad) všichni používáme, CSS Grid budeme taky

Pro CSSkaře obrovská změna. Konečně pořádný layout! Flexbox už snad všichni používáme. Grid už ale brzy budeme moci taky. Potřebujeme znát obojí. Na Root.cz je o něm pěkný článek.

iPhone X to prý zase komplikuje

Uvedení nejnovějšího iPhone a hlavně jeho obrazovka s výčnělkem a kulatými rohy spustilo vlnu znechucení ze strany některých webových vývojářů, kteří nechtějí „optimalizovat weby pro iPhone X”. Tahle „optimalizace“ ale u většiny webů představuje jen přidání meta-značky:

<meta name="viewport" content="initial-scale=1, viewport-fit=cover">

AMP jede

Proti AMPu můžete mít – jako já – filozofické výhrady. Ale pragmaticky vzato to je skvělá věc, takže tuhle technologii super-rychlých stránek – jako já – některým klientům určitě doporučíte.

AMP nedávno oslavil dva roky existence a je nasazený na 25 milionech domén. Výsledky případových studií jsou hodně zajímavé. Jak praví klasik: „Můžeme o tom vést spory, můžeme s tím nesouhlasit, ale to je tak všechno, co se proti tomu dá dělat.”

Flat UI dostalo za uši

Prvky rozhraní navržené ve „flat“ stylu mohou přitahovat méně pozornosti a vyžadovat od uživatele více úsilí při rozpoznávání aktivních elementů. V diskutované studii to říká Nielsen Norman Group.

Na iRozhlas mohou všichni zažít rychlost

Superkoders nakódovali a spustili iRozhlas, na kterém si všichni na mohou osahat a zažít opravdu rychlý web. Z vlastní zkušenosti můžu říct, že to na lidi působí ještě přesvědčivěji než obchodní ukazatele. Prezentaci Proč je iRozhlas super najdete na SlideShare.

SVG je standard a objevujeme nové možnosti

První vlna zájmu o SVG už opadla, protože jej snad už všichni pro vektorovou grafiku používají. V druhé vlně objevujeme úžasné možnosti, které SVG nabízí pro animace, interakce a posun uživatelského prožitku do nových dimenzí. Třeba generováním zástupných symbolů pro obrázky.

Systémy designu chtějí skoro všichni, ale skoro nikdo je neumí dělat

Když se Emanuela Damiani z Mozilly na WebExpu zeptala, kdo v sále řeší systémy designu, zvedla se většina rukou. To mě fakt překvapilo. Od doby, co jsem dělal první projekt s PatternLabem, už nějaký čas uplynul a stále více si myslím, že to je budoucnost webdesignu. Ale udělat systémy designu dobře je děsně těžké.

Můj hlavní dojem z posledního roku se systémy designu je: Tenhle podobor se teprve rodí. Nemáme pořádně nástroje (ani PatternLab to není), nemáme zkušené lidi a co víc – neumíme v týmech pořádně spolupracovat mezi technikou a designem, což je pro vznik systémů designu naprosto zásadní. Ale dělat větší weby bez systému designu je neefektivní a dlouhodobě neudržitelné. I kdyby byl nedokonalý.

Tachyons a utility třídy: hledáme, co si z nich vzít

Jak v NejŘemeslníci.cz používají Tachyons, článek, který vyprovokoval fakt hutnou diskuzi na sociálních sítích, ukazuje psaní takzvaného atomického CSS. Nějaký systém designu zde je, ale na velmi nízké úrovni.

Tachyons jsou opravdu extrém, ale jsem přesvědčený a praxe mi ukazuje, že utility třídy (nebo helpery, když chcete) jde krásně používat v kombinaci s běžnými komponentami. Takhle třeba vypadá položka v seznamu článků na blogu:

<div class="col w-50-sm">
  <h2 class="h4 mb-05"> … </h2>
  <div class="f-6">
    <small class="mb-05"> … </small>
    <p> … </p>
  </div>
</div>

Nebylo potřeba založit samostatnou komponentu. Používá jen existující třídy, které mají užitek i na jiných místehc webu.

Když Tachyons vezmeme jako inspiraci, leccos nového se o psaní stylů a taky navrhování rozhraní naučíme.

Tohle je téma, které mě teď dost baví:

Weby vs. aplikace? Odpověď je PWA

Progesivní webové aplikace (PWA) jsou odpovědí na odvěké dilema: potřebujete kromě webu i aplikaci? PWA je web, ale běží offline a umí třeba posílat notifikace. Myslím si, že většinu případů použití nativních mobilních aplikací, by bylo možné (a efektivnější) udělat jako PWA.

Rok 2017 byl v tomhle přelomový, protože se k podpoře PWA klíčových technologií přidal i Apple a jeho prohlížeč Safari.

Obor díky své špičce dospěl

Je to vidět hlavně v kontextu výše uvedeného roku 2007. Ve špičkových týmech nebo u špičkových lidí specializovaných jiným směrem, než jsem já sám. Dělají věci tak… prostě nechápu jak, ale se skvělými výstupy.

Z toho taky vyplývá, že klíčem k úspěchu v oboru je specializace. Před pěti lety jsem ještě byl schopen udržet povědomí o celém webdesignu, dnes to naprosto neplatí. „Jsem webař“ tak už můžeme používat jen jako seznamovací frázi pro trochu zainteresované, ale ne jako vážně míněnou profesi.

Ale jasně, osvěty a vzdělávání není nikdy dost, protože…

Je ale dobré si uvědomit, že znalosti lidí kolem sebe držíme v rukou právě my. Takže díky za každý článek, za každou přednášku a za každé dobře argumentované a podložené vysvětlení na schůzce.

Poslední tři body pojmu trochu osobně. Co důležitého jsem dělal v souvislosti se svým webem Vzhůru dolů?

Více přístupnosti pro české weby

Zintenzivnil jsem propagaci přístupnosti na stránkách Vzhůru dolů. S Radkem Pavlíčkem jsme pro Webexpo připravili dvojblok přednášek o přístupnosti: Radkova a moje část.

Začali jsme školit WordPress

…což bych do sebe před pěti lety neřekl. :-)

Ale setkávání s Honzou Bienem mě přesvědčila, že jeho pojetí vývoje na WordPressu umožňuje dělat výborná řešení za přijatelné náklady.

…a knížka!

Tak jasně, tohle jsem si musel nechat na konec. Můj průvodce světem responzivního webdesignu Vzhůru do (responzivního) webdesignu vyšel kromě e-booku také v papírové podobě.

 

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace