Responsive design

RESPONSIVE DESIGN
@doxaras
@niobiumlabs

SCREEN FRAGMENTATION

http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html

JSFIDDLE DEMO
http://jsﬁddle.net/doxaras/nCGUu/

GOOGLE’S APPROACH

http://androidandme.com/2012/02/applications/goodbye-old-browser-chrome-to-become-the-standard-browser-on-android-4-0-and-above/

BROWSER GRADING

“Any device that
doesn’t support
media queries will
receive the basic C-
grade experience

AN OLD STORY REVIVING
http://www.alistapart.com/d/responsive-web-design/ex/ex-site-ﬂexible.html

LETS GET THING FROM THE
BEGINNING

VIEWPORTS
<meta name=”viewport” content=”width:device-width”>

always use it for mobile and ﬂuid designs

MEDIA QUERIES
CSS 2.1
<link rel="stylesheet" type="text/css" href="core.css"
media="screen" />
<link rel="stylesheet" type="text/css" href="print.css"
media="print" />

CSS3
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="shetland.css" />

WAIT THERE IS MORE!!
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px) and
(resolution: 163dpi)"
href="shetland.css" />

@media screen and (max-device-width: 480px) {
.column {
float: none;
}
}

@import url("shetland.css") screen and (max-device-width:
480px);

AND MORE
@media only screen and (min-device-width : 320px)
(max-device-width : 569px) {...}

AND MORE
@media only screen and (min-width : 480px) { .box
{ width:200px; height:200px;
background:yellow; } }
@media only screen and (max-width : 320px) { .box
{width:200px; height:200px; background:red; } }

DEVICE-WIDTH

Question:
Is max/min-width the same as max/min-device-width?
Answer:
If you set width=device-width, then max/min-width is the same
as max/min-device-width in portrait mode, and different when
in landscape mode. In short, the difference is max/min-width
will update when you rotate the screen, whereas, max/min-
device-width won't.

DEVICE-PIXEL

device-pixel-ratio could help you know the resolution of the device
screen, iPhone 4 and certain other smartphones have pixel ration equal
or higher than 1.5, so if you want to target high resolution devices, you
can use the media query below:

@media only screen
and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio : 1.5) {
.imagebox {background:(url:"images/high/demo.jpg");}
}

image will be downloaded even if the page doesn't ﬁt the rule above!!

ORIENTATION

iPad introduced 'orientation' to help with detecting orientation change, below
is how you can specify landscape and portrait style
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-
device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-
device-width : 1024px) and (orientation : portrait) {
/* Styles */
}

JSFIDDLE DEMO
http://jsﬁddle.net/doxaras/LeB47/

62.5% RULE (EM2PX)

• modern browsers have a 16px font default size*
•body{font-size:62.5%}

• 16x62.5=10px

•p{font-size:1.3em;}

add html{font-size:16px; } just to be sure

SIZING
.figure {
float: right;
margin-bottom: 0.5em;
margin-left: 2.53164557%; /* 12px / 474px */
width: 48.7341772%; /* 231px / 474px */
}

img {
max-width: 100%;
}

http://www.alistapart.com/articles/ﬂuid-images/

SIZING

img { max-width: 100%; }

<img src="smallRes.jpg"
data-fullsrc="largeRes.jpg">

JSFIDDLE DEMO
http://jsﬁddle.net/doxaras/T66wQ/

DEALING WITH TABLES

http://css-tricks.com/examples/ResponsiveTables/responsive.php

DISPLAY:NONE

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

IMAGES

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

http://css-tricks.com/convert-menu-to-dropdown/

JSFIDDLE DEMO
http://jsﬁddle.net/doxaras/CKPnJ/

RESPOND.JS

• really small script < 1kb
• enabling old browsers IE7 IE8
• responsive is not just a mobile problem
• backwords compatibility of your designs

APPLE VIEWPORT

<meta name="viewport" content="width=device-width; initial-scale=1.0">

SELECTORS SHOULD BE PRESENT ALSO IN THE
PLAIN CSS DOCUMENTS

EM’S AND PX’S

• local DOM scope overrides the default 62.5% rule

• left and right

• top and line-height should be em’s

• avoid nested em deﬁnitions

TRANSITIONS

body {
transition:all .2s linear;
-o-transition:all .2s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
}

RETINA DISPLAY SELECTORS

<link rel="stylesheet"
media="only screen and (-webkit-
min-device-pixel-ratio: 2)"
type="text/css"
href="../iphone4.css" />

HIDE NAVIGATION

// When ready...
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});

META TAG FOR NAME

<meta name="apple-mobile-
web-app-capable"
content="yes" />

Responsive design

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to Responsive design

Similar to Responsive design (20)

More from John Doxaras

More from John Doxaras (15)

Recently uploaded

Recently uploaded (20)

Responsive design