• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive Web Design: buzzword or revolution?
 

Responsive Web Design: buzzword or revolution?

on

  • 1,963 views

Presentation given at http://techcamp.pl/ event in Kraków, Poland.

Presentation given at http://techcamp.pl/ event in Kraków, Poland.

Statistics

Views

Total Views
1,963
Views on SlideShare
1,797
Embed Views
166

Actions

Likes
2
Downloads
19
Comments
0

4 Embeds 166

https://www.rebelmouse.com 134
https://twitter.com 18
http://gamrev.meme3.dev 10
http://gamrev.livecubeapp.com 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

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

    Responsive Web Design: buzzword or revolution? Responsive Web Design: buzzword or revolution? Presentation Transcript

    • #rwd: revolution? Buzzword orWojtek Zając KRAKÓW 21.02.2013
    • Hi!@theanxyDesigninclusive.comX-Team.comXHTMLized.com
    • BUZZ·WORD noun
    • MVP Cloud computing Flash HTML5long tail next generation Web 2.0 AJAX
    • Is #RWD* the new one?* Responsive Web Design
    • n Czy #RWD* to kolejny z nich?* Responsive Web Design o
    • mobilerevolution
    • 46% of population has accessto a mobile phone (of any kind) http://www.economist.com/blogs/babbage/2012/10/global-mobile-usage?fsrc=scn/tw_ec/sim_earth http://www.flickr.com/photos/captain_die/7697183522/
    • 1,083billion of smartphones used worldwide http://www.lukew.com/ff/entry.asp?1644 http://www.flickr.com/photos/lng0004/7881151510/
    • 59%of smartphone owners use them every day http://www.thinkwithgoogle.com/mobileplanet/en/
    • content strategy http://www.flickr.com/photos/yourdon/2715583000/
    • http://xkcd.com/1174/
    • context != intent
    • 85% of US tablet ownersuse them while watching tv http://blogs.forrester.com/sarah_rotman_epps/12-04-11-the_tablet_tv_connection
    • “Mobile must never be a dumbed-down, limited experience.” — Steven Hoober http://www.flickr.com/photos/chrisjl/5664339020/
    • Content parity http://alistapart.com/article/your-content-now-mobile
    • Designingfor people,not devices http://www.flickr.com/photos/epsos/5644801034/
    • Inclusive Design
    • http://www.flickr.com/photos/adforce1/4425475660/
    • embrace long tailof devices
    • http://www.flickr.com/photos/brad_frost/
    • CANVAS-IN vsContent-out
    • ProgressiveEnhancement http://www.flickr.com/photos/aigle_dore/4089511514/
    • Possible approaches• dedicated mobile websites• Responsive Web Design • “Mobile last” • Mobile first • RESS
    • 3 steps towards `````````````````` responsive website
    • 1. Media Queries <meta name="viewport" content="width=device-width, initial-scale=1.0"> @media screen and (min-width: 50em) { article { float::left; } }
    • @mediaonly screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (-o-min-device-pixel-ratio: 3/2),only screen and (min--moz-device-pixel-ratio: 1.5),only screen and (min-device-pixel-ratio: 1.5) { /* CSS styles */}Detecting high density displays
    • check backwardscompability (caniuse.com)
    • 2. adapt your interface
    • 1. linearize your content http://www.flickr.com/photos/stuartpilbrow/3565808509/
    • 2. adapt to mobile screen size http://www.flickr.com/photos/stuartpilbrow/3565808509/
    • 3. input device independence http://www.flickr.com/photos/stuartpilbrow/3565808509/
    • 4. utilize touch events http://www.flickr.com/photos/stuartpilbrow/3565808509/
    • 5. common html http://www.flickr.com/photos/stuartpilbrow/3565808509/
    • DEMO
    • 3. responsive media
    • 1.25MBaverage page weight (2012) 86% of responsive websites don’t optimize resources http://www.lukew.com/ff/entry.asp?1681 http://wpdaily.co/responsive-server-side/
    • Images are often the biggest part http://mobile.httparchive.org/
    • responsive imagesadaptive-images.com
    • optimize front-endperformance!
    • xui,a lightweight js library xuijs.com
    • responsive design process
    • responsiveprototyping (uxpin.com)
    • testing breakpointsquirktools.com/screenfly
    • css style guides http://www.starbucks.com/static/reference/styleguide/
    • creatinga css style guide (.net magazine)
    • CSS frameworks
    • Mobile emulators http://www.mobilexweb.com/emulators
    • preview allyour devicessimultaneously(Adobe Edge Inspect)
    • Stay futurefriendly.
    • …Learn more Books: WEB: @rwd, http://mobile.smashingmagazine.com http://bradfrost.github.com/this-is-responsive/
    • Thanks! Q&AWojtek Zając (@theanxy)http://www.slideshare.net/wojciechzajac This work is licensed under a Creative Commons Attribution 3.0 Unported License