Present Remotely
Send the link below via email or IM
Present to your audience
- Invited audience members will follow you as you navigate and present
- People invited to a presentation do not need a Prezi account
- This link expires 10 minutes after you close the presentation
- A maximum of 30 users can follow your presentation
- Learn more about this feature in our knowledge base article
Responsive Web Design
Flexible, device-independent designs for the web using Flexible Grids and CSS3 Media Queries
by
TweetSonja Leix
on 7 June 2012Transcript of Responsive Web Design
RESPONSIVE
by Sonja Leix
DESIGN
the future of the web is
Too many screen sizes to handle and upkeep a mobile version for each device
RESPONSIVE
What is it and why
Ethan Marcotte
Coined the term “Responsive Design” in 2010 in his article on A List Apart.
So what is Responsive Design?
Flexible, device-independent design for the web.
vs.
The Elements of
Responsive Design
FLEXIBLE GRID
CSS3
with Flexible Images
&
MEDIA
QUERIES
The Flexible Grid
or Fluid Grid
Desktop / Laptop
Tablets
Mobile
Examples how the Flexible Grid adapts to different screen sizes:
It’s all about
understanding the
ratio-based
target ÷ context = result
<div id=“wrap”>
<div id=“content”>
</div>
<div id=“sidebar”>
</div>
</div>
target (#content) = 640px
context (#wrap) = 960px
640px ÷ 960px = 0.66666667 => 66.666667 %*
* do not round!
#wrap {
width: 960px;
margin: 0 auto;
}
#content {
width: 66.666667%
/* 640px / 960px */
float: left;
}
#sidebar {
width: 31.25%
/* 300px / 960px */
float: right;
display: inline;
}
relationships between
HTML Markup
CSS
<div id=“wrap”>
<div id=“content”>
<div class=“left”>
</div>
<div class=“right”>
</div>
</div>
<div id=“sidebar”>
</div>
</div>
target (.left) = 290px
context (#content) = 640px
290px ÷ 640px = 0.453125 => 45.3125 %*
* do not round!
.left,
.right {
width: 45.3125%
/* 290px / 640px */
float: left;
display: inline;
}
.right {
float: right;
}
HTML Markup
CSS
Changing the Context
Flexible EVERYTHING
body {
font-size: 100%;
/* ~ 16px */
line-height: 1.6;
color: #444;
}
target ÷ context = result
target (h1) = 28px
context (body) = 16px
h1 {
font-size: 1.75em;
/* 28px / 16px */
}
p {
font-size: 0.875em;
/* 14px / 16px */
}
Flexible
Fonts
almost
Flexible Images & Media
img,
video,
object {
max-width: 100%;
height: auto;
}
The Power of
"Conditional styling"
Using Media Queries with common Resolution Breakpoints in mind.
Flexible Designs adapt to device and browser sizes.
Always identify the correct context!
CSS3
Media Queries
iPad – portrait
@media screen and (min-width: 480px) and (max-width: 768px)
Mobile
Tablet portrait
Netbook / Tablet landscape
Desktop
Mobile
Tablet portrait
Netbook / Tablet landscape
Desktop
iPhone – landscape
@media screen and (max-device-width: 480px)
Responsive
GENESIS
Framework & Themes
WordPress Repository
by
FINAL THOUGHTS
1: Start with the Grid – make it Flexible
2: Make Images Flexible
3: Add one or two Media Queries (i.e. iPhone and iPad)
4: Then focus on the details
Don’t promise or expect your design to be pixel perfect in every screen size.
Have fun with it!
@media screen and...
!
element and container
content
sidebar
wrap
left
right
content
Thank You!
Sonja Leix
media type
first query
media type
the query
@media screen and (max-device-width: 480px) {
#wrap {
width: 100%;
}
#content,
#sidebar {
width: 100%;
float: left;
}
}
Media Query in combination with CSS
device feature
second query
Wrapping the sidebar on the iPhone
Twitter: @sonjaleix
Full transcriptby Sonja Leix
DESIGN
the future of the web is
Too many screen sizes to handle and upkeep a mobile version for each device
RESPONSIVE
What is it and why
Ethan Marcotte
Coined the term “Responsive Design” in 2010 in his article on A List Apart.
So what is Responsive Design?
Flexible, device-independent design for the web.
vs.
The Elements of
Responsive Design
FLEXIBLE GRID
CSS3
with Flexible Images
&
MEDIA
QUERIES
The Flexible Grid
or Fluid Grid
Desktop / Laptop
Tablets
Mobile
Examples how the Flexible Grid adapts to different screen sizes:
It’s all about
understanding the
ratio-based
target ÷ context = result
<div id=“wrap”>
<div id=“content”>
</div>
<div id=“sidebar”>
</div>
</div>
target (#content) = 640px
context (#wrap) = 960px
640px ÷ 960px = 0.66666667 => 66.666667 %*
* do not round!
#wrap {
width: 960px;
margin: 0 auto;
}
#content {
width: 66.666667%
/* 640px / 960px */
float: left;
}
#sidebar {
width: 31.25%
/* 300px / 960px */
float: right;
display: inline;
}
relationships between
HTML Markup
CSS
<div id=“wrap”>
<div id=“content”>
<div class=“left”>
</div>
<div class=“right”>
</div>
</div>
<div id=“sidebar”>
</div>
</div>
target (.left) = 290px
context (#content) = 640px
290px ÷ 640px = 0.453125 => 45.3125 %*
* do not round!
.left,
.right {
width: 45.3125%
/* 290px / 640px */
float: left;
display: inline;
}
.right {
float: right;
}
HTML Markup
CSS
Changing the Context
Flexible EVERYTHING
body {
font-size: 100%;
/* ~ 16px */
line-height: 1.6;
color: #444;
}
target ÷ context = result
target (h1) = 28px
context (body) = 16px
h1 {
font-size: 1.75em;
/* 28px / 16px */
}
p {
font-size: 0.875em;
/* 14px / 16px */
}
Flexible
Fonts
almost
Flexible Images & Media
img,
video,
object {
max-width: 100%;
height: auto;
}
The Power of
"Conditional styling"
Using Media Queries with common Resolution Breakpoints in mind.
Flexible Designs adapt to device and browser sizes.
Always identify the correct context!
CSS3
Media Queries
iPad – portrait
@media screen and (min-width: 480px) and (max-width: 768px)
Mobile
Tablet portrait
Netbook / Tablet landscape
Desktop
Mobile
Tablet portrait
Netbook / Tablet landscape
Desktop
iPhone – landscape
@media screen and (max-device-width: 480px)
Responsive
GENESIS
Framework & Themes
WordPress Repository
by
FINAL THOUGHTS
1: Start with the Grid – make it Flexible
2: Make Images Flexible
3: Add one or two Media Queries (i.e. iPhone and iPad)
4: Then focus on the details
Don’t promise or expect your design to be pixel perfect in every screen size.
Have fun with it!
@media screen and...
!
element and container
content
sidebar
wrap
left
right
content
Thank You!
Sonja Leix
media type
first query
media type
the query
@media screen and (max-device-width: 480px) {
#wrap {
width: 100%;
}
#content,
#sidebar {
width: 100%;
float: left;
}
}
Media Query in combination with CSS
device feature
second query
Wrapping the sidebar on the iPhone
Twitter: @sonjaleix