Web-Layout

PC, Tablet, Smartphone − verschiedene Seiten oder CSS-Weichen sowie Responsive Webdesign

• Spezielle Usability
• Inhalt reduzieren - schnelle Informationswiedergabe
• Einspaltiges Layout
• Navigation oben und unten bzw. Back-Button
• Texteingabe minimalisieren
• Design für Touchscreen – Achtung Schriftgröße!
  > Mobile devices haben eine ernorme Pixeldichte, sodass u.U. Elemente nur 1/4 so groß erscheinen, wie auf einem Monitor
• Media Queries

Abfrage der Eigenschaften und Fähigkeiten von Geräten wie
Breite / Höhe des Browserfensters und des Gerätes,  Bildschirmauflösung, Quer- oder Hochformat

Ein Template ist eine Musterseite für Webseiten und dient als Vorlage für alle weiteren Seiten mit dem Inhalt
der auf jeder Seite zu sehen sein soll wie z.B. Hintergrund, Navigation und Logo. Für veränderbare Texte und
Bilder dienen im Template Platzhalter. Mit CSS wird dem Template das gewünschte Erscheinungsbild gegeben
(Schrift, Farben, Rahmen, Abstände).

Vorteile von Templates:
• Zeitersparnis beim Gestalten
• Einheitliche Gestaltung
• Einfache Pflege oder Erweiterung
• Einfache gestalterische Änderungen

- Layout mit einem starren Gestaltungsraster (festen Pixelwerten basiert)
- Website arbeitet mit festgelegten Abmessungen, verändern sich wenn Browserfenster größer oder kleiner wird
- Die Website nimmt einen festgelegten Bereich im Browser ein, ist das Browserfenster kleiner, wird die Seite nicht vollständig angezeigt und es werden Scrollbalken angezeigt
- ist das Browserfenster größer als die Website, entsteht ein Freiraum um die Seite herum. Dieser Freiraum sollte vom Webdesigner ebenfalls möglichst ansprechend gefüllt werden

Vorteile eines starren Layouts
• Unkomplizierte Planung des Gestaltungsrasters
• Viel gestalterische Freiheit
• Unkomplizierte technische Umsetzung
• Für den Kunden leicht verständlich

Nachteile eines starren Layouts
• Es wird nur für einen bestimmten Viewport gestaltet.
  > Ist der Viewport größer, wird Platz verschenkt, ist der Viewport zu klein, wird die Seite abgeschnitten.
• Auf Basis eines starren Rasters kann kein „echtes“ responsive Design erstellt werden

- Website passt sich der Breite des Browserfensters an
- auf großen Monitoren können mehr Inhalte abgebildet werden als auf kleinen Monitoren
- um die notwendige Flexibilität zu erreichen, müssen Spalten des Gestaltungsrasters variabel sein
- Spalten basieren auf Prozentwerten und nicht auf Pixelwerten
- Website ist normalerweise nur in der horizontalen Ausrichtung flexibel, die vertikale Ausrichtung bleibt starr
- häufig wird eine Obergrenze für die maximale Ausbreitung des Designs festgelegt
- technische Umsetzung ist komplizierter
- alle Gestaltungselemente die in einer flexiblen Spalte untergebracht sind, müssen in der Breite skalierbar sein.
- Prozentwerte sind in Layoutprogrammen jedoch üblicherweise nicht möglich, Grafiken müssen entsprechend vorbereitet werden
- ein fluid Layout wird bei inhaltsschweren Seiten wie Online-Shops, Magazin-Seiten oder Foren verwendet.
- es ist auch die Grundlage eines „echten“ responsive Designs.

Vorteile eines fluid Layouts
• Optimale Platznutzung
• Es können häufig mehr Inhalte dargestellt werden
• Mit einem flüssigen Raster ist ein „echtes“ responsive Design realisierbar.

Nachteile eines fluid Layouts
• Komplexere Planung des Gestaltungsrasters
• gestalterisch eingeschränkt, da Bereiche flexibel gestaltet werden müssen
• technische Umsetzung ist etwas komplexer als bei einem starren Layout
• Aufwändige Anpassung der Seiteninhalte

- bei elastic Layouts sind die Seitenelemente sowohl in der Breite, als auch in der Höhe variabel
- Design skaliert sich proportional zur Größe des Browserfensters
- Gestaltungsraster wird so aufgebaut, dass Spalten und Zeilen auf Prozentwerten, auf „em“ oder neuerdings
„rem“ basieren
- Technisch und gestalterisch ist dieser Layouttyp am komplexesten und daher wohl auch am seltensten
- Grafiken und Seiteninhalte müssen extrem flexibel sein
- Layout lässt sich nicht 1:1 in einem Layoutprogramm umsetzen
- Einsatz von Pixelgrafiken kann evtl. zu Problemen führen

Vorteile eines elastic Layouts
• Perfekte Platznutzung
• Inhalte werden proportional und so groß wie möglich abgebildet
• Auf Basis eines elastic Layouts lässt sich ein „echtes“ responsive Design entwickeln.

Nachteile eines elastic Layouts
• Komplex in der Planung des Rasters
• Komplex in der Gestaltung des Layouts
• Komplex in der technischen Umsetzung
• Komplex in der Anpassung der Seiteninhalte.
  > Diese sind häufig nicht flexibel genug.

- adaptive Website ist für bestimmte Displaygrößen optimiert
- Layouttyp ist meist fixed und es werden verschiedene Ansichten für exakte Viewports etnwickelt
- Abmessungen orientieren sich häufig an bestimmten Geräten z.B. dem iPad
- Homepage wird  mit Hilfe von Media Queries für diese Geräte optimiert
 

Vorteile:
+ feste Abmessungen, deshalb kann mit klassischen Mockups, Wireframes und Skizzen gearbeitet werden
+ gestalterischer Freiraum, da starres Raster
+ technisch recht unkompliziert
+ Inhalte müssen kaum fl exibel sein
+ zeitsparend

Nachteile:
- nur bestimmte Viewports/Geräte
- Fehler auf abweichenden Geräten
- aufwändige Zielgruppenanalyse um Viewports zu bestimmen
- oft mehr CSS-Code als notwendig

- Seitenkopf (Head)
- Navigationsbereich
- Inhaltsbereich (Content)
- Seitenfuß (Footer)

- harmonische Seitenaufteilung (z.B. Goldener Schnitt 1:1,618)
- starke Kontraste
- gut lesbare, ansprechende Typografie, kein Blocksatz
- ausreichend freie Flächen

- folgerichtiges und wiedererkennbares Erscheinungsbild
- Elemente mit gleicher Funktion stehen immer an gleicher Stelle

- Fonts müssen auf dem Zielrechner installiert sein
- besondere Schriftzüge in Headline oder Logo als GIF
- sehr sparsamer Einsatz von fetter und kursiver Schrift
- Zeilenabstand mind. 130% der Schrifgröße
- linksbündiger Satz, kein Blocksatz (keine Silbentrennung)
- kurze Absätze mit 5-7 Zeilen
- hohe Schriftgrade
- Laufweite und x-Höhe groß
- serifenlos

der tatsächlich im Browserfenster zur Verfügung stehende Anzeigebereich mit dem gearbeitet werden kann