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

http://www.nezastavitelni.cz/

http://www.barzilaidesign.com/projects/

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