typické chyby responzivních podkladů
TRANSCRIPT
![Page 1: Typické chyby responzivních podkladů](https://reader033.vdocuments.pub/reader033/viewer/2022051404/5a6509057f8b9aa2548b615f/html5/thumbnails/1.jpg)
Typické chyby responzivních podkladů
Tomáš Krejčí SuperKodéři | @tomkrej
![Page 2: Typické chyby responzivních podkladů](https://reader033.vdocuments.pub/reader033/viewer/2022051404/5a6509057f8b9aa2548b615f/html5/thumbnails/2.jpg)
Motivace O čem to (ne)bude
O designech a designerech Cíl
![Page 3: Typické chyby responzivních podkladů](https://reader033.vdocuments.pub/reader033/viewer/2022051404/5a6509057f8b9aa2548b615f/html5/thumbnails/3.jpg)
Nepřehazujte pořadí komponent a elementů
![Page 4: Typické chyby responzivních podkladů](https://reader033.vdocuments.pub/reader033/viewer/2022051404/5a6509057f8b9aa2548b615f/html5/thumbnails/4.jpg)
![Page 5: Typické chyby responzivních podkladů](https://reader033.vdocuments.pub/reader033/viewer/2022051404/5a6509057f8b9aa2548b615f/html5/thumbnails/5.jpg)
![Page 6: Typické chyby responzivních podkladů](https://reader033.vdocuments.pub/reader033/viewer/2022051404/5a6509057f8b9aa2548b615f/html5/thumbnails/6.jpg)
Pozor na fixní hlavičky s vysouvacím obsahem
![Page 7: Typické chyby responzivních podkladů](https://reader033.vdocuments.pub/reader033/viewer/2022051404/5a6509057f8b9aa2548b615f/html5/thumbnails/7.jpg)
![Page 8: Typické chyby responzivních podkladů](https://reader033.vdocuments.pub/reader033/viewer/2022051404/5a6509057f8b9aa2548b615f/html5/thumbnails/8.jpg)
Responzivní verze není mobilní verze
![Page 9: Typické chyby responzivních podkladů](https://reader033.vdocuments.pub/reader033/viewer/2022051404/5a6509057f8b9aa2548b615f/html5/thumbnails/9.jpg)
![Page 10: Typické chyby responzivních podkladů](https://reader033.vdocuments.pub/reader033/viewer/2022051404/5a6509057f8b9aa2548b615f/html5/thumbnails/10.jpg)
![Page 11: Typické chyby responzivních podkladů](https://reader033.vdocuments.pub/reader033/viewer/2022051404/5a6509057f8b9aa2548b615f/html5/thumbnails/11.jpg)
Responsizvní web se nescaluje!
![Page 12: Typické chyby responzivních podkladů](https://reader033.vdocuments.pub/reader033/viewer/2022051404/5a6509057f8b9aa2548b615f/html5/thumbnails/12.jpg)
Jeden příklad za všechny
www.beny.cz
Web není PDF ani obrázek
![Page 13: Typické chyby responzivních podkladů](https://reader033.vdocuments.pub/reader033/viewer/2022051404/5a6509057f8b9aa2548b615f/html5/thumbnails/13.jpg)
Pokuste se co největší konzistenci komponent
![Page 14: Typické chyby responzivních podkladů](https://reader033.vdocuments.pub/reader033/viewer/2022051404/5a6509057f8b9aa2548b615f/html5/thumbnails/14.jpg)
mobil 14 px
např. Velikost textů
tablet 18 px
desktop 16 px
velký desktop 18 px
Nejedná se pouze o fonty
![Page 15: Typické chyby responzivních podkladů](https://reader033.vdocuments.pub/reader033/viewer/2022051404/5a6509057f8b9aa2548b615f/html5/thumbnails/15.jpg)
Rozdílná velikost nadpisu
Rozdílná velikost ikonek
Rozdílná výška a písmo v inputech a tlačítku
Rozdílný line-height textu
Šířka desktop sloupce a šířka mobilní verze je +/- stejná
![Page 16: Typické chyby responzivních podkladů](https://reader033.vdocuments.pub/reader033/viewer/2022051404/5a6509057f8b9aa2548b615f/html5/thumbnails/16.jpg)
Mobilní a tablet designy navrhujte vždy pro
nejmenší možné rozlišení
![Page 17: Typické chyby responzivních podkladů](https://reader033.vdocuments.pub/reader033/viewer/2022051404/5a6509057f8b9aa2548b615f/html5/thumbnails/17.jpg)
Doporučení: mobil 320px a tablet 768px
![Page 18: Typické chyby responzivních podkladů](https://reader033.vdocuments.pub/reader033/viewer/2022051404/5a6509057f8b9aa2548b615f/html5/thumbnails/18.jpg)
Myslete na rychlostní optimalizaci
![Page 19: Typické chyby responzivních podkladů](https://reader033.vdocuments.pub/reader033/viewer/2022051404/5a6509057f8b9aa2548b615f/html5/thumbnails/19.jpg)
• Přílišné množství webfontů a jejich řezů
• Self hostovaná videa - raději využijte YouTube/Vimeo
• Velké množství sociálních widgetů
• Velké množství různých javascriptových komponent
http://frontendisti.cz/archiv-akci.html#rychlost
Neovlivnitelné
Ovlivnitelné
![Page 20: Typické chyby responzivních podkladů](https://reader033.vdocuments.pub/reader033/viewer/2022051404/5a6509057f8b9aa2548b615f/html5/thumbnails/20.jpg)
Touch zařízení: Automaticky přehrávané
video na pozadí nefunguje
![Page 21: Typické chyby responzivních podkladů](https://reader033.vdocuments.pub/reader033/viewer/2022051404/5a6509057f8b9aa2548b615f/html5/thumbnails/21.jpg)
Myslete na výkon zařízení, pro které navrhujete weby
![Page 24: Typické chyby responzivních podkladů](https://reader033.vdocuments.pub/reader033/viewer/2022051404/5a6509057f8b9aa2548b615f/html5/thumbnails/24.jpg)
Nedělejte responzivní návrhy v 2@ nebo 3@
velikosti!
![Page 25: Typické chyby responzivních podkladů](https://reader033.vdocuments.pub/reader033/viewer/2022051404/5a6509057f8b9aa2548b615f/html5/thumbnails/25.jpg)
Proč to dělají?1) Nevědí o reálných rozlišeních zařízení 2) Chtějí mít návrhy v
@2x a @3x rozlišeních k
prezentaci klientoviNapř. iPhone 6 750 × 1334px 375 × 667px
3x 6x4x 9x
Jak spočítat? RR = šírka / (DPI / 160)
iPhone = 750 / (320/160)
3) Myslí, že to potřebuje kodérNepotřebuje
https://github.com/murd/psd-export-document-retina-png/
![Page 26: Typické chyby responzivních podkladů](https://reader033.vdocuments.pub/reader033/viewer/2022051404/5a6509057f8b9aa2548b615f/html5/thumbnails/26.jpg)
Problémy• Malá velikost fontu
• Font size v půlpixelech
• Border v půlpixelech
• Nikdy není vše 2x větší než by mělo být
• Chybí matematická představivost
![Page 27: Typické chyby responzivních podkladů](https://reader033.vdocuments.pub/reader033/viewer/2022051404/5a6509057f8b9aa2548b615f/html5/thumbnails/27.jpg)
Proč to dělat 1@?• Konečně vám někdo řekl, že je to takto lepší
• Uvidíte vše v reálných rozměrech
• Ušetříte místo na disku
• Nebudete potřebovat 64 GB RAM
• Kodér vás bude milovat!
![Page 28: Typické chyby responzivních podkladů](https://reader033.vdocuments.pub/reader033/viewer/2022051404/5a6509057f8b9aa2548b615f/html5/thumbnails/28.jpg)
Otevřte si grafický návrh na reálných zařízeních v
reálných rozměrech
![Page 29: Typické chyby responzivních podkladů](https://reader033.vdocuments.pub/reader033/viewer/2022051404/5a6509057f8b9aa2548b615f/html5/thumbnails/29.jpg)
Závěrem
• Pokud se vám přednáška líbila, sdílejte ji minimálně jednomu dalšímu designerovi
• Pokud si nejste jisti – konzultujte své grafické návrhy se svým kodérem
![Page 30: Typické chyby responzivních podkladů](https://reader033.vdocuments.pub/reader033/viewer/2022051404/5a6509057f8b9aa2548b615f/html5/thumbnails/30.jpg)
Děkuji za pozornost!
Tomáš Krejčí SuperKodéři | @tomkrej