4) Layoutänderung
annette.aubell.uni-linz, 3. November 2014, 17:30
HTML 5 ANPASSUNG:
Ich habe den Html-Code des Blogs auf HTML 5 umgeändert und entsprechend mehrere semantische Blöcke eingebaut. Das Div-Element header wurde zu <header>, die Blogeinträge befinden sich im Block <article> und das rechtsbündige Menü befindet sich innerhalb des <aside> Tags. Weiters änderte ich den Doctype des Html-Dokuments auf <!DOCTYPE html> um.
DESIGN:
Statt einer linksbündigen Ausrichtung des Blogs wählte ich zuallererst eine zentrierte Darstellung. Dafür erstellte ich eine Wrapper Klasse, welche alle wichtigen Blöcke mithilfe von margin: 0 auto in die Mitte positionierte.
Ich änderte die Höhe und Breite des Headers, um mehr Platz für die Überschrift des Blogs zu schaffen und richtete den Block über die gesamte Breite des Fensters aus. Als Hintergrund wählte ich ein Image-Pattern, welches eine Art vernetzte Stuktur darstellt, um so eine Assoziation zum Thema Internet herzustellen.
Den Hauptbereich (Artikel, Menü) ließ ich von der Grundstruktur fast gleich, jedoch änderte ich die Breite und diverse Abstände (padding, margin) nach meinem Geschmack. Im Menü habe ich nach Anleitung den Twitterfeed eingebaut. Dazu kopierte ich den generierten Widget-Link von der Twitterseite an eine geeignete Stelle im Menüblock in die Html-Datei. Den Kalender und das Logo von Antville habe ich aus der Menüleiste entfernt, da sie für mich keinen wichtigen Nutzen darstellten und das Suchfeld habe ich an die oberste Position verschoben und anschließend optisch verändert.
Des weiteren wurden alle vordefinierten Schriftarten geändert. Ich wählte für die Überschriften und Menülinks die serifenlose Schrift Calibri und für den Fließtext die Serifenschrift Cambria. Alle Schriften bekamen einen größeren Wert, um die Lesbarkeit zu fördern.
Da ich den Blog von der Gesamterscheinung eher dezent halten wollte, wählte ich keine grellen bzw. bunten Farben. Ich entschied mich für die Kombination grau/weiß um genügend Kontrast herzustellen, und dem ganzen Layout farblich ein eher seriöses Aussehen zu geben.
FUNKTIONALITÄT
Bis auf den Twitter Feed habe ich keine weiteren Funktionalitäten eingebaut. Eine Möglichkeit den Blog noch weiter auszubauen bzw. zu verbessern wäre, die Seite responsive zu gestalten.
0 comments :: Kommentieren