IDCC 380: Web Design II Spring 2010

Exercises 1-5: CSS Layout Templates -- Ice, Liquid, and Jello 01/25/10

Check this out:

Our layout exercises will deal with flow, layers (divs) and absolute pixel placement. The PowerPoint tutorial on Divs and Floats will prepare you for some of the basic layout and design principles that are predominant on the Web today. The tutorial is also available in PDF format for printing (Divs and Floats PDF). The print version also supplies notes on the discussion.

In preparation for building the five templates of exercises one through five, we will discuss the design terms "ice," "jello," (aka "elastic") and "liquid" (aka, "fluid") page layouts. Over the next few days, you will be creating pages that participate in each of these design schools. Read John Potter's article Ice, Liquid and Jello Design for a quick thumbnail overview of these three design principles. Pay special attention to his animated layouts. Also take a look at Kayla Knight's Fixed vs. Fluid vs. Elastic Layout: What's The Right One For You?

Following are a few selected Web sites that illustrate the three layout concepts of exercises one through five.

Liquid (fluid) design (all elements flow):
http://www.webstandards.org/
http://www.htmlbasictutor.ca/flexible-liquid-design.htm
http://www.maxdesign.com.au/presentation/em/
http://www.w3.org/
http://bluerobot.com/web/layouts/
http://www.mardiros.net/liquid-design.html
http://www.webdeveloper.com/forum/showthread.php?t=63332

Ice design (all elements are fixed):
http://www.mpix.com/
http://foreignexchange.tv/
http://lenovo.com/us/en/

Jello (elastic) design (some elements flow; some are fixed):
http://icanaz.org/
http://www.w3schools.com/css/
http://webdesign.about.com/od/layout/i/aa060506.htm
http://www.sitepoint.com/
http://webstyleguide.com/page/fixed-flex.html
http://www.themaninblue.com/writing/perspective/2003/12/22/
http://www.zdnet.com/
http://roselli.org/adrian/articles/liquid.asp
http://cyber.bentley.edu/faculty/wb/courses/370/
http://www.cnn.com/
http://bentley.edu/
http://lsvp.wordpress.com/
http://webdesigninfo.wordpress.com/web-templates/
http://www.webforumz.com/
http://www.search-this.com/2007/11/14/hip-to-be-square/
http://www.d.umn.edu/
http://www.evolt.org/article/Liquid_Design_for_the_Web/%2020/15177/

On your layouts.htm gateway page, you will provide floated thumbnail screenshots (no larger than 200px x 200px) hyperlinked to an actual Web site illustrating each of these three layout types. I will provide explicit instructions in class on all aspects of this complete layout assignment.

If you have questions, just e-mail me at wbuchholz@bentley.edu. Feel free to comment on this announcement, or if you want to e-mail it, click on the little mail icon directly below.

Labels: design, ice layout, jello layout, John Potter, Kayla Knight, layout, liquid layout, template

WJB posted on Monday, January 25, 2010 (permalink) 0 Comments Links to this post

  top of page

---