This document discusses different CSS layout types including fixed width, liquid, and responsive designs. It defines the advantages and disadvantages of each type as well as features that characterize them. Examples are provided of websites that use fixed width, liquid, and responsive designs. Guidelines are offered for determining if a site uses responsive design and tools are presented for cross-browser testing and reviewing responsive design projects. The deliverable is to build a website highlighting projects from graduating students using techniques learned.

1. WDES105
Day 2 -- CSS Layout Types
about.me/babon

2. CSS Layout Types
Nearly every page design you see falls into one
of two types:
● Fixed Width
● Liquid
about.me/babon

3. Fixed Width Layouts
Advantages:
● Looks the same on all monitors
Disadvantages:
● Looks the same on all monitors
about.me/babon

4. Fixed Width Layouts
Features:
● Typically uses a "wrapper" with a width to
contain content
○ 760 pixels (800 X 600 monitors)
○ 960 pixels (1024 X 768 monitors)
about.me/babon

5. Liquid Layouts
Advantages:
● Adjusts to fit all monitors
Disadvantages:
● Adjusts to fit all monitors
about.me/babon

6. Liquid Layouts
Features:
● Typically DOES NOT use a "wrapper" to
contain content (no fixed width).
● Typically uses percentage widths instead of
pixel widths.
about.me/babon

7. Responsive Design
Advantages:
● Adjusts to fit all monitors and looks different
on smaller monitors
Disadvantages:
● requires more thought and additional coding.
about.me/babon

8. Responsive Design
Features:
● Takes advantage of "media queries" in
HTML5.
Championed by Ethan Marcotte.
about.me/babon

9. Layout Examples
Fixed Width:
● pretty much most of the Web
Liquid:
● Beantown Web
● CSS3: The Missing Manual
Responsive Design
● The Boston Globe
● CSS3: The Missing Manual about.me/babon

10. Responsive Design
How to determine if a site has been designed
responsively:
● Use The Responsinator
about.me/babon

11. Other
Cross Browser Testing:
● Review of Cross-Browser Testing Tools
about.me/babon

12. WDES105 Deliverable
Build a website that highlights the Practicum
projects of four teams of graduating CDIA Web
Design and Web Development students.
project.zip
Same criteria as WDES104 project + add
positioned elements and z-index, if practical.
about.me/babon