Selbststudium II: Styling & Responsives Design

Achtung

Diese Einheit kann zu jedem beliebigen Zeitpunkt begonnen werden.
Die Ergebnisse müssen spätestens zu Beginn des letzten Praktikumstermins vorliegen!

Ziel dieser Einheit ist die Entwicklung eines Design Schemas für Ihre Web-Applikation mittels CSS Level 3, Media Queries und Flexbox. Hierzu setzen wir vor allem auf die Entwicklung eines responsiven Designs, bei welchem sich die in ihrem Projekt enthaltenen UI-Elemente in Abhängigkeit des Ausgabegerätes und der Viewportgröße derart anordnen bzw. darstellen, dass eine hohe User Experience (UX) gewährleistet ist.

Hinweise

Sie können für das Design Ihres Shopsystems ein CSS-Framework wie Bootstrap oder Tailwind CSS verwenden, um ein besonders ausgefeiltes Design zu erhalten. Bitte beachten Sie jedoch, dass dies erstens nicht gefordert ist, und zweitens Sie in der Klausur nicht auf CSS-Frameworks zurückgreifen dürfen und stattdessen die CSS-Stilregeln "von Hand" erstellen müssen.
Wichtig: Falls sich Ihr Code nicht aktualisiert, leeren Sie den Browser-Cache, deaktivieren Sie das Caching im Network-Tab der Developer Tools (für localhost) oder hängen Sie beim Einbinden von JavaScript- oder CSS-Dateien nach Änderungen einen Query-Parameter (z. B. ?v=1.0, ?v=1.1 usw.) an.
```
<link rel="stylesheet" href="assets/css/style.css?v=1.0">
```

Aufgaben

Design-Schema

Entwickeln Sie ein ansprechendes Style Sheet für Ihre Anwendung.

Binden Sie dafür eine oder mehrere CSS-Dateien im <head> ein

   <link rel="stylesheet" href="assets/css/style.css">

Überlegen Sie sich zu diesem Zweck ein Design-Schema mit Farben, Schriftarten, Schriftgrößen, Abständen, Rändern, Ausrichtung, etc.
Wählen Sie eine oder mehrere „schöne“ Schriften von https://fonts.google.com aus, laden Sie diese herunter und binden Sie die Dateien ein.
Setzen Sie die verschiedenen Maßeinheiten sinnvoll ein. Das Layout soll hinsichtlich Fenstergröße und Schriftgröße dynamisch sein!
Freiwillig: Experimentieren Sie mit Animationen, Transitions und Transforms und setzen Sie diese wo es Sinn macht ein.

Responsives Layout

Entwickeln oder erweitern Sie Ihr Stylesheet so, dass die Darstellung auf unterschiedlichen Bildschirmgrößen und Geräten (z. B. Smartphone, Tablet, Desktop) funktioniert.
Nutzen Sie vorwiegend als Werkzeug Media Queries und Flexbox.
Passen Sie die Anordnung und Größe der Elemente dynamisch an die Viewportgröße und Ausrichtung (Hoch-/Querformat) an.
Wenn Bilder eine große Dateigröße haben, nutzen Sie das <picture>-Tag und liefern Sie je nach Bildschirmgröße optimierte Bilddateien aus.
Testen Sie die responsive Darstellung mit den Web Developer Tools Ihres Browsers.

Performance & Qualität

Informieren Sie sich was genau Lighthouse ist und wie man es verwendet.
Testen Sie anschließend ihr Projekt und passen Sie ihre Webanwendung so an, dass Sie in jeder Metrik einen Score von ≥ 80 erreichen.

Beispielausgabe einer Lighthouse-Analyse

Meilenstein

Stand jetzt ist ein konsistentes Design-Schema inklusive responsivem Layout umgesetzt. Ihre Anwendung ist damit visuell ausgearbeitet und für unterschiedliche Geräte optimiert.

Ergebnisse

Erstellung eines Design Schemas mit ansprechender Optik
Umsetzung des Design Schemas durch valides CSS
Eine Schriftdatei eingebunden und benutzt
Demonstration eines responsiven Webdesigns mit Media Queries und Flexbox.
Lighthouse Score ≥ 80 in jeder Metrik