topics Homepageentwurf II

claudia.reich2.uni-linz, 22. Juni 2011, 09:28

 

Aufbau

Der neue Homepageentwurf soll folgendermaßen aufgebaut werden:

 

  • Hochformat für optimale Smartphoneanwendung
  • <header> in Wolkenoptik und mit weiblicher Kennung
  • Links eine schmale Navigation <nav>, die die einzelnen Schritte beinhaltet
  • Der Content wird in ein <article>-Tag gefasst, das wiederum in <section>-Tags gegliedert wird. Dieser Bereich ist sehr "senkrecht" gehalten. Dadurch wird die Textgröße am Smartphone gleich lesbar und der volle Inhalt durch simlples nach-unten-Scrollen ersichtlich.
  • Die Seite wird mit dem <footer> beendet, der ein Impressum und ein abschließendes Bild enthält.

 

Die Startseite

 

Auf der Startseite ist sofort der Inhalt der einzelnen Schritt ersichtlich:

Vorschau auf Startseite

 

Die/eine Unterseite

Klickt man auf einen der Schritte, so gelangt man unmittelbar in die step-to-step-Navigation. Wie im zweiten Bild ersichtlich ist, wird die aktuelle Position duch die große Zahl in Höhe der Überschrift markiert. Die darüber bzw. darunter liegende Zahl orientieren sich an dieser aktuellen Position. Möchte man nicht auf die linke Menüleiste zurückgreifen, weil man bspw. noch weiter hineingezoomt hat, so stehen die Navigationsschritte "Schritt zurück" und "Schritt vorwärts" direkt im content zur Verfügung.

In fünf der sechs Schritte befindet sich ein Video, das html5-konform mit dem Tag <video> eingefügt wurde.

Vorschau des 2. Schrittes

 

zurück

0 comments :: Kommentieren