Wdes105 day 2

181 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
181
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Wdes105 day 2

  1. 1. WDES105Day 2 -- CSS Layout Types about.me/babon
  2. 2. CSS Layout TypesNearly every page design you see falls into oneof two types:● Fixed Width● Liquid about.me/babon
  3. 3. Fixed Width LayoutsAdvantages:● Looks the same on all monitorsDisadvantages:● Looks the same on all monitors about.me/babon
  4. 4. 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
  5. 5. Liquid LayoutsAdvantages:● Adjusts to fit all monitorsDisadvantages:● Adjusts to fit all monitors about.me/babon
  6. 6. 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
  7. 7. Responsive DesignAdvantages:● Adjusts to fit all monitors and looks different on smaller monitorsDisadvantages:● requires more thought and additional coding. about.me/babon
  8. 8. Responsive DesignFeatures:● Takes advantage of "media queries" in HTML5.Championed by Ethan Marcotte. about.me/babon
  9. 9. 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
  10. 10. Responsive DesignHow to determine if a site has been designedresponsively:● Use The Responsinator about.me/babon
  11. 11. OtherCross Browser Testing:● Review of Cross-Browser Testing Tools about.me/babon
  12. 12. 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

×