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.

Úvod do responsivního web designu

2.402 Aufrufe

Veröffentlicht am

V poslední době se prodává více smartphonů než počítačů, ale většina webů není na tento trend připravena a jsou téměř nepoužitelné z mobilních zařízení.
Na přednášce si popovídáme o důvodech k použití responsivního web designu (RWD), projdeme si základy tvorby RWD a jeho klady a zápory. K přednášce nejsou nutné pokročilé znalosti, stačí základní znalosti HTML+CSS.

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

Úvod do responsivního web designu

  1. 1. Úvod do responsivního web designu Václav Jirovský
  2. 2. Vlastnosti mobilních zařízení ● Stále zapnuté a u sebe ● Platební kanál ● Sociální kontext ● Rozšiřují realitu
  3. 3. Různé typy mobilních zařízení Mobil Minitablet/Phablet Tablet Lumia 1020 4,5” 768x1280 iPhone 5S 4” 1136×640 Galaxy S4 5” 1080x1920 Galaxy Note 5,3” 800×1280 iPad mini 7,87” 768×1024 Nexus 7 7,87” 800x1280 iPad 9,7” 1536x2048 Surface 10,6” 1366×768 Xperia Z 10,1" 1920x1200 a tak dále…
  4. 4. Různé obrazovky a tak dále…
  5. 5. Proč řešit mobilní zařízení?
  6. 6. Mobilní přístupy Web KoalaPhone.com po uveřejnění na reddit.com • V ČR průměrně 20% přístupů Zdroj: netmarketshare.com, Q1/2015
  7. 7. User experience Naštvaný uživatel jde jinam…
  8. 8. Google „mobilegeddon“ ● 21. 4. 2015 – Google přidá do algoritmu pro vyhledávání zohlednění mobilní přístupnosti webu • http://googlewebmastercentral.blogspot.sk/2015/02/finding-more- mobile-friendly-search.html
  9. 9. Jde o FUP
  10. 10. Jde o rychlost ● Každá 1 sekunda načítání stránky sníží konverzní poměr až o 7%
  11. 11. Firebug DEMO
  12. 12. Takže...jak se dostat na mobil. zařízení?
  13. 13. Jak se dostat na mobilní zařízení? ● Mobilní aplikace ● Mobilní web ● Responsivní web
  14. 14. Mobilní app, web nebo RWD?
  15. 15. Mobilní app
  16. 16. Nevýhody Výhody • Nutné dělat pro všechny platformy (jiné jazyky) zvlášť (cross řešení nejsou 100%) -> dražší vývoj • Certifikace ve storech  • Horší aktualizace • Každý web vlastní app?? • Rozšířené API oproti webům (push notifikace, gps, fotoaparát apod.) • Přehled nad stahovanými daty • Cílení, marketing
  17. 17. Mobilní web
  18. 18. Nevýhody Výhody • Přesměrovávání (detekce zařízení) • Provázanost verzí (sdílení) • Duplicitní obsah (SEO) • Každá platforma vlastní verzi webu? (m.domena, t.domena,…) • Přehled nad stahovanými daty • Snadná aktualizace • Snadné vytvoření
  19. 19. Responsivní web design
  20. 20. RWD ● Server nezajímá zařízení, pošle stejnou stránku • Pomocí CSS3 a HTML5 si zařízení vyzobe co chce
  21. 21. RWD ● Není nutné řešit duplikátní obsah či provázanost verzí • Stejná URL – doporučovaný postup od vyhledávačů ● obrázky, JavaScripty, apod.
  22. 22. Navrhujeme RWD
  23. 23. Ovládání webů z mobilních zařízení ● Dotykové ovládání • Prvky alespoň 7x7 mm • Hover peklo
  24. 24. Mobile first
  25. 25. Hamburger menu
  26. 26. Responsivní navigace ● Javascriptem do <select> http://css-tricks.com/convert-menu-to-dropdown/ ● Přestylování + skok do patičky http://www.vzhurudolu.cz/projects/snowkidz-mobile- demo/custom-mobile/ ● Přestylování + vyjíždění http://twitter.github.com/bootstrap/ ● http://bradfrostweb.com/blog/web/responsive-nav- patterns/
  27. 27. Carousel ● http://shouldiuseacarousel.com/
  28. 28. Implementace RWD
  29. 29. Media queries ● Podmíněné načítání stylů @media screen and (max-width: 320px) { #menu { … } } @media screen (min-width: 320px) and (max-width: 1024px) { #menu { … } }
  30. 30. Media queries DEMO
  31. 31. Flexible layout
  32. 32. Viewport ● Mobilní prohlížeče zmenšují nepřipravené stránky <meta name="viewport" content="width=device-width">
  33. 33. Obrázky ● Obrázky se musí zmenšit do layoutu ● Neřeší stahování 20Mpixel obrázků na mobilu .map img { max-width: 100%; height: auto; }
  34. 34. Responsivní obrázky ● Picturefill (front-end JS) https://github.com/scottjehl/picturefill ● Adaptive Images (back-end PHP) http://adaptive-images.com/ ● Sencha.IO (cloud) http://www.sencha.com/learn/how-to-use-src-sencha-io/ ● <picture> tag http://caniuse.com/#feat=picture <span data-src="medium.jpg" data-media="(min-width: 400px)">
  35. 35. Použití vektorové grafiky ● SVG ● Webicon
  36. 36. Webicon ● Font Awesome • http://fortawesome.github.io/Font-Awesome/ ● Twitter Bootstrap – Glyphicons • http://getbootstrap.com/components/ ● IcoMoon • https://icomoon.io
  37. 37. DEMO iconmoon
  38. 38. SVG ● XML ● Lze snadno generovat programově • http://caniuse.com/#search=svg • http://www.w3schools.com/svg/svg_examples.asp
  39. 39. Responsivní elementy <iframe>,<video>,… .map { position: relative; width: 100%; height: 0px; padding-bottom: 60%; margin-bottom: 1.5em; } .map iframe { position: absolute; width: 100%; height: 100%; }
  40. 40. Data ● Obrázky - Lazy loading • http://www.appelsiini.net/projects/lazyload ● JavaScript • Modernizr – http://modernizr.com ● Sprites, CSS min+combine
  41. 41. Sprites
  42. 42. Sprites - generování ● např. http://csssprites.org/ /** sprite: mysprite; sprite-image: url('../img/mysprite.png'); sprite-layout: vertical */ #logo { width: 50px; height: 50px; background-repeat: no-repeat; background-position: top right; background-image: url(../img/logo.png); /** sprite-ref: mysprite; sprite-alignment: right */ }
  43. 43. Dotykové ovládání ● Hammer.js – can touch this! http://eightmedia.github.io/hammer.js/
  44. 44. Automatizace ..aneb jak se z toho nezbláznit
  45. 45. Prepros ● Agent sledující změny v projektu ● Funkce zdarma • CSS preprocesory (LESS, Sass, SCSS, Stylus) • JavaScript concate (+minimalize, uglify) • Optimalizace obrázků • Live browser refresh ● Windows, Mac OS X
  46. 46. Prepros
  47. 47. Gulp.js a Grunt.js ● Automatizační nástroje ● Jednotlivé tasky • Generování spritů, ftp-deploy,… ● Node.js – cross-platform
  48. 48. Jak změřím rychlost? ● Fyzicky na špatném připojení  ● Google PageSpeed • https://developers.google.com/speed/pagespeed/
  49. 49. Dotazy
  50. 50. Závěr ● Velice děkuji za použité slidy od Martina Michálka (www.vzhurudolu.cz) ● Díky za pozornost! @vjirovsky vaclav.jirovsky@dobryweb.cz

×