responsive web design
DESCRIPTION
TRANSCRIPT
![Page 1: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/1.jpg)
Responsive Web Design
“The Way is shaped by use,But then the shape is lost.Do not hold fast to shapesBut let sensation flow into the worldAs a river courses down to the sea.—DAO DE JING, section 32, “Shapes”
![Page 2: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/2.jpg)
Resources
•Ethan Marcotte - Responsive Web Design (A Book Apart)
•Smashing Magazine - (http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/)
•A Dao of Web Design (http://www.alistapart.com/articles/dao/)
![Page 3: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/3.jpg)
What is responsive web design?
![Page 4: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/4.jpg)
![Page 5: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/5.jpg)
![Page 6: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/6.jpg)
![Page 7: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/7.jpg)
![Page 8: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/8.jpg)
![Page 9: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/9.jpg)
![Page 10: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/10.jpg)
![Page 11: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/11.jpg)
![Page 12: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/12.jpg)
![Page 13: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/13.jpg)
![Page 14: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/14.jpg)
THE INGREDIENTS
![Page 15: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/15.jpg)
SIMPLES
![Page 16: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/16.jpg)
THREE INGREDIENTS
•A flexible, grid-based layout
•Flexible images and media
•Media queries - a module from the CSS3 specification
![Page 17: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/17.jpg)
THREE INGREDIENTS
•A flexible, grid-based layout
![Page 18: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/18.jpg)
Flexible Grid Based Layout
![Page 19: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/19.jpg)
Flexible - Step 1
•Typography
![Page 20: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/20.jpg)
The following slides contain maths
![Page 21: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/21.jpg)
“THE ALGORITHM”
target ÷ context = result
![Page 22: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/22.jpg)
“THE ALGORITHM”
target ÷ context = result24px ÷ 16px = 1.5em
![Page 23: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/23.jpg)
Flexible - Step 1
•Typography
body {font-size: 100%}
h1 {font-size: 1.5em /* 24px / 16px */}
h2 {font-size: 1.25em /* 20px / 16px */}
![Page 24: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/24.jpg)
Flexible - Step 2
•Typography
•Layout
![Page 25: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/25.jpg)
Flexible - Step 2
•Typography
•Layout
![Page 26: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/26.jpg)
The following slides contain maths
![Page 27: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/27.jpg)
“THE ALGORITHM”
target ÷ context = result
![Page 28: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/28.jpg)
Flexible Grid Based Layout
![Page 29: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/29.jpg)
“THE ALGORITHM”620 ÷ 1024px = 0.60546875 (header)
360 ÷ 1024px = 0.3515625 (nav)
730 ÷ 1024px = 0.712890625 (article)
250 ÷ 1024px = 0.244240625 (sidebar)
target ÷ context = result
![Page 30: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/30.jpg)
“THE ALGORITHM”header { width: 60.546875% /* 620 / 1024 */}
nav { width: 35.15625% /* 360 / 1024 */}
![Page 31: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/31.jpg)
![Page 32: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/32.jpg)
“THE ALGORITHM”
target ÷ context = result
![Page 33: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/33.jpg)
SETTING MARGINS & PADDINGS
• If the next TYPE element is 11px & is nested within the H1 then use the following11 / 24 = 0.458333333333333em
• When setting flexible margins on an element, your context is the width of the element’s container.
• When setting flexible padding on an element, your context is the width of the element itself. Which makes sense, if you think about the box model: we’re describing the padding in relation to the width of the box itself.
• DO NOT ROUND UP.
![Page 34: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/34.jpg)
Flexible Grid Based Layout
![Page 35: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/35.jpg)
THREE INGREDIENTS
•A flexible, grid-based layout
•Flexible images and media
•Media queries - a module from the CSS3 specification
![Page 36: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/36.jpg)
THREE INGREDIENTS
•A flexible, grid-based layout
•Flexible images and media
•Media queries - a module from the CSS3 specification
![Page 37: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/37.jpg)
Flexible Images / Media
•Web is not just text
•Flickr
•YouTube
•Vimeo
•more more more.....
![Page 38: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/38.jpg)
![Page 39: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/39.jpg)
Golden Egg
img {max-width: 100%; }
![Page 40: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/40.jpg)
Golden Egg cont...
img,embed,object,video {
max-width: 100%;
}
![Page 41: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/41.jpg)
IE6 - you bastard!
img,embed,object,video {
max-width: 100%;
}
![Page 42: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/42.jpg)
IE6 - you bastard!IE Specific Style Sheetimg { width: 100%;}
![Page 43: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/43.jpg)
IE7 - you bastard!
http://unstoppablerobotninja.com/entry/fluid-images#code
![Page 44: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/44.jpg)
Background Images
•FAUX columns
•But that's fine for a fixed layout, but what about our responsive design?
.blog {background: #F8F5F2 url("blog-bg.png") repeat-y 50% 0;}
![Page 45: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/45.jpg)
Background Images
• CSS3 property called background-size (http://bkaprt.com/rwd/20/), browser support is still pretty immature
• Scott Robbin’s jQuery Backstretch plugin (http://bkaprt.com/rwd/21/) simulates resizable background images on the body element.
![Page 46: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/46.jpg)
THREE INGREDIENTS
•A flexible, grid-based layout
•Flexible images and media
•Media queries - a module from the CSS3 specification
![Page 47: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/47.jpg)
THREE INGREDIENTS
•A flexible, grid-based layout
•Flexible images and media
•Media queries - a module from the CSS3 specification
![Page 48: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/48.jpg)
Media Queries
•W3C
•Media Types
•all, braille, embossed, handheld, print, projection, screen, speech, tty, and tv
![Page 49: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/49.jpg)
Media Types<link rel="stylesheet" href="global.css" media="all" />
<link rel="stylesheet" href="main.css" media="screen" />
<link rel="stylesheet" href="paper.css" media="print" />
![Page 50: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/50.jpg)
Then along came...<link rel="stylesheet" href="tiny.css" media="handheld"/>
![Page 51: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/51.jpg)
Be GONE Media Types
Hello Media Queries
![Page 52: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/52.jpg)
CSS3 Media Queries
•Anatomy of a Media Query
@media screen and (min-width: 1024px) {
body {
font-size: 100%;
}}
![Page 53: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/53.jpg)
Anatomy of Media Query
1.Each query still begins with a media type (screen).
2.Immediately after comes the query itself, wrapped in parentheses: (min-width: 1024px). And our query can, in turn, be split into two components: the name of a feature (min-width) and a corresponding value (1024px)
![Page 54: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/54.jpg)
CSS3 Media Queries
•Anatomy of a Media Query
@media screen and (min-width: 1024px) {
body {
font-size: 100%;
}}
![Page 55: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/55.jpg)
Where did I put.....•<link rel="stylesheet"
href="wide.css" media="screen and (min-width: 1024px)" />
•Attach them to @import statements:
•@import url("wide.css") screen and (min-width: 1024px);
•I prefer @media because it keeps the CSS sheet numbers down, there for requests and there for load times.
![Page 56: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/56.jpg)
Does Size Matter?
![Page 57: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/57.jpg)
YES!!!
![Page 58: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/58.jpg)
Does Size Matter•In the spec’s language, every device
has a “display area” and “rendering surface.”
•the browser’s viewport is the display area; the entire display is the rendering surface.
•So on your laptop, the display area would be your browser window; the rendering surface would be your screen.
![Page 59: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/59.jpg)
Does Size Matter
•If your laptop is 1200px in width and your browser is open 50% of the screen, then;
•RENDERING SURFACE = 1200px
•DISPLAY AREA (viewport) = 600px
•http://www.w3.org/TR/css3-mediaqueries/#media1
![Page 60: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/60.jpg)
WAIT - There’s MOAR
•Chain multiple conditions together
• @media screen and (min-device-width: 480px) and (orientation: landscape) { … }
![Page 61: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/61.jpg)
Media Queries
![Page 62: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/62.jpg)
Browser Support
•Works in most browers < 5 years old
•With the obvious exception of IE
•css3-mediaqueries.js
•respond.js
![Page 63: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/63.jpg)
respond.js@media screen and (max-width: 768px) {
…
}/*/mediaquery*/
@media screen and (max-width: 520px) {
…
}/*/mediaquery*/
![Page 64: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/64.jpg)
Responsive Context
![Page 65: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/65.jpg)
MOBILE FIRST“More often than not, the mobile experience for a Web application or site is designed and built after the PC version is complete. Here's three reasons why Web applications should be designed for mobile first instead...Mobile is exploding...Mobile forces you to focus....Mobile extends your capabilities...”
•http://www.lukew.com/ff/entry.asp?933
![Page 66: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/66.jpg)
Image http://blog.gvnfoundation.org/2011/02/every-once-in-awhile-we-receive-amazing.html
![Page 67: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/67.jpg)
Testing
•No Substitute for the real thing
•Web Developer Tools (FF Plugin)
•Safari Developer
•Emulators
![Page 68: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/68.jpg)
Bad Points?
•Force the users into one way. Users that like to pinch and zoom
•No Mobile Only, users will download the WHOLE page not an optimised one
![Page 69: Responsive Web Design](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c749b14a7959723e8b45fa/html5/thumbnails/69.jpg)
Thanks. Questions?“The Way is shaped by
use,But then the shape is lost.Do not hold fast to shapesBut let sensation flow into the worldAs a river courses down to the sea.—DAO DE JING, section 32, “Shapes”