Slide 1
Slide 1 text
RESPONSIVE
WEB DESIGN
By Juliano
Moreira
Dasilva
Tuesday, April 24, 12
Slide 2
Slide 2 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
Who Am I?!?!
Tuesday, April 24, 12
Slide 3
Slide 3 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
Who Am I?!?!
JULIANOMOREIRA.COM
Tuesday, April 24, 12
Slide 4
Slide 4 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
Who Am I?!?!
JULIANOMOREIRA.COM
I WORK FOR DOT COM
Tuesday, April 24, 12
Slide 5
Slide 5 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
Who Am I?!?!
JULIANOMOREIRA.COM
I WORK FOR DOT COM
Tuesday, April 24, 12
Slide 6
Slide 6 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
Who Am I?!?!
JULIANOMOREIRA.COM
I WORK FOR DOT COM
Tuesday, April 24, 12
Slide 7
Slide 7 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
Who Am I?!?!
JULIANOMOREIRA.COM
I WORK FOR DOT COM
Tuesday, April 24, 12
Slide 8
Slide 8 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
Who Am I?!?!
JULIANOMOREIRA.COM
I WORK FOR DOT COM
Tuesday, April 24, 12
Slide 9
Slide 9 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
Who Am I?!?!
JULIANOMOREIRA.COM
I WORK FOR DOT COM
Tuesday, April 24, 12
Slide 10
Slide 10 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
Who Am I?!?!
JULIANOMOREIRA.COM
I WORK FOR DOT COM
Tuesday, April 24, 12
Slide 11
Slide 11 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
Who Am I?!?!
JULIANOMOREIRA.COM
I WORK FOR DOT COM
Tuesday, April 24, 12
Slide 12
Slide 12 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
Who Am I?!?!
JULIANOMOREIRA.COM
I WORK FOR DOT COM
Tuesday, April 24, 12
Slide 13
Slide 13 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
Tuesday, April 24, 12
Slide 14
Slide 14 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
What we’re going to talk
about today
Tuesday, April 24, 12
Slide 15
Slide 15 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
What we’re going to talk
about today
The
Flexible
Grid
(bye
bye
pixels)
Flexible
Images
Becoming
Responsive
Catering
to
“Awesome”
(IE<=8)
Browsers
Tuesday, April 24, 12
Slide 16
Slide 16 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
— John Allsopp
April, 7, 2000
“As
web
designers
we
need
to
rethink
this
role,
to
abandon
control,
and
seek
a
new
relationship
with
the
page.
As
designers
we
9ind
ourselves
constraining
pages
as
they
were
made
out
of
paper.
This
conservatism
is
natural,
“closely
held
beliefs
are
not
easily
released”,
but
it
is
time
to
move
on,
to
embrace
the
web
as
its
own
medium.
It’s
time
to
throw
out
the
rituals
of
the
printed
page,
and
to
engage
the
medium
of
the
web
and
its
own
nature.
Tuesday, April 24, 12
Slide 17
Slide 17 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
Before we dig in...
Tuesday, April 24, 12
Slide 18
Slide 18 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
“Mobile
is
growing
outrageously.
Mobile
web
is
growing
at
least
8x
faster
than
desktop
web.”
Before we dig in...
Tuesday, April 24, 12
Slide 19
Slide 19 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
“Mobile
is
growing
outrageously.
Mobile
web
is
growing
at
least
8x
faster
than
desktop
web.”
1.3
million
touch
phones
sold
per
day
in
2009
Before we dig in...
Tuesday, April 24, 12
Slide 20
Slide 20 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
“Mobile
is
growing
outrageously.
Mobile
web
is
growing
at
least
8x
faster
than
desktop
web.”
1.3
million
touch
phones
sold
per
day
in
2009
100
thousand
android
phones
activated
per
day
Before we dig in...
Tuesday, April 24, 12
Slide 21
Slide 21 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
“Mobile
is
growing
outrageously.
Mobile
web
is
growing
at
least
8x
faster
than
desktop
web.”
1.3
million
touch
phones
sold
per
day
in
2009
100
thousand
android
phones
activated
per
day
Apple
sells
97
thousand
iPhones
per
day
Before we dig in...
Tuesday, April 24, 12
Slide 22
Slide 22 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
“Mobile
is
growing
outrageously.
Mobile
web
is
growing
at
least
8x
faster
than
desktop
web.”
1.3
million
touch
phones
sold
per
day
in
2009
100
thousand
android
phones
activated
per
day
Apple
sells
97
thousand
iPhones
per
day
40
thousand
iPads
sold
per
day
Before we dig in...
Tuesday, April 24, 12
Slide 23
Slide 23 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
“Mobile
is
growing
outrageously.
Mobile
web
is
growing
at
least
8x
faster
than
desktop
web.”
1.3
million
touch
phones
sold
per
day
in
2009
100
thousand
android
phones
activated
per
day
Apple
sells
97
thousand
iPhones
per
day
40
thousand
iPads
sold
per
day
100
thousand
Blackberry
6.0
sold
per
day
Before we dig in...
Tuesday, April 24, 12
Slide 24
Slide 24 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
“Mobile
is
growing
outrageously.
Mobile
web
is
growing
at
least
8x
faster
than
desktop
web.”
1.3
million
touch
phones
sold
per
day
in
2009
100
thousand
android
phones
activated
per
day
Apple
sells
97
thousand
iPhones
per
day
40
thousand
iPads
sold
per
day
100
thousand
Blackberry
6.0
sold
per
day
Between
these
three
devices,
there
are
over
300
thousand
touch
devices
sold
per
day
Before we dig in...
Tuesday, April 24, 12
Slide 25
Slide 25 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
Before we dig in...
Tuesday, April 24, 12
Slide 26
Slide 26 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
Before we dig in...
Heavy
mobile
data
will
reach
1
billion
users
within
the
next
two
years
(outpace)
Tuesday, April 24, 12
Slide 27
Slide 27 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
Before we dig in...
Heavy
mobile
data
will
reach
1
billion
users
within
the
next
two
years
(outpace)
ATT
mobile
data
trafXic
in
the
past
3
years
has
increased
50
times
Tuesday, April 24, 12
Slide 28
Slide 28 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
Before we dig in...
Heavy
mobile
data
will
reach
1
billion
users
within
the
next
two
years
(outpace)
ATT
mobile
data
trafXic
in
the
past
3
years
has
increased
50
times
Study
done
by
cisco
says
that
iPhone
uses
30
times
as
much
mobile
trafXic
as
feature
mobile
user
Tuesday, April 24, 12
Slide 29
Slide 29 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
Before we dig in...
Heavy
mobile
data
will
reach
1
billion
users
within
the
next
two
years
(outpace)
ATT
mobile
data
trafXic
in
the
past
3
years
has
increased
50
times
Study
done
by
cisco
says
that
iPhone
uses
30
times
as
much
mobile
trafXic
as
feature
mobile
user
Smartphones
are
projected
to
pass
PC's
in
sales
by
next
year.
Huge
booming
opportunity
Tuesday, April 24, 12
Slide 30
Slide 30 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
What does it take to build a
responsive design?
Tuesday, April 24, 12
Slide 31
Slide 31 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
What does it take to build a
responsive design?
A
Xlexible,
grid-‐based
layout
Tuesday, April 24, 12
Slide 32
Slide 32 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
What does it take to build a
responsive design?
A
Xlexible,
grid-‐based
layout
Flexible
images
and
media
Tuesday, April 24, 12
Slide 33
Slide 33 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
What does it take to build a
responsive design?
A
Xlexible,
grid-‐based
layout
Flexible
images
and
media
Media
queries
Tuesday, April 24, 12
Slide 34
Slide 34 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
The Flexible Grid
Tuesday, April 24, 12
Slide 35
Slide 35 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
The Flexible Grid
No
more
pixels,
relative
unit
(em)
instead
Tuesday, April 24, 12
Slide 36
Slide 36 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
The Flexible Grid
No
more
pixels,
relative
unit
(em)
instead
Formula
(target
/
context
=
result)
Tuesday, April 24, 12
Slide 37
Slide 37 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
“However,
media
queries
alone
do
not
a
responsive
design
make.
A
truly
responsive
design
begins
with
a
9lexible
layout,
with
media
queries
layered
upon
that
non-‐9ixed
foundation.”
— Ethan Marcotte
Tuesday, April 24, 12
Slide 38
Slide 38 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
“As
it
turned
out,
making
the
layout
work
on
a
variety
of
devices
was
just
a
matter
of
adding
a
few
CSS
media
queries
to
the
9inished
product.
The
key
to
making
it
easy
was
that
the
layout
was
already
liquid,
so
optimizing
it
for
small
screens
meant
collapsing
a
few
margins
to
maximize
space
and
tweaking
the
sidebar
layout
in
the
cases
where
the
screen
is
too
narrow
to
show
two
columns.”
— 37signals
Tuesday, April 24, 12
Slide 39
Slide 39 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
Minnesota Web Design
Grid based layout
Tuesday, April 24, 12
Slide 40
Slide 40 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
Tuesday, April 24, 12
Slide 41
Slide 41 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
Tuesday, April 24, 12
Slide 42
Slide 42 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
Tuesday, April 24, 12
Slide 43
Slide 43 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
Are you ready to have
some fun?
Let’s
do
this!!!
Tuesday, April 24, 12
Slide 44
Slide 44 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
970 Grid
Tuesday, April 24, 12
Slide 45
Slide 45 text
Fixed to Flexible
Container
Tuesday, April 24, 12
Slide 46
Slide 46 text
Fixed to Flexible
Container
#container {width:970px;}
Tuesday, April 24, 12
Slide 47
Slide 47 text
Fixed to Flexible
Container
#container {width:970px;}
container / body font-size =
result
Tuesday, April 24, 12
Slide 48
Slide 48 text
Fixed to Flexible
Container
970 / 16 = 60.625em
#container {width:970px;}
container / body font-size =
result
Tuesday, April 24, 12
Slide 49
Slide 49 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
The Powerful
Formula
Tuesday, April 24, 12
Slide 50
Slide 50 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
The Powerful
Formula
Target / Context = Result
Tuesday, April 24, 12
Slide 51
Slide 51 text
The Powerful
Formula
Tuesday, April 24, 12
Slide 52
Slide 52 text
The Powerful
Formula
642px
Tuesday, April 24, 12
Slide 53
Slide 53 text
The Powerful
Formula
642px
Target / Context = Result
Tuesday, April 24, 12
Slide 54
Slide 54 text
The Powerful
Formula
642
/
970
=
66.18556%
642px
Target / Context = Result
Tuesday, April 24, 12
Slide 55
Slide 55 text
The Powerful
Formula
Tuesday, April 24, 12
Slide 56
Slide 56 text
The Powerful
Formula
315px
Tuesday, April 24, 12
Slide 57
Slide 57 text
The Powerful
Formula
315px
Target / Context = Result
Tuesday, April 24, 12
Slide 58
Slide 58 text
The Powerful
Formula
315
/
970
=
32.47422%
315px
Target / Context = Result
Tuesday, April 24, 12
Slide 59
Slide 59 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
1280x1024
1024x1024
768x1024
Tuesday, April 24, 12
Slide 60
Slide 60 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
Flexible Images
Tuesday, April 24, 12
Slide 61
Slide 61 text
The problem
Tuesday, April 24, 12
Slide 62
Slide 62 text
The problem
Tuesday, April 24, 12
Tuesday, April 24, 12
Slide 63
Slide 63 text
The problem
Tuesday, April 24, 12
Tuesday, April 24, 12
Slide 64
Slide 64 text
The solution
Tuesday, April 24, 12
Slide 65
Slide 65 text
The solution
Tuesday, April 24, 12
Tuesday, April 24, 12
Slide 66
Slide 66 text
The solution
img, embed, object, video
{max-width: 100%;}
Tuesday, April 24, 12
Tuesday, April 24, 12
Slide 67
Slide 67 text
The solution
img, embed, object, video
{max-width: 100%;}
Tuesday, April 24, 12
Tuesday, April 24, 12
Slide 68
Slide 68 text
The solution
img, embed, object, video
{max-width: 100%;}
Tuesday, April 24, 12
Tuesday, April 24, 12
Slide 69
Slide 69 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
Media Queries
Tuesday, April 24, 12
Slide 70
Slide 70 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
Viewport
Tuesday, April 24, 12
Slide 71
Slide 71 text
Viewport
Tuesday, April 24, 12
Slide 72
Slide 72 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
Tuesday, April 24, 12
Slide 73
Slide 73 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
Media Queries for different resolution
@media screen and (max-width: 768px){
! header[role="main-header"] {
! ! padding: 1em;
! }
}
@media screen and (max-width: 600px) {
! body {
! ! padding: 1em;
! }
}
@media screen and (max-width: 520px),
screen and (max-width: 480px){
! div[role="logo"] {
! ! float: none;
! ! width: auto;
! }
}
@media screen and (max-width: 320px) {
! div[role="venue"] .location! {
! ! float: none;
! ! width: auto;
! ! padding: 0;
! }
! div[role="venue"] .venue-image {
! ! float: none;
! ! width: 75%;
! ! margin: 0 auto;
! }
! div[role="speakers"] .speaker {
! ! min-height: 14.285em; /*200*/
! }
}
Tuesday, April 24, 12
Slide 74
Slide 74 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
Desktop (1280x1024)
iPad iPhone
Tuesday, April 24, 12
Slide 75
Slide 75 text
JULIANOMOREIRA.COM
RESPONSIVE +WEB+ DESIGN
Thank you...
Tuesday, April 24, 12