Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Typické chyby responzivních podkladů

124 views

Published on

Slajdy z #frontendisti z 23. 6. 2016

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Typické chyby responzivních podkladů

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

×