Úvod do responsivního web designu

  • 1,020 views
Uploaded 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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,020
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
5
Comments
0
Likes
0

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
  • Vyhody LESSu, kostra Martina

Transcript

  • 1. Úvod do responsivního web designu Václav Jirovský
  • 2. Mobilní zařízení
  • 3. Vlastnosti mobilních zařízení ● Stále zapnuté a u sebe ● Platební kanál ● Sociální kontext ● Rozšiřují realitu
  • 4. Různé typy mobilních zařízení Mobil iPhone 5S 4” 1136×640 Lumia 1020 4,5” 768x1280 Galaxy S4 5” 1080x1920 Minitablet/Phablet Galaxy Note 5,3” 800×1280 iPad mini 7,87” 768×1024 Nexus 7 7,87” 800x1280 Tablet iPad 9,7” 1536x2048 Surface 10,6” 1366×768 Xperia Z 10,1" 1920x1200 a tak dále…
  • 5. Různé obrazovky a tak dále…
  • 6. Proč řešit mobilní zařízení?
  • 7. User experience Naštvaný uživatel jde jinam…
  • 8. User experience ● Rychlost českých sítí + spousty HTTP požadavků Stránka se dlouho načítá Zdroj: dsl.cz ● Špatné ovládání dotykem
  • 9. Firebug DEMO
  • 10. Ovládání webů z mobilních zařízení ● Dotykové ovládání • Prvky alespoň 7x7 mm • Hover peklo
  • 11. Mobilní app, web nebo RWD?
  • 12. Mobilní app
  • 13. Nevýhody • Nutné dělat pro všechny platformy (jiné jazyky) zvlášť (cross řešení nejsou 100%) -> dražší vývoj Výhody • Rozšířené API oproti webům (push notifikace, gps, fotoaparát apod.) • Přehled nad stahovanými daty • Certifikace ve storech  • Cílení, marketing • Horší aktualizace • Každý web vlastní app??
  • 14. Mobilní web
  • 15. Nevýhody • Přesměrovávání (detekce zařízení) Výhody • Přehled nad stahovanými daty • Snadná aktualizace • Provázanost verzí (sdílení) • Snadné vytvoření • Duplicitní obsah (SEO) • Každá platforma vlastní verzi webu? (m.domena, t.domena,…)
  • 16. Responsivní web design
  • 17. RWD ● Server nezajímá zařízení, pošle stejnou stránku • Pomocí CSS3 a HTML5 si zařízení vyzobe co chce
  • 18. RWD ● Není nutné řešit duplikátní obsah či provázanost verzí • Stejná URL – doporučovaný postup od vyhledávačů ● obrázky, JavaScripty, apod.
  • 19. Implementace RWD
  • 20. 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 { … } }
  • 21. LESS + Media queries DEMO
  • 22. Flexible layout
  • 23. Viewport ● Mobilní prohlížeče zmenšují nepřipravené stránky <meta name="viewport" content="width=device-width">
  • 24. Obrázky ● Obrázky se musí zmenšit do layoutu .map img { max-width: 100%; height: auto; } ● Neřeší stahování 20Mpixel obrázků na mobilu
  • 25. Responsivní obrázky ● Picturefill (front-end JS) https://github.com/scottjehl/picturefill <span data-src="medium.jpg" data-media="(min-width: 400px)"> ● Adaptive Images (back-end PHP) http://adaptive-images.com/ ● Sencha.IO (cloud) http://www.sencha.com/learn/how-to-use-src-sencha-io/
  • 26. 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%; }
  • 27. Responsive objects DEMO
  • 28. 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-mobiledemo/custom-mobile/ ● Přestylování + vyjíždění http://twitter.github.com/bootstrap/ ● http://bradfrostweb.com/blog/web/responsive-navpatterns/
  • 29. Data ● Obrázky - Lazy loading • http://www.appelsiini.net/projects/lazyload ● JavaScript • Modernizr – http://modernizr.com ● Sprites, CSS min+combine
  • 30. Dotykové ovládání ● Hammer.js – can touch this! http://eightmedia.github.io/hammer.js/
  • 31. Dotazy
  • 32. Závěr ● Velice děkuji za použité slidy od Martina Michálka (www.vzhurudolu.cz) ● Díky za pozornost! @vaclavjirovsky vaclav.jirovsky@dobryweb.cz