Web-Layout
Abschlussprüfung Mediengestalter 2014
Abschlussprüfung Mediengestalter 2014
Kartei Details
| Karten | 14 |
|---|---|
| Sprache | Deutsch |
| Kategorie | Marketing |
| Stufe | Berufslehre |
| Erstellt / Aktualisiert | 05.05.2014 / 07.11.2018 |
| Weblink |
https://card2brain.ch/box/weblayout
|
| Einbinden |
<iframe src="https://card2brain.ch/box/weblayout/embed" width="780" height="150" scrolling="no" frameborder="0"></iframe>
|
Responsive Webdesign
= flexible Website: die Seite muss auf einem flexiblen Raster basieren, eingebettete Grafiken müssen flexibel sein. Für verschiedene Screens werden verschiedene Ansichten angesteuert.
Cross-Media (PC und mobile devices)
PC, Tablet, Smartphone − verschiedene Seiten oder CSS-Weichen sowie Responsive Webdesign
Layout für mobile Geräte (Richtlinien)
• 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
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
Was sind Templates?
Welche Vorteile haben sie?
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
Was ist ein Fixed Layout (starres Layout)?
Welche Vor- und Nachteile hat dieses?
- 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
Was ist ein Fluid Layout (flüssiges Layout)?
Welche Vor- und Nachteile hat es?
- 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
Was ist ein Elastic Layout (elastisches Layout)?
Welche Vor- und Nachteile hat es?
- 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.
Was sind Adaptive Websites?
Welche Vor- und Nachteile hat es?
- 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
In welche Bereiche teilt sich eine Website?
- Seitenkopf (Head)
- Navigationsbereich
- Inhaltsbereich (Content)
- Seitenfuß (Footer)
Welche Gestaltungregeln gibt es für Websites?
- harmonische Seitenaufteilung (z.B. Goldener Schnitt 1:1,618)
- starke Kontraste
- gut lesbare, ansprechende Typografie, kein Blocksatz
- ausreichend freie Flächen
Welche Vorteile bringt ein Gestaltungsraster?
- folgerichtiges und wiedererkennbares Erscheinungsbild
- Elemente mit gleicher Funktion stehen immer an gleicher Stelle
Was gibt es bei der Web-Typografie zu beachten?
- 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
Was ist der Viewport einer Website?
der tatsächlich im Browserfenster zur Verfügung stehende Anzeigebereich mit dem gearbeitet werden kann
