• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive Web Design: A Deep-Dive Crash Course
 

Responsive Web Design: A Deep-Dive Crash Course

on

  • 946 views

Responsive Web Design is a very hot topic in web development. Using the web via devices will soon exceed using it via a desktop or laptop. As developers, we need to make complete, rich web experiences ...

Responsive Web Design is a very hot topic in web development. Using the web via devices will soon exceed using it via a desktop or laptop. As developers, we need to make complete, rich web experiences for all devices. We need to be responsive. This presentation is a deep-dive crash course on just that.

Statistics

Views

Total Views
946
Views on SlideShare
940
Embed Views
6

Actions

Likes
2
Downloads
0
Comments
0

1 Embed 6

https://twitter.com 6

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

    Responsive Web Design: A Deep-Dive Crash Course Responsive Web Design: A Deep-Dive Crash Course Presentation Transcript

    • RESPONSIVEWEBDESIGNMatt Smith / @AllThingsSmittyA DEEP-DIVE CRASH COURSE
    • ?
    • 2007
    • http://bit.ly/QnmeZ4
    • http://bit.ly/qo0qVk“Everyone once in a while arevolutionary product comesalong that changes everything.”
    • http://bit.ly/12sLpv8
    • http://bit.ly/12sLpv8
    • http://thebea.st/rq9jCj
    • http://bit.ly/17VwlLf
    • http://bit.ly/XvuRWT0204060801001201402007 2008 2009 2010 2011 2012Global iPhone sales(in million units)
    • http://bit.ly/XvuRWT01002003004005002009 2010 2011 2012Global Android smartphone sales(in million units)
    • http://bit.ly/XvuRWT0501001502002503003504004505002007 2008 2009 2010 2011 2012WindowsRIMSymbianiPhoneAndroidGlobal smartphone sales(in million units)
    • http://read.bi/10SDQm4
    • http://read.bi/MvOtBk0.010.020.030.040.050.060.0April 2009 May 2010 May 2011 April 2012Percentage of U.S. mobile web use
    • http://bit.ly/zE1zgpThe penetration of desktop and laptopownership in the U.S. is the same today asit was in 2007.
    • mobile-only sites
    • click for the “full desktop site”
    • Mobile web use will continue to surge overthe next 5 years at a rate of 66% each year.http://bit.ly/nqdf
    • http://bit.ly/17zP3rQ
    • http://bit.ly/197Ma09
    • http://bit.ly/17zP3rQ
    • http://bit.ly/109yJsn
    • http://slidesha.re/MrioZs
    • http://slidesha.re/MrioZs
    • http://bit.ly/16HYLdy
    • http://bit.ly/16I2V5e
    • http://bit.ly/10ZlqkC
    • MAY252010
    • Responsive Web Design
    • Fluid Layout + CSS3 Media Queries+ Fluid Images/Media = RWD
    • FLUIDLAYOUT
    • ?
    • Fancy Markup + CSS = Grid System
    • Grid Systems 101
    • @grid-types {.fixed {width: 960px; /* pixel-based */}.fluid {width: 75%; /* percent-based */}.elastic {width: 60em; /* proportion-based */}.hybrid {height: 1.25em; /* combination */margin-left: 6.191495%;}}
    • @grid-types {.fixed {width: 960px; /* pixel-based */}.fluid {width: 75%; /* percent-based */}.elastic {width: 60em; /* proportion-based */}.hybrid {height: 1.25em; /* combination */margin-left: 6.191495%;}}
    • @grid-types {.fixed {width: 960px; /* pixel-based */}.fluid {width: 75%; /* percent-based */}.elastic {width: 60em; /* proportion-based */}.hybrid {height: 1.25em; /* combination */margin-left: 6.191495%;}}
    • @grid-types {.fixed {width: 960px; /* pixel-based */}.fluid {width: 75%; /* percent-based */}.elastic {width: 60em; /* proportion-based */}.hybrid {height: 1.25em; /* combination */margin-left: 6.191495%;}}
    • the web is not fixed width
    • http://bit.ly/10AcqLs
    • <div class="container"><div class="grid"><div class="one-third-column">.container {margin: 5em;padding: 0 1em;max-width: 85%;}.grid { padding: 1em 0 5em; }.one-third-column { width: 33.333333333%;}
    • target fluidity
    • http://bit.ly/YnNo5Y
    • (target pixel value / context pixel value) *100 = dimension value in percentage
    • .one-third-column {margin: 0 3.317535545023697% 0 0; /*21px / 633px */width: 31.1216429699842%; /* 197px /633px */}h1 {width: calc(1/6 * 100%); /*16.66666666666667px */}
    • http://bit.ly/ww3TNX
    • CSS3MEDIAQUERIES
    • <link rel="stylesheet" type="text/css"href="main.css" media="screen" /><link rel="stylesheet" type="text/css"href="print.css" media="print" />
    • <link rel="stylesheet" type="text/css"media="screen and (max-device-width:480px)" href="small.css" />
    • “Breakpoints”
    • (max-device-width: 480px)@media only screen and (max-device-width:480px) {.column {float: none;}}breakpoint
    • @mediaonly screenand (min-device-pixel-ratio: 2)and (min-width: 320px),only screenand (min-resolution: 192dpi)and (min-resolution: 2dppx) {/* small screens, Retina display */.column {float: none;}}
    • @media only screen and (min-width: 320px){/* small screens */}@media only screen and (min-width: 700px){/* medium screens */}@media only screen and (min-width:1300px) {/* large screens */}
    • don‟t rely on device dimensions
    • http://bit.ly/LZo4uS
    • “It‟s not about what happens at thebreakpoints, it‟s about what happensbetween the breakpoints.”– JEREMY KEITHhttp://bit.ly/IyLnvL
    • FLUIDIMAGES/MEDIA
    • img[class*="scale"] {max-width: 100%;height: auto;}.video iframe,.video object,.video embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
    • Responsive Images
    • <picture><source media="(min-width: 40em)"srcset="big.jpg 1x, big-hd.jpg 2x"><source srcset="small.jpg 1x, small-hd.jpg 2x"><img src="small.jpg" alt=""></picture>
    • http://bit.ly/Ska86f
    • testing across devices
    • http://bit.ly/159ImPj
    • http://bit.ly/GVXkNu
    • http://bit.ly/11Z5Rq0
    • http://bit.ly/p325bW
    • disruption will only accelerate
    • http://bit.ly/XR8O7U
    • one web
    • http://bit.ly/YjCtKylisten to your peers
    • MYTHSABOUTRWD
    • “People want to do different things onmobile, so one adaptive experience is a badidea.”http://bit.ly/10KHnOd
    • “Responsive Web Design produces badperformance.”http://bit.ly/Uh5czr
    • “Responsive sites/apps require more codeand more testing.”
    • By 2015, there will be one mobile phone forevery person on Earth.Google Internal Data
    • More than half your customers won‟trecommend your business to a friend if youhave a bad mobile site.http://bit.ly/qCcpl3
    • http://bit.ly/Yd0LmjWhen someone searches and finds yourmobile site:• 61% of them will call you• 59% will visit you• 70% of mobile users compare prices• 65% read product reviews• 50% of mobile searches have lead topurchases
    • this is just the tip of the iceberghttp://slidesha.re/14HG8RJ
    • http://slidesha.re/14HG8RJ
    • remember…
    • Responsive Web Design is not mobile design
    • Responsive Web Design does not have totake more time, or cost more money
    • Responsive Web Design is worth it
    • “Responsive Web Design rocks. It‟s likeMotörhead playing „Ace of Spades‟ atStonehenge…on an asteroid.”– BRUCE LAWSONFuture Insights Live, April 30, 2013
    • Responsive Web Designhttp://alistapart.com/article/responsive-web-design +http://www.abookapart.com/products/responsive-web-designImplementing Responsive Web Designhttp://www.implementingresponsivedesign.com/Adaptive Web Designhttp://easy-readers.net/books/adaptive-web-design/A New Responsive Design Processhttp://www.netmagazine.com/features/new-responsive-design-process
    • Matt Smith / @AllThingsSmitty