Class 08 Notes



  • Midterm Project
  • Questions for Luke W.


Today’s class objectives are to:

  • Help you with your midterm project.
Be sure to post a question for Luke before the end of class today:

Midterm Project – Due October 25


Post #1-4 on your WordPress blog and post #1-5 on the class server.
  1. Informal Competitive Analysis
  2. Communication Brief
  3. Create a Site Map
  4. Create Design Comps (Total of six)
    Home page
    990 (desktop)
    768 (tablet)
    320 (smartphone)
    Landing page
    990 (desktop)
    768 (tablet)
    320 (smartphone)
  5. Build a 2 page prototype in HTML5/CSS. (This is the desktop version only)

Build a prototype for 2 pages of the site incorporating flexible grid (including margins + padding) and flexible images (no media queries necessary for this assignment). The prototype does not need to contain any visual design. It can be created with a series of gray or colored boxes. This is only a mockup of the site.


Here’s a suggested process for you.

1. Using the Design comps for the desktop version (990px) of your Home page and Landing page, it’s helpful to create a grey-box wireframe in Photoshop (though this is not required). I think it’s easier to build the prototype if you have a grey box version.


2, Build the page in HTML5 and CSS with a fixed layout.

  • Build the page like you normally would using HTML5 and CSS
  • Note widths for site based on your Photoshop file.
  • Use starter code for HTML 5 Two column layout located on everything about web site:
  • Change widths in the CSS
  • Add background colors
  • Add navigation
  • Add “normal size” images
Prototype – Fixed Layout (HTML5)

3. After building fixed layout make the font-size, widths, margins + paddings, and images flexible

How to make it flexible

    • Change widths to %
    • Change fonts-size to ems
    • Change margins and padding to %. (Remember to base this on the size of the elements container for BOTH margin and padding)
    • Add below rule to CSS
img {
max-width: 100%;
  • Make images “flexible.” Make your images twice as large and make sure to remove the width and height information after inserting the images into the HTML.
Prototype – Flexible Layout

These steps will lead to a site that scales, but does not reformat the layout. We will change the layout of the site with the use of Media Queries.

Sneak Peek

This is where we’re going with it after the midterm project. USING MEDIA QUERIES IS NOT REQUIRED TO THE MIDTERM PROJECT.

Prototype – Flexible Layout +  Media Queries

Leave a Comment