Adaptive

Liquid

Responsive

Static

How To Use

Ever wondered what the difference between Adaptive, Responsive, Static and Liquid sites is? Had someone try and explain it only to be left more confused?

Pick a flavor from the drop down on the top of the page then drag your window narrower and wider, taller and shorter. It will make much more sense when you see for yourself how the approach works.

Single Column Layout Two Column Layout Three Column Layout

Adaptive

Adaptive is characterized by having defined layouts for different resolutions. Within each layout, resizing the window does not change the layout.

You can think of Adaptive as a series of Static layouts.

Liquid

Liquid (also called "Fluid") is characterized by scaling the width of parts of the design relative to the window. It tends to fail when the window is much smaller or much larger than it was originally designed for.

Responsive

Responsive is characterized by having defined layouts for different resolutions. Within each layout, the design is liquid and resizes the width of elements relative to the changing window size.

You can think of Responsive as a series of Liquid layouts.

Static

Static layouts are the traditional web: one design that sits in the center of the page and requires horizontal scrolling if the window is too small for it. M dot sites are the traditional answer to this, providing a wholly separate site for a lower resolution - and all the work of creating a separate site.

Title 01

Month dd, yyyy

Summary01_01 summary01_02 summary01_03 summary01_04 summary01_05 summary01_06

Content01_01 content01_02 content01_03 content01_04 content01_05 content01_06 content01_07 content01_08 content01_09 content01_10 content01_11 content01_12 content01_13 content01_14 content01_15 content01_16

Link

Title 02

Month dd, yyyy

Summary02_01 summary02_02 summary02_03 summary02_04 summary02_05 summary02_06

Content02_01 content02_02 content02_03 content02_04 content02_05 content02_06 content02_07 content02_08 content02_09 content02_10 content02_11 content02_12 content02_13 content02_14 content02_15 content02_16

Link

Title 03

Month dd, yyyy

Summary03_01 summary03_02 summary03_03 summary03_04 summary03_05 summary03_06

Content03_01 content03_02 content03_03 content03_04 content03_05 content03_06 content03_07 content03_08 content03_09 content03_10 content03_11 content03_12 content03_13 content03_14 content03_15 content03_16

Link

Title 04

Month dd, yyyy

Summary04_01 summary04_02 summary04_03 summary04_04 summary04_05 summary04_06

Content04_01 content04_02 content04_03 content04_04 content04_05 content04_06 content04_07 content04_08 content04_09 content04_10 content04_11 content04_12 content04_13 content04_14 content04_15 content04_16

Link04

Title 05

Month dd, yyyy

Summary05_01 summary05_02 summary05_03 summary05_04 summary05_05 summary05_06

Content05_01 content05_02 content05_03 content05_04 content05_05 content05_06 content05_07 content05_08 content05_09 content05_10 content05_11 content05_12 content05_13 content05_14 content05_15 content05_16

Link05