Responsive Web Design

RES
PON
SIVE
DESIGN
Abdulhadi ÇELENLİOĞLU
Senior Developer
SONY

AGENDA
 DEFINITION / HISTORY
 FACTS
 HOW?
 TOOLS
 TEST

DEFINITION
OptimalViewing Experience

DEFINITION
NO PINCHING NO SQUINTING NO SCROLLING

HISTORY
Cameron Adams
September, 2004
Resolution Dependent Layout
Ethan Marcotte
May, 2010
Responsive Web Design

FACTS
2HOURS PER DAY
1 IN 4 ONLINE SEARCH
%67 LIKELY TO PURCHASE

HOW?
+ +
VIEWPORT
TAG
FLUID
GRIDS
MEDIA
QUERIES

Device Pixel Ratio
Physical Pixels
Logical Pixels
=
PIXELS ARE NOT PIXELS

1920 x 1080 pixels
960 x 540 pixels
2=
1920 x 1080 pixels
1920 x 1080 pixels
1=
1920 x 1080 pixels
640 x 360 pixels
3=
PIXELS ARE NOT PIXELS

VIEWPORT
 "name=viewport" to control the width and scaling of the browsers viewport.
 "width=device-width" to match the screen's width in device independent
pixels.
 "initial-scale=1" to establish a 1:1 relationship between CSS pixels and
device independent pixels.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

WITHOUT & WITH
bit.ly/rwd-novp bit.ly/rwd-vp

WIDTH =DEVICE WIDTH
bit.ly/rwd-auto

INITIAL SCALE
bit.ly/rwd-is bit.ly/rwd-auto

FLUID GRIDS
YESNO
div.fullWidth {
width: 640px;
margin-left: auto;
margin-right: auto;
}
div.fullWidth {
width: 100%;
}
Fixed width is dead.
Long live 100%

FLEXIBLE IMAGES
MIN
WIDTH / HEIGHT
MAX
WIDTH / HEIGHT

FLEXIBLE IMAGES
200 KB
1382 x 778 px
100 KB
992 x 559 px
70 KB
768 x 443 px
30 KB
480 x 272 px

MEDIA QUERIES
@media (query) {
/* CSS Rules used when query matches */
}
@media (min-width: 700px) {
...
}
@media (min-width: 700px) and (orientation: landscape) {
...
}
@media handheld and (min-width: 700px) and (orientation: landscape) {
...
}

BREAK
WHERE
TO START?
MOBILE
FIRST
WHICH
DEVICES?
NONE
OF THEM

FONT
12 14 16 18 20 24 28 32 36 404448 54 60 66 72
45to 75characters

THINGS TO CONSIDER
 Time & Money
 Older Browsers
 Content
 Website vs. Mobile App

TOOLS
 Grid & Frameworks (Bootstrap, Less, Skeleton etc.)
 Sketch Sheets & Wireframes (StyleTil.es etc.)
 JavaScript & jQuery (Adapt.js, Respond.js etc.)
 Other (FitText.js, Retina Images, Grunt etc.)

TEST
 URL & iFrame (screenfly, screenqueri.es etc.)
 Browser Tools (Chrome, Firefox etc.)
 Emulators (Android, iOS, WP etc.)
 Applications & Extensions (Adobe Edge Inspect etc.)

Responsive Web Design

More Related Content

Similar to Responsive Web Design

Recently uploaded

Responsive Web Design