GMH's Blog

Textuelles Konzept

Die von mir geplante Seite beschäftigt sich mit einem Aspekt des Fitness- bzw. Krafttrainings, nämlich dem Klimmzug. Durch diese Fokussierung wird die Seite inhaltlich mehr bieten können, als zum Beispiel eine allgemeine Fitnessseite

Medienhintergrund

• Zielgruppe: jene, welche sich im Fitnesstraining hauptsächlich auf bwes (body weight exercise) konzentrieren bzw. keinen Zugang zu diversen Fitnessgeräten haben

• Thema: Präsentation der verschiedenen Varianten des Klimmzuges

• Corporate Identity: Folgende Attribute sollen der Seite zugeschrieben werden: Kraft/Stärke, Vernunft, Körperbewusstsein, Abgrenzung zu Health/Spa/Fitness Seiten sowie zu Hardcore Bodybuilding Plattformen

• Message: "Man kann mit wenig Ausrüstung seinen Oberkörper effektiv trainieren"

Mediengestaltung

• <Corporate Design:
  Schrift: Trebuchet MS
  Farbgebung: Hintergrund dunkelgrau 51;51;51 #333333, Schriftfarbei weiß #ffffff, Akzentuierung blaugrau #666699

• Layout: Header oben, Navigationsbereich links, großer content-Bereich rechts daneben, schmaler footer unten

• Struktur: je Klimmzugvariante eine Seite, jeweils auch als Menüpunkt, zusätzlich "Allgemeines"

• Content: Bilder von den einzelnen Klimmzugstangen, animierte Gifs zur Erläuterung der Bewegung, ein Video eines Satzes.

Screendesign

Mittels photoshop wurde eine grobe Designvorlage erstellt, um einen Eindruck vom späteren Aussehen zu bekommen. Der Headerbereich wird vermutlich komplett als Grafik designt werden, da so die grafischen Möglichkeiten höher sind.

Die Aufteilung in divs ist im folgenden Bild ersichtlich. Hierbei wurde auf eine sparsame Verwendung von divs Wert gelegt. Insgesamt kommen 3 divs zum Einsatz. Die Aufteilung ist klassisch ("T").

Bei der Erstellung will ich bewusst auf grafische Editoren verzichten, um wenigstens einmal alles händisch gemacht zu haben. Dadurch sollte ich meine html und css Grundkenntnisse leichter erweitern können.

Ich habe mich wegen der vielen verschiedenen Bildschirm/Beamerformate entschieden, das Menü links fix zu platzieren und den Rest nach Rechts nicht zu begrenzen. Bisher gestestet auf 16:10 in 1280x760, 16:9 in 1920x1080 jeweils mit Firefox, zusätzlich Dolphin HD Browser auf Samsung Galaxy S. In jedem Fall wurde die Seite zufriedenstellend angezeigt. Mit dem IE gab es bei dem css Attribut "color: transparent" für h1 Probleme, daher wurde auf "display: none" geändert.

Medien und weitere Vervollständigungen

Die Fotos wurden mittels PS verkleinert, zusammengefügt und auf s/w umgewandelt. Das Video wurde mangels Kamera mit einem Smartphone gedreht, mit Windows Moviemaker bearbeitet und auf der html 5 Seite mittels video-tag eingebunde.

Fertig...

Unter folgendem Link ist die Seite nun erreichbar: KLICK

Ein Teil wurde in HTML5 erstellt: KLICK

Ich hab mein Video noch verlängert und die Verwendung von Zughilfen und 2 stills eingebaut. Außerdem wurde der Text noch ein wenig abgeändert.

Browserverhalten bei html5

Korrekturen

Bei der Besprechung dieser Site wurden folgende Punkte diskutiert, welche in der aktuellen Version abgeändert wurden:

• in der css Datei nur px, Verzicht auf em
• leere Metatags entfernt
• contentbereich und header jetzt fixiert, kein Zeilenumbruch bei sich verändernder Fenstergröße mehr
• fehlende tags ergänzt

Die aktuelle Vesion befindet sich hier: KLICK