FH2008 – ein paar Infos zum neuen Design

Wie auch bei den letzten malen will ich auch dieses mal ein paar Infos zum neuen Design verlieren. Dieses Design hat aus verschiedenen Gründen einige Anläufe gebraucht und ist eigentlich schon seit September 2007 in der Mache. Dennoch ist die jetzige Gestaltungsidee nocht nicht mal eine Woche alt und die Umsetzung ging recht zügig voran. Mein Ziel war es diesmal etwas mehr Drive in die Geschichte zu kriegen, ohne dabei zu viel grafische Elemente einbauen zu müssen. Mit dem Ergebnis bin ich ganz zufrieden – vor allem aufgrund der wenigen Grafiken, die für das Layout nötig waren.

Abgesehen von den neuen Profilbuttons am oberen Rand der Sidebar, sind gerade einmal 2 Bilder im Einsatz. Zum einen die Hintergrundtapete, zum anderen das Logo – ok ein wenig gelogen. Das Logo besteht derzeit noch aus zwei Bildern (das mit dem roten Stern, und das gelbe für dem Mouse-Over-Effekt). Aber auch das wird über kurz oder Lang noch in ein Bild verschmelzen. Genauso werde ich die Buttons für die Links zu den Social-Profilen in der Sidebar als Sprite umsetzen.

Neben dem etwas kräftigeren Design gibt es noch einen Unterschied zum Vorgänger: Der XHTML/CSS-Code basiert nicht mehr auf YAML. Die Frage nach dem Warum tauchte vorhin bereits in den Kommentaren auf und so einfach ist die gar nicht zu beantworten, denn es war eigentlich keine bewusste Entscheidung. Der Hauptgrund dürfte darin liegen, dass ich mich in den letzten 12 Monaten im Bereich HTML/CSS stark entwickelt habe und durch viele Kundenaufträge in diesem Bereich mir ermöglicht haben meine Erfahrungen gerade bzgl. Browserkompatiblität auszubauen. Letztes war immer einer der Hauptgründe für mich YAML einzusetzen – und ist es auch heute noch. YAML ist zweifelsfrei ein hervorragendes XHTML/CSS-Framework, das ich jedoch mittlerweile für recht einfache Layouts wie dieses hier nicht mehr brauche. Vorteil: Der Code ist deutlich schlanker und man kennt sich besser drin aus.

Gerade der schlanke Code hat es mir in diesem Fall angetan. Sobald ich mit dem Funktionsumfang des Blogs bzw. des neuen Designs zufrieden bin, werde ich versuchen hier und da noch Optimierungen am Code vorzunehmen. Dazu gehört z.B. die Reduktion der Requests pro PageView – also die Reduktion der eingebundenen Elemente – durch Zusammenfassen von Javascript-, CSS- und Bild-Dateien.

Ein paar Worte will ich noch zu den Gedanken hinter dem Layout verlieren. Es gab so ein paar Punkte die mir vorab wichtig waren bzw. die bei der Entwicklung des Layouts als Zielsetzung dienten. Zum einen wollte ich möglichst alle Informationen an einem Platz bieten, an dem man sie gewohnt ist. Zum anderen sollte dennoch auf den ersten Blick so wenig wie möglich Information die Sicht trüben. Ich denke das ist mir ganz gut gelungen. In der Sidebar verschwinden derzeit 10 Elemente (ohne Werbung) hinter Tabs, die ohne diese Tabs jede Menge Platz und optische Aufmerksamkeit einnehmen würden. Um die Beiträge wird so wenig wie möglich »Clutter« dargestellt und dennoch werden z.B. Besucher die über Suchmaschinen auf das Blog kommen über die Ähnlichen Beiträge auf möglicherweise andere interessante Inhalte geführt. Gerade für nicht-Blogger ist diese einfache Führung interessant. Blog-gewohnte finden über die Sidebar direkt weitere Informationen (Kategorien, Tags, Kommentare,…). Die Position dieser Informationen habe ich dabei so gewählt, dass sie ungefähr auf der Höhe des Endes eines durchschnittlichen Beitrags sitzen.

So genug gelabert. Natürlich fehlt auch noch jede Menge. Dazu gehört neben einer ordentlichen Suchfunktion auch ein ebenso gutes Archiv, ein kleiner „about me“ Bereich und noch einiges mehr, aber da will ich erstmal noch nicht detaillierter drauf eingehen, weil mir einiges selbst noch nicht so klar ist ;-)

Kommentare

27 Antworten zu „FH2008 – ein paar Infos zum neuen Design“

  1. Avatar von Nicole

    Da schaut mal mal ein paar Stunden lang nicht vorbei und dann so was ;-) Was mir sehr gut gefällt: Die vielen wiederkehrenden Sternchen!!! Auch die Sidebar ist sehr schön geworden. Und wirklich alles sehr lightweight. Schön!

    Aber trotzdem weiß ich noch nicht so recht… Ich will ja auch nicht gleich mit meinem ersten Kommentar hier meckern [da muss ich mir mit meiner eigenen Blog-Baustelle – die ich ja noch nicht einmal angefangen habe(!) – selbst ganz fest an die Nase greifen], aber iiiiirrrgendwie fehlt hier noch das Fitzelchen, was das alte Design für mich persönlich zu einem der besten gemacht hat, die ich kenne.

    Aber Du machst das schon noch :-) Und von daher freue ich mich jetzt ganz einfach mal auf das was Du uns in der Zukunft präsentierst. Viele Grüße, Nicole

  2. Avatar von Joern

    Uhii, ganz schön viel Sternchen! :)
    Der rote Stern hat irgendwas „Red Army“-mäßiges :) :)
    Das mit den zwei Bildern konnte ich nicht glauben. Habe mich schon gefragt wie Du die „Rundungen“ für alle Browser ohne Grafiken hinbekommen hast – hast Du ja aber gar nicht.
    Wie willst Du denn das Logo „verschmelzen“?
    DIe Sache mit den „CSS-Sprites“ muss ich mir mal genauer anschauen, dass klingt ja recht interessant.

    Alles in allem ein schöner „Relaunch“, die Sache „Sieht nett aus und der Code ist trotzdem schlank“ gefällt mir sehr gut.
    Jörn

  3. Avatar von Frank Helmschrott

    Wie willst Du denn das Logo “verschmelzen”?
    DIe Sache mit den “CSS-Sprites” muss ich mir mal genauer anschauen, dass klingt ja recht interessant.

    Genau durch die Sprites – beide Logos untereinander in ein Bild und beim Mouse over mit background-position verschieben.

  4. Avatar von Steffen

    Schön geworden.

    2 Sachen sind mir aber doch aufgefallen: Die Kommentarbox sticht zu stark hervor und in den Texteingabefeldern sind mir ein wenig zu viele Sternchen ;-)

  5. Avatar von Frank Helmschrott

    @Steffen: Du bist nicht der erste dem das auffällt. Ist nur wegen der vielen Design-Beiträge etwas unübersichtlich geworden ;-) Die Sterne stehen schon auf der Abschussliste in dieser Form.

  6. Avatar von Klaus

    Das sieht sehr übersichtlich und klar aus.

    Der „Frisch gestrichen“ Button in der Sidebar gefällt mir besonders gut, auch wenn mir nicht ganz klar ist, wofür die Guillemets am Ende stehen.

    Einziger Kritikpunkt: den Text finde ich von der Zeilenlänge her ein bischen lang, macht es IMHO beim Lesen etwas schwer.

    Aber alles in allem sehr schön :-)

  7. Avatar von Frank Helmschrott

    auch wenn mir nicht ganz klar ist, wofür die Guillemets am Ende stehen.

    Eigentlich sollte der Button seit gestern Abend schon auf eine Todoliste verlinken die einen Überblick darüber gibt, was hier noch nicht passt. Ich bin nur noch nicht dazu gekommen die Seite einzurichten ;-)

    Einziger Kritikpunkt: den Text finde ich von der Zeilenlänge her ein bischen lang, macht es IMHO beim Lesen etwas schwer.

    stimmt, er ist auch etwas kleiner geworden als anfänglich gedacht. Ich werde nochmal darüber nachdenken – ich will das Layout ohnehin noch einen kleinen Tick schmäler machen.

  8. Avatar von Martin Hiegl
    Martin Hiegl

    Anstatt das Layout schmäler zu machen, könntest du auch die Schrift einen Ticken größer machen.

  9. Avatar von Frank Helmschrott

    @Martin: vielleicht hast du das Wort „ohnehin“ gelesen ;) Ich will’s primär schmäler machen, damit’s bei 1024 gemütlicher rein passt.

  10. Avatar von Jörg
    Jörg

    Glückwunsch zum neuen Design!

    Aber kannst Du allen Windows-Usern mit Helvetica bitte den Gefallen tun und in der CSS die Font-Reihenfolge in „…Arial, Helvetica..“ ändern? (http://cmsblog.msdazu.de/?p=188)

    Denn ansonsten wird die Schrift de facto unlesbar :(

  11. Avatar von Frank Helmschrott

    Denn ansonsten wird die Schrift de facto unlesbar :(

    Das wäre schlimm, denn ein großer Teil der Windows-User dürfte keine Helvetica haben. Ich dreh’s dennoch um – ist es an einigen Stellen ohnehin, aber beim aufräumen werd ich da mal für mehr Konsistenz sorgen.

  12. Avatar von Markus
    Markus

    Das wichtigste ist ja bereits gesagt. Vielleicht kannst Du das Layout noch zentrieren, das würde IMHO besser aussehen.

  13. Avatar von Jörg
    Jörg

    Ich meinte eher, dass es eben für Windows-User *mit* Helvetica schlimm d. h. unlesbar wird, denn das Screen-Rendering der Helvetica ist unter Windows obergrottenunterirdisch.

    Ich hab‘ bei mir die Helvetica übrigens inzwischen entsorgt…k. A., wo ich mir diesen Font mal „eingefangen“ habe :/

    Dennoch: Danke, Frank.

  14. Avatar von Frank Helmschrott

    Vielleicht kannst Du das Layout noch zentrieren

    neeee, das mit dem linksbündig war kein Unfall ;)

    @Jörg: oh ok, mißverstanden. Komisch aber eigentlich – muss mir das unter Windows nochmal anschauen.

  15. Avatar von m.o.m.

    „Oh mein Gott es ist voller Sterne!“ :-)

    Nun nicht schlecht ich fand das alte zwar irgendwie besser.

    Hier gefällt mir der blumige, ornamentale Hintergrund nicht. Weil er nicht zu den cleanen Rest Web 2.0 Design und vor allem nicht zu den „Revoluzzer“- Sternen ;-) passt.

    Das Gelb im Kommentarbereich ist irgendwie auch so gelb. vielleicht lieber #f5f5f5.

    Ist aber nur meine Meinung.

  16. Avatar von Frank Helmschrott

    Das Gelb im Kommentarbereich ist irgendwie auch so gelb. vielleicht lieber #f5f5f5.

    Dann wär’s ja grau – das wär‘ mal ein blödes Gelb.

  17. Avatar von StoiBär

    Hi, nur ein kleiner Hinweis zum roten Stern:
    http://www.chinawatchblog.de/startschuss.html#comment-52

    Keine Ahnung, ob Dich das wirklich auch betrifft.

  18. Avatar von Frank Helmschrott

    Danke, aber ich glaub das betrifft mich nicht – details kann ich leider keine sehen, da die verlinkte Seite nicht will.

  19. Avatar von StoiBär

    Oh, die Mittelbayerische Zeitung ist down. Das ist ja fast einen Beitrag wert! ;-)

  20. Avatar von Frank Helmschrott

    aber vermutlich nur wenn man die Mittelbayerische Zeitung kennt und schätzt :)

  21. Avatar von m.o.m.

    Ja ich meinte schon, dass das Gelb zu Gelb ist und es vielleicht ein dunkelweiß / hellgrau ala #f5f5f5 besser machen würde. :-)

    Habe ich mich falsch ausgedrückt sorry.

    Alternativ vielleicht ein Ivory? #fffff0.

  22. Avatar von Franka

    Das neue Design gefällt mir sehr gut. Schön hell, alles da wo man es als Leser gewohnt ist und sehr übersichtlich.

    Und auch wenn mir das Gelb der Kommentarbox auch nicht so zusagt, ist das ja zum Glück eine reine Ansichtssache. :-)

  23. Avatar von alex

    hi,

    ja, ist schön geworden! Gratulation!

    Wenn man fragen darf:

    Was ist das für ein Plugin/Widget in der Sidebar rechts, mit den Tabs für Neu/Pop/Kommentar/Tags usw.? Gibts sowatt denn als widget bzw. Plugin? Das ist sehr schick…

    gruß – alex

  24. Avatar von Johannes Ries

    Mir ist gerade noch was aufgefallen: Fände es praktisch wenn die Kommentarzahl „{2}“ mit einem Anker, der am Anfang der Kommentare sitzt, verlinkt wäre.

  25. Avatar von Nicole

    Hallo Frank, ich wollte mich bei Dir grad nur noch für die „linke Inspiration“ bedanken – mein neues Blogdesign ist nun auch links. Ein hoch auf die roten Socken ;-)

  26. […] ausprobieren. Besonders die Intergration von diversen jQuery Effekten war das Versuchsziel. Dank Frank bin ich vor ner ganzen Weile auf kwickTabs gestossen. Das erste Tabs Skript was funktionierte. Dazu […]

  27. Avatar von ray
    ray

    angenehmes design. die kommentare könnten threaded sein, insbesondere praktisch wenn innerhalb eines threads details besprochen werden. musst aber nichts unternehmen, wird bei wp 2.7 implementiert (schau das beta an. http://wordpress.org/development/2008/11/wordpress-27-beta-3/)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.