Sicarius

In neuem Gewand!

Bevor wir zum eigentlichen Thema übergehen, gleich zu Beginn ein herzliches und ganz dickes Dankeschön an Rondrer (Umsetzung) und iCe (Design). Ohne den selbstlosen Einsatz der beiden würde das nicht existieren, was ihr hier nun vor euch seht. In diesem Sinne:

Hallo und herzlich Willkommen beim Christoph!

„Aber wir sind doch schon seit dem 26.09.2013 hier?!
“ wird sich jetzt sicherlich der ein oder andere verwundert Fragen. Und ja, damals fand der erste Schritt in Richtung neuer Seite statt. Doch unter der Haube steckte immer noch Bagdadsoftware. Seit heute ist dem nicht mehr so. Abseits der Inhalte, die natürlich vollständig übernommen wurden, ist sowohl im Hintergrund als auch Vordergrund alles neu zum Beginn des Jahres 2014. Schauen wir also mal, ob ich noch alles zusammenbringe. Vorweg aber gleich zwei Hinweise:

1) Ein paar ältere Unterseiten wie beispielsweise der Westwood-Artikel sind noch nicht erreichbar. Sie existieren zwar, aber die Links dorthin funktionieren noch nicht.
2) Die Darstellung auf Mobilgeräten ist noch nicht optimal. Bilder zerstören derzeit noch das Layout auf Smartphones.

An beidem wird auch schon gearbeitet. Solltet ihr abseits davon noch Fehler/Probleme entdecken, dann bitte diese in Kommentare packen, damit wir sie beheben können. Danke!

Die Basis

sucheKam bislang noch CuteNews zum Einsatz, setzt Beim Christoph nun auf das sicherlich jedem bekannte und entsprechend äußerst populäre Content Management System WordPress (Version 3.8). Der wichtigste Unterschied: Setzte CuteNews noch auf Textdateien, ruft WordPress seine Inhalte aus unserer schicken neuen MySQL-Datenbank ab. Und der größte Vorteil dieser Datenbank und Hauptgrund für den ganzen Aufstand, den seht ihr oben rechts unter meinem großen Schattenbild. Zum einen findet ihr dort nun ein sich automatisch aktualisierendes Archiv, welches oben die letzten 12 Monate anzeigt. Wer weiter zurückmöchte, der navigiert sich über das jeweilige Jahr durch das Archiv. Zum anderen, noch viel wichtiger, ist dort eine Suchfunktion. Aber nicht irgendeine Suchfunktion, sondern eine, die nun tatsächlich funktioniert und über alle Einträge und Unterseiten hinweg die gewünschten Ergebnisse liefert. Wenn ihr also wissen wollt, wo überall BioShock erwähnt wird, dann könnt ihr es nun einfach und schnell nachvollziehen. Kommentare werden allerdings nicht mit erfasst. Das wäre sonst etwas Overkill und würde die Ergebnisliste vermutlich wieder ein Stückweit unbrauchbar machen.

Die Kategorien funktionieren hingegen wie gehabt. Ein Klick und euch werden alle Einträge angezeigt, die damit getaggt sind. Es werden allerdings nicht alle gleichzeitig angezeigt. Stattdessen ist überall, wo es eine zweite Seite gibt (also auch im Archiv zum Beispiel) ganz unden wieder die Möglichkeit mit „Nächste Seite“ die Sachen durchzublättern gegeben. Neu in dieser Hinsicht ist somit nur die Autorenübersicht. Ja, durch einen Klick auf den Namen oben unter der Titelleiste findet ihr alle Einträge des jeweiligen Autoren. Sucht ihr also alles was Herr Azzkickr verzapft hat, dann seid ihr so am schnellsten.

Plug me in!

WordPress hat aber noch einen weiteren Vorteil: Ganz viele Plugins, die sogar ein Depp wie ich einbauen kann. Derzeit sind die folgenden 10 aktiv:

Antispam Bee — Mit der Popularität von WordPress kommt leider auch ein noch höheres Spamaufkommen als schon bei Cutenews. Die Aufgabe dieses Plugins ist entsprechend den ganzen Spam von uns fern zu halten und nur eure Kommentare durchzulassen.

Blubrry PowerPress — Erinnert ihr euch noch an den Bagdadsoftware Podcast? Den konntet ihr nicht nur herunterladen, sondern auch auf der Seite anhören. Damit das auch weiter funktioniert, musste ich dieses Plugin installieren.

Custom Smilies — WordPress unterstützt zwar von Haus aus auch Smileys. Aber nicht in den Kommentaren. Deswegen brauchte es dieses Plugin, damit ihr in den Kommentaren die Smiley-Leiste habt.

CuteNews Importer — Das wohl wichtigste Plugin überhaupt. Nicht nur hat es alle alten Inhalte in die Datenbank übertragen, es sorgt auch gleichzeitig dafür, dass alle alten Eintraglinks noch funktionieren. Sprich diese hier: http://www.beimchristoph.de/index.php?subaction=showfull&id=1348437600 . Die könnt ihr also weiterhin bedenkenlos anklicken und landet dann an der richtigen Stelle.

In Zukunft haben die Links aber ein anderes Format und zwar „http://www.beimchristoph.de/2014/01/frohes-neues-jahr-2014“ also Jahr, Monat und dann den Eintragstitel. Das macht die Links wesentlich Suchmaschinenfreundlicher als eine lange Unixtime-Zahlenkolonne. Alle Autoren haben sogar die Möglichkeit diesen Permalink selbst festzulegen (im Hintergrund hat jeder Eintrag schließlich immer noch eine klare ID). Aber es wäre dennoch nett, wenn ihr die Finger davon lassen würdet :smile: .

Kebo – Twitter Feed — Wie der Name schon sagt, ist es nicht nur dafür zuständig, dass da auf der rechten Seite mein Geblubbere auf Twitter angezeigt wird. Dank umfangreicher Designmöglichkeiten fügt sich das Ganze jetzt auch sehr gut in die Seite ein und ihr könnt sogar direkt die Bilder anschauen, die ich in manche Tweets mit einfüge.

garrysmodseiteLightbox Gallery — Ich mag zwar derzeit nicht viele neue Garry’s Mod-Bilder oder Signaturen anfertigen, aber den Altbestand wollt ihr euch natürlich dennoch irgendwie anschauen können. Und dafür ist dieses Plugin zuständig. Das produziert nicht nur eine schöne Seite mit Thumbnails, sondern erlaubt es euch auch erstmals auf die Bilder draufzuklicken und diese in Groß anzuschauen! In dem dazugehörigen Popup-Fenster versteckt sich dann auch die Beschreibung zum jeweiligen Bild — allerdings ab sofort nur noch in deutscher Sprache. Wenn ich auch noch die englischen Texte dazu gepackt hätte, wäre das hier und da seeeeeehr lang und unübersichtlich geworden. Dafür könnt ihr nun alle Bilder durchklicken und müsst nicht jedes einzeln anschauen.

Lightbox Plus Colorbox — Im Prinzip das Gleiche wie oben, nur eben nicht für Galerien, sondern die Einträge. Ja, auch hier in den Einträgen könnt ihr ab sofort Bilder anklicken, um sie groß zu bekommen. Das gilt allerdings nur für die Inhalte ab dem 1.1.2014. Rückwirkend konnten wir das nicht machen, weil ich die Bilder bislang per Hand auf beispielsweise 400px Breite reduziert und dann so hochgeladen habe. Somit war kein Original da auf das er das Thumbnail hätte Vergrößern können. Aber wie gesagt: Ab sofort müsst ihr euch die Bilder nicht mehr mit der Lupe anschauen!

Subscribe to Comments Reloaded — Auch hier ist der Name Programm: Ihr könnt ab sofort Einträge beziehungsweise die dazugehörigen Kommentare abonnieren! Und zwar auch als anonymer User. Der Link dazu ist direkt unter den Kommentaren und der jeweilige Link zum Bearbeiten und Kündigen eures Abos steht dann in der Benachrichtigungsmail drin. Autoren erhalten übrigens automatisch eine Mail wenn ein neuer Kommentar zu ihrem Eintrag da ist. Es ist also ein Abo nur für alle anderen nötig.

Dieses Plugin ist auch der Grund, warum ihr euch nicht für Beim Christoph registrieren müsst und auch nicht könnt. Wir wollten zum einen vermeiden, dass sich Spambots als User anlegen und wir dann immer löschen müssen. Zum anderen ist der einzige wirkliche Vorteil eines Abonnenten gegenüber eine anonymen User eben nur, dass er Einträge abonnieren kann. Das ist dank des Plugins aber nun hinfällig.

kommentarbeispielApropos Kommentare: Wenn ihr einen Account bei Gravatar besitzt, dann gebt im Feld „E-Mail Adresse“ die an, die ihr dort verwendet. Dann erkennt euch das System automatisch und übernimmt den entsprechenden Avatar — und zwar auch rückwirkend! Wenn ihr also schon immer diese Adresse eingetragen habt, dann ist euer Bildchen auch in alten Einträgen da. Bei Kirika zum Beispiel hat das einwandfrei funktioniert.

WP-Benutzer-Avatar — Registrierte Nutzer (also die Autoren) können hingegen dank dieses Plugins ihren eigenen Avatar hochladen und hier verwenden.

Alle anderen bekommen hingegen einen einzigartigen Retro-Pixel-Avatar erzeugt, der aber dann immer gleich ist. Wenn sich ein gewisser Azzkickr also weiterhin nicht einloggt vor dem Kommentieren (bzw. nicht die hinterlegte Mail-Adresse angibt), dann hat er auf Dauer dieses komische Männchen als Bild.

Das Design

Mit diesem Blick hinter die Kulissen haben wir nun schon einiges an Neuerungen erschlagen. Aber wir sind natürlich noch nicht fertig. Lasst uns deshalb einfach mal hier auf der Startseite weiterschauen.

Das Design der Seite ist, wie anfangs erwähnt, komplett der Feder von iCe entsprungen. Ich habe nur hier und da unqualifizierte Kommentare abgegeben. Ach und natürlich wollte ich den Schattenriss als Logo sowie das baby-Blau als Hintergrundfarbe weiterhin behalten weil mir beides gefällt. Speziell die Farbe ist etwas, das identifiziere ich seit über 10 Jahren ausschließlich mit meiner Seite. Ich wüsste keine andere, die so aussieht. Ausgestattet mit diesen Vorgaben war dann das Ziel wieder etwas einfaches und Zeitloses zu schaffen, dass jedoch seriösere und gleichzeitig natürlich auch moderner daherkommt. Das heißt keine großen Schnörkelleien, sondern klare Linien und to the Point. Deswegen ist der Titel der Seite beispielsweise kein Logo mehr, sondern einfach nur Text, unter dem unser neues Motto klebt.

Ja, auf Anraten von Azzkickr habe ich „Sehenswert, sinnlos und verdammt viel zu lesen!“ kurzfristig über den Haufen geworfen und daraus „Sehenswert, informativ und extrem viel zu lesen!“ gemacht. Zwar war und ist der alte Satz lustig, aber so wirklich seriös klang er jetzt nicht. Deswegen flog er kurzerhand raus.

navileisteDer nächste Ansatz war das U-förmige Aussehen abzuschaffen. Navigationsleisten links und rechts benutzt heutzutage keine Sau mehr (und Webdesigner schon erst recht nicht). Als Ersatz gibt es nun oben eine Leiste, über die ihr die jeweiligen Unterseiten ordentlich sortiert finden könnt. Es ist natürlich ein Klick mehr als früher, wo ihr eine direkte Auswahl treffen konntet und auch der Kasten mit den letzten fünf Einträgen fiel der Überarbeitung zum Opfer. Aber am Ende des Tages ist diese Variante einfach schöner und auch aussagekräftiger finde ich.

Gleichzeitig habe ich auch kräftig aussortiert, was die Unterseiten angeht. Der Punkt „Literatur“ ist zum Beispiel komplett verschwunden. Die dort hinterlegten Kurzgeschichten sind jetzt nur noch über die Suche oder den jeweiligen alten Eintrag zu finden. Der Grund dafür war schlicht, dass die nicht in das aktuelle Konzept passen und ja auch schon einige Jahre auf dem Buckel haben mit wenig Aussicht auf Neuzugänge in nächster Zeit. Auch die Änderungsliste, die ich sowieso nur selten gepflegt habe sowie die Unterseite „Privates“ sind rausgeflogen. Meine Sammlungen und dergleichen sind hingegen jetzt direkt unter „Christophs Ecke“ zu finden. Dort ist auch eine komplett neuen Seite namens Nutzerprofile auf der ihr sehen könnt, was ich derzeit so auf welchem System (Steam, Xbox 360, PlayStation 3) zocke. Die SteamCard scheint derzeit allerdings kaputt zu sein. Also er zeigt sie zwar an, aber der Inhalt ist nicht aktuell. Wird hoffentlich bald behoben.

Die Mitte

Mit dem Verschwinden der linken Navigationsleiste haben natürlich sowohl der Eintrag an sich als auch die rechte Leiste mehr Platz (die Gesamtbreite der Seite ist 1280px). Letzteres ist besonders wichtig, weil dadurch vor allem die Tweets besser zur Geltung kommen. Gleichzeitig wurde die Reihung geändert. Die Kategorien sind nun in einer Art Tag-Wolke oben und erst darunter kommt die Übersicht über die letzten fünf Kommentare. Diese wurden wiederrum um die Angabe an welchem Tag der Kommentar verfasst wurde ergänzt. Früher stand da ja aus Platzgründen immer nur die Uhrzeit. Auch der Titel des jeweiligen Eintrags hat nun größere Chancen komplett angezeigt zu werden. Und falls es euch noch nicht aufgefallen ist: Die Idee hinter der rechten Leiste ist, dass es sich hier um Schriftrollen handelt, die ihr quasi gerade in der Hand haltet und lest.

Das grundlegende Aussehen der Einträge hat sich hingegen nicht geändert. Die Dreiteilung aus Header, Inhalt und Footer ist gleich geblieben und auch die dargestellten Informationen sind unverändert. Der Header ist jedoch nun etwas dominanter und vor allem farbenfroher geworden. Der eigentliche Eintragstext an sich hängt hingegen nun nicht mehr so stark an den Seiten fest, sondern hat etwas mehr Raum sich zu entfalten was zusammen mit der optisch etwas luftigeren und größeren Schriftart einfach besser wirkt. Das Aussehen eurer Kommentare wurde logischerweise auch daran angepasst. Und auch die Unterseiten, die früher einfach nur schwarzer Text auf blauem Hintergrund waren, sind nun dem restlichen Design angepasst. Es gibt also nirgends mehr einen Bruch zwischen all den einzelnen Elementen hier auf der Seite.

Fazit

beimchristophscreenshotUnd damit müsste eigentlich erst einmal alles gesagt sein, was es zur neuen Seite zu sagen gibt. Zumindest fällt mir gerade nichts weiter ein, wovon ich euch noch erzählen könnte. Lasst mich also zum Abschluss noch ein kleines Fazit ziehen:

Es ist natürlich ein wenig schade, dass durch die Umstellung die kleinen Sachen wie beispielsweise das Dialekt-Zeugs (allgemoines rumgesabbel und geschreibsel) komplett verschwunden sind. Aber wie jetzt schon öfters in diversen Einträgen erwähnt hatte: Wenn ich schon „Bagdadsoftware“ in den Ruhestand schicke, dann will auch gleich komplett in eine etwas seriösere Richtung wechseln. Das bedeutet natürlich nicht, dass jetzt plötzlich die Einträge hochtrabender oder gar bierernst werden oder so. An den Inhalten ändert sich nichts abseits der ganz normalen, schleichenden Weiterentwicklung meiner Schreibe.

Aber die neue Version von Beim Christoph ist optisch einfach was ganz anderes nicht nur weil das alte Design eben schon ein Jahrzehnt auf dem Buckel hatte (wenngleich es im Vergleich zu so manch anderer Seite immer noch gut aussah). Wenn ich jetzt auf die Seite komme, dann sehe ich keinen billigen Blog eines unwichtigen Nichtsnutzes mehr, der keine Ahnung von Webdesign hat, sondern wieder eine richtig schöne Seite von einem kompetenten Schreiberling — oder um es mal nicht übertrieben zu sagen: Mir gefällt die neue Seite sowohl optisch als auch von den neuen Möglichkeiten beziehungsweise dem komfortableren Arbeiten her.

Natürlich war der Hauptgrund für die Umstellung wie erwähnt schlicht die Einführung der MySQL-Datenbank und die damit verbundenen modernen Annehmlichkeiten (speziell die Suche). Aber mein Motto ist bekanntlich: Entweder richtig oder gar nicht. Halbe Sachen gibt es nicht und deshalb wurde es eben nicht nur eine Backend-Umstellung, sondern auch gleichzeitig die Chance genutzt und das Frontend überarbeitet. Entsprechend auch zum Ende des Eintrags hin noch einmal ein herzliches Dankschön an Rondrer und iCe, die ich in den letzten Wochen extrem viel genervt habe und so um ihre wohlverdiente Freizeit brachte. Ohne euch, wäre das nix geworden!

Und jetzt übergebe ich an euch, lieber Besucher. Schau euch die Seite an, testet alles aus und gebt in den Kommentaren sowohl positives als auch negatives Feedback. Es soll ja nicht nur mir gefallen, sondern auch euch :smile: .

Print Friendly
Tweet about this on TwitterShare on FacebookEmail this to someone

11 Kommentare

Mir gefällt das neue Design sehr gut :) Habt ihr hübsch gemacht *patpat*

Das Einzige was mir persönlich nicht so gefällt ist die Linkfarbe in der Navigation beim Drüberfahren. Meiner Meinung nach sollte hier besser das gleiche Blau oder ein Ähnliches (eventuell etwas dunkler oder fett gedruckt?) verwendet werden wie auf der restlichen Seite.

Als Vorschlag zu den Übersichtsseiten Autor/Kategorie:
Ich hatte hier beim Klick auf den Link von Azzkickr eher eine kleine Übersicht (ähnlich wie bei den Suchergebnissen) erwartet. Also eine Seite wo man die Einträge kurz angeteasert bekommt und dann per Klick auf die Überschrift in die gesamte Ansicht wechselt. Das ist aber vielleicht auch persönlicher Geschmack.

Sche schaugts aus.

Der Such-Button scheint nicht zu funktionieren, da macht er bei mir nur was wenn ich in der Textbox mit enter bestätige.

Und das Hauptmenü funktioniert nur wenn man Javascript an hat. Ist vermutlich kein Problem, wollte es nur mal erwähnen ;)

Ne, der geht bei mir auch nicht. Kam ich gar nicht auf die Idee den mal zu testen :smile: . Habs auf die Bug-Liste gesetzt.

Und das mit der Navigationsleiste ist auch doof. Da sollte dann langfristig ein reines CSS-Menü hin. Ich bin aber leider zu blöd dafür, das selbst zu machen. Da muss also auch Ron dann ran.

So sorry, wollte eigentlich ’nen fetten Kommentar schreiben, aber bin leider erst eben von der Arbeit gekommen. Morgen sieht’s nicht besser aus… komme mir ja fast vor als würde ich bei Amazon schaffen. :D

Noch was on-topic:
Gut, dass du die Smartphone Problematik ansprichst, das wäre mein erster Punkt gewesen. Identisch ist es dann leider bei geringeren Auflösungen. Auf was für eine Auflösung habt ihr euch denn beim Designen der Seite festgelegt? Den ’neuen‘ Durchschnitt, oder einen Mittelwert aus den google analytic Infos der Seitenbesucher? Also auf geringeren Auflösungen habe ich statt der Hauptbox so einen komischen Button mit 3 Strichen, bei dem nichts passiert, wenn ich draufklicke. Aber das wisst ihr bestimmt schon. Würde ich auf jeden Fall mal alles hübsch dynamisch machen. :)

Also Ziel war es auf jedenfall die Seite komplett unabhängig von der verwendeten Auflösung zu machen. Responsive Design, wie es neudeutsch so heißt. Dass es das im Moment noch nicht so hunderprotzentig tut, liegt einzig und allein an meinem Unvermögen mit Bootstrap (das die gesamte „Arbeit“ dahingegen übernimmt) richtig umzugehen, aber das wird schon irgendwann, irgendwie.

Sehr schön mit der Lupe. Ist es möglich da auch irgendwie die neuste Kommentare – Box anzeigen zu lassen? Ist eigentlich das Einzige was mir bei der mobilen Version fehlt.

Oben nahm ich an, ihr hättet eine fixe Auflösung hergenommen, weil es eben zuerst nicht möglich war zu zoomen. Da lag der Schluss nahe, dass die Seite sei so designt worden wäre. Hätte mich jetzt nicht verwundert. „Responsive Design“ ist mir bekannt, MI-Bachelor habe ich knapp verfehlt. ^^ Aber auch so bastel ich genug, Kiri+ich haben jetzt lange genug mit unseren Seiten rumgebastelt… Demnächst irgendwann mal basteln wir an einem mobile Design. Wäre cool, wenn es da auch bei BC etwas Gesondertes gäbe. :)

Die drei Boxen „Kategorien“, „Kommentare“ und „Tweets“ verschiebt er auf kleinen Auflösungen, also auch auf Smartphones, automatisch GANZ nach unten auf die Seite also unter alle Einträge. Das ist natürlich mit etwas scrollen verbunden weil die so lang sind, aber prinzipiell sind sie da zu finden :smile: .

Ich hab die Anzahl der angezeigten Beiträge auf einer Seite von 10 wieder auf die bisher bekannt 5 reduziert. Das sollte das Problem etwas vereinfachen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

:smile: :sad: :wink: :tongue: :-x :roll: mehr »
*