diff --git a/html-a-css/bem-a-responzivni-design/assets/Mobile-Traffic-2011-2021.png b/html-a-css/bem-a-responzivni-design/assets/Mobile-Traffic-2011-2021.png
deleted file mode 100644
index 725e8f37..00000000
Binary files a/html-a-css/bem-a-responzivni-design/assets/Mobile-Traffic-2011-2021.png and /dev/null differ
diff --git a/html-a-css/bem-a-responzivni-design/assets/Mobile-Traffic-2012-2023.png b/html-a-css/bem-a-responzivni-design/assets/Mobile-Traffic-2012-2023.png
new file mode 100644
index 00000000..7bfaacae
Binary files /dev/null and b/html-a-css/bem-a-responzivni-design/assets/Mobile-Traffic-2012-2023.png differ
diff --git a/html-a-css/bem-a-responzivni-design/assets/screen-sizes.png b/html-a-css/bem-a-responzivni-design/assets/screen-sizes.png
new file mode 100644
index 00000000..cdfe5d6a
Binary files /dev/null and b/html-a-css/bem-a-responzivni-design/assets/screen-sizes.png differ
diff --git a/html-a-css/bem-a-responzivni-design/how-to-responsive.md b/html-a-css/bem-a-responzivni-design/how-to-responsive.md
index 22d3c397..434f32a1 100644
--- a/html-a-css/bem-a-responzivni-design/how-to-responsive.md
+++ b/html-a-css/bem-a-responzivni-design/how-to-responsive.md
@@ -2,7 +2,7 @@
### Meta značka viewport
-Meta značka `viewport` v hlavičce HTML zajišťuje, že obsah našeho webu se bude přizpůsobovat šířce zařízení a že standardní zobrazení je 1:1, tj. prohlížeč nebude stránku sám zvětšovat nebo zmenšovat (_zoomovat_).
+Prvním krokem pro tvorbu responzivního webu je přidat `meta` značku `viewport` v hlavičce HTML se správným nastavením atributu `content`. To zajistí, že se obsah stránky bude přizpůsobovat šířce zařízení a že nebude prohlížečem nijak _přizoomovaný_ nebo _odzoomovaný_. Bez použití této značky použije prohlížeč defaultní rozměr 980px a stránku dostatečně oddálí, aby se vmáčkla na menší zařízení. (HTML šablona generovaná přes emmet má toto nastavení automaticky a není třeba ho přidávat).
```html
@@ -17,20 +17,29 @@ Meta značka `viewport` v hlavičce HTML zajišťuje, že obsah našeho webu se
```
+
## Techniky responzivního webdesignu
Máme tři hlavní techniky responzivního webdesignu:
-- flexibilní grid
+- flexibilní layout
- flexibilní obrázky
- media queries
-V této lekci si projdeme flexibilní grid.
+V této lekci si projdeme flexibilní layout.
+
+### Flexibilní layout
+
+Pro tvorbu flexibilního layoutu pomáhá designérům grid, neboli mřížka. Jde o systém sloupců a řádků, kde elementy zabírají vždy nějaký poměr stránky nehledě na na velikost zařízení. Oproti neresponsivním webům se tak třeba několikaslopcový grid nezmenší (neodzoomuje), aby se vmáčkl na telefon, ale sloupce se zalomí pod sebe. [Příklad komponent navrhovaných do grid systému.](https://dribbble.com/shots/15341964-Grid-System-UI-Components)
+
+Pružného layoutu, který se přizpůsobí jakékoli velikosti stránek, dosáhneme pomocí relativních jednotek. Díky procentům budou elementy na stránce zabírat stejný poměr prostoru nehledě na rozlišení.
+
+
-### Flexibilní grid
+Mřížku napři. tří sloupců si tak jednoduše vytvoříme pomocí procent a funkce calc()
-Grid, neboli mřížka, byla původně používaná pro tištěný design. Mřížku tvořil systém sloupců a řádků, na které se umisťuje obsah – představte si třeba staré papírové noviny. Je to ale i velice užitečný návod pro návrh webových designů. [Příklad komponent navrhovaných do grid systému.](https://dribbble.com/shots/15341964-Grid-System-UI-Components)
+Stejně tak se hodí jednotky vh a vw, kde pracujeme s poměrem aktuálního viewportu.
-Protože nevíme, na jak velké obrazovce se bude náš web zobrazovat, je potřeba zajistit, aby se přizpůsobil všem. V našem kódu toho docílíme pomocí relativních jednotek (např. procenta).
+Flexbox
-::codepen{user=marketaanezka id=RwxpYzY tab=html,result}
+Další nástroj pro tvorbu reponsivního layoutu už znáte - je o flexbox. Pomocí něj např. zařídíte responsivní galerii obrázků, které se budou zalamovat pod sebe nehledě na velikost obrazovky.
diff --git a/html-a-css/bem-a-responzivni-design/mobile-first.md b/html-a-css/bem-a-responzivni-design/mobile-first.md
index 6249b2bc..08b164d1 100644
--- a/html-a-css/bem-a-responzivni-design/mobile-first.md
+++ b/html-a-css/bem-a-responzivni-design/mobile-first.md
@@ -1,14 +1,14 @@
## Mobile first
-Správný přístup jak navrhovat a kódovat webové stránky je nejprve na mobilní zařízení, a teprve potom přidávat styly pro větší zařízení. Proč bychom měli postupovat tímto způsobem?
+Správný postup, jak navrhovat a kódovat responzivní webové stránky je začít od mobilních zařízení, a teprve potom přidávat styly pro větší zařízení. Proč bychom měli postupovat tímto způsobem?
### Nějaká ta čísla
-::fig[Mobile traffic 2011-2021]{src=assets/Mobile-Traffic-2011-2021.png}
-[Zdroj obrázku](https://www.broadbandsearch.net/blog/mobile-desktop-internet-usage-statistics)
+::fig[Mobile traffic 2012-2023]{src=assets/Mobile-Traffic-2012-2023.png}
+[Zdroj obrázku](https://www.oberlo.com/statistics/mobile-internet-traffic)
-- až 70 % návštěv webů pochází z mobilních zařízení
+- 60 % návštěv webů pochází z mobilních zařízení
- 61 % uživatelů se na stránku už nevrátí, pokud neměli dobrou zkušenost na telefonu
- 96 % vyhledávání na Google pochází z mobilních zařízení
- 83 % mobilních uživatelů předpokládá bezvadný přístup na stránky i pokud je navštíví z mobilního zařízení
@@ -17,25 +17,28 @@ Správný přístup jak navrhovat a kódovat webové stránky je nejprve na mobi
### Proč kódovat _mobile first_
-Prostor na telefonu je omezený, proto je náročný na design. Vždycky je snazší věci přidávat, než je ubírat. Proto musíme prioritizovat to nejdůležitější. Na telefonu se uživatelé potřebují co nejrychleji dostat k užitečným informacím.
+Prostor na telefonu je omezený a náročný na design. Je lepší tedy začít tím těžším, vymezit si ty nejdůležitější informace a akce. Poté už bude snadnější přidávat další věci pro větší zařízení. Jde o dobrou praxi, protože se zaměřujeme primárně na obsah a dobrou použitelnost. Animace a sekundární obsah řešíme až v druhém kroku.
::fig[Display comparison czechitas mapy cz]{src=assets/mobile-first-czechitas.png}
::fig[Display comparison skyscanner]{src=assets/responsive-skyscanner.png}
-Zároveň na telefonu se uživatelé chovají jinak, nemají myš a klávesnici, ale většinou jen jeden palec. Proto při designu pro malé obrazovky mějme na paměti pár pravidel:
+### Jak postupovat při designu pro mobilní zařízení?
-- _content first_: obsah je klíčový, nezahlcujte uživatele množstvím informací
+- _content first_: obsah je klíčový, nezahlcujte uživatele množstvím informací a vyberte jen to nejdůležitější
- jasná vizuální hierarchie, přehledná navigace
-- _call-to-action_ tlačítka jsou dobře viditelná, mají velkou klikatelnou plochu
+- _call-to-action_ tlačítka jsou dobře viditelná, mají velkou klikatelnou plochu a nespoléhají na _hover_
- pouze jeden sloupec pro obsah, vyhýbejte se horizontálnímu scrollování
+- dosažitelnost elementu při držení telefonu v jedné ruce
::fig[Mobile reach]{src=assets/mobile-reach.png}
+ Kromě devtools si můžete otestovat, zda je web mobile-friendly pomocí [Google nástroje](https://search.google.com/test/mobile-friendly).
+
### Jak rozšířit design na další zařízení
-V dnešní době je důležité nepřemýšlet nad responzivním designem tak, že navrhuji stránku pro mobil - tablet - desktop, ale tak, že design musí fungovat na všech šířkách od `360px` do `3840px` (a více). Design by měl být _flexibilní_ a _fluidní_.
+Jak už jsme zmiňovali v úvodu, v dnešní době nemůžeme přemýšlet nad responzivním designem tak, že navrhuji stránku pro mobil - tablet - desktop, ale tak, že design musí fungovat na všech šířkách od `360px` do `3840px` (a více). Design by měl být _flexibilní_ a _fluidní_.
Dobrou stránkou pro inspiraci responzivními weby je třeba [mediaqueri.es](https://mediaqueri.es/).
diff --git a/html-a-css/bem-a-responzivni-design/responsivity-history.md b/html-a-css/bem-a-responzivni-design/responsivity-history.md
index d1e7c975..1e399927 100644
--- a/html-a-css/bem-a-responzivni-design/responsivity-history.md
+++ b/html-a-css/bem-a-responzivni-design/responsivity-history.md
@@ -1,8 +1,15 @@
## Responzivní design
-Responzivní design je design webových stránek, který se přizpůsobuje velikosti zařízení. Tedy design, který se přizpůsobí jak telefonu, tak ultraširokému monitoru (a všemu mezi tím). Vytvářet responzivní weby je důležité, protože stránka je potom přehledná, příjemná na používání. Předejdeme tak tomu, že uživatele otrávíme a už se na stránku nebude chtít vrátit.
+Responzivní design je design webových stránek, který se přizpůsobuje velikosti zařízení. Tedy design, který se přizpůsobí jak telefonu, tak ultraširokému monitoru (a všemu mezi tím). Vytvářet responzivní weby je důležité, protože dnešní uživatel předpokládá příjemné uživatelské prostředí na jakémkoliv zařízení. Pokud zjistí, že stránka dobře nefunguje např. na telefonu nebo tabletu, může se stát, že se na ni už nikdy nevrátí.
-Je potřeba myslet nejen na mobily, ale i na tablety, laptopy, desktopy, ultraširoké monitory, televize. Na stránce [statcounter](https://gs.statcounter.com/screen-resolution-stats#monthly-202002-202102-bar) je možné vidět, jaká velikost zařízení je nejčastější.
+Typicky se dělí velikosti obrazovek na tři skupiny: mobil, tablet a desktop. Tato tři rozmezí pixelů slouží jako dobrý základ k testování a vývoji.
+
+::fig[3 základní breakpointy]{src=assets/screen-sizes.png}
+
+ Pokud má být stránka plně responzivní, měla by být použitelná a uživatelsky přívětivá ve všech rozlišeních uvnitř těchto rozmezí. Pro představu, kolik rozlišení může být a která jsou nejčastější slouží statistika na stránce [statcounter](https://gs.statcounter.com/screen-resolution-stats#monthly-202301-202309-bar).
+
+#### Hardwarové pixely versus CSS pixely
+Je dobré mít na paměti, že když hovoříme o rozlišení a pixelech, nemluvíme o těch hardwarových, ale o referenční jednotce CSS pixelů. U zařízení s displeji s vysokým rozlišením (např. retina displej u Apple zařízení) může být jejich hardwarové rozlišení třeba 2x nebo i 4x větší. Nás vývojáře ale zajímá velikost v CSS pixelech, která odpovídá velikosti viewportu na daném zařízení. Nicméně je dobré mít na paměti, že tyto hodnoty nejsou 1:1 např. při používání bitmapových obrázků, jejichž kvalita se bude napříč zařízeními lišit. O tvorbě responzivních obrázků budeme mluvit v přístí lekci.
### Cíl responzivního webdesignu
@@ -10,22 +17,17 @@ Cílem responzivního webdesignu je **zajistit optimální uživatelskou zkušen
#### Stránka je dobře použitelná
-- na všechno jde pohodlně „kliknout“
+- na všechno jde pohodlně „kliknout“, např. tlačítka jsou dostatečně velké na palec
- nikde není obsah přes sebe nebo není něco schované „za rohem“
-- na mobilu např. nevyžaduji stisknutí klávesy na klávesnici, apod.
-- nespoléhám na stav `hover` např. pro otevírání menu - na mobilu neexistuje
+- na mobilu např. nevyžadujeme stisknutí klávesy na klávesnici
+- nespoléháme na stav `hover` např. pro otevírání menu - na mobilu neexistuje
#### Přizpůsobený obsah
- upřednostňujeme obsah, který může být užitečný pro mobilní uživatele - např. kontaktní údaje, otevírací doba, moje letenka/jízdenka
-- části textu můžeme „zabalit“ - např. sekci časté otázky/odpovědi
+- části textu můžeme „zabalit“ - např. menu schováme pod ikonku hamburgeru
- na mobilu nemusíme vidět všechno - ubereme animace, „kudrlinky“ (výkon mobilních zařízení je nižší a také nechceme uživateli _vyždímat_ baterii)
-
-#### Přizpůsobená navigace
-
-- zjednodušená navigace
-- ideálně jsou viditelné hlavní odkazy, zbytek schovaný a dostupný po rozkliknutí
-- často se používá „hamburger“ menu - ideálně ikonka plus popis
+- mobilním uživatelům nechceme ani _vyždímat_ data, a tak volíme menší obrázky
::fig[cesko digital responzivni]{src=assets/cesko-digital-responzivni.png}