Your SlideShare is downloading. ×
Úvod do responsivního web designu
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Úvod do responsivního web designu

1,257

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í. …

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
1,257
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • HTTP požadavky na fit.vut.cz
  • Vyhody LESSu, skeleton Martina
  • Transcript

    • 1. Úvod do responsivního web designu Václav Jirovský
    • 2. Vlastnosti mobilních zařízení ● Stále zapnuté a u sebe ● Platební kanál ● Sociální kontext ● Rozšiřují realitu
    • 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. Různé obrazovky a tak dále…
    • 5. Proč řešit mobilní zařízení?
    • 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. User experience Naštvaný uživatel jde jinam…
    • 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. Jde o FUP
    • 10. Jde o rychlost ● Každá 1 sekunda načítání stránky sníží konverzní poměr až o 7%
    • 11. Firebug DEMO
    • 12. Takže...jak se dostat na mobil. zařízení?
    • 13. Jak se dostat na mobilní zařízení? ● Mobilní aplikace ● Mobilní web ● Responsivní web
    • 14. Mobilní app, web nebo RWD?
    • 15. Mobilní app
    • 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. Mobilní web
    • 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. Responsivní web design
    • 20. RWD ● Server nezajímá zařízení, pošle stejnou stránku • Pomocí CSS3 a HTML5 si zařízení vyzobe co chce
    • 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. Navrhujeme RWD
    • 23. Ovládání webů z mobilních zařízení ● Dotykové ovládání • Prvky alespoň 7x7 mm • Hover peklo
    • 24. Mobile first
    • 25. Hamburger menu
    • 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. Carousel ● http://shouldiuseacarousel.com/
    • 28. Implementace RWD
    • 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. Media queries DEMO
    • 31. Flexible layout
    • 32. Viewport ● Mobilní prohlížeče zmenšují nepřipravené stránky <meta name="viewport" content="width=device-width">
    • 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. 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. Použití vektorové grafiky ● SVG ● Webicon
    • 36. Webicon ● Font Awesome • http://fortawesome.github.io/Font-Awesome/ ● Twitter Bootstrap – Glyphicons • http://getbootstrap.com/components/ ● IcoMoon • https://icomoon.io
    • 37. DEMO iconmoon
    • 38. SVG ● XML ● Lze snadno generovat programově • http://caniuse.com/#search=svg • http://www.w3schools.com/svg/svg_examples.asp
    • 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. Data ● Obrázky - Lazy loading • http://www.appelsiini.net/projects/lazyload ● JavaScript • Modernizr – http://modernizr.com ● Sprites, CSS min+combine
    • 41. Sprites
    • 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. Dotykové ovládání ● Hammer.js – can touch this! http://eightmedia.github.io/hammer.js/
    • 44. Automatizace ..aneb jak se z toho nezbláznit
    • 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. Prepros
    • 47. Gulp.js a Grunt.js ● Automatizační nástroje ● Jednotlivé tasky • Generování spritů, ftp-deploy,… ● Node.js – cross-platform
    • 48. Jak změřím rychlost? ● Fyzicky na špatném připojení  ● Google PageSpeed • https://developers.google.com/speed/pagespeed/
    • 49. Dotazy
    • 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

    ×