co by měl uxák vědět o responzivním webdesignu?
DESCRIPTION
Co by měl UXák vědět o responzivním webdesignu? Přednáška pro UX Monday Plzeň.TRANSCRIPT
11 věcí co by měl UXák
vědět o responzivním webdesignu
UX Monday Plzeň, 2. 6. 2014
Martin Michálek @machal
1. Mobily jsou
jako SEO: patří na začátek, ne na
konec procesu
SEO problém = MEO problém
„SEO nejde zapnout, SEO nejde nastavit, SEO nejde koupit jako houska na krámě, SEO nemůže být zabudované v systému pro správu webu, SEO nejde naprogramovat ani zakódovat do HTML…”
2. Navrhuj to
nejdříve pro mobily
Mobile First
Navrhujte nejprve pro mobilní zařízení, protože: !1) Mobilní svět roste 2) Nedostatek prostoru nás nutí zaměřit se na nejdůležitější 3) Rozšiřuje naše možnosti
Luke Wroblewski
Desktop Android iOS
Mobile First
Desktop First Mobile First
/* Desktop */.nav { … }!/* Mobile */@media (max-width: 480px) { .nav { … }}
/* Mobile */.nav { … }!/* Desktop */@media (min-width: 480px) { .nav { … }}
Mobile First v kódu
Layout jako vylepšení
3. Photoshop je zlý pán
photoshopkiller.com
PostPSD
4. Zapomeň na
stránky, navrhuj komponenty
Bootstrap, modulární systémy
5. Konzistentní
je víc než „propracovaně responzivní”
ceskatelevize.cz slevomat.cz
!
vzhurudolu.cz slap.cz
blesk.cz
6. Nenech to
pokazit pomalostí načítání
Rychlost načítání
1) Začít testovat
2) Co nejméně requestů 3) Co nejméně dat
7. Responzivní
raději než mobilní
http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web
8. Hodně malé, ale i
hodně velké displeje
Galaxy Star 240 × 320
FullHD 10%
Mobilní 11%
Desktop 79%
FullHD 1920 × 1080
9. Vektory,
ne bitmapy
Hardware pixel 320 × 480 640 × 960
CSS pixel 320 × 480 320 × 480
Vysokokapacitní displeje
Retina
hearth.png hearth_medium.png hearth_small.png hearth_small_retina.png !
Problém s bitmapami
10. Desktop UI never more!
Otevírání obsahu na najetí myši. Malé klikací plochy.
Lightboxy. Karusely.
11. Vezmi kódera
do party