Hannes Kraeft | Aufgabe „Papagei“

Cooles Design nachbauen: Finden Sie CSS-Lösungen, für das, was Sie SEHEN und messen.

Ungefähr so, wie an der Pinwand demonstriert!

Erstellen Sie eine Kopie des Ridwang-Ordners.Entfernen Sie aus der CSS-Datei alles außer dem Reset und der Grundstruktur der media-Query (nur das fette dunkelbraune soll davon übrig bleiben). Diese Dateien können Sie auch hier bekommen: ...
Entscheiden Sie sich für eines dieser Designs: http://www.mezzoblue.com/zengarden/alldesigns/
oder wählen Sie http://www.csszengarden.com/209/
oder wählen Sie eine ganz andere Vorlage.
Wichtig bevor Sie weiter machen: Dokumentieren Sie ihre Wahl in Form von Screenshots. Lassen Sie sich die Wahl Ihrer Vorlage vom Lehrer bestätigen!
Bauen auf Basis von BlankSlate mit dem Ridwang-Inhalt das gewählte Desing in seinen wesentlichen Elementen nach.

Lassen Sie das HTML nach Möglichkeit unverändert. Falls Sie denken, daß Sie das HTML verändern müssen, um die gewünschte Gestaltung zu realisieren: Fragen Sie, ob es nicht vielleicht doch eine Möglichkeit gibt, nur mit CSS auszukommen.

Fangen Sie mit dem CSS wirklich von NULL an!

Mobile First!

Egal, ob die Vorlage so etwas vorsieht, oder nicht:
Erstellen Sie zunächst eine schmale Variante bis 460px
Lernen Sie dabei, ein komplexes Design in seine Komponenten zu teilen. Lernen Sie zu reduzieren!
Bevor Sie weitermachen: Holen Sie sich ein OK von Lehrer.

Desktop-Variante

Erst, wenn die mobile Variante fertig ist, mit der Desktop-Variante beginnen.
@media Breite festsetzen, ...

Sie dürfen sich gerne gegenseitig helfen, das Internet und den Lehrer zu Rate ziehen, natürlich auch von sich selber abschreiben.

Ganze Codeblöcke dürfen Sie untereinander nur dann austauschen, wenn Sie ein unterschiedliches Design wählen.

Current

Auch wenn die Vorlage es nicht vorsieht: Sorgen Sie dafür, daß der aktuelle Navigationspunkt erkennbar ist.

Maße und Hintergrundbilder

Es gibt zwei Varianten:

(1.) Vorlage mit den Entwicklerwerkzeugen untersuchen
UND/ODER
(2.) Screenshot im Photoshop mit Hilfslinien und Info-Palette vermessen. Mit Hilfe des Slice-Werkzeuges Bereiche des Screenshots als Dateien exportieren (Für Web speichern...)

Beide Varianten haben ihre Vor- und Nachteile. Die erste kann Lösungen zeigen oder verwirren, die zweite entspricht dem Workflow für die Umsetzung eines neuen Entwurfes.

Coole Ridwang-Bilder gibt es hier: \\tc-fs\4all\_doz\MGDP\ZFA\Ridwang\Bilder

Abgabe

der mobilen Variante: Donnerstag 3.11.
der Desktop-Variante: Montag 7.11.

Diese Arbeit kann in die Bewertung eingehen.
Kriterien: Vorgaben eingehalten, Validität, Umfang/Gestaltungstiefe, Screenshot, Mobile-Variante, Desktop-Variante, Benutzerfreundlichkeit.