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

Úvod do responsivního web designu

on

  • 1,109 views

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.

Statistics

Views

Total Views
1,109
Views on SlideShare
602
Embed Views
507

Actions

Likes
0
Downloads
4
Comments
0

2 Embeds 507

http://www.dobryweb.cz 506
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • HTTP požadavky na fit.vut.cz
  • Vyhody LESSu, skeleton Martina
  • Vyhody LESSu, kostra Martina

Úvod do responsivního web designu Úvod do responsivního web designu Presentation Transcript

  • Úvod do responsivního web designu Václav Jirovský
  • Mobilní zařízení
  • Vlastnosti mobilních zařízení ● Stále zapnuté a u sebe ● Platební kanál ● Sociální kontext ● Rozšiřují realitu
  • 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…
  • Různé obrazovky a tak dále…
  • Proč řešit mobilní zařízení?
  • User experience Naštvaný uživatel jde jinam…
  • 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
  • Firebug DEMO
  • Ovládání webů z mobilních zařízení ● Dotykové ovládání • Prvky alespoň 7x7 mm • Hover peklo
  • Mobilní app, web nebo RWD?
  • Mobilní app
  • 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??
  • Mobilní web
  • 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,…)
  • Responsivní web design
  • RWD ● Server nezajímá zařízení, pošle stejnou stránku • Pomocí CSS3 a HTML5 si zařízení vyzobe co chce
  • RWD ● Není nutné řešit duplikátní obsah či provázanost verzí • Stejná URL – doporučovaný postup od vyhledávačů ● obrázky, JavaScripty, apod.
  • Implementace RWD
  • 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 { … } }
  • LESS + Media queries DEMO
  • Flexible layout
  • Viewport ● Mobilní prohlížeče zmenšují nepřipravené stránky <meta name="viewport" content="width=device-width">
  • 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
  • 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/
  • 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%; }
  • Responsive objects DEMO
  • 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/
  • Data ● Obrázky - Lazy loading • http://www.appelsiini.net/projects/lazyload ● JavaScript • Modernizr – http://modernizr.com ● Sprites, CSS min+combine
  • Dotykové ovládání ● Hammer.js – can touch this! http://eightmedia.github.io/hammer.js/
  • Dotazy
  • 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