responsive web design
DESCRIPTION
TRANSCRIPT
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”
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/)
What is responsive web design?
THE INGREDIENTS
SIMPLES
THREE INGREDIENTS
•A flexible, grid-based layout
•Flexible images and media
•Media queries - a module from the CSS3 specification
THREE INGREDIENTS
•A flexible, grid-based layout
Flexible Grid Based Layout
Flexible - Step 1
•Typography
The following slides contain maths
“THE ALGORITHM”
target ÷ context = result
“THE ALGORITHM”
target ÷ context = result24px ÷ 16px = 1.5em
Flexible - Step 1
•Typography
body {font-size: 100%}
h1 {font-size: 1.5em /* 24px / 16px */}
h2 {font-size: 1.25em /* 20px / 16px */}
Flexible - Step 2
•Typography
•Layout
Flexible - Step 2
•Typography
•Layout
The following slides contain maths
“THE ALGORITHM”
target ÷ context = result
Flexible Grid Based Layout
“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
“THE ALGORITHM”header { width: 60.546875% /* 620 / 1024 */}
nav { width: 35.15625% /* 360 / 1024 */}
“THE ALGORITHM”
target ÷ context = result
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.
Flexible Grid Based Layout
THREE INGREDIENTS
•A flexible, grid-based layout
•Flexible images and media
•Media queries - a module from the CSS3 specification
THREE INGREDIENTS
•A flexible, grid-based layout
•Flexible images and media
•Media queries - a module from the CSS3 specification
Flexible Images / Media
•Web is not just text
•Flickr
•YouTube
•Vimeo
•more more more.....
Golden Egg
img {max-width: 100%; }
Golden Egg cont...
img,embed,object,video {
max-width: 100%;
}
IE6 - you bastard!
img,embed,object,video {
max-width: 100%;
}
IE6 - you bastard!IE Specific Style Sheetimg { width: 100%;}
IE7 - you bastard!
http://unstoppablerobotninja.com/entry/fluid-images#code
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;}
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.
THREE INGREDIENTS
•A flexible, grid-based layout
•Flexible images and media
•Media queries - a module from the CSS3 specification
THREE INGREDIENTS
•A flexible, grid-based layout
•Flexible images and media
•Media queries - a module from the CSS3 specification
Media Queries
•W3C
•Media Types
•all, braille, embossed, handheld, print, projection, screen, speech, tty, and tv
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" />
Then along came...<link rel="stylesheet" href="tiny.css" media="handheld"/>
Be GONE Media Types
Hello Media Queries
CSS3 Media Queries
•Anatomy of a Media Query
@media screen and (min-width: 1024px) {
body {
font-size: 100%;
}}
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)
CSS3 Media Queries
•Anatomy of a Media Query
@media screen and (min-width: 1024px) {
body {
font-size: 100%;
}}
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.
Does Size Matter?
YES!!!
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.
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
WAIT - There’s MOAR
•Chain multiple conditions together
• @media screen and (min-device-width: 480px) and (orientation: landscape) { … }
Media Queries
Browser Support
•Works in most browers < 5 years old
•With the obvious exception of IE
•css3-mediaqueries.js
•respond.js
respond.js@media screen and (max-width: 768px) {
…
}/*/mediaquery*/
@media screen and (max-width: 520px) {
…
}/*/mediaquery*/
Responsive Context
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
Image http://blog.gvnfoundation.org/2011/02/every-once-in-awhile-we-receive-amazing.html
Testing
•No Substitute for the real thing
•Web Developer Tools (FF Plugin)
•Safari Developer
•Emulators
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
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”