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 ;-)
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
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
Genau durch die Sprites – beide Logos untereinander in ein Bild und beim Mouse over mit background-position verschieben.
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 ;-)
@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.
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 :-)
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 ;-)
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.
Anstatt das Layout schmäler zu machen, könntest du auch die Schrift einen Ticken größer machen.
@Martin: vielleicht hast du das Wort „ohnehin“ gelesen ;) Ich will’s primär schmäler machen, damit’s bei 1024 gemütlicher rein passt.
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 :(
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.
Das wichtigste ist ja bereits gesagt. Vielleicht kannst Du das Layout noch zentrieren, das würde IMHO besser aussehen.
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.
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.
„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.
Dann wär’s ja grau – das wär‘ mal ein blödes Gelb.
Hi, nur ein kleiner Hinweis zum roten Stern:
http://www.chinawatchblog.de/startschuss.html#comment-52
Keine Ahnung, ob Dich das wirklich auch betrifft.
Danke, aber ich glaub das betrifft mich nicht – details kann ich leider keine sehen, da die verlinkte Seite nicht will.
Oh, die Mittelbayerische Zeitung ist down. Das ist ja fast einen Beitrag wert! ;-)
aber vermutlich nur wenn man die Mittelbayerische Zeitung kennt und schätzt :)
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.
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. :-)
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
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.
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 ;-)
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/)