Static     Fluid     Adaptive     Responsive

RESPONSIVE

OR WHAT?

Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan aliquam sem sed fringilla. Vivamus consequat purus est, ac luctus augue pretium elementum. Phasellus ultrices nunc vitae orci blandit, a vulputate erat tristique. Pellentesque gravida convallis nulla sed commodo. Integer id sagittis nibh. Aliquam a porttitor tortor, vitae venenatis nunc. Aliquam erat volutpat. Suspendisse tempus semper finibus. Vivamus pretium mattis neque, quis sollicitudin ligula fringilla eu. Phasellus blandit tempor tellus id sodales. Etiam et nibh est. Aenean sed mi euismod, aliquet lorem feugiat, luctus odio. Ut laoreet mi in metus porttitor fringilla.

 

Sed quis fringilla urna. Etiam non nisl vel dolor ullamcorper posuere. Aliquam tortor erat, consequat a elit sit amet, mollis laoreet est. Duis non luctus arcu. Mauris finibus id ante in suscipit. Vivamus scelerisque non sapien vel malesuada. Donec condimentum orci at metus sagittis, et maximus sem feugiat.

 

Duis eget libero sem. Pellentesque at sem tristique, iaculis odio vel, iaculis eros. Phasellus hendrerit, eros sed rutrum blandit, urna mi gravida lectus, eget pellentesque orci neque id ipsum. In enim odio, hendrerit ut condimentum vel, mattis et nisl. Nulla erat ipsum, posuere sit amet nisi aliquam, dictum iaculis purus. Aenean dui orci, efficitur bibendum vehicula vel, consectetur ut nulla. Suspendisse nunc nunc, consequat et quam ac, vestibulum lacinia nibh. In sit amet lectus ac purus ultrices facilisis vel ut enim.

What is this all about?

There is often a great deal of confusion around the definition of responsive design. Even the proper definition is tricky to put into words. This site is to serve you as a functional, visual glossary of the four types of web layouts to be familliar with: Static, Fluid, Adaptive, and of course Responsive.

 

Use this site for reference or to help you demonstrate the available layout options to clients and colleagues.

Column 2A

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan aliquam sem sed fringilla. Vivamus consequat purus est, ac luctus augue pretium elementum. Phasellus ultrices nunc vitae orci blandit, a vulputate erat tristique. Pellentesque gravida convallis nulla sed commodo. Integer id sagittis nibh. Aliquam a porttitor tortor, vitae venenatis nunc. Aliquam erat volutpat. Suspendisse tempus semper finibus. Vivamus pretium mattis neque, quis sollicitudin ligula fringilla eu. Phasellus blandit tempor tellus id sodales. Etiam et nibh est. Aenean sed mi euismod, aliquet lorem feugiat, luctus odio. Ut laoreet mi in metus porttitor fringilla.

 

Sed quis fringilla urna. Etiam non nisl vel dolor ullamcorper posuere. Aliquam tortor erat, consequat a elit sit amet, mollis laoreet est. Duis non luctus arcu. Mauris finibus id ante in suscipit. Vivamus scelerisque non sapien vel malesuada. Donec condimentum orci at metus sagittis, et maximus sem feugiat.

Column 2B

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan aliquam sem sed fringilla. Vivamus consequat purus est, ac luctus augue pretium elementum. Phasellus ultrices nunc vitae orci blandit, a vulputate erat tristique. Pellentesque gravida convallis nulla sed commodo. Integer id sagittis nibh. Aliquam a porttitor tortor, vitae venenatis nunc. Aliquam erat volutpat. Suspendisse tempus semper finibus. Vivamus pretium mattis neque, quis sollicitudin ligula fringilla eu. Phasellus blandit tempor tellus id sodales. Etiam et nibh est. Aenean sed mi euismod, aliquet lorem feugiat, luctus odio. Ut laoreet mi in metus porttitor fringilla.

 

Sed quis fringilla urna. Etiam non nisl vel dolor ullamcorper posuere. Aliquam tortor erat, consequat a elit sit amet, mollis laoreet est. Duis non luctus arcu. Mauris finibus id ante in suscipit. Vivamus scelerisque non sapien vel malesuada. Donec condimentum orci at metus sagittis, et maximus sem feugiat.

 

Duis eget libero sem. Pellentesque at sem tristique, iaculis odio vel, iaculis eros. Phasellus hendrerit, eros sed rutrum blandit, urna mi gravida lectus, eget pellentesque orci neque id ipsum. In enim odio, hendrerit ut condimentum vel, mattis et nisl. Nulla erat ipsum, posuere sit amet nisi aliquam, dictum iaculis purus. Aenean dui orci, efficitur bibendum vehicula vel, consectetur ut nulla. Suspendisse nunc nunc, consequat et quam ac, vestibulum lacinia nibh. In sit amet lectus ac purus ultrices facilisis vel ut enim. Morbi hendrerit interdum metus a scelerisque. Vivamus tempor facilisis velit vel feugiat. Fusce lobortis velit sed leo finibus, a lobortis ligula auctor.

Column 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan aliquam sem sed fringilla. Vivamus consequat purus est, ac luctus augue pretium elementum. Phasellus ultrices nunc vitae orci blandit, a vulputate erat tristique. Pellentesque gravida convallis nulla sed commodo. Integer id sagittis nibh. Aliquam a porttitor tortor, vitae venenatis nunc. Aliquam erat volutpat. Suspendisse tempus semper finibus. Vivamus pretium mattis neque, quis sollicitudin ligula fringilla eu. Phasellus blandit tempor tellus id sodales. Etiam et nibh est. Aenean sed mi euismod, aliquet lorem feugiat, luctus odio. Ut laoreet mi in metus porttitor fringilla.

 

Sed quis fringilla urna. Etiam non nisl vel dolor ullamcorper posuere. Aliquam tortor erat, consequat a elit sit amet, mollis laoreet est. Duis non luctus arcu. Mauris finibus id ante in suscipit. Vivamus scelerisque non sapien vel malesuada. Donec condimentum orci at metus sagittis, et maximus sem feugiat.

 

Duis eget libero sem. Pellentesque at sem tristique, iaculis odio vel, iaculis eros. Phasellus hendrerit, eros sed rutrum blandit, urna mi gravida lectus, eget pellentesque orci neque id ipsum. In enim odio, hendrerit ut condimentum vel, mattis et nisl. Nulla erat ipsum, posuere sit amet nisi aliquam, dictum iaculis purus. Aenean dui orci, efficitur bibendum vehicula vel, consectetur ut nulla. Suspendisse nunc nunc, consequat et quam ac, vestibulum lacinia nibh. In sit amet lectus ac purus ultrices facilisis vel ut enim.