Responzivní design

Co je layoutový a co vizuální viewport? Co přesně přesně vyjadřuje device-pixel-ratio a proč nepoužívat screen.width v Javascriptu nebo min-device-width v CSS?

Nově upraveno: Přidaný je Intersection Observer. Kde lazyloading používat a kde ne? A jak na zástupné obrázky?

Další ukázka z knihy. Dozvíte se, že je vhodné považovat všechna zařízení za dotyková. Že lidé palci používají i hybridní notebooky. A že snadno dosažitelná plocha chytrých telefonů se stále zmenšuje.

Nový iPhone je první rozšířené zařízení s jinou než hranatou obrazovkou. Pojďme se podívat, jak nastavit a otestovat weby nejen pro tyto typy přístrojů.

Podívejme se na tři nejpoužívanější knihovny pro tvorbu responzivních grafů.

Původní definice responzivního designu pochází z roku 2010, hlavy a pera Ethana Marcotteho. V další ukázce z knížky se vracím k základním principům responzivního designu.

Hurá!

Pojďme si představit všechny způsoby, jak lze s tabulkami v dnešním webdesignu zacházet, a vy si jistě vyberete.

Jak zařídit, aby se obrázky, video a prvky vkládané přes `<iframe>` přizpůsobovaly šířce rodičovského elementu a ještě k tomu zachovávaly poměr stran?

Další ukázka z e-booku „Vzhůru do (responzivního) webdesignu“. Jak bez hacků zařídit pružné zobrazování SVG ve všech prohlížečích? A jak na plně responzivní SVG s přizpůsobivým obsahem?

Aktualiace textu o novém tagu, umožňujícím definování variant obrázku pro různé stavy v responzivním webdesignu.

Nové atributy elementu img, které řeší potřebu autorů stránek zobrazovat v různých stavech responzivního designu různé varianty obrázků. Přečtěte si zcela novou verzi článku.

V responzivním designu často potřebujeme volit mezi různými variantami jednoho obsahového obrázku.

Zkouším se zamýšlet, kdy je lepší použít web a kdy nativní aplikaci. A definuji nativní, hybridní, progresivní a univerzální aplikace.

Element Queries (nebo Container Queries) jsou vlastně stejné typy dotazů jako Media Queries. Jen se neptáte na parametry okna prohlížeče, ale na parametry samotného elementu.

Ano, je to tak. Už nějadou dobu pracuji na novém ebooku. O procesu tvorby responzivních webů, o svých zkušenostech s ním a taky trochu o principech dnešního webdesignu. Bude rozsáhlejší, barevnější a detailnější než jeho starší sourozenec.

Google už oficiálně představil svůj záměr začít indexovat a řadit primárně z pohledu uživatele mobilních zařízení.

Pojďme si rozebrat jedno z řešení, které jsem ukazoval v přednášce na WebExpo 2016.

Jak si poradit s dnešní škálou prohlížečů a zařízení? A jak s nepřítomností pořádných vývojářských nástrojů na mobilech? Svatý grál neznám, ale pár tipů ze své praxe bych měl.

Projdeme si osm návrhových vzorů pro navigace na responzivních webech. Od uživatelsky složitých a implementačně jednoduchých až po ty – ehm – dobré.