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.

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

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

20. Responsivní web
design

21. RWD
● Server nezajímá zařízení, pošle stejnou stránku
• Pomocí CSS3 a HTML5 si zařízení vyzobe co chce

22. RWD
● Není nutné řešit duplikátní obsah či
provázanost verzí
• Stejná URL – doporučovaný postup od vyhledávačů
● obrázky, JavaScripty, apod.

23. Navrhujeme RWD

24. Ovládání webů z mobilních zařízení
● Dotykové ovládání
• Prvky alespoň 7x7 mm
• Hover peklo

25. Mobile first

26. Hamburger menu

27. 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/

28. Carousel
● http://shouldiuseacarousel.com/

29. Implementace RWD

30. 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 {
…
}
}

31. Media queries DEMO

32. Flexible layout

33. Viewport
● Mobilní prohlížeče zmenšují nepřipravené
stránky
<meta name="viewport"
content="width=device-width">

34. 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;
}

35. 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)">

36. Použití vektorové grafiky
● SVG
● Webicon

37. Webicon
● Font Awesome
• http://fortawesome.github.io/Font-Awesome/
● Twitter Bootstrap – Glyphicons
• http://getbootstrap.com/components/
● IcoMoon
• https://icomoon.io

38. DEMO iconmoon

39. SVG
● XML
● Lze snadno generovat programově
• http://caniuse.com/#search=svg
• http://www.w3schools.com/svg/svg_examples.asp

40. 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%;
}

41. Data
● Obrázky - Lazy loading
• http://www.appelsiini.net/projects/lazyload
● JavaScript
• Modernizr – http://modernizr.com
● Sprites, CSS min+combine

42. Sprites

43. 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 */ }

44. Dotykové ovládání
● Hammer.js – can touch this!
http://eightmedia.github.io/hammer.js/

45. Automatizace
..aneb jak se z toho nezbláznit

46. 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

47. Prepros

48. Gulp.js a Grunt.js
● Automatizační nástroje
● Jednotlivé tasky
• Generování spritů, ftp-deploy,…
● Node.js – cross-platform

49. Jak změřím rychlost?
● Fyzicky na špatném připojení 
● Google PageSpeed
• https://developers.google.com/speed/pagespeed/

50. Dotazy

51. 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