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.

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

Jak na mobilní navigaci a proč potřebujeme hamburgery

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

Ne všechny weby musejí navigaci na mobilech schovávat. Když už to udělat musíte, udělejte to dobře. Tento článek by vám mohl pomoci.

Kompletní průvodce odkazy na telefonní čísla

10. 4. 2016 na blogu

Pojďme odstranit nejasnosti kolem telefonních odkazů v článku přeloženém z CSS-Tricks.

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í