Responsive Design

Week 7

CDGD304 - Fall 2011
http://bit.ly/massart-web304-7

Order of Business

Final Project Design Critiques
Responsive Design
Flexible Grids
Flexible Images
Media Queries
Exercises

Responsive Design

What does that mean?

(according to Ethan Marcotte)

A flexible grid (with flexible images) that incorporates media queries to create a responsive, adaptive layout.

Responsive design means:

Design for capabilities
Not individual browsers
Designing to screen size
not exact pixel dimensions
Designing for changing content
Hey, we should be doing that already!

Also, it’s kinda hard.

Why it’s hard

More configurations to test
Need to handle different vertical sizes and relations.
Images and media need to resize.
Titles and Menus need multiple formats.
Must have buy-in from clients, designers, and developers
Relatively new, libraries and support still works-in-progress

Why it’s awesome

Write once, display anywhere
Not designing for a static canvas, designing for responsiveness to content and the user.
Mobile support baked-in
True responsive design will display correctly on the iPad 23 in 2025.
Works regardless of device, orientation or resolution.

So What is Responsive Design?

Flexible Grid
Flexible Images
Media Queries

How?

Percentages and EM's and not pixels
Float elements, no absolute positioning
Media queries
Fluid image widths

Are these Responsive Design?

Flexible/Fluid Grids

Size everything in ems or percentages
Fluid percentages for width
Height needs to be set to auto.
Golden Formula: target ÷ context = result

Maintaining Layouts

If you have to set a width - try to only do it on the container - use percentages inside
a max-width of 100% will make sure your page doesn’t break out of the viewpoint
don’t use height in px for anything with text inside

Bryan Rieger, “Rethinking the Mobile Web”

Mobile first
Use well structured, meaningful markup
the absence of support for @media queries is in fact the first @media query...
Progressively enhance using JavaScript and @media queries
Adapt content (especially images) appropriately for each device
Compress content where possible and don’t include unnecessary data

Containers

<style>
  #wrapper { width:800px; }
  #content { float:left; width:550px; margin-left:20px; }
  #sidebar { float:right; width:200px; margin-right:20px; }
</style>
<section id='wrapper'>
  <section id='content'>
    Content
  </section>
  <section id='sidebar'>
    Sidebar

  </section>
  <div style='clear:both;'></div>
</section>

<style>
  /* Dummy Styles */
  #wrapper { background-color:red; padding:20px 0px; }
  #content { background-color:black; color:white; min-height:300px; }
  #sidebar { background-color:darkgray; color:white; min-height:300px; }
</style>

Responsive Containers

<style>
  #wrapper { width:100%; }
  #content { float:left; width:63%; margin-left:1%; }
  #sidebar { float:right; width:33%; margin-right:1%; }
</style>
<section id='wrapper'>
  <section id='content'>
    Content
  </section>
  <section id='sidebar'>
    Sidebar

  </section>
  <div style='clear:both;'></div>
</section>

<style>
  /* Dummy Styles */
  #wrapper { background-color:red; padding:20px 0px; }
  #content { background-color:black; color:white; min-height:300px; }
  #sidebar { background-color:darkgray; color:white; min-height:300px; }
</style>

Responsive Containers Max Width

<style>
  #wrapper { width:100%; margin:0 auto; max-width:700px; }
  #content { float:left; width:63%; margin-left:1%; }
  #sidebar { float:right; width:33%; margin-right:1%; }
</style>
<section id='wrapper'>
  <section id='content'>
    Content
  </section>
  <section id='sidebar'>
    Sidebar

  </section>
  <div style='clear:both;'></div>
</section>

<style>
  /* Dummy Styles */
  #wrapper { background-color:red; padding:20px 0px; }
  #content { background-color:black; color:white; min-height:300px; }
  #sidebar { background-color:darkgray; color:white; min-height:300px; }
</style>

should be as easy as
img { max-width:100% }

Make this image flexible

<style>
  #wrapper { width:100%; margin:0 auto; max-width:1024px; }
  #content { width:80%; margin:0 auto; padding:30px 0px; }
</style>
<div id='wrapper'>
  <section id='content'>
    <img src='http://placekitten.com/600/400'/>
  </section>
</div>

<style>
  /* Dummy Styles */
  #wrapper { background-color:lightgray; padding:20px 0px; }
  #content { background-color:black; color:white; min-height:300px; }
  #sidebar { background-color:darkgray; color:white; min-height:300px; }
</style>

Max-Width is our friend

Well, not ie6's friend - use a condition include and target width:100% instead

<style>
  #wrapper { width:100%; margin:0 auto; max-width:1024px; }
  #content { width:80%; margin:0 auto; padding:30px 0px; }
  img { max-width:100%; }
</style>
<div id='wrapper'>
  <section id='content'>
    <img src='http://placekitten.com/600/400'/>
  </section>
</div>

<style>
  /* Dummy Styles */
  #wrapper { background-color:lightgray; padding:20px 0px; }
  #content { background-color:black; color:white; min-height:300px; }
  #sidebar { background-color:darkgray; color:white; min-height:300px; }
</style>

Sizing text and setting in em's

Treat Fonts as Proportions Not Pixels

16px is the normal 100% default (from our reset)

the golden formula is target ÷ context = result

context is our base size (in this case 16px)

target is what we set (the size of our header might be 24px)

Reseting the font size

16px is the normal 100% default (from our reset)

<h1>I'm a h1</h1>
<p>I'm a P</p>

adjusting in em's (target ÷ context = result)

<style>
  h1 { font-size:2em;  } /*  32px / 16px = 2  */
</style>
<h1>i'm a h1</h1>
<p>i'm a p</p>

Media Types

@media screen{...}
@media print{...}
@media handheld{...}

ex.
@media screen and (min-width:600px) and (max-width:1200px)

Enter Media Queries

Can be used inline in stylesheets:

@media screen and (max-width:500px) { ... }

Can be used as separate stylesheets:

<link rel="stylesheet" media="screen and (max-width:500px)" href="example.css" />

Can be used with @import (discouraged)

@import url(example.css) screen and (max-width:500px);

Responsive Containers Stack

<style>
  #wrapper { width:100%; margin:0 auto; max-width:1024px; }
  #content { float:left; width:63%; margin-left:1%; }
  #sidebar { float:right; width:33%; margin-right:1%; }

  @media screen and (max-width:600px) {
    #content { float:none; width:98%; margin:0 1%; }
    #sidebar { float:none; width:98%; margin:0 1%; }
  }
</style>
<section id='wrapper'>
  <section id='content'>
    Content
  </section>
  <section id='sidebar'>
    Sidebar

  </section>
  <div style='clear:both;'></div>
</section>

<style>
  /* Dummy Styles */
  #wrapper { background-color:red; padding:20px 0px; }
  #content { background-color:black; color:white; min-height:300px; }
  #sidebar { background-color:darkgray; color:white; min-height:300px; }
</style>

What about adjusting our text sizes?

<style>
  #wrapper { width:100%; margin:0 auto; max-width:1024px; }
  #content { float:left; width:63%; margin-left:1%; }
  #sidebar { float:right; width:33%; margin-right:1%; }

  h1 { font-size:4em; }
  h2 { font-size:3em; }
  img { max-width:100%; }

  @media screen and (max-width:600px) {
    body { font-size:0.5em; }
    p { font-size:1.8em; }
    #content { float:none; width:98%; margin:0 1%; }
    #sidebar { float:none; width:98%; margin:0 1%; }
  }
</style>
<section id='wrapper'>
  <h1>This is the title</h2>
  <section id='content'>
    <h2>Content Title</h2>
    <img src='http://placekitten.com/600/400'/>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in mauris sit amet metus aliquet consequat. Vestibulum rhoncus semper nunc nec rhoncus. Suspendisse in mi et lorem tincidunt pharetra nec ac leo. Curabitur at neque consectetur ligula condimentum porta sed et turpis. Sed condimentum diam id tellus fermentum dapibus lacinia lorem pharetra. Donec id sem ut dui egestas tincidunt ac condimentum ante. Nullam egestas euismod fermentum. Fusce eget magna turpis. Maecenas porttitor lacus eget nibh faucibus venenatis. Suspendisse ultrices ligula vel felis vulputate ut pellentesque nunc ullamcorper.</p>
  </section>
  <section id='sidebar'>
  <h2>Content Title</h2>
  <p> Suspendisse pellentesque pretium enim, in porttitor dui condimentum ac. Mauris viverra laoreet lacus et tempor. Curabitur sit amet libero arcu, nec rutrum dolor. In hac habitasse platea dictumst. Nam sagittis felis nec quam luctus commodo. Cras pharetra volutpat tortor, sed hendrerit sem accumsan at. Vivamus id justo nec orci consectetur porttitor vel vitae metus. Aliquam erat volutpat. Aliquam erat volutpat. Nam enim nisl, ultrices eget porttitor in, iaculis a sapien. Nullam lacinia blandit neque, vitae faucibus est euismod ac. Quisque fermentum mattis aliquet. Quisque viverra cursus rutrum. Sed bibendum, urna at accumsan interdum, arcu velit semper urna, sed congue elit diam a felis. Suspendisse potenti.</p>
  </section>
  <div style='clear:both;'></div>
</section>

<style>
  /* Dummy Styles */
  #wrapper { background-color:lightgray; padding:20px 0px; }
  #content { background-color:black; color:white; min-height:300px; }
  #sidebar { background-color:darkgray; color:white; min-height:300px; }
</style>

Floating Elements

<style>
  #wrapper { width:100%; margin:0 auto; max-width:1024px; }
  #content { float:left; width:98%; margin-left:1%; }

  li { float:left; padding:20px } 

  h1 { font-size:4em; }
  h2 { font-size:3em; }
  img { max-width:100%; }

  @media screen and (max-width:600px) {

    body { font-size:0.5em; }
    p { font-size:1.8em; }
    #content { float:none; width:98%; margin:0 1%; }
  }
</style>
<section id='wrapper'>
  <h1>This is the title</h2>
  <section id='content'>
   <ul>
   	<li>
		<img src="http://placekitten.com/200/100?2"/>
   	</li>
   	<li>
		<img src="http://placekitten.com/200/100?3"/>
   	</li>
   	<li>
		<img src="http://placekitten.com/200/100?4"/>
   	</li>
   	<li>
		<img src="http://placekitten.com/200/100?5"/>
   	</li>
   	<li>
		<img src="http://placekitten.com/200/100?6"/>
   	</li>
   </ul>
  <div style='clear:both;'></div>
  </section>
  <div style='clear:both;'></div>
</section>

<style>
  /* Dummy Styles */
  #wrapper { background-color:lightgray; padding:20px 0px; }
  #content { background-color:black; color:white; min-height:300px; }
  #sidebar { background-color:darkgray; color:white; min-height:300px; }
</style>

Other stuff we can do

Hiding stuff with display:none
Making stuff appear with display:block
Creating a separate print stylesheet with "@media print"
Adjust based on device orientation
Lots of Media Query options

"Breakpoints"

When does your design break? How can you adjust your page to respond?

Exercises

#1: Fix the image, #2: Style the titles larger, #3: Add another break point at 400px, #4: Adjust the title and body font size for each breakpoint, #5: Hide the sidebar under 400px, #6: Show the content block #mobile-nav under 400px;

<style>
  #wrapper { width:100%; margin:0 auto; max-width:1024px; }
  #content { float:left; width:63%; margin-left:1%; }
  #sidebar { float:right; width:33%; margin-right:1%; }
  #mobile-nav { display:none; }

  @media screen and (max-width:600px) {
    #content { float:none; width:98%; margin:0 1%; }
    #sidebar { float:none; width:98%; margin:0 1%; }
  }
</style>

<section id='wrapper'>
  <h1>This is the title</h2>
  <section id='mobile-nav'>This is mobile navigation</section>
  <section id='content'>
    <h2>Content Title</h2>
    <img src='http://placekitten.com/600/400'/>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in mauris sit amet metus aliquet consequat. Vestibulum rhoncus semper nunc nec rhoncus. Suspendisse in mi et lorem tincidunt pharetra nec ac leo. Curabitur at neque consectetur ligula condimentum porta sed et turpis. Sed condimentum diam id tellus fermentum dapibus lacinia lorem pharetra. Donec id sem ut dui egestas tincidunt ac condimentum ante. Nullam egestas euismod fermentum. Fusce eget magna turpis. Maecenas porttitor lacus eget nibh faucibus venenatis. Suspendisse ultrices ligula vel felis vulputate ut pellentesque nunc ullamcorper.</p>
  </section>
  <section id='sidebar'>
  <h2>Content Title</h2>
  <p> Suspendisse pellentesque pretium enim, in porttitor dui condimentum ac. Mauris viverra laoreet lacus et tempor. Curabitur sit amet libero arcu, nec rutrum dolor. In hac habitasse platea dictumst. Nam sagittis felis nec quam luctus commodo. Cras pharetra volutpat tortor, sed hendrerit sem accumsan at. Vivamus id justo nec orci consectetur porttitor vel vitae metus. Aliquam erat volutpat. Aliquam erat volutpat. Nam enim nisl, ultrices eget porttitor in, iaculis a sapien. Nullam lacinia blandit neque, vitae faucibus est euismod ac. Quisque fermentum mattis aliquet. Quisque viverra cursus rutrum. Sed bibendum, urna at accumsan interdum, arcu velit semper urna, sed congue elit diam a felis. Suspendisse potenti.</p>
  </section>
  <div style='clear:both;'></div>
</section>

<style>
  /* Dummy Styles */
  #wrapper { background-color:red; padding:20px 0px; }
  #content { background-color:black; color:white; min-height:300px; }
  #sidebar { background-color:darkgray; color:white; min-height:300px; }
</style>

Setting the Viewport

What about other features?

Enter Modernizr
Works with CSS classes on the body
Mostly used for Javascript detection

But can also test media queries directly

Modernizr.mq('only screen and (max-width: 768px)')  // true

Examples

Where to use?

Discussion..

Homework

Reading

Design

Take one of your designs (or the cat and dog design if you don't have one that's chopped and worked) and make it responsive.
Write and Validate the HTML for all pages of your final project

Responsive Design

Week 7

Order of Business

Final Project Design Critiques

Responsive Design

Flexible Grids

Flexible Images

Media Queries

Exercises

Homework Review

Responsive Design

What does that mean?

Responsive design means:

Design for capabilities

Not individual browsers

Designing to screen size

not exact pixel dimensions

Designing for changing content

Hey, we should be doing that already!

Also, it’s kinda hard.

Why it’s hard

More configurations to test

Need to handle different vertical sizes and relations.

Images and media need to resize.

Titles and Menus need multiple formats.

Must have buy-in from clients, designers, and developers

Relatively new, libraries and support still works-in-progress

Why it’s awesome

Write once, display anywhere

Not designing for a static canvas, designing for responsiveness to content and the user.

Mobile support baked-in

True responsive design will display correctly on the iPad 23 in 2025.

Works regardless of device, orientation or resolution.

So What is Responsive Design?

Flexible Grid Flexible Images Media Queries

How?

Percentages and EM's and not pixels

Float elements, no absolute positioning

Media queries

Fluid image widths

Are these Responsive Design?

Flexible Grids

Flexible/Fluid Grids

Size everything in ems or percentages

Fluid percentages for width

Height needs to be set to auto.

Golden Formula: target ÷ context = result

Maintaining Layouts

If you have to set a width - try to only do it on the container - use percentages inside

a max-width of 100% will make sure your page doesn’t break out of the viewpoint

don’t use height in px for anything with text inside

Bryan Rieger, “Rethinking the Mobile Web”

Mobile first

Use well structured, meaningful markup

the absence of support for @media queries is in fact the first @media query...

Progressively enhance using JavaScript and @media queries

Adapt content (especially images) appropriately for each device

Compress content where possible and don’t include unnecessary data

Containers

Responsive Containers

Responsive Containers Max Width

Flexible Images

should be as easy as img { max-width:100% }

Make this image flexible

Max-Width is our friend

Sizing text and setting in em's

Treat Fonts as Proportions Not Pixels

24 ÷ 16 = 1.5

Reseting the font size

adjusting in em's (target ÷ context = result)

Media Queries

Media Types

@media screen{...}

@media print{...}

@media handheld{...}

ex. @media screen and (min-width:600px) and (max-width:1200px)

Enter Media Queries

Can be used inline in stylesheets:

Can be used as separate stylesheets:

Can be used with @import (discouraged)

Flexible Grid
Flexible Images
Media Queries

should be as easy as
img { max-width:100% }

ex.
@media screen and (min-width:600px) and (max-width:1200px)