Grundideen

Praedator

Bevor man eine Webseite gestaltet sollte man sich über das Layout gedanken machen. Dabei ist es heut üblich, dass Web-Seiten nicht für ein festes Format gestaltet werden sondern auf die unterschiedlichen Ausgabegrößen angepasst sind.

Die Ausgabegröße wird hauptsächlich durch das verwendet Medium bestimmt.

Bildschirm
Tablet
Handy
Drucker

Um dieses zu realisieren gibt es 3 Grundansätze

Responsive Webdesign
hierbei wird die Ausgabe der Inhalt über CSS in Abhängigkeit von der Pixelgröße der Webseite in ihrer Darstellung verändert.
Dynamische Bereitstellung (Dynamic serving)
verwendet unterschiedlichen HTML-Code für die bereitgestellten Größen.
Unterschiedliche URLs (Separate URLs)
ist der Weg für die jeweiligen Gerätetypen eine eigene Web-Seite zu erstellen. Man den diese Art auch M dot Domain da diese Web-Seite meist unter m.xyz.de betrieben wird.

In der Praxis kommt oft eine Vermischung vor. Dies nennt man diese Hybridlösung RESS (Responsive Design + Server Side Components).

Web-Side-Typen

Bei der Web-Seiten Gestaltung haben sich unterschiedliche Phylosophien entwickelt.

Responsive Webdesign
reagiert auf jede Ausgabegröße dynamisch
Adaptic Webdesign
behinhaltet verschiedene Grundgrößen die eigenständig gestaltet sind. Dabei richtet sich diese Art auf den Viewport des jeweiligen Endgerätes.
Liquiden Webdesign
verändert die Größe der Inhalte (Zoom). Dabei werden die Inhalte bei kleiner Auflösung sehr klein dargestellt.

Layout-Side-Typen

Hierbei wird das Verhalten des Web-Design auf unterschiedliche Größen verstanden.

Fixed Layout
dabei hat das Layout fest definierte Pixel für Breite und Höhe. Das Layout passt sich nicht an das Browserfenster an. Wird das Fenster kleiner erscheint ein Scollbalken oder wenn es größer wird ein ungenutzter Freiraum.
Fluid Layout
berücksichtigt die Breite des Browserfensters indem die Breitenangaben prozentual zu Fensterbreite angegeben werden.
Elastic Layout
versucht das Browserfenster immer vollständig auszufüllen. Dabei wird die Breite aber auch die Höhe berücksichtigt. Alle Inhalte sind sehr flexibel, so dass auch die Grafiken skaliert werden müssen.

Übersicht