Fixed, Liquid, Responsive Layout and Design

Fixed (width) Layout
All containers on the page have defined widths (pixels). A fixed (width) layout will not move in and out when you resize your browser window.

Fixed Layout example {via Max Design}


Fluid/Liquid Layout
All containers on the page have their widths defined in percents. Containers adjust in size (shrink/expand) based on browser window size.

Fluid/Liquid Layout Example {via Twitter Bootstrap}


Responsive Liquid Layout
Content containers react like liquid layouts, but sizing is determined by device characteristics. Device figures out browser window size and changes how the page appears (re-size images and optimize layout) in relation to the dimensions of the browser.

Adaptive Liquid Layout
Content containers react like liquid layouts, but sizing is determined by device characteristics. Web server (where web documents are hosted) detect device attributes (browser window size) and loads a version of the site that is optimized for its dimensions and native features.

Device Resolution Reference {via SpireLight Media}
960 grid system (grid templates for Fireworks, Photoshop and Illustrator available}
Liquid Grids the Easy Way {via Max Design}
Responsive Web Design by Ethan Marcotte {via A List Apart}
Web Aesthetics by Paul Robert Lloyd {via A List Apart}

Foundation 3 (Responsive Design created using CSS Framework system created by ZURB)
Twitter Bootstrap (Responsive Design created using CSS Framework system created by Twitter)

Design Tutorial Resources
WebDesign Tuts (visual focused tutorials)
PSD Tuts (interface focused tutorials using Photoshop)
Vector Tuts (interface focused tutorials using Illustrator)