Adaptive

Liquid

Responsive

Static


Liquidapsive

Achtung:Die Navigation zu anderen Seiten dieser Webpräsenz wird durch ein JavaScript behindert. Man kann dies testen, in dem man JavaScript deaktiviert.

Auf dieser Seite werden vier unterschiedliche Gestaltungsvarianten für Webseiten behandelt:

  • statisch
  • liquid
  • adaptiv
  • responsiv
Willkommen

Statisch

Statische Layouts sind die traditionell im Web Webdesign: ein Design, dass irgendwie in der Mitte des Bildschirms platziert ist und bei dem man horizontal scrollen muss, wenn der Bildschirm kleiner ist als das Design. Eine Reaktion auf diese Gestaltungsform sind sogenannte M dot Websites (m.), bei denen auf der Basis einer Serverseitigen Browserweiche eine komplett andere Website ausgeliefert wird, wenn ein Besucher mit einem Gerät kleinerer Auflösung die Seite ansurft.

Liquid

Liquid (auch "Fluid") ist ein Webdesign, dass sich auf Grund prozentualer Vorgaben kontinuierlich an die Größe des Ausgabefensters anpasst. Tendenzilell hat diese Methode ihre Grenzen bei besonders kleinen oder besonders großen Ausgabegeräten.

Adaptiv

Adaptives Design wird durch eine Aufeinanderfolge unterschiedlichen Layouts für die unterschiedlichen Bildschirmauflösungen charakterisiert. Innnerhalb eines layouts ändert sich die Größe der dargestallten Elemente nicht. Im Grund kann man sich ein adaptives Layout als Aufeinanderfolge von statischen Layouts vorstellen.

Responsiv

Beim responsiven Layout hat man auch unterschiedliche Layouts für unterschiedliche Bildschirmauflösungen. Jedoch werden innerhalb eines Layouts die einzelnen Elemente dynamisch skaliert, wenn sich die Fenstergröße ändert. Im Grund kann man sich ein responsiv Layout als Aufeinanderfolge von fluid Layouts vorstellen.

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

Month dd, yyyy

Summary summary summary summary summary summary

Content content content content content content content content content content content content content content content content

Link

Title

Month dd, yyyy

Summary summary summary summary summary summary

Content content content content content content content content content content content content content content content content

Link