Beispielhafte Unternehmens­website

Prototyp C - Reaktionsfähiges Layout (Responsive)

Dieser Prototyp zeigt ein einfaches Layout eines fiktiven Unternehmens aus dem Bereich Fotografie und hat folgende Eigenschaften:

• Erstellt in HTML5 inkl. passender semantischer Auszeichnungen (header, nav, article, footer).
• Formatierungen mit CSS3.
• Schriftgrößen und alle Breiten-/Höhenangaben erfolgen in relativen Maßen (% bzw. rem), es gibt keine Pixel-Angaben!
• Der Platz wird ausgenutzt, das Drehen auf mobilen Geräten bewirkt eine Vergrößerung (im Gegensatz zu Prototyp B)! Über max-width in #CONTAINER wird eine übermäßige Breite verhindert (Text-Lesbarkeit).
• Die Website skaliert innerhalb der definierten Grenzen flexibel (relativ zur Fenstergröße).
• Mit Media Queries (CSS3) werden Grenzfälle behandelt (Hauptumbruchspunkt für kleinere Displays, Minimalgröße).
• Mit einem gemeinsamen Layout können vielfältige Geräte (große und kleine Displays) erreicht werden! Es braucht kein separates System für mobile Benutzer.
• In der Galerie werden zunächst kleine Bilder geladen und mit JavaScript je nach Bildschirmgröße angepasst (Progressive Enhancement).