Ein neuer Header
Heute habe ich endlich das getan, was ich schon seit ca. zwei Monaten machen wollte: Mein Header hat mir nie gefallen und nun kam ich endlich dazu, den zu ändern. Der neue Header enthält gleich eine weitere Funktion, die ich schon lange einbinden wollte: Er zeigt die letzten Bilder aus meinen flickr-Account. Dies gefällt mir besonders gut, denn so änder sicht der Header mit jedem Bild, dass ich bei flickr hochlade und sieht immer anders und farbenfroh aus.
Hier der Vergleich. Zuerst der alte Header:
Und nun der neue:
Ich habe die Ausschnitte extra gleich groß gemacht, damit man sehen kann, dass der neue Header auch mehr Platz für den eigentlichen Inhalt freigibt. Außerdem sieht er meiner Meinung nach wesentlich aufgeräumter und professioneller aus. Sicher werde ich daran weiter basteln, aber ein großer Schritt ist getan.
Der neue Header passt sich auch der Breite des Benutzers an, wenn dieser JavaScript aktiviert hat (dürften bei der heutigen Verwendung von JS auf Internetseiten die meisten sein). Die Anzahl der gezeigten Bilder variiert nämlich je nach Breite. Zur Verdeutlichung habe ich ein Video gemacht, das hier etwas langsam abläuft, weil der PC die ganzen Aktionen aufnehmen musste während er die JS-Funktion ausführte:
Diese Funktionalität funktioniert mit großer Wahrscheinlichkeit noch lange nicht überall, daher wäre ich froh, wenn ihr mir einfach einen Kommentar hinterlasst, falls es bei euch nicht funktioniert. Darin solltet ihr dann den verwendeten Browser und das Problem beschreiben. Vielen Dank dafür.
Die Bilder hole ich über die Klasse phpFlickr. Sie spricht die flickr API an, so muss ich mich darum nicht kümmern. Trotzdem sie schlecht dokumentiert ist, steigt man mit ein wenig Verstand und Programmierkenntnis durch. So führt ein Klick auf die Bilder jetzt nicht wie im Beispiel auf der Homepage auf die flickr-Seite, sondern öffnet das Bild etwas größer samt Titel und Beschreibung.
Im Zuge der Header-Änderungen wurde nun auch die Schriftart auf serifenlos umgestellt. Habe mal gelesen, dass das beim Lesen auf dem Bildschirm angenehmer sein soll. Empfinde ich ehrlich gesagt auch so.
Die Art und Farbe des Header habe ich dem Footer angepasst. So wird die Seite endlich zusammengefügt und Header und Footer stehen nicht alleine rum.
Tags: AJAX, API, Bilder, Dokumentation, flickr, Header, JavaScript, phpFlickr, Redesign, Video, xmlhttprequest
(Bisher keine Bewertungen)
Loading ...
Ich versuche es noch mal mit einem Kommentar ^^
Der neue Header sieht sehr schick aus. Der alte hat mir auch gut gefallen, vll. hätte da nur ein etwas freundlicheres Bild genommen werden müssen ^^
Jedenfalls würde ich sagen, dass nun eine gesamte Designanpassung fällig wird.
Sieht aber wirklich schon mal schick aus, um mit FF3.0 klappt die automatische Anpassung der gezeigten Bilder auch. Opera auch (Kommentarversuch von hier aus)
Sieht wirklich sehr viel professioneller aus, nun könntest du dir noch ein paar Gedanken über das Farbschema machen (besonders die Google Shared Items sind kaum zu lesen) und die Seite wirk “runder” als vorher.
Danke für die positiven Kritiken. Natürlich muss ich die Seite noch weiter anpassen. Mit den Google Shared Items war ich von Anfang an unzufrieden, leider war das damals das einzige Schema was halbwegs zu der Seite gepasst hat…