Dynamische Layouts

Grafik 2

Von Elvira Stein / @elvirastein

Was heißt Design für das Web?

Design mit vielen Unbekannten

Devices

Browser

Struktur

Inhalte

Flexibles Design

Trennung von Inhalt und Design

Struktur: HMTL

Hypertext Markup Language

Design: CSS

Cascading Style Sheets

Inhalte: Datenbank

Eine Skriptsprache wie PHP lädt die Daten in die Webseite.

Design mit Platzhaltern

Wir entwerfen für jeden Seitentyp ein Musterdesign mit Platzhaltern.

Dafür brauchen wir:

  • die Sitemap, also die Struktur der Seite
  • daraus ergeben sich die Seitentypen, oder Templates

Sitemap

Templates unterschieden sich in ihrer Funktion, in ihrem Aussehen und daher auch in ihrer Programmierung.

Startseite

Übersichtsseite

Detailseite

Navigation

Wo befinde ich mich?
Wohin kann ich navigieren?

@font-face

Responsive Web

Das Design wird für verschiedene Ausgabegrößen angepasst, optimiert und programmiert.

Wir müssen nicht immer alles selber machen.

Über Online-Services können wir

  • Webseiten anlegen
  • vorgefertigte Designs, sogenannte Themes verwenden
  • und Headerbild und eigener Struktur personalisieren
  • uns auf das Wichtigste konzentrieren

Inhalt, Präsenz und Aktualität

Relevant und authentisch sein.

Lesen

Ethan Marcotte, Responsive Web Design

Onur Oral, Mobile:2015 – UI/UX Trends

Danke! ♥