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
![Page 1: Co by měl UXák vědět o responzivním webdesignu?](https://reader033.vdocuments.mx/reader033/viewer/2022042614/55632f96d8b42a57348b5403/html5/thumbnails/1.jpg)
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
![Page 2: Co by měl UXák vědět o responzivním webdesignu?](https://reader033.vdocuments.mx/reader033/viewer/2022042614/55632f96d8b42a57348b5403/html5/thumbnails/2.jpg)
1. Mobily jsou
jako SEO: patří na začátek, ne na
konec procesu
![Page 3: Co by měl UXák vědět o responzivním webdesignu?](https://reader033.vdocuments.mx/reader033/viewer/2022042614/55632f96d8b42a57348b5403/html5/thumbnails/3.jpg)
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…”
![Page 4: Co by měl UXák vědět o responzivním webdesignu?](https://reader033.vdocuments.mx/reader033/viewer/2022042614/55632f96d8b42a57348b5403/html5/thumbnails/4.jpg)
2. Navrhuj to
nejdříve pro mobily
![Page 5: Co by měl UXák vědět o responzivním webdesignu?](https://reader033.vdocuments.mx/reader033/viewer/2022042614/55632f96d8b42a57348b5403/html5/thumbnails/5.jpg)
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
![Page 6: Co by měl UXák vědět o responzivním webdesignu?](https://reader033.vdocuments.mx/reader033/viewer/2022042614/55632f96d8b42a57348b5403/html5/thumbnails/6.jpg)
Desktop Android iOS
Mobile First
![Page 7: Co by měl UXák vědět o responzivním webdesignu?](https://reader033.vdocuments.mx/reader033/viewer/2022042614/55632f96d8b42a57348b5403/html5/thumbnails/7.jpg)
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
![Page 8: Co by měl UXák vědět o responzivním webdesignu?](https://reader033.vdocuments.mx/reader033/viewer/2022042614/55632f96d8b42a57348b5403/html5/thumbnails/8.jpg)
Layout jako vylepšení
![Page 9: Co by měl UXák vědět o responzivním webdesignu?](https://reader033.vdocuments.mx/reader033/viewer/2022042614/55632f96d8b42a57348b5403/html5/thumbnails/9.jpg)
3. Photoshop je zlý pán
![Page 11: Co by měl UXák vědět o responzivním webdesignu?](https://reader033.vdocuments.mx/reader033/viewer/2022042614/55632f96d8b42a57348b5403/html5/thumbnails/11.jpg)
PostPSD
![Page 12: Co by měl UXák vědět o responzivním webdesignu?](https://reader033.vdocuments.mx/reader033/viewer/2022042614/55632f96d8b42a57348b5403/html5/thumbnails/12.jpg)
4. Zapomeň na
stránky, navrhuj komponenty
![Page 13: Co by měl UXák vědět o responzivním webdesignu?](https://reader033.vdocuments.mx/reader033/viewer/2022042614/55632f96d8b42a57348b5403/html5/thumbnails/13.jpg)
Bootstrap, modulární systémy
![Page 14: Co by měl UXák vědět o responzivním webdesignu?](https://reader033.vdocuments.mx/reader033/viewer/2022042614/55632f96d8b42a57348b5403/html5/thumbnails/14.jpg)
5. Konzistentní
je víc než „propracovaně responzivní”
![Page 15: Co by měl UXák vědět o responzivním webdesignu?](https://reader033.vdocuments.mx/reader033/viewer/2022042614/55632f96d8b42a57348b5403/html5/thumbnails/15.jpg)
ceskatelevize.cz slevomat.cz
!
vzhurudolu.cz slap.cz
blesk.cz
![Page 16: Co by měl UXák vědět o responzivním webdesignu?](https://reader033.vdocuments.mx/reader033/viewer/2022042614/55632f96d8b42a57348b5403/html5/thumbnails/16.jpg)
6. Nenech to
pokazit pomalostí načítání
![Page 17: Co by měl UXák vědět o responzivním webdesignu?](https://reader033.vdocuments.mx/reader033/viewer/2022042614/55632f96d8b42a57348b5403/html5/thumbnails/17.jpg)
![Page 18: Co by měl UXák vědět o responzivním webdesignu?](https://reader033.vdocuments.mx/reader033/viewer/2022042614/55632f96d8b42a57348b5403/html5/thumbnails/18.jpg)
Rychlost načítání
1) Začít testovat
2) Co nejméně requestů 3) Co nejméně dat
![Page 19: Co by měl UXák vědět o responzivním webdesignu?](https://reader033.vdocuments.mx/reader033/viewer/2022042614/55632f96d8b42a57348b5403/html5/thumbnails/19.jpg)
7. Responzivní
raději než mobilní
![Page 21: Co by měl UXák vědět o responzivním webdesignu?](https://reader033.vdocuments.mx/reader033/viewer/2022042614/55632f96d8b42a57348b5403/html5/thumbnails/21.jpg)
http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web
![Page 22: Co by měl UXák vědět o responzivním webdesignu?](https://reader033.vdocuments.mx/reader033/viewer/2022042614/55632f96d8b42a57348b5403/html5/thumbnails/22.jpg)
8. Hodně malé, ale i
hodně velké displeje
![Page 23: Co by měl UXák vědět o responzivním webdesignu?](https://reader033.vdocuments.mx/reader033/viewer/2022042614/55632f96d8b42a57348b5403/html5/thumbnails/23.jpg)
Galaxy Star 240 × 320
FullHD 10%
Mobilní 11%
Desktop 79%
FullHD 1920 × 1080
![Page 24: Co by měl UXák vědět o responzivním webdesignu?](https://reader033.vdocuments.mx/reader033/viewer/2022042614/55632f96d8b42a57348b5403/html5/thumbnails/24.jpg)
9. Vektory,
ne bitmapy
![Page 25: Co by měl UXák vědět o responzivním webdesignu?](https://reader033.vdocuments.mx/reader033/viewer/2022042614/55632f96d8b42a57348b5403/html5/thumbnails/25.jpg)
Hardware pixel 320 × 480 640 × 960
CSS pixel 320 × 480 320 × 480
Vysokokapacitní displeje
![Page 26: Co by měl UXák vědět o responzivním webdesignu?](https://reader033.vdocuments.mx/reader033/viewer/2022042614/55632f96d8b42a57348b5403/html5/thumbnails/26.jpg)
Retina
hearth.png hearth_medium.png hearth_small.png hearth_small_retina.png !
Problém s bitmapami
![Page 27: Co by měl UXák vědět o responzivním webdesignu?](https://reader033.vdocuments.mx/reader033/viewer/2022042614/55632f96d8b42a57348b5403/html5/thumbnails/27.jpg)
10. Desktop UI never more!
![Page 28: Co by měl UXák vědět o responzivním webdesignu?](https://reader033.vdocuments.mx/reader033/viewer/2022042614/55632f96d8b42a57348b5403/html5/thumbnails/28.jpg)
Otevírání obsahu na najetí myši. Malé klikací plochy.
Lightboxy. Karusely.
![Page 29: Co by měl UXák vědět o responzivním webdesignu?](https://reader033.vdocuments.mx/reader033/viewer/2022042614/55632f96d8b42a57348b5403/html5/thumbnails/29.jpg)
11. Vezmi kódera
do party
![Page 30: Co by měl UXák vědět o responzivním webdesignu?](https://reader033.vdocuments.mx/reader033/viewer/2022042614/55632f96d8b42a57348b5403/html5/thumbnails/30.jpg)