Post on 22-Jan-2018
transcript
Typické chyby responzivních podkladů
Tomáš Krejčí SuperKodéři | @tomkrej
Motivace O čem to (ne)bude
O designech a designerech Cíl
Nepřehazujte pořadí komponent a elementů
Pozor na fixní hlavičky s vysouvacím obsahem
Responzivní verze není mobilní verze
Responsizvní web se nescaluje!
Jeden příklad za všechny
www.beny.cz
Web není PDF ani obrázek
Pokuste se co největší konzistenci komponent
mobil 14 px
např. Velikost textů
tablet 18 px
desktop 16 px
velký desktop 18 px
Nejedná se pouze o fonty
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á
Mobilní a tablet designy navrhujte vždy pro
nejmenší možné rozlišení
Doporučení: mobil 320px a tablet 768px
Myslete na rychlostní optimalizaci
• 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é
Touch zařízení: Automaticky přehrávané
video na pozadí nefunguje
Myslete na výkon zařízení, pro které navrhujete weby
Nedělejte responzivní návrhy v 2@ nebo 3@
velikosti!
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/
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
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!
Otevřte si grafický návrh na reálných zařízeních v
reálných rozměrech
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
Děkuji za pozornost!
Tomáš Krejčí SuperKodéři | @tomkrej