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.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Úvod do responsivního web designu

1,059
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í. …

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
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,059
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
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