freeQnet-Logo
freeQnet

des freeQnets neue Kleideroder: die Re-Design-Odyssee mit Happy End


Wenn ich mal so zurückblicke, wundere ich mich ja fast, dass jetzt plötzlich alles so schnell ging. Aber beginnen wir am Anfang! Ende letzten Jahres wurde mir mein bisheriges Blog-Design so langsam aber sicher langweilig. Immerhin hatte es auch untypisch für mich auch schon eine sehr lange Zeit gute Dienste getan, ohne mich zum Re-Design zu bewegen. Immer mehr Kleinigkeiten und der Drang danach, neues auszuprobieren, brachten mich dann aber endgültig dazu, ein neues Design zu gestalten.

Die Odyssee

Die Ideen waren da und der erste Entwurf auch schnell parat. Da ich mir aber in den Kopf setzte, wirklich viel neues auszuprobieren und ständig neue Ideen dazu kamen, wurde das eigentliche Design zwar immer hier und da um neue Dinge erweitert, aber viel Grundlegendes ließ ich erst mal liegen und es wurde einfach nicht fertig. Dummerweise wurde mir das Design dann mit zunehmender Zeit – immerhin arbeite ich schon einige Monate dran – dann auch langsam über. Vor allem die Farben passten mir nicht mehr.

Grad in den vergangenen paar Tagen ging’s dann aber Schlag auf Schlag. Ich warf das Farbschema und damit auch gleich mal eine grundlegende Designentscheidung über den Haufen und baute das Layout um. Das ging überraschend schnell von der Hand, denn im Endeffekt habe ich doch weit mehr von dem sehr weit fortgeschrittenen Design übernommen. Ich konzentrierte mich nun auch darauf, alles Grundlegende zuerst fertig zu stellen und ein paar neue Ideen erst mal nach hinten zu schieben, damit ich das Design endlich online stellen konnte. Denn den Fehler, mich nach einer Weile schon wieder satt gesehen zu haben, bevor es überhaupt jemand anderes zu Gesicht bekommt, wollte ich nicht nochmal machen!

Heute sollte es dann online gehen. Doch gerade eben musste ich noch einen kleinen Schock überstehen! Der Internet Explorer 9 zeigte die Seite plötzlich an, als sei er in Version 6 oder älter stecken geblieben. Zum Glück kam ich schnell auf den Übeltäter: Ich hatte Conditional Comments[1] eingebaut, um eventuell auf verschiedene IE-Versionen eingehen zu können. Dummerweise fand der IE9 das gar nicht gut und verhielt sich wie ein Kind – also er selbst vor ein paar Jahren, als er noch gar nichts von Web-Standards hielt.

Nun sieht aber alles so aus, wie es soll und bis auf ein paar Kleinigkeiten, die der IE einfach nicht kann, die aber nicht auffallen, wenn man es nicht weiß, sieht die Seite in allen aktuellen Browsern (Firefox 5, Chrome 13, IE9, Opera 11 (inkl. Android-Version) und mit kleinen Abstrichen auch Android Browser 3.2) so aus, wie sie soll und funktioniert auch. Also ist es Zeit für den Launch!

Was ist neu?

Wie euch sicher sofort auffallen wird, hat sich sehr viel an der Oberfläche getan und auch unter der Haube wurde intensiv geschraubt, um zum Einen ein frisches, neues Design auf die Beine zu stellen, zum Anderen aber auch viele neue Features zu ermöglichen, die das Blog hoffentlich noch interessanter für euch machen. Hier mal die wichtigsten Neuerungen im Schnelldurchlauf:

An der Oberfläche

  • komplett neues, diesmal linksbündiges Design mit neuen, aber hoffentlich angenehmen Farben.
  • Es gibt ein neues Logo, das nun[2] inklusive Menü an den linken Rand gewandert ist.
  • Ein Klick auf die Menü-Buttons fährt jeweils ein Overlay aus, in dem ihr die passenden Beitragsreihen, Tags, Kategorien und weiteren Links immer im Schnellzugriff habt.
  • An oberster Stelle auf der Hauptseite steht nun eine Slideshow, die mehrere besondere Beiträge im Wechsel darstellt. Die Beiträge werden immer mal wechseln und sollen vor allem auf Blogparaden etc. hinweisen, die sonst schnell auf den hinteren Seiten verschwinden würden.
  • Generell gibt es nun viele kleine Animationen. Allerdings ist sichergestellt, dass die Website auch ohne JavaScript problemlos zu bedienen ist.
  • Das Design verändert sich je nach Größe des Browserfensters teilweise, um verschiedene Auflösungen besser auszunutzen. Wer mit einer Auflösung von über 1500 Pixeln gesegnet ist (etwa 40% meiner Leser), sieht die volle Pracht inklusive zufällig generierten Zitaten Aus Musik, Film, etc ganz rechts. In niedrigeren Auflösungen verschwinden die Zitate einfach. Muss man noch mit einer Auflösung kleiner als 1200 Pixel Breite leben (was weniger als 20% meiner Leser tun), wandert kurzerhand das Menü links als mitscrollende Leiste an den oberen Browserrand und der Inhalt verschiebt sich komplett nach links. Das könnt ihr auch einfach durch Vergrößern und Verkleinern eures Browserfensters ausprobieren! Nur bei Auflösungen unter 1000 Pixeln muss man noch mit horizontalen Scrollbalken leben. Das wird sich in einer zukünftigen Version aber noch ändern!
  • Die Möglichkeit, seinen Twitternamen bei Kommentaren einzugeben, habe ich entfernt. Ich denke, der Nutzwert war nicht so groß und ich wollte auf das Plugin verzichten. Bei Interesse werde ich so eine Funktion vielleicht später noch mal selbst gebaut wieder einführen.
  • Im Footer findet man jetzt eine viel leichter sichtbare Suchleiste und die nun in die Aufklapp-Menüs gewanderten Kategorien und Tags haben Platz für mein zurückgekehrtes Laut.fm-Radio gemacht!
  • Es gibt noch viele weitere kleine Änderungen an der Oberfläche, die ich aber kaum noch alle aufzählen kann. Lasst euch überraschen!

Unter der Haube

  • Das Design basiert jetzt vollkommen auf HTML5 und nutzt entsprechende Tags. Ältere Browser werden teilweise mit JavaScript an die neuen Tags gewöhnt.
  • Ebenso setze ich auf viele CSS3-Features, von denen viele sogar schon vom IE9 unterstützt werden. Generell sollten diese aber in älteren Browsern nicht für ein zerschossenes Design sorgen, sondern einfach mal nicht interpretiert werden. So fehlen dann z.B. abgerundete Ecken, Schatten etc. Im Idealfall merkt man nicht mal, dass es nicht so gedacht ist, wenn man das Design nicht aus einem moderneren Browser kennt.
  • Sämtliche Mouse-Over-Animationen und Ein- bzw. Ausblendungen sind mit CSS-Transitions und nicht mit JavaScript gelöst! Das hat den Vorteil der Hardware-Beschleunigung in vielen Browsern. Allerdings interpretiert der IE auch in Version 9 diese nicht komplett und so gibt’s halt keine weichen Übergänge sondern die üblichen alten harten Mouse-Over-Wechsel.
  • Ganz auf JavaScript verzichte ich aber nicht. Die Overlay-Menüs setzen drauf, einige kleine Code-Änderungen werden damit realisiert (z.B. Transparenz in störrischen Flash-Videos und so, die sich über das Menü legen wollen. Außerdem ist damit die Slideshow der präsentierten Beiträge auf der Startseite gelöst. Wer kein JavaScript aktiviert hat, muss auf Aufklapp-Menüs und Slideshow verzichten, sollte aber auch so gut mit der Bedienung zurecht kommen.
  • Ich habe versucht, wo es geht auf WordPress-Plugins zu verzichten und viele Dinge selbst nachgebaut und dabei auf verlangsamende Dinge verzichtet, die ich eh nicht brauche
  • Ich verzichte wo es geht auf Plugins und selbst in den Beiträgen eingebundene Flash-Objekte von Seiten wie Youtube etc. Dafür setze ich entweder das von WordPress bereits von Haus aus unterstützte “oEmbed”[3] oder wenn nicht möglich auf eigene Shortcodes, mit denen ich dann später im Falle eines weiteren Re-Designs einfach im Hintergrund Einstellungen ändern kann, ohne jeden Beitrag ändern zu müssen, weil sich vielleicht die Videobreite geändert hat!

Ausblick

Auf seinem jetzigen Stand bin ich erst mal sehr zufrieden mit dem Design. Das soll aber nicht heißen, dass ich nicht noch weitere Pläne habe. Ich sehe das Theme als Spielwiese, in die ich immer wieder weitere Features einbauen werde. Folgende Dinge sind da z.B. für nähere und auch fernere Zukunft geplant:

  • Bisher habe ich das Design nur auf den aller neuesten Versionen der bekannten Browser getestet, was zumindest schon mal mehr als 90% meiner Leser abdeckt. Allerdings will ich auch zumindest noch eine Version älter mit abdecken. Das bedeutet im Detail vor allem, dass das Design in Firefox 4, Chrome 12, Opera 10 und IE8 funktioniert (wenn auch vielleicht nicht mit allen Effekten). Bei den erst genannten drei mache ich mir kaum Gedanken und denke, dass ich da kaum bis gar nichts anpassen müssen werde. Beim IE8 aber vermutlich schon mehr.
  • Außerdem sollen mobile Geräte besser unterstützt werden. Dabei werde ich versuchen, auf der einen Seite Tablets im Hoch- und Querformat sowie Handys zu unterstützen. Dazu soll das Layout sich wie jetzt schon bei höheren Auflösungen dynamisch an die Größe des Fensters anpassen, was vor allem auch beim Drehen eines Tablets von Quer- auf Hochformat und so ganz nützlich werden könnte. Ich werde dabei allerdings vermutlich auf mindestens 400 Pixel Bildschirmbreite setzen und nicht weiter runter gehen. Damit ist das iPhone 4 und auch die meisten Android-Handys (zumindest im Querformat) abgedeckt.
  • Ich werde noch weitere Plugins durch selbst gebaute Lösungen ersetzen und auch sonst weiter an der Performance der Website schrauben.
  • Es werden sicher auch noch viele weitere Kleine Dinge folgen. Einige Ideen habe ich schon und es kommen garantiert noch weitere dazu!

Euer Feedback

Natürlich bin ich jetzt erst mal auf euer Feedback gespannt! Wie gefällt euch das neue Design? Fehlt euch etwas im Vergleich zum Vorgänger? Oder sind euch noch Fehler aufgefallen, die ich bisher nicht gesehen habe? Teilt’s mir mit! Ich bin natürlich auch für weitere Ideen und natürlich konstruktive(!) Kritik zu haben! Textet mich einfach zu!

Außerdem würde ich auch gern wissen, ob Interesse an kleinen Tutorials besteht, in denen ich erkläre, wie ich bestimmte Details des Designs umgesetzt habe! Wenn ja, welche Dinge interessieren euch dabei besonders? Einzelne gestalterische Features oder auch bestimmte Änderungen unter der Haube? Bei genügend Interesse werde ich definitiv Beiträge dazu schreiben!

  1. Befehle, die nur der IE interpretiert und andere Browser ignorieren []
  2. zumindest in höheren Auflösungen – dazu gleich mehr []
  3. Damit sendet die Website dem Anbieter (z.B. Youtube) nur den Link und fragt nach einem Einbindecode, den der Anbieter dann zurück gibt []

Kommentare

1

Boah, schick geworden! Sowohl die Farbmischung gefällt mir sehr gut (blau geht besser als braun!) als auch die Linksbündigkeit. Aber das Slidemenü ist überschick! Da musst du mal ein Tutorial machen 🙂 Ich hab heute überlegt, ob ich nicht auch auf HTML5 setzen soll, denn mein Theme bzw. das was ich als Grundlage nutze wird zwar dahingehend portiert, aber ich nutze viele Dinge nicht. Ich möchte auch gerne auf Plugins verzichten und da könntest du vielleicht noch einige Tipps geben 🙂

Ob es jetzt in Android läuft, werde ich die Tage mal testen!

Eines ist mir aufgefallen: das Verhalten eines Klicks im linken und rechten Menü ist unterschiedlich (einmal Menü, einmal scrollen/Seite wechseln). Das finde ich etwas verwirrend, weiß aber auch keine bessere Lösung.

Oh und das vergrößerbare Kommentarfeld ist ebenfalls super – ist das neu und/oder extra Arbeit?

geschrieben von juliaL49
antworten  •  Link
2

Ganz großer Bug: Kommentare gehen verloren!

geschrieben von juliaL49
antworten  •  Link
3

Wooooooow o.O
Das sieht toll aus!

geschrieben von David
antworten  •  Link
4

Hallelujah! Als du ein neues Design angekündigt hast, habe ich ja Einiges erwartet, aber nicht eine solche Bombe! Das sieht echt richtig, richtig, richtig geil aus! Meinen Segen hast du und zwar hoch 1000!

geschrieben von Freddi
antworten  •  Link
5

Wow! Ganz toll, wirklich!
Negativpunkt: jetzt habe ich GERADE mein eigenes Design fertig und finde das jetzt Dank dir nun gar nicht mehr so grandios wie vor dem Lesen dieses Postings hier… *g*

Gerade die Farben hier sind sehr schön. Das Farbschema vorher mochte ich gar nicht, weshalb ich deine Beiträge fast immer per Reader lesen “musste”, sorry 😉 Aber ich freue mich darauf, deine Postings nun richtig genießen zu können!

geschrieben von Zeitzeugin
antworten  •  Link
6

Pornös! Vor allem die Farbwahl gefällt mir extrem gut. 🙂

geschrieben von Frost
antworten  •  Link
7

Also nach dem Löschen Caches geht es. Und jetzt sehe ich auch die runden Gravatare – ebenfalls schick! (besonders, dass meiner so heraussticht, höhö)

geschrieben von juliaL49
antworten  •  Link
8

Hm, das neue Farbschema und der Rahmen sagen mir nicht so zu. Das helle Braun des alten Designs hatte schon was. Insgesamt wirkt jetzt alles aber aufgeräumter. Die runden Gravatare (passend zum neuen runden Logo) gefallen mir auch sehr gut.

Ein Detail: Der Abstand zwischen einer Aufzählungsliste und nachfolgender Überschrift ist kleiner als zwischen einem Textabsatz und nachfolgender Überschrift. Wirkt etwas gedrängt.

geschrieben von Michael
antworten  •  Link
9

Mir gefällts.

geschrieben von Gamlor
antworten  •  Link
10

Sehr schick! Und auch technisch interessant, gerade das mit den verschiedenen Breiten. Gut, dass du’s erwähnt hast bzw. einen breiten Screenshot benutzt – denn ich glaube, viele (inkl. mir) haben bei großen Auflösungen keine Vollbild-Browserfenster, denn das macht auf den wenigsten Webseiten wirklich Sinn. Ich hab jedenfalls zuerst das horizontale Menü gesehen. 🙂

Links oben (in den breiten Darstellungen zu sehen) flackert übrigens der kleine Smilie von WP.com-Stats, warum auch immer…

Dass die Suchleiste unten ist, finde ich aber unpraktisch, wenn man’s nicht weiß (und sie denn benutzen will), schließlich hat es sich eingebürgert, dass sie üblicherweise (meist rechts) oben zu finden ist.

geschrieben von cimddwc
antworten  •  Link
11

Ich kann dir eigentlich nur ein riesiges Kompliment machen. Mir gefällt das Design wirklich super. Passt alles irgendwie zusammen. Und man sieht, dass du dir eine Menge Gedanken und Arbeit damit gemacht hast. Ich bin nun erst einmal begeistert :D.

geschrieben von Lordy
antworten  •  Link
12

Ach du scheiße, ist das gut. Oben links der Stats-Smiley (isser doch, oder?) nervt mich, weil er blinkt (ist das Absicht?). Ansonsten ist aber alles absolut großartig. Du machst aus dem Blogdesign eine wahre Kunst 🙂

geschrieben von Moritz
antworten  •  Link
13

Das neue Outfit gefällt mir sehr gut 🙂 Wodrauf du vielleicht noch achten könntest ist die Validierung von dem Html.

geschrieben von TimoF
antworten  •  Link
14

@alle: Danke für die ganzen Komplimente! Ich bin echt baff, wie gut euch das Design gefällt! 🙂

@juliaL49: OK, Tutorial’s zum Menü und Ersatz für Plugins hab ich notiert!

Was meinst du genau mit Verhalten im Menü links und rechts? Dass links im Hauptmenü nur das Slide-Menü aufklappt und rechts die Links direkt zu anderen Seiten führen? Da wüsste ich leider auch keine bessere Lösung, denn nur mit Hover würde ich die Menüs ungern aufklappen. Sonst löst man das ständig unbeabsichtigt aus und verdeckt sich den Inhalt damit. Vielleicht muss ich die Links im Menü auf der linken Seite noch mehr von den anderen absetzen. Mal sehen!

Was das Kommentarfeld angeht: Das ist meines Wissens ein Standard-Feature vom Firefox und sollte in so ziemlich jedem Feld vom Typ “Textarea” gehen. Hätte also auch vorher schon funktionieren müssen – bin mir selbst aber auch grad nicht sicher, ob das wirklich der Fall war 😉

@juliaL49: Wie schon auf Twitter geschrieben sehe ich ja beide deiner Kommentare und du im Opera ja auch. Irgendwie scheint der Cache da zu haken und will bei dir die Seite wohl nicht neu laden oder so. Hat denn noch jemand dieses Problem oder ist das vielleicht (hoffentlich) nur ein vereinzelter Schluckauf? Am Cache-Plugin hab ich nämlich an sich gar nix geändert. Das müsste laufen wie vorher!

@Zeit­zeu­gin: Ach, stell dein Licht nicht unter den Scheffel! Es ist generell schon eine große Leistung, sein eigenes WordPress-Theme zu basteln bzw. eins anzupassen. Und welches am Ende besser aussieht, ist sowieso Geschmackssache! 😉

@Michael: Mir war das alte Farbschema langsam über. Das war auch mit ein Grund, dass ich so kurzfristig trotz fast fertigem neuen Design noch mal die Farben und so umgebaut hab, denn das neue Design hätte auch erst eine ähnliche Farbwahl gehabt. Ich wollte einfach mal was völlig anderes.

Danke für den Hinweis bezüglich des Abstands! Hab’s grad mal ein wenig optimiert!

@cimd­dwc: Hmm, ich surfe an sich immer mit maximiertem Browserfenster. Aber stimmt schon, das macht nicht jeder. Ist also noch ein Grund, dass responsives Layout sicher keine schlechte Idee ist.

Den WP-Stats-Smiley vergesse ich immer wieder, weil ich ihn als Admin ja nicht sehe. Das Flackern wurde vor allem auch noch ausgelöst, weil ich jedem Bild ein animiertes “Ladebalken”-Gif als Hintergrund verpasst hab, um bei länger ladenden Bildern schon mal was sinnvolles anzuzeigen. Ich hab das Ding jetzt einfach mal ausgeblendet!

Die Suchleiste hab ich bei mir an sich schon lange unten, nur nie so groß. Ist aber Geschmackssache, finde ich. Und oft genutzt wurde sie auch nie, als ich sie vor Jahren mal im Header hatte.

@TimoF: Ja, da war ich noch nicht dazu gekommen! Steht aber auch noch ganz oben auf der Liste!

geschrieben von beetFreeQ
antworten  •  Link
15

Echt schick geworden!
Mir gefällt es, die Farbwahl ist gut.
Was mir gerade auffällt das das Menü nicht funktioniert wenn man die Googleapis mit einem Scriptblocker blockt (Gut das mag nur mein Tick sein)
Und was vielleicht beim Redesign vergessen wurde ist das Favicon?

geschrieben von Mars
antworten  •  Link
16

Was mir noch aufgefallen ist: Auf der Startseite in den Beitragsinfos, die beim Drüberfahren eingeblendet werden, fehlt bei den meisten die Kategorie nach “abgelegt unter:” – mit Ausnahme von “in eigener Sache”.

@Mars: Du hast nur das alte Favicon noch im Browser-Cache. 🙂

geschrieben von cimddwc
antworten  •  Link
17

Schick wie immer….

geschrieben von Martin
antworten  •  Link
18

@Mars: Ja, das liegt sicher an dem Google-Blocker. Da wirst du aber leider mit leben müssen. Ich lade die JS-Libraries bewusst von Google, weil die dort zentral liegen, immer aktuell sind und da das sehr viele Webseiten machen, die Scripte bei vielen auch längst im Browser-Cache liegen und damit hier nicht neu geladen werden müssen.

@cimd­dwc: Ah, danke für den Tipp! War mir noch gar nicht aufgefallen. Ist jetzt korrigiert. Dabei ist mir auch noch aufgefallen, dass mein “Like”-Button nicht mehr funzt. Da hab ich die Ursache aber noch nicht gefunden. Ich überlege aber grad, ob ich den nicht komplett raus nehme. Der wurde eh kaum geklickt und würde gleich noch mal ein Plugin sparen…

geschrieben von beetFreeQ
antworten  •  Link
19

Wow, hab den Beitrag hier gar nicht gesehen und bin ganz baff gewesen, als ich gerade einen anderen geöffnet hatte. Gefällt mir sehr sehr gut, besonders, weil es so hell ist und trotzdem nicht so grelle Farben verwendet. Auch viele deiner Ideen, die dahinter stecken, gefallen mir. Außerdem ist es sehr aufgeräumt, darauf lege ich viel Wert.

Sind die klickbaren Menüeinträge links auch mit CSS realisiert? Das wäre mir neu, da würde ich mich dann freuen, wenn du mal erklären könntest wie das geht. Außerdem interessiert mich, wie du Dinge ausblendest, wenn die Auflösung niedriger ist.

Kleiner Bug: Die Inhalte der Kommentar-Meta-Felder im Kommentarformular überlappen sich mit den Beschriftungen der Felder, wenn sie lang genug sind. Meine Mailadresse tut das beispielsweise. Es gibt eine Option, die Beschriftung auszublenden, wenn etwas eingegeben wurde, da solltest du nochmal nachschauen. Habari macht das sehr schick und zeigt das Label über dem Feld an wenn das Feld einen Inhalt hat.

geschrieben von Konzertheld
antworten  •  Link
20

WOW! Es ist ganz wunderbar!

geschrieben von Sumi
antworten  •  Link
21

@Kon­zert­held: Freut mich 🙂

Die Menüeinträge sind teils mit CSS, teils JQuery gelöst. Also das Herausfahren des Balkens neben dem Link ist CSS, das Auf- und Zuklappen des Menüs JQuery. Da habe ich leider keinen sinnvollen Weg gefunden, das nur per CSS zu lösen, ohne auf die Animation zu verzichten. Zum Ausblenden und so kommen die nächste Zeit sicher noch ein paar kleine Tutorials.

Der “Bug” ist eigentlich so gewollt. Ich hab da nämlich direkt das Label ins Eingabefeld verfrachtet und heller dargestellt, damit das Eingegebene auch lesbar ist, wenn’s über das Label hinweg geht. Das ginge sicher auch mit ausblenden, aber da hab ich mir noch nicht so Gedanken gemacht. Mal sehen, ob ich daran noch was ändere. Über dem Feld will ich’s ungern anzeigen, weil das das Layout ziemlich ändert.

@Sumi: Danke 🙂

geschrieben von beetFreeQ
antworten  •  Link
I’m travelling the wonderful loneliness of the headphone silence

Ane Brun

Blogverzeichnis - Blog Verzeichnis bloggerei.de blogoscoop Bloggeramt.de