Co by měl UXák vědět o responzivním webdesignu?

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í

www.scuk.cz & m.scuk.cz

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

Děkuji! !!!

@machal www.vzhurudolu.cz

facebook.com/VzhuruDolu martin@vzhurudolu.cz