Im vorherigen Teil der Artikelserie haben wir uns damit beschäftigt, welche funktionale Struktur unsere spätere Homepage aufweisen soll, und wie ein dazu passendes funktionales Layout aussehen könnte. Wir haben eine Handskizze dazu  erstellt, die als Vorlage für die tatsächliche Umsetzung dienen soll. Nun geht es in einem weiteren Schritt darum, diese Vorlage auch umzusetzen. Zur Erinnerung nochmal unsere Kriterien-Liste vom letzten Artikel:

  • Das Logo rutscht im Header nach links oben und wird bedeutend kleiner.
  • Rechts im Header kommt ein Bild, Kurzinfo und Kontakt-Info zu mir
  • Im Header mittig kommen wechselnde Kurztexte in groß, eventuell auch mit Twitter-Anbindung. Direkt darunter die Möglichkeit, aktuelle Musik von mir abzuspielen.
  • Im Sidebar-Bereich links kommen Seiten-interne Suche und die Haupt-Navigation.
  • In den Sidebar-Bereich rechts kommt alles, was mit Interaktion zu tun hat, jeweils Content-bezogen, z.B.:
    • Verweis auf weitere Blog-Artikel, die interessieren könnten
    • Anmelden zur Benachrichtigung über neue Beiträge
    • Registrieren/Anmelden für die Community
  • In den Haupt-Content-Bereich kommt – wenig überraschend – der Content hin.

Funktionales Layout

Unser funktionaler Layout-Plan vom letzten Artikel.

Das Ergebnis muss in diesem Schritt noch nicht sonderlich ästhetisch aussehen. Auch Mobile-responsive-Optimierung usw. ignorieren wir erstmal. Es geht rein darum, dass das funktionale Layout so aussieht, wie es später auch aussehen soll – mit entsprechenden Platzhaltern für die späteren Inhalte.

Wollen wir doch mal sehen, wie schwierig das umzusetzen ist.

Schritt 0: Staging-Umgebung einrichten

Bevor es überhaupt losgeht, wird meine Webseite “geklont” auf einen Subserver von mir. So kann ich nach Herzenslust experimentieren, ohne versehentlich meine eigentliche Homepage dabei zu ruinieren.

Praktischerweise bietet WordPress dafür ein kostenloses Plugin namens “WP Staging”, das dies mit einem Klick automatisch erledigt. Die Pro-Version bietet auch noch an, die so veränderte Seite dann wieder zurück “Live” zu schalten. An sich sicher praktisch, wenn auch für meine Zwecke bisher nicht notwendig gewesen. Aber die Funktion, eine Staging-Version anzulegen, ist Gold wert.

Schritt 1: Gibt es dazu bereits vorgefertigte Themes/Plugins/Widgets?

Eines der Vorteile an WordPress ist es ja, dass es für fast alle Wunschvorstellungen bereits frei verfügbare Vorlagen gibt, weil jemand anderer das irgendwann ebenso gebrauch hat. Hat schon auch seine Vorteile, ein CMS zu verwenden, das nach eigenen Angaben die Basis von 30% aller Webseiten weltweit stellt.

In unserem Fall haben wir jedoch Pech gehabt: Das funktionale Layout, das ich mir vorstelle, finde ich in der Form nicht, oder zumindest nicht kostenlos. Ein Theme sieht vielversprechend aus, aber da es über 50€ kostet und ich mir nicht sicher bin, ob es wirklich passt, entscheide ich mich dagegen. Im Grunde ist es in meiner Situation ohnehin schlauer, die Entwicklung selbst zu übernehmen. So übe ich mich darin, in Zukunft meinen Kunden rascher helfen zu können.

Nun steht noch die Entscheidung an, ob ich ein Theme von null auf selbst entwickle, oder ein bestehendes umbaue. Zweiteres führt zwar dazu, dass man eine komplexere Entwicklungsumgebung vor sich hat, aber führt auch rascher zu Erfolgserlebnissen. Da ich auch in der Vergangenheit schon ein paar Veränderungen an meinem aktuellen Theme vorgenommen habe, um es mit meinen selbst entwickelten Plugins kompatibel zu machen, werde ich einfach mein bestehendes Theme als Basis benutzen. Auf dieser (die bereits eine Unterstützung für Mobile Responsive usw. bietet) baue ich dann den Rest so auf, wie ich ihn haben will.

Schritt 2: Wie funktioniert das bestehende Theme?

Die bestehende Sidebar mit dem Inhalts-Block zu vertauschen gelingt rasch. Dann aber wirds rasch komplexer, und ich arbeite mich in die WordPress-Mechanik ein, um zu verstehen, warum mein bestehendes Theme dieses macht und nicht jenes.

Wo ich mich aufgrund der komplexen Zusammenhänge innerhalb eines Themes, das ich nicht selbst programmiert habe, nicht mehr zurechtfinde, reduziere ich gerne diese Komplexität. Dann programmiere ich kleine Mini-Programme, um herauszufinden, wo der Fehler liegt, wenn z.B. Tutorials zu bestimmten Funktionsweisen nicht zum gewünschten Ergebnis führen. Meist liegt es an Wechselwirkungen mit anderen Programmteilen, die im Tutorial (weil es sich ja nur auf eine kleine Problemstellung konzentriert) oft nicht erwähnt werden. Die zu entwickelnde Funktion innerhalb dieser Mini-Programme auszuprobieren, kann helfen, die Ursache zu finden. Oft sind nämlich auch schlicht die Tutorials falsch beschrieben.

Mini-Test

Ja, 3 Spalten! Halleluja!

Ein erster Erfolg ist dann das (zugegeben lächerlich aussehende) Mini-Programm, dass mir schlicht 3 Spalten macht. Innerhalb der WordPress-Umgebung funktionierte das stundenlang nicht. Nun kann ich herausfinden, woran es liegt. Und kurze Zeit später funktionierts dann tatsächlich auch im WordPress-Theme: Inhalts-Box in der Mitte + 2x Sidebars werden dort angezeigt, wo ich sie haben will:

3 Spalten im Theme

Hat nur gefühlte 8h gedauert. Wenn das so weitergeht, sitz ich noch länger hier dran.

Schritt 3: Funktionales Layout einrichten

Aber auch der Header soll in 3 Spalten unterteilt werden. Auch das funktioniert rasch, sobald mir das Grundprinzip dahinter klar geworden ist.

3x2 Spalten

Das war ja einfach.

Allerdings sind die Spalten im Header-Bereich im Vergleich zum Inhalts-Bereich unten noch unterschiedlich gesetzt. Auch möchte ich noch ausprobieren, ob die zukünftigen Inhalts-Felder in den farbigen Kästen sich auch tatsächlich so verhalten, wie ich das möchte. Das klappt auch relativ rasch:

2x3 Spalten adjustiert

Na also! Sieht doch schon viel besser aus!

Schwieriger wird es beim Navigations-Menü. Das soll ja von derzeit oben Mitte nach links in die linke Sidebar. Erste Versuche sehen ein wenig absurd aus:

Menü funktioniert nicht

Naja.. noch nicht ganz…

Online-Tutorials helfen nur wenig, weil diese zwar in meinen Mini-Testprogrammen funktionieren, nicht aber in Zusammenarbeit mit dem bestehenden Menü des Themes. Daher dauert es knappe 4h, bis ich es endlich zufriedenstellend hinbekomme. Nicht schön, aber ansehlich genug, und vor allem: es funktioniert so, wie es soll:

Endlich: das Menü ist nun auf der linken Seite – und funktioniert auch noch 🙂

Nun steht der Rück-Übertragung von der Staging-Webseite auf die Live-Webseite kaum mehr etwas im Wege. Ich entferne noch die farbigen Recht-Ecke, die mir beim Layouten helfen, dann sieht die Webseite schon recht passabel aus:

Funktionales Layout ohne Grid

Noch nicht schön, aber funktional. Und darum ging es ja.

Vor allem aber steht nun das funktionale Layout. Ab nun ist es bedeutend leichter, etwa den “Über den Autor”-Bereich rechts oben ästhetischer zu gestalten. Schließlich handelt es sich bei diesem Bereich nun um ein sogenanntes “Widget”. Dieses kann nun frei gestaltet werden, ohne versehentlich dabei das Layout der restlichen Seite zu zerstören.

Realistischerweise werde ich noch den einen oder anderen Bug übersehen haben, über den ich mich die nächsten Tage ärgern kann. Oder Wechselwirkungen, die ich nicht bedacht habe. Aber das gehört dazu. Genauso wie die Achterbahnfahrt der Emotionen von “Auweh, vielleicht bin ich einfach zu unfähig für das Ganze” zu “Ha! Jetzt klappts! Niemand kann mich jetzt noch aufhalten!” im steten Wechselspiel.

Zusammenfassung

Das funktionale Layout anhand der vorher klar definierten Kriterien umzusetzen, ist nach der im vorherigen Artikel beschriebenen Vorarbeit nicht mehr so schwierig. Vor allem, wenn man – Vorteil von WordPress – auf bestehende Themes zurückgreifen kann, die man dann nur noch an die eigenen Bedürfnisse anpassen muss.

Das Ergebnis sieht zwar dann noch nicht unbedingt ästhetisch aus, aber zumindest ist schon mal absehbar, wo es sich hin entwickeln wird – und dass es möglich sein wird, es so umzusetzen wie angedacht. Alleine das gibt schon mal Kraft und Lust auf die weitere Arbeit.

Ungefährer Aufwand in Stunden bisher: 15h.

Davon wohl rund die Hälfte bedingt davon, dass ich bisher noch nicht sooo viel Ahnung von Theme Development hatte. Jetzt käme ich vermutlich mit der Hälfte der Zeit aus, weil ich besser weiß, worauf ich achten muss.

In einem nächsten Schritt wird es dann wohl darum gehen, das Ganze ein wenig ästhetischer aussehen zu lassen. Aber heute nicht mehr 🙂

Niklas

-> Nachhaltiges Online Marketing – Eine Homepage erstellen mit dem CMS WordPress, Teil 0: Die Entscheidung treffen

-> Nachhaltiges Online Marketing – Eine Homepage erstellen mit dem CMS WordPress, Teil 1: Strategische Planung

Kommentar verfassen