CSS Layout TypesNearly every page design you see falls into oneof two types:● Fixed Width● Liquid about.me/babon
Fixed Width LayoutsAdvantages:● Looks the same on all monitorsDisadvantages:● Looks the same on all monitors about.me/babon
Fixed Width LayoutsFeatures:● 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
Liquid LayoutsAdvantages:● Adjusts to fit all monitorsDisadvantages:● Adjusts to fit all monitors about.me/babon
Liquid LayoutsFeatures:● Typically DOES NOT use a "wrapper" to contain content (no fixed width).● Typically uses percentage widths instead of pixel widths. about.me/babon
Responsive DesignAdvantages:● Adjusts to fit all monitors and looks different on smaller monitorsDisadvantages:● requires more thought and additional coding. about.me/babon
Responsive DesignFeatures:● Takes advantage of "media queries" in HTML5.Championed by Ethan Marcotte. about.me/babon
Layout ExamplesFixed Width:● pretty much most of the WebLiquid:● Beantown Web● CSS3: The Missing ManualResponsive Design● The Boston Globe● CSS3: The Missing Manual about.me/babon
Responsive DesignHow to determine if a site has been designedresponsively:● Use The Responsinator about.me/babon
OtherCross Browser Testing:● Review of Cross-Browser Testing Tools about.me/babon
WDES105 DeliverableBuild a website that highlights the Practicumprojects of four teams of graduating CDIA WebDesign and Web Development students.project.zipSame criteria as WDES104 project + addpositioned elements and z-index, if practical. about.me/babon
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.