14. mobil
14 px
např. Velikost textů
tablet
18 px
desktop
16 px
velký desktop
18 px
Nejedná se pouze o fonty
15. 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á
16. Mobilní a tablet designy
navrhujte vždy pro
nejmenší možné rozlišení
19. • 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é
25. 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 klientovi
Např. iPhone 6
750 × 1334px
375 × 667px
3x 6x
4x 9x
Jak spočítat?
RR = šírka / (DPI / 160)
iPhone = 750 / (320/160)
3) Myslí, že to
potřebuje kodér
Nepotřebuje
https://github.com/murd/psd-export-document-
retina-png/
26. 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
27. 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!
29. 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
