06 Okt 2010

Redesign – Die Details

Privates, Tech, Usability, Web 2.0 No Comments

Meine Inhalte waren bis vor kurzen über mehrere Blogs verstreut. Nun will ich alles unter Ohlenbostel.net als neue Visitenkarte bundeln. Dunkelfels is nore more. Alle Einträge werden via 301 Redirects auf Ohlenbostel.net/blog/ geleitet

Die Einstiegsseite habe ich komplett neu gestaltet und möchte noch ein paar Features beleuchten:

  • Wer bin ich, was mache ich und wie schaut der Typ überhaupt aus. Eine Visitenkarte für das Web
  • Die Seite soll gänzlich ohne Refreshs auskommen und trotzdem mehrere Themengebiete wie Fotografie und Development featuren, sowie eine Kontaktmöglichkeit bieten.
  • Speed, speed, speed: 1 Htmldatei + CSS + JS und nicht mehr. Die CSS und JS Dateien werden durch ein Kompressionsscript on-the-fly gestaucht.
  • Eine “Slideshow” meiner Fotografien: Dazu reicht ein Klick auf den Fotografie-Kasten, um das Hintergrundbild der Seite zu wechseln. So kann ich dem Foto den zentralen Raum der Seite einräumen, ohne dass ich eine extra Galerie bräuchte.
  • Typographie: Alle Fonts auf der Seite sind Webfonts und keine Bilder. Eingebunden durch Typekit.com
  • Die 3 Elementkästen sind HTML5 Canvas Objekte mit einem Gradienten als Füllung, sowie einer Transparenz. So spart man sich den Einsatz von Pngs als transparente Grafiken. Nachteil von Canvas-Elementen: Sie werden nicht durch eine Suchmaschine gesehen, aber da gibt es eine kleine Hilfe:
    <canvas><h1>Überschrift</h1></canvas>. Nicht sichtbar im Browser, aber für die Suchmaschine.
  • Blogeintrag: Am linken Rand wird der aktuelle Blogeintrag meines WordPressblogs angezeigt. In Zukunft kommt ergänzend noch der letzte tweet hinzu.
  • HTML5 Boilerplate als Basistemplate für maximale Kompatibilität

Die Seite ist noch nicht 100% fertig, aber ich bin schon sehr mit dem Ergebnis zufrieden. Über Feedback würde ich mich natürlich freuen.

No Responses to “Redesign – Die Details”

Leave a Reply