Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

Co by měl UXák vědět o responzivním webdesignu?
Přednáška pro UX Monday Plzeň.

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

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

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


×