Eine bewegliche Sidebar schmückt jetzt meinen WordPress Blog
Ich gehe mit meiner Laterne und meine Laterne mit mir… So könnte man die aktuelle Neuerung auf meinem Blog umschreiben 
Ich hatte ja schon geschrieben, dass ich eine Abspeckkur auf meinem Blog mache und es damit auch ein paar Änderungen geben wird. Ihr habt mir ja schon eine Menge Feedback, Kritik und Anregungen gegeben. Dafür möchte ich mich Bedanken
Zur Steigerung der Usability ist jetzt noch eine zusätzliche Seitenleiste auf der linken Seite hinzugekommen, die ich jetzt mal kurz vorstellen möchte:
Mit dieser Leite möchte ich die Navigation auf meiner Seite verbessern 
Die Funktionen von oben nach unten:
- Wikio Vote Button
- Tweetme Button
- Direkt ins Kommentarfeld springen
- Direkt zum Anfang des Posts springen
Das ganze wäre ja auch noch ein bisschen witzlos, wenn die Leiste nicht mitwandern würde. Ich habe lange nach einer Möglichkeit gesucht, wie ich das realisieren könnte.
Die Grundidee einer beweglichen Sidebar bekamm ich über einen Artikel aus dem Smashing Magazine. Das hat mir so gut gefallen, dass der Entschluss schnell fest stand, dass ich so etwas auch auf meiner Seite haben möchte. Leider hat es nicht mit der Methode geklappt und ausserdem mussten noch eine Menge weiterer Javascript Codes eingebunden werden. Die Ladezeit der Webseite läßt grüßen
Auf folgender Webseite habe ich aber dann die Lösung zu meinem Problemes gefunden. Mittels ein paar Zeilen Code wurde eine Möglichkeit realisiert, die auch bei mir funktioniert Einzige Problem dabei war, dass es ein ziemlicher Rohentwurf ist.Ich durfte noch einiges programmieren und angepassen damit es auch so aussieht wie ich es wollte.
Am meisten Kopfzerbechen hat mir das Problem der Bildschirmbreite bereitet. Bei Auflösungen von 1200+ Pixeln kein Problem, aber darunter wäre die Box mitten in meinen Posts gewandert und hätte so die Lesbarkeit beeinträchtig Jetzt habe ich noch eine Abfrage generiert, die ermittelt welche Bildschirmauflösung der Client hat. Ist diese kleiner als 1200 Pixel so wird die Leiste ausgeblendet.
Ich finde die neue Box schon sehr geil und ich hoffe sie kommt auch gut bei euch an. Es kann noch sein, dass ich noch was dazupacke oder am Design noch was ändere. Aber ich möchte auch nicht zu viel rein tun, weil es sonst wieder zu unübersichtlich wird.
Noch ein paar kleine Hinweis am Rande:
- Im Footer gibt es jetzt Random Links. Diese sollten wenn möglich aus der gleichen Kategorie kommen
- Im Footer gibt es die TOP 5 Posts des aktuellen Tages
- Im Footer gibt es die Top Kommentierten Artikel der letzten 30 Tage
- Im Hauptlesebereich sind dank der neuen Sidebar einiges an Knöpfen und Text verschwunden
- Die Slideshow in der rechten Seitenleiste ist ein bisschen nach unten gerückt, damit es nicht so viel an einer Stelle blinkt
Noch auf der ToDo Liste:
- Ein schön animierter Flash Header mit einer Auswahl meiner Bilder. Hierfür habe ich schon was im Auge. Dafür werden aber 10 Dollar und ein stückchen arbeit fällig
- Wieder eine spezielle Seite für meine Fotos, die seit dem Server Umzug wieder weggefallen ist.
- Weitere kleine Anpassungen
By the way habe ich komischerweise wieder Feedreader.
Nachdem ich fast auf 100 gefallen war, habe ich jetzt mit 211 sogar mehr als denn je 
UPDATE 2009-07-10:
Oh Ich sehe schon, dass der Teufel mal wieder im Detail liegt 
Ich habe jetzt mal als Workaround ie Auflösung 1280 jetzt auch ausgeklammert. Grund für das nehmen der Bildschirmauflösung anstatt der Fenstergröße ist, dass dies einfacher in Java zu coden ist. Da ich meine Java Kentnisse zusammen google macht es die Sache nicht einfacher Ich werde auf jeden Fall noch eine Lösung dafür finden
Nette Spielerei – jetzt müsstest du nur noch berücksichtigen, dass es Leute gibt, die zwar größere Bildschirme, ihr Browserfenster aber nicht maximiert haben… bei solchen Individuen (wie bei mir) hängt das Ding dann doch wieder über dem Text. Ebenso bei Kleinbildschirmlern, die Javascript deaktiviert haben.
Wie wär”s zusätzlich mit einem “Schließen”-Button oder einem “Minimieren an den linken Rand” (Reduzieren auf wenige Pixel)?
Sie bewegt sich aber erst wenn man JavaScript einschaltet. Vorher blieb sie oben am Anfang des Artikels. =)
Oha, also ich find die nicht so schön.
Surfe auch mit 1200 Pixel Auflösung aber nie mit einem maximierten Fenster, so ist das Ding vor dem Text.
Ausserdem ist das extrem ablenkend, deshalb hatte ich ja (und wegen der Ladezeit) Tweetboard) wieder rausgeworfen..
Finde das voten gehört ans ende des artikels und den rest finde ich auch so, also sind jetzt auch die funktionen nicht der bringer..
aber glücklicherweise unterscheiden sich geschmäker ;)
Hui! Spannende Sache, auf die du stolz sein darfst, aber:
ich habe zwar mein Browserfenster maximiert, aber eine Seitenleiste (Bookmarks, Addons etc) und deswegen hängt auch bei mir die Box über dem Text :sad:
Ich schließe mich Matthias an und sage, dass der Vote-Button ans Ende gehört.
Die Sprungmarken sind nicht unbedingt nötig, aber schon hilfreicher :)
PS: Gratulation zum Feedsprung!
Hallo Thomas,
ich finde das Teil Klasse, vor allem weil du die Navigation immer dabei hast.
Wegen des Einwurfs von Matthias und Julia, kann man die Box nicht verkleinern, bzw. nach einer gewissen Zeit als (ich weiß nicht wie ich es ausdrücken soll) Länglichen Streifen mit der Aufschrift Navigation zur Seite fahren? Nur ein Idee.
Sonst finde ich das Teil echt stark! ^_^
Gruß
Matthias
Ist schön was es alles gibt, aber finde auch Vote gehört ans Ende.
Hallo Thomas,
ich hatte heute mittag schon mal gepostet, aber irgendwie hat das nicht funktioniert? Aber gut dann noch mal.
Ich finde das neue Tool (Sidebar beweglich) klasse! Gefällt mir wirklich sehr gut!
Wegen der Anmerkungen von Matthias und Julia, ist es nicht möglich, dass du die Sidebar nach einer gewissen Zeit einfach als kleinen Balken an der Seite anzeigst und wenn man draufklickt, geht sie wieder auf?
Gruß
Matthias
Ich stimme voll und ganz zu … das Ding muss weg. :pistolen: Oder wenigstens an einen anderen Ort, vor dem Text ist irgendwie blöd. ;)
@cimddwc: Danke für die Info. Wie ich schon im Update geschrieben hatte versuche ich eine Lösung zu finden und einen Ausblendbutton anbieten. Leider gestaltet es sich besonders schwierig, wenn die Leute Javaskript deaktiviert haben.
@Paul: Ja das stimmt. Eine Bewegung gibt es nur wenn man JS aktiivert hat. Dann siehst ud aber auch nicht meine Tabs und meine Featured Posts?
@Matthias: Die Auflösungsgrenze habe ich geändert und ich werde auch noch einen Ausblendbutton anbieten. Die Performance wird damit nicht beeinträchtigt. Das sind 8 Zeilen Code, die bestimmt nicht ins Gewicht fallen. Die Sprungmarken finde ich praktisch und mein Gedanke war halt auch, dass wenn jemand einen Kommentar geschrieben hat und dann Voten will gleich alles im Blick hat. Ausserdem bekommen Suchmaschinen Benutzer hier natürlich auch noch ein bisschen Werbung eingeblendet
@juliaL49: Oh je ich hatte eigentlich gedacht, dass es besser ankommt. Ich glaube als Webdesigner wäre ich schon verhungert
Das Auflösungsproblem habe ich jetzt einfach durch hochschrauben der Werte geändert. Werde mich aber dahinterklemmen, dass es behoben wird. Wenn alle stricke reißen, dann muss ich es halt wieder weg tun. Bei den Vote Button hatte ich mir gedacht, dass es ganz praktisch ist, wenn man sie immer im Sichtfeld hat.
@MacBetH: Danke für deine Geduld und deinen Kommentaren. Leider ist dein erster dank der Biene im Spam gelandet. Ich schaue mir aber immer zum Glück auch alle Spam Kommentare an
Uff ich dachte es gefällt keinem. Ich schaue, dass ich noch eine Ausblendfunktion bekomme. Blöderweise wird diese auch nur funktionieren, wenn die Leute JS aktiviert haben.
@Crosa: Ja es gibt vieles, aber nicht alles ist auch wirklich Toll. Ich denke ich muss da noch mal wieder was ändern
@Mike: Ich habe die Auflösung jetzt hoch geschraubt und im Notfall kommt das Ding dann auch weg
Hallo Hombertho,
kein Problem, dass mit dem Spam passiert, mir auch andauernd.
Eine kurze Frage, hast du die Erweiterung abgeschaltet? Denn ich sehe sie gar nicht mehr?
Gruß
Matthias
Ih seh auch nix, ich hab” hier nicht ”mal ”n Header.
Das mit den Auflösungen sehe ich als Problem an…
Bei den meisten Rechnern, auf denen ich mich rumtreibe, bin ich unter 1280.
Laut meinen Stats sind meine Besucher zu mehr als 1/3 auch mit einer geringeren Auflösung unterwegs.
Zur Sidebar als solche kann ich gerade auch nix sagen, da ich sie aktuell auch nicht sehe
Aber der neue Header gefällt!
@Mac_BetH: Die Erweiterung ist jetzt erst einmal wieder heraus geflogen
Es gab zu viele Probleme, mit denen ich nicht gerechnet hatte. Ist zwar Schade aber im Moment der Weg des geringsten Übels.
@HiPPIE: Dann hast du auch kein JS an. Die Sidebar ist wieder raus geflogen und der Header ist jetzt JS/Flash animiert. Vielleicht mache ich noch einen für alle die kein Javascript aktiviert haben.
@Marc: Wegen dem 1/3, die unter 1280 surfen und den anderen drittel, die auch noch Javascript deaktiviert haben, ist die Sidebar im Moment auf Eis gelegt. Für den Header habe ich sogar mal etwas Geld springen lassen. Ganze 7,50 Euro hat mich der Code für die Flashanimation gekostet
Freut mich, dass er so gut ankommt. Ich bin auch noch am Optimieren. Sprich: Bessere Komprimierung und verkleinerte Abmassung bei den Bildern, Mehr Bilder und natürlich sinnvollere Texte. Ich habe mir gedacht zu jedem Kategoriethema eines. Mal sehen 
Hallo hombertho,
das tut mir leid! Ich fand das Ding echt klasse, aber du hast rech! Entweder richtig oder gar nicht!
Aber auf Grund der statistischen Daten, die du als Grundlage hast scheine ich mit meinem aktivierten JS und großer Auflösung irgendwie eine Ausnahme als Surfer zu sein?
Aber du hast mich inspiriert! Ich werde auch mal schauen, ob ich nicht wieder rausbekomme, wo ich das schon mal gesehen habe, und dann kann man es ja wieder probieren. Vielleicht klappt es ja.
Gruß
Matthias
Animierter Header? Bei mir rotiert da seit Minuten ein Pfeil im Kreis vor weißem Hintergrund und das bei eingeschaltetem Javascript. Das gilt für den Firefox (3.5), in Opera dagegen läuft der Header wie gewollt durch und sieht sehr schick aus!
@Mac_BetH: Schau dir mal folgendes Seite an. Das fände ich eine tolle Kompromislösung: http://www.isthisablog.com/200.....ndom-post/ So was in der Art werde ich mir noch einmal versuchen einzubauen. Da muss ich aber auch noch herausfinden, wie er das gemacht hat. Vielleicht bekommst du auch noch was tolles raus
@JuliL49: Hmmm ich habe es mit sehr vielen Browsern probiert. Allerdings nicht mit dem FF 3.5. Wenn es rotiert, dann hat er aber nur Probleme die Bilder zu finden. Vielleicht hilft es mal den Cache zu leeren? Ich finde es auch sehr schick und möchte es ungern wieder entfernen. Vor allem es ist so ja nur ein Testlauf. Da sollen schon noch schöne Bilder rein und auch ein geistreicher Text
Hallo Thomas,
ich schaue mir mal an! Sieht interessant aus!
Aber ich schaffe es heute nicht mehr! Mache ich morgen, genug Zeit vor dem Rechner verbracht.
Gruß
Matthias
@Mac_BetH: Es ist immer gut sich mal eine Auszeit zu können. Ich war ja dann gestern auch noch unterwegs. Ich habe mir das heute früh mal angeschaut und es scheint gar nicht mal so aufwendig zu sein. Ein paar Zeilen JS und die Buttons im css definiert. Ich denke das werde ich mal weiterverfolgen wenn Zeit vorhanden ist.
Mit deinem Header stimmt was nicht. Erstmal hängt im ganzen Safari alles für einige Sekunden, dann kommt ein Flash-Ladekringel, der sich minutenlang nur unmotiviert dreht. Was passiert, wenn ich deine Seite auf dem iPhone aufrufe, möchte ich gar nicht erst probieren :sad:
Leider bin ich keine Spezialist was JS angeht. Ich habe da mal früher ein bisschen rumgespielt und auch Coding angepasst. Aber es dürfte auch in meinen Augen nicht allzu schwer sein.
Ich werde mal noch ein wenig weiter suchen, vielleicht finde ich ja was, ohne großen Programmieraufwand.
Gruß
Matthias
@Ruben: Ich habe es mit mehreren Safari Versionen getestet und es hat wunderbar funktioniert und die Performance ging dadurch auch nicht in den Keller. Hast du mal deinen Cache geleert? Tritt danach dann das Problem weiterhin auf? Wäre toll wenn du es mal testen könntest.
Auf dem Iphone läuft WPTouch. Das hat nichts mit dem aktuellen Theme zu tun. Es benutzen auch schon viele und keiner hatte damit bis jetzt probleme.
@Mac_BetH: Großer Programmieraufwand ist nicht dahinter. Man kann es sich aus dem Quellcode der Seite gut klauen. Aber sollte ich es mal zeitlich hinbekommen und das Ding auch bei mir zum laufen bringen, dann kann ich gerne eine Hilfestellung geben