Haupt-Reiter

Webseitenlayout

Das Screendesign wird gewöhnlich in PhotoShop, InDesign oder Illustrator umgesetzt. Beim Screendesign ist es wichtig von Anfang an die Usability im Auge zu haben das das Design dementsoprechend zu erstellen. Bei der Usabilty ist die Größe, das Raster, die gewählte Typo, die zuverwendenden Farben, Bildformate und Navigationsstrukturen und -hilfen zu beachten!

Im ScreenDesign  bietet es sich an, mit den Größenangaben der mobile Devices zu arbeiten und  anschließen auf 33% Anischtsgröße zu reduzieren (wie groß wird was dargestellt, wichtig für
Buttons und Text, da Touchscreen) . Cross-Media (PC und mobile Devices): PC, Tablet-PC, Smartphone  verschiedene Seiten oder CSS-Weichen und „Responsive Webdesign“ (flexible Webseiten: die  Seite muss auf einem flexiblen Grid basieren; eingebettete Grafiken müssen flexible sein;für  verschiedene Screens werden verschiedene Ansichten der Website angesteuert ), siehe:
http://www.elmastudio.de/inspiration/webdesign-trends-funf-responsive-webseiten-layout-analysiert

Layout – Usability für mobile Devices – welche Richtlinien

{C}{C}{C}{C}{C}•       {C}{C}{C}{C}{C}» spezielle Bedienungsfreundlichkeit (Usability)

{C}{C}{C}{C}{C}•       {C}{C}{C}{C}{C}»  Inhalt reduzieren (gegenüber Webseite für PC) – schnelle Informationswiedergabe

{C}{C}{C}{C}{C}•       {C}{C}{C}{C}{C}»  einspaltiges Layout

{C}{C}{C}{C}{C}•       {C}{C}{C}{C}{C}»  Navigation oben und unten bzw. immer ein Back-Button

{C}{C}{C}{C}{C}•       {C}{C}{C}{C}{C}»  Texteingabe minimalisieren

{C}{C}{C}{C}{C}•       {C}{C}{C}{C}{C}»  Design für Touchscreen (Achtung Schriftgröße! Für das I Phone wird 20px empfohlen und Buttons in der Größe von 40x40px) Die Mobile Devices (Smartphones) haben eine enorme Pixeldichte. Hat ein Desktop Monitor 100 -136ppi (dpi) kommen die mobilen Endgeräte auf bis zu 336ppi (Tendenz steigend). Das bedeutet, dass UI-Elemente teilweise nur 1/4 so  groß erscheinen wie auf einem Monitor.

Umsetzung mit HTML und CSS
Media Queries
Nach dem WC3-Standart CSS Weichen – Media Queries (für responsive Webdesign).  Wenn Sie jemals ein separates Print Stylesheet erstellt haben, werden Sie mit dem Konzept vertraut sein, wie ein bestimmtes Stylesheet unter gegebenen Bedingungen ins Spiel kommt – um  beim Beispiel des Print Stylesheets zu bleiben – eben dann, wenn die Seite gedruckt wird. Diese Aufgabe wird in CSS 2 durch Media Types geregelt. Media types ermöglichen es Ihnen, die Ausgabe von Stylesheets einem bestimmten Medientyp  zuzuordnen.  Die Media Queries in CSS3 greifen dieses Konzept auf und bauen es weiter aus. Anstatt nach einem bestimmten Medium zu schauen, können Sie mit Media Queries die Eigenschaften und
Fähigkeiten von Geräten und Ausgabemedien abfragen. Sie können diese Abfragen dazu  verwenden, um alles mögliche zu überprüfen, so zum Beispiel:

{C}{C}{C}{C}{C}•       {C}{C}{C}{C}{C}»  Breite und Höhe (des Browser-Fensters)

{C}{C}{C}{C}{C}•       {C}{C}{C}{C}{C}»  Breite und Höhe des Geräts

{C}{C}{C}{C}{C}•       {C}{C}{C}{C}{C}»  Position – befindet sich das Mobiltelefon im Querformat oder Hochformat?

{C}{C}{C}{C}{C}•       {C}{C}{C}{C}{C}»  Bildschirmauflösung

Wenn der Anwender einen Browser verwendet, der Media Queries unterstützt, können wir den CSS-Code ganz gezielt für bestimmte Situationen schreiben. So können Sie abfragen, ob ein Anwender ein kleines Gerät wie ein Smart Phone verwendet und dann ein passendes Layout liefern.

 

Nach Monitorauflösung

<link rel=”stylesheet” media=”screen and (min-device-width: 800px)” href=”800.css” />

Nach Browserfenstergröße

<link rel=’stylesheet’ media=’screen and (min-width: 701px) and (max- width: 900px)’ href=’css/medium.css’ >

Die komplexere Lösung

 

Bewertung: 
2.5
Durchschnitt: 2.5 (2 Stimmen)

Kommentare

Webseitenlayout


Format festlegen

wichtig dabei ist:

- Displaygröße (17“)
- Seitenverhältnis (4:3, 16:9)
- Displayauflösung (Laptop 1280x800, iPhone 640x960)
- Webbrowser (Firefox, IE)
- Smartphones benötigen eigene Layouts die mit verschiedenen CSS angepasst werden

Gestaltungsraster

Alle Formate lassen sich durch 8 Teilen also ist ein Gestaltungsraster das durch 8 Teilbar ist sinnvoll
z. B. 40x40pixel bei einem 1200x600pixel-Format ergibt das 30x40=1200 und 15x40=600.

Komponenten einer Website

Navigationsbereich:

- Hauptnavigation
- Subnavigation
- Hilfsnavigation
- Such- und Hilfsfunktion

Sonstige Bereiche:

- Kopfbereich
- Fußbereich
- Freiflächen

Inhaltsbereich:

- Name
- Logo
- Überschrift
- Aufmachertext
- Mengentext
- Bilder
- Grafiken
- Werbung
- Animationen
- Videos

Gestaltungselemente:

- Farbflächen
- Linien, Rahmen
- Hintergrund


Usability

..heißt soviel wie benutzerfreundliche Bedienung der Website

- Hauptnavigation links und / oder oben
- Logo links oben
- Die Wichtigkeit der Inhalte sollte von links oben nach rechts unten abnehmen (Lesegewohnheit)
- Navigation und Inhalt muss optisch klar getrennt sein
- Scrollbalken sind nicht schön aber in vertikaler Richtung nicht immer vermeidbar. In horizontaler
  Richtung scrollen ist ungewohnt und sollte vermieden werden.

Gestaltung – Ästhetik


- Harmonische Seitenaufteilung (z. B. Goldener Schnitt 1 : 1,68)
- ausreichend freie Flächen (nicht zu überladen)
- Mut zu neuem (Interesse wecken)
- Ansprechende Typografie
- Ausreichende Kontraste


Templates

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

20px Schriftgrösse als Empfehlung auf dem iPhone? Das bezieht sich aber auf die alten Geräte?
Für das iPhone 4 sollten es für Inhaltstexte wenigstens 32 Pixel sein (das entspricht etwa 8pt bzw. 2.4mm Zeichenhöhe auf dem Retina-Display).

Ideal wären normalerweise 3-3.5mm Zeichenhöhe (10-12 pt), wobei diese Empfehlung für die Arbeit am Bildschirm gilt. Dabei ist einerseits der Sehabstand eher grösser und die Bildschärfe um einiges niedriger aufgrund der geringeren Pixeldichte (100-120 dpi) im Vergleich zu einem Smartphone (bis zu 330 dpi).

Gibt es eigentlich "offizielle" Empfehlungen hierzu?

Hallo,

das ändert sichsicherlich ein wenig von generation zu Generation der Geräte. Der Beitrag ist ja auch bereits aus dem Jahr 2011.

Aber die Wikis sind ja da damit sie im Rahmen der Prüfungsvorbereitung auch jederzeit von euch ergänzt, korrigiert oder aktualisiert werden können.

Grüße

Peter