Etwas Geschichte …

Diese Seite, also unter der aktuellen URL ppfeufer.de, war eigentlich mal meine Homepage. Also eine ganz normale Webseite, wie man sie halt hat. Das Blog dazu war auf eine eigene Subdomain ausgelagert, welche es mittlerweile nicht mehr gibt. Beides, also die Webseite und das Blog, waren komplette Eigenentwicklungen. So als frischgebackener Webmaster geht man gerne mal mit großen Schritten voraus und testet, wie weit man kommt. Also Selbstbau.

Der Sinn hinter dieser Aktion war es eigentlich nur, für mich selbst eine Plattform zu schaffen, auf der ich Ideen, Funktionen und Lösungen für mich hinterlege. Also alles was für mich im Bereich Webentwicklung interessant ist. Mit andern Worten, ein eigenes Nachschlagewerk. Dieses habe ich absichtlich dann öffentlich getan, damit auch andere, die eventuell vor den selben oder ähnlichen Problemen stehe, dieses auch finden. Also ein klassischer Notizblock im Internet, oder so …

War ja auch ein sehr schönes Experiment für mich selbst, zu sehen, wie weit ich komme so einen Blog selbst zu schreiben. Und ich kann sagen, ich habe dabei sehr viel gelernt. Dieses Konstrukt lief eine ganze Zeit auf der Subdomain. Bis eines Tages ich so sorgenfrei war und ich eine eigentlich kleine Änderung des Backends ohne Test eingespielt habe. Das war es dann mit den Adminseiten und einiges an der Datenbank hatte es mir auch zerlegt.

Ich hatte danach keine Lust mehr dies zu reparieren, das eigentliche Experiment war geglückt, also entschied ich mich WordPress zu installieren und das was noch an Artikeln in der Datenbank war zu portieren.

WordPress und die Optik (die Themes)

WordPress ist ja schön und gut, wenn da nicht die absolute Qual der Wahl wäre, was die Optik angeht. Tausende von Themes und direkt eins selbst schreiben, hatte ich keine Lust. Ich kannte WordPress bis Dato nur vom Hörensagen und hatte eigentlich keine Ahnung wie das genau funktioniert.

Also suchte ich mir erst mal ein Theme und die Wahl viel seinerzeit auf Elegant Box von NeoEase.

ppfeufer.de Blog (erstes Theme: Elegant Box)

Dieses Theme lief unter WordPress 2.8 und 2.9. Schlicht, einfach, keine großen Spielereien.

Mit der Zeit wurde ich allerding aktiver, wenn es darum ging, WordPress an meine Bedürfnisse anzupassen. Es kam das erste Plugin, ein Sidebarwidget namens Tweetview, welches mir meine Twitter-Timeline in der Sidebar anzeigte. Es gab zu dem Zeitpunkt einfach nichts was mir wirklich gefiel.

Und so machte ich mit an die Arbeit und bastelte mein eigenes Theme. Dunkel musste es sein, mit ein paar Transparenzen und diversen anderen Spielereien.

ppfeufer.de Blog (zweites Theme: ppfeufer-clockwork)

Ach ja, natürlich waren das alles in dem Theme keine echten Transparenzen, sondern geschickt hin geschobene Grafiken, gerade die Große im Header. Damit der „Betrug“ nicht auffiel, musste der Hintergrund natürlich mitscrollen, was mir irgendwann ganz gehörig auf die Nerven ging. Ich mag es nicht, wenn der Hintergrund mitscrollt.

Also, musste eine Modifikation her. Anderer Hintergrund, ein wenig am CSS geschraubt.

ppfeufer.de Blog (drittes Theme: ppfeufer-wooden)

Was mir viele zu der Zeit nicht glauben wollten, es wurde eigentlich nur der Hintergrund und der Header ausgetauscht, der Rest der Seite ist fast identisch geblieben, bis auf hier und da eine kleine Anpassung im CSS.

Dieses Theme blieb dann auch lange Zeit bestehen. Viele werden sich erinnern, denn es wurde erst vor zwei Tagen gegen ein neuen, großes, mächtiges Theme ausgetauscht. Die Rede ist von Talos. Das Theme, welches in Zusammenarbeit mit Kai Köpke entstanden ist. Er hat sich hierbei um die Optik des Themes gekümmert, während ich die Funktionen geschrieben habe.

ppfeufer.de Blog (viertes Theme: Talos)

Und ich kann euch sagen, eigentlich hatten wir vor mit Talos ein minimalistisches Theme zu erstellen. Aber dieses Vorhaben ist gründlichst in die Hose gegangen. Es wurde immer größer und immer umfangreicher.

Abgesang

Ihr seht schon, es hat sich hier einiges getan auf der Seite im Laufe der Zeit und ich wette, Talos wird nicht das letzte Theme sein, welches hier Verwendung findet. Vielleicht packt mich / uns (Kai und mich) ja mal wieder irgendwann der Ehrgeiz und wir versuchen noch mal ein total minimalistisches Theme zu entwerfen.

Und bei euch so?

So, nun kennt ihr meine Geschichte, bzw. die Geschichte dieser Seite / dieses Blogs. Aber wie sieht es bei euch aus? Welche Metamorphosen haben eure Seiten mitgemacht, was treibt euch an zu bloggen? Lasst es mich ruhig wissen :-)

Artikel / Seite weiterempfehlen

19 Meinungen zu “Die Entwicklung dieser Seite

  1. Mir gefällt die neue Optik! Und eigentlich finde ich es ganz natürlich, wenn jemand in unserem Fach die eigene Website ständig weiterentwickelt, redesigned usw. Schliesslich möchte man ja nicht jede neue Entdeckung gleich an einem Kundenprojekt ausagieren. ;) (Ich schreibe diesen Kommentar übrigens auf dem iPad, und die Seite skaliert einwandfrei und unauffällig.)
    Was mich interssieren würde: Wie hat die Zusammenarbeit mit dir und Kai angefangen? Habt ihr einfach gesagt „Och komm, wir schreiben jetzt ein Theme!“, oder gab’s da einen konkreteren Anlass?

    • Ja genau, immer alles testen und ausprobieren. Das war damals auch mein Motto und ist es heute noch. Ich bin halt damals an mein Blog gegangen mit den Gedanken, warum etwas vorgefertigtes hernehmen, wenn ich es selbst schreiben kann. Heute denke ich da eher anders, frei nach dem Motto, wieso das Rad neu erfinden. War eine sehr lehrreiche Zeit mit der Eigenentwicklung.

      Ja wie hat die Zusammenarbeit mir Kai angefangen. Dazu muss ich sagen, Kai und ich kennen uns schon ne ganze Weile. Und eines schönen Tages am Telefon kam uns in unserm Übermut die waghalsige Idee ein absoluten Killertheme für WordPress zu basteln. In den folgenden Tagen legten wir die Rahmenbedingungen für das Theme fest. Hell, Responsive, HTML5, CSS3 und all so nen Schnickschnack. Ach ja, und minimalistisch sollte es sein.

      Also fuhr ich ende Dezember 2011 zu Kai und wir machten uns an die Arbeit. Zwei Wochen haben wir dran rumgewerkelt und es stand ein Theme, noch nicht komplett fertig, aber das wurde mit der Zeit. Alles andre als minimalistisch, sondern eher mächtig, unsere Vorgaben haben wir auch weit hinter uns gelassen. Eben getreu dem alten ostdeutschen Motto „Wir kennen den Plan zwar nicht, aber wir schaffen ihn locker“ wurde Talos immer mächtiger.

      Leider muss ich dazu sagen, dass Talos nie wirklich fertig geworden ist, denn aus Zeitmangel auf beiden Seiten verlor das Theme immer mehr an Bedeutung und so habe ich es nun hier für meine Seite hergenommen, damit es nicht ganz in Vergessenheit gerät.

      Was ich allerdings sagen kann und auch muss ist, dass die Zusammenarbeit mit Kai sehr angenehm war. Gerade bei meinem Talentdefizit im grafischen Bereich :-)
      Wir helfen uns immer mal wieder gegenseitig aus und auch die Buttons des 2-Click Plugins sind alle von ihm.

  2. Hallo Peter,

    interessante Geschichte über den Werdegang deiner Site. Das bringt mich irgendwie auf den Gedanken, daß ich ebenfalls mal darüber schreibe, wie es denn zu meinem Blog und meiner Website gekommen ist. Natürlich mit entsprechendem Link zu deinem Artikel hier, da ich ja immerhin durch dich auf den Gedanken gekommen bin! ;-)

    Vor allem das Chaos mit meiner ursprünglichen Site könnte ein paar Leute interessieren, da meine „Open Source Welt“ (naja…) sogar noch existiert. :-O

    Grüße nun aus TmoWizard’s Castle

    Mike, TmoWizard

  3. Interessant, zu lesen, wie es anfing bei Dir und das neue Design sieht sehr ansprechend aus, wobei mir das vorherige auch gut gefiel. Mein Blog ist ja noch relativ jung, allerdings bin ich auch die ganze Zeit am Schrauben und Suchen, ob ich nicht noch was besser/anders machen kann. Im Moment fahre ich ein von mir modifiziertes Responsive TwentyTen. Ich glaube, die Empfehlung habe ich auch von Dir. Ich bin mir jedoch sicher, dass über kurz oder lang ein anderes Design bei mir prangen wird. Das ist allerdings so eine Sache, wenn das Thema des Blogs eben nicht Webdesign ist. Da kann ich meine Ergebnisse nur schwer im Blog unterbringen, ohne komplett off-topic zu gehen. Deswegen muss ich drei unterschiedliche Bereiche abdecken – Content, Grafik, „Programmierung“ – und so greife ich meist auf vorhandenes zurück und tweake es so lange, bis ich es zerschossen habe :) Dann gehts wieder zurück zum letzten „stable release“ und der Prozess beginnt von vorn. Learning by doing, wie’s so schön heißt.
    Ich wünsch Dir jedenfalls viele Besucher…

    Beste Grüße aus Berlin,
    Tom

    PS: Der Link zu Deiner Seite ist natürlich längst gesetzt, weil er es zumindest für mich einfach wert ist.

  4. Sehr schöne Geschichte, hat richtig Spaß gemacht zu lesen. Vielleicht sollte ich auch mal aufschreiben, wie ich zu einer Idee gekommen bin und wie ichs umgesetzt habe.

  5. Hallo H.-Peter,

    der Juli scheint es in Sachen »Redesign« in sich zu haben. Ich habe mich auch daran »gewagt« und wie ich bereits mehrfach schrieb, ist php für mich eine exotische Vorspeise. :-)

    Somit wird das mit einem eigenen Theme natürlich nichts, ich bin auf bereits bestehende angewiesen. Mein bisheriges ist jedoch seit dem Einsatz Anfang des Jahres nicht ein Mal aktualisiert worden und ich finde auch nirgendwo ein Changelog.
    In Bezug auf die »deprecated«-Geschichte der WordPress-Version 3.4 habe ich dann begonnen, mir Gedanken zu machen und mich entschieden, auf ein anderes Theme umzusteigen, dessen Changelog erstens überhaupt existiert und zudem mehr als einen Eintrag enthält.
    Mein Bericht über das neue Design erscheint kommenden Dienstag auf meinem Blog. Ich war so frei und habe dich dort erwähnt und natürlich auch verlinkt.

    Weshalb betreibe ich meinen Blog?
    Ganz einfach, weil es mir Spaß macht, über eines meiner Hobbys zu sprechen – und auch, um meinen Mitmenschen vielleicht die eine oder andere Anregung zu geben. Meine Mami habe ich immerhin schon überzeugt – sie ist inzwischen genauso ein eBook-Reader-Fan wie ich.

    Viele Grüße
    Martina

  6. Hallo H.-Peter,

    in Deinen aktuellen Artikeln habe ich keinen so wirklich passenden für mein Anliegen gefunden, aber da es mit WordPress und sicher auch dem Theme zu tun hat, frage ich einfach mal hier.

    Vor einiger Zeit hatte ich gelesen, dass sich die neueren WP-Versionen nicht mehr in iframes laden lassen.
    Ist ja generell eine gute Sache, doch zum bspw. zum Testen der Seite, wie sie in den verschiedenen Auflösungen aussieht, braucht man das teilweise, denke ich zumindest so als Laie.

    Bei dem Web Developer Plugin bspw. sowohl für den Fux als auch für Chrome sehe ich im Gegensatz zu meinem Blog Deinen in den unterschiedlichen Auflösungen einwandfrei (Punkt »Resize« »View Responsive Layouts«).
    Mein Blog wird in den verschiedenen »Boxen« (iframes) erst gar nicht geladen, bzw. nur ganz kurz, dann erfolgt direkt die Weiterleitung zum Blog selbst.

    Die einzigen mir bekannten Seiten, bei denen das Testen meines Blogs in anderen Auflösungen funktioniert, sind http://mattkersley.com/responsive/ (allerdings nur im Chrome, nicht im Fux) und http://www.startmobile.de/de/d/website-testen/#mobilerfitnesstest.

    Gibt es eine Möglichkeit – auf einfache und für Laien verständliche Weise – hier etwas in WP oder im Theme zu »schrauben«, damit der eigene Blog – zumindest mal temporär – in iframes angezeigt werden kann?
    Falls das Ganze zu aufwändig sein sollte, vergiss meine Frage einfach. :-)

    Viele Grüße
    Martina

    • Holla Martina,

      Also, um ein Theme in verschiedenen Auflösungen zu testen reicht es vollkommen den Browser auf diese Auflösungen selbst zu „resizen“. Will sagen, änder die Größe des Browsers einfach auf die gewünschte Auflösung. Da hast Du mit dem Web-Developer AddOn schon nen guten Partner an der Hand, da kann man verschiedene Testauflösungen speichern und schnell umschalten.

      Die Nummer mit den Iframes ist ganz schlechtes Karma. Einige Themes verhindern schlichtweg, dass sie in solchen Iframes geladen werden. Das macht WordPress soweit ich weiß nicht von sich aus. Diese Technologie nennt sich Framebreaker. (Siehe hier und hier) Dagegen kann man nicht wirklich viel machen, außer JavaScript zu deaktivieren. Aber dann funktioniert meist nicht mehr viel, da viele Themes und Plugins mittlerweile auf jQuery setzen.

      Das mein Theme sich anpasst im Gegensatz zu Deinem, wenn ich das richtig aus Deinem Text entnommen habe, liegt daran, dass mein Theme „responsive“ ist. Das heißt, es wurde im CSS das Verhalten für mehrere verschiedene Auflösungen festgelegt. Dazu nutzt man CSS-Mediaqueries. Hier eine Erklärung bei Heise.

      Ist also nicht wirklich schwer und zum testen braucht es keine Iframes, einfach die Browsergröße ändern reicht da schon.

      • Hallo H.-Peter,

        nee, das mit dem Anpassen meinte ich nicht so. Dass Du ein responsive Design hast, ist mir klar :-) … und auch wenn ich bei meiner neuen Themewahl nicht explizied danach gesucht habe, ist das itheme2, das ich jetzt benutze, ebenfalls responsive – siehe hier.

        Ich meinte Folgendes: Ich rufe zuerst Deine Seite auf, danach im »Web Developer Plugin« den Punkt »Resize«, dann »View Responsive Layouts«. Das Ganze schaut dann so aus.
        Wenn ich jetzt meine Seite aufrufe, danach im »Web Developer Plugin« den Punkt »Resize«, dann »View Responsive Layouts« sieht es nicht wie oben aus, sondern so, d.h. meine Seite bleibt nicht in den »Fensterchen« des Web Developer Plugins.

        Das mit der Größe des Browserfensters ändern kenne ich, doch im Fux funktioniert das seit Version 15 nicht mehr richtig. Aber okay, es gibt ja auch noch andere Browser. :-)

        Das mit dem Ausschalten von JavaScript, lassen wir dann doch mal besser. *lach*

        Viele Grüße
        Martina

  7. Ich musste schmunzeln, als ich „WordPress-Freund“ gelesen habe – und ich musste staunen, je genauer ich mir die Seite angeschaut habe. Mir gefällt das Theme wahnsinnig gut. Es wirkt top-modern und sehr aufgeräumt. Die großflächigen Bilder mit Wechselmöglichkeit im Header sind toll, die klaren Navigationselemente ebenso. Respekt.

Schreibe einen Kommentar

Ihre Email-Adresse wird nicht veröffentlicht. Pflichtfelder sind durch * markiert.

Sie können folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>