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).