280 stránek praktických tipů, zkušeností a postupů usnadňujících tvorbu responzivních webů pro široké spektrum čtenářů – profesionální webové vývojáře, designéry, marketéry, ale i začátečníky.

Vzhůru do (responzivního) webdesignu

Koupit za 299 Kč

GoPay Mastercard Mastercard Secure Code VISA Verified by VISA Cena je včetně 21% DPH a platí pro jednu
fyzickou osobu a neomezený počet zařízení.
280 stran. Vychází v EPUB/iOS, MOBI/Kindle a PDF. Minor aktualizace dostanete zdarma.
Více informací…

Co se naučíte?

  1. Technické postupy pro snadnější řešení responzivní typografie, obrázků,  layoutu a dalších.
  2. Jak zlepšit návrh uživatelských rozhraní tak, aby dobře fungovala na všech zařízeních.
  3. Proces návrhu responzivních webů, během něhož si vystačíte s tužkou, papírem a prohlížečem.
  4. Základy webdesignu v širším pojetí: Od grafiky a typografie až k rychlosti načítání.
  5. Aplikaci složitějších postupů a technologií na příkladu, který knihu provází.
Martin Michálek

Martin Michálek

Autor je frontend designér na volné noze s takřka dvacetiletou praxí. Navrhuje, implementuje a radí s uživatelskými rozhraními responzivních webů. V poslední době spolupracoval se značkami, jako je Česká televize, VašeČočky.cz nebo Svobodná Evropa.

O moderních technologiích napsal e-book „Vzhůru do CSS3“. Kromě psaní blogu Vzhůru dolů také příležitostně publikuje pro Zdroják.cz nebo Lupa.cz. Je prvním českým autorem na Smashing Magazine. Spoluzaložil a vede spolek Frontendisti.cz, který se zaměřuje na vzdělávání webařské komunity, organizuje srazy a publikuje přednášky.


Co na e-book říkají ti, kteří už jej četli?

  • Jan Kvasnička:

    „Konečně máme knihu, která nás hodně prakticky vtáhne do tajů responzivního webu. Na knížce se mi moc líbí příklady a reálné ukázky, díky kterým čtenář ihned ví, jak je vše myšleno. Martin si s knihou opravdu vyhrál.“

  • Radek Pavlíček, Poslepu.cz:

    „Čtivá, srozumitelná, plná praktických příkladů a nezapomíná se v ní na přístupnost. Taková je nová kniha Vzhůru do (responzivního) webdesignu od Martina Michálka.“

Vzhůru do (responzivního) webdesignu

Koupit za 299 Kč

GoPay Mastercard Mastercard Secure Code VISA Verified by VISA Cena je včetně 21% DPH a platí pro jednu
fyzickou osobu a neomezený počet zařízení.
280 stran. Vychází v EPUB/iOS, MOBI/Kindle a PDF. Minor aktualizace dostanete zdarma.
Více informací…

Pro koho knížka je?

Vývojáři a kodéři
Vy z knížky využijete největší část. Získáte přehled o postupech a technologiích používaných pro tvorbu dnešních responzivních webů. Mezi řádky a v netechnických kapitolách se můžete inspirovat tipy pro tvorbu a úpravy responzivních rozhraní.
Designéři, grafici, marketéři
Pro vás jsou určené hlavně kapitoly o statistikách, rychlosti načítání, návrhu rozhraní v éře mobilů, procesu návrhu UI a responzivních navigacích.
Začátečníci a méně zkušení
Text knihy jsem psal tak, aby se dal číst i jako učebnice tvorby webových uživatelských rozhraní pro začínající. Vynechávám všechny pokročilé nástroje a nezmiňuji složité techniky.

Časté otázky

Co musím umět?
Pro orientaci v technických částech budete potřebovat dobrou znalost HTML a CSS a hrubý přehled o moderních technologiích (zmíněných např. v e-booku „Vzhůru do CSS3“). Netechnické části předpokládají jen to, že máte základní přehled o procesu návrhu webu.
Vyplatí se mi nový e-book pořídit, když už mám „Vzhůru do CSS3“?
Myslím, že ano. Oba e-booky doplňují. „Vzhůru do CSS3“ je více zaměřený na technologie a nástroje. „Vzhůru do (responzivního) webdesignu“ zase na postupy a techniky práce.
Bude také tištěná verze?
Ano, bude! Vyjde pravděpodobně v červnu 2017. Ti, kteří si do té doby zakoupí e-book, si tištěnou budou moci pořídit za sníženou cenu.

1) Proč vlastně responzivní webdesign?

  • Mobily, jsou tady mobily
  • Pro péči o ty malé úplně zapomínáme na velké
  • Vývoj: podíl konvenčních tabletů klesá, hybridy rostou
  • CSS rozlišení
  • Úroda prohlížečů
  • Argumentace Googlem
  • Zařízení z budoucnosti: co je po mobilech?
  • Weby responzivní, adaptivní, mobilní

2) Úvod do tvorby webu

  • Základy procesu tvorby webu
  • User Centered Design Canvas
  • Proces návrhu uživatelského rozhraní
  • Příklad: E-shop pro děti z lesních školek
  • Příklad: Obsah pro stránku detailu produktu

3) Dokument jako základ

  • Vrstvení
  • Grafický design
  • Typografie na webu
  • Zdroje elementů grafického designu
  • Příklad: Barvy, písma a grafický styl
  • Jednotky pro tvorbu webu: em, rem, %, px, vh, vw
  • Autorský zoom dokumentu a komponent
  • Elastická typografie
  • Blanka a další nástroje pro dokumentovou vrstvu webu
  • Příklad: hotový dokument

4) Viewport na mobilech

5) Rychlost načítání

6) Obrázky a další média

  • Marcotteho responzivní design
  • Pružné vkládané elementy se zachováním poměru stran
  • Responzivní obrázky
  • Atributy responzivních obrázků: srcset a sizes
  • Nová značka Picture
  • Responzivní SVG
  • Responzivní tabulky
  • Responzivní grafy
  • Příklad: dokument s přizpůsobivými médii

7) Návrh rozhraní v éře mobilů

  • Čtyři principy návrhu responzivního rozhraní
  • Filozofie „Mobile First“
  • Lidé a zařízení: jak je ovládají a jak se chovají?
  • Tipy, triky a časté chyby responzivních rozhraní
  • Minimální plocha aktivní plochy: alespoň centimetr čtvereční
  • Málo kliků a ještě méně (otravných) dotyků
  • 8 tipů pro jednodušší rozhraní na mobilech
  • Opusťte desktopové zlozvyky
  • Proč na mobilech neschovávat obsah?
  • Vyhněte se častým chybám

8) Design komponent rozhraní

  • Skicování
  • HTML prototypy
  • Příklad: návrh fotogalerie krok za krokem

9) Media Queries a layout

  • Media Queries
  • Tipy a triky k Media Queries
  • Responzivní layout
  • Příklad: rozvržení stránky

10) Responzivní navigace

  • Mobilní navigace: potřebujeme hamburgery?
  • Návrhové vzory responzivních navigací

11) Testování responzivních webů

  • Testování responzivních webů
  • Responzivní tipy a triky
  • Další zdroje

„Vzhůru do (responzivního) webdesignu“ má 11 kapitol a kolem 280 stránek, když to rozpočítáme do PDF na formát A5. Obsahuje také desítky ukázek kódu, obrázkových schémat a příklad.

Objednávka

„Vzhůru do responzivního webdesignu”
Informace o prodejci, postupu objednávky
a storno podmínkách
.