Emily Kauffman

Back to teaching

CIS 275 Lecture 22: Intro to Responsive Web Design

Goals

  1. Gain an understanding of Responsive Web Design
  2. Understand the flexible grid

Responsive Web Design: What is it? Why do we care?

Slides

Flexible Grid: Intro

Flexible Grids

  • Turning a layout into something flexible
  • Use the formula!

In Class Exercises

We're going to take an inflexible, fixed layout and convert it into a flexible, fluid layout using the target / context = result formula. there's no need to hand this in. This is for practice! You'll need to have a flexible layout for your final project.

Setup

  1. Set up a new project to hold today's exercises.
  2. Create an index page and add the following as the body:
<body>
    <div class="container">
    <header>
      <h1>I'm an inflexible layout</h1>
    </header>
    <main>
      <p>lorem ipsum main content</p>
      <p>lorem ipsum main content</p>
      <p>lorem ipsum main content</p>
      <p>lorem ipsum main content</p>
      <p>lorem ipsum main content</p>
      </main>
    <aside>
      <p>sidebar content</p>
      <p>sidebar content</p>
      <p>sidebar content</p>
      <p>sidebar content</p>
      <p>sidebar content</p>
    </aside>
    <footer>
      <p>footer content</p>
      <p>footer content</p>
      <p>footer content</p>
    </footer>
    </div><!-- /container -->
</body>
  1. Add a stylesheet and add the following:
.container {
	width: 960px;
	margin: 0 auto;
}

header {
	background: #ccc;
}

main {
	width: 600px;
	float: left;
	background: firebrick;
}

aside {
	width: 360px;
	float: right;
	background: cornflowerblue;
}

footer {
	clear: both;
	background: forestgreen;
}
  1. Download/copy and paste Eric Meyer's reset stylesheet and add it to your site.
  2. When you open the site, it should be a basic inflexible (fixed layout).

Change to Flexible

  1. Get rid of the 960 pixel page width on the .container. Set it to some % of the browser window. This will be the container for all of our content.
  2. Use the formula to convert the main column into a proportional percentage.
  3. Use the formula to convert the aside column into a proportional percentage.

Feedback

I threw a lot of information at you today. If you need more examples or a further explanation, please let me know. Comment in the Lecture 22 channel:

  1. One thing you've learned or found interesting.
  2. One question or confusion that you have.

Next Class

Ingredient #2: Responsive media/images, media queries