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.
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
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
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
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