Your SlideShare is downloading. ×
0
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Úvod do responsivního web designu
Ú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,363

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,363
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

    ×