Responzivní design

Zdejší zásadní články na téma responzivní design? Čtěte o Mobile First, responzivních obrázcích a navrhování webů v prohlížečích.

Viewport ve webdesignu: layoutový, vizuální a ideální

24. 4. 2018 v příručce

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?

Lazy loading obrázků: kompletní průvodce

21. 2. 2018 v příručce

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

Lidé a zařízení: jak je používají a jaký to má vliv na návrh rozhraní?

11. 2. 2018 v příručce

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.

iPhone X: jak si pro něj nastavit weby a proč je potřeba to udělat?

16. 1. 2018 v příručce

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ů.

Responzivní grafy

31. 8. 2017 v příručce

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

Marcotteho responzivní design

22. 8. 2017 v příručce

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.

Tabulky v responzivním designu

31. 7. 2017 v příručce

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.

Vkládaná média se zachováním poměru stran

19. 7. 2017 v příručce

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?

Responzivní SVG

26. 6. 2017 v příručce

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?

Picture, nová značka pro vkládání obrázků

21. 6. 2017 v příručce

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

Atributy responzivních obrázků: srcset a sizes

23. 5. 2017 v příručce

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.

Kompletní průvodce obrázky v responzivním designu

17. 5. 2017 v příručce

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

Weby versus aplikace

20. 4. 2017 v příručce

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: proč je chceme a proč je jen tak nedostaneme

6. 3. 2017 v příručce

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.

Píšu ebook o responzivním designu, pomozte mi prosím předobjednáním

11. 1. 2017 na blogu

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.

Majitelé „m tečka“ webů pozor: Google bude mobile-first

10. 11. 2016 na blogu

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í.

CSS řešení: Elastická typografie počítaná v procentech z výšky komponenty

26. 9. 2016 v příručce

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

Efektivní ladění responzivních webů

27. 6. 2016 v příručce

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.

Jaký typ responzivní navigace vybrat?

15. 4. 2016 v příručce

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é.

Martin Michálek

Autor: Martin Michálek

Nezávislý frontend designér s téměř dvacetiletou praxí a nadšením pro moderní webové postupy a technologie. Píše Vzhůru dolů, školí a je k dispozici pro konzultace. Více informací