Úvod do responsivního web designu

2,012 views
1,715 views

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,012
On SlideShare
0
From Embeds
0
Number of Embeds
696
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • HTTP požadavky na fit.vut.cz
  • Vyhody LESSu, skeleton Martina
  • Ú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

    ×