Diese Woche war ich beruflich auf der ISE. Auf der Messe für AV und Systemintegration gab es jede Menge interessanter Dinge zu entdecken. Am Nachbarstand zeigte AEG einen in zwei Dreiecke geteilten LED-Bildschirm. Der zugehörige PC steuerte die Kombination als eine Einheit an.

Ohne großen Aufwand lassen sich die notwendigen Anpassungen und Dateien in den eigenen WordPress Blog integrieren. Prima.

1. Responsive Design
2. Artikelformate
3. WordPress Galerien

Für meine Verhältnisse war das ziemlich ambitioniert. Trotzdem wollte ich es so durchziehen. Und das Ergebnis seht ihr nun vor euch: Theme Version 0.5.

Responsive Design

Da immer mehr Leute Webseiten auf mobilen Endgeräten betrachten, ist es für den Besucher eine große Erleichterung, wenn das Layout einer Webseite auf die zwangsläufig kleineren Bildschirme ausgelegt ist. Eine Lösungsmöglichkeit stellen spezielle mobile Themes wie z. B. WP Touch dar. Allerdings läßt man sich so auf ein vorgefertigtes und von vielen benutztes Design ein, daß mancher Besucher schon nicht mehr sehen kann.

Eine bessere Möglichkeit stellen die sogenannten Media Queries von CSS3 dar. In dem Stylesheet seiner Webseite hinterlegt man damit angepasste Formatierungen für spezielle Bildschirmauflösungen. Die Größe des Browserfensters entscheidet also, welche CSS Angaben letztendlich zur Anwendung kommen. Entwickelt man ein passendes Layout und arbeitet zusätzlich mit Prozentangaben für die Dimensionen der Elemente, erhält man fast fließende Übergänge zwischen den einzelnen, festgelegten Bildschirmgrößen.

Der Wellenspeicher wird z. B. auf dem iPad noch inkl. Seitenleiste angezeigt, auf dem iPhone wandert diese dann unter die Artikel. Bilder werden je nach verfügbarer Größe skaliert.

Eine Quelle an Inspiration (und damit meine ich nicht als Kopiervorlage) für die Umsetzung des Responsive Designs waren für mich die Artikel von Elmastudio und deren fabelhaftes Theme Yoko.

Artikelformate

Artikelformate (Post Formats) wurden hauptsächlich durch Tumblr bekannt. Bei WordPress sind diese mit der Version 3.1 eingeführt worden. Abhängig vom Typ (Text, Zitat, Link, Bild, etc.) kann man die Ausgabe eines Artikels unterschiedlich stylen. So benötigt z. B. ein Zitat nicht zwangsläufig eine Überschrift, während bei einem Link die Überschrift direkt zum Ziel weiterleitet (das kennt man von Daring Fireball).

Auf dem Wellenspeicher sind die verschiedenen Artikelformate durch entsprechende Icons gekennzeichnet. Klickt man auf ein solches, kann man sich alle Artikel dieses Formats anzeigen lassen.

Für mich bedeuten die Artikelformate eine nette Erweiterung zusätzlich zum klassischen Blogartikel. Ich kann dadurch auch mal schnell eine Notiz oder ein Bild veröffentlichen. Folglich wurde somit auch meine Rubrik Randnotizen von dem neuen System assimiliert. Widerstand ist zwecklos.

WordPress Galerien

Viele Blogs benutzen für die Präsentation von Bildern und Galerien eines der zahlreichen Plugins, die fast alle mit dem Lightbox Effekt arbeiten. Auch ich hatte lange Zeit das Plugin FancyBox im Einsatz.

Was die wenigsten wissen oder vielleicht aus Gründen des Designs nicht in Betracht ziehen: WordPress besitzt selber umfangreiche Funktionen für eine ansprechende Umsetzung.

Aufmerksam darauf bin ich durch die Webseite von “Mr. WordPress” Matt Mullenweg geworden. Dort werden ausschließlich die Bordmittel von WordPress eingesetzt. Das Ergebnis braucht sich nicht zu verstecken und hat sogar Vorteile:

• Es wird kein Plugin benötigt
• Die Präsentation läuft auf Mobilgeräten ohne Probleme
• Einzelne Bilder lassen sich kommentieren

Bei der Umsetzung auf dem Wellenspeicher hat mir der hervorragende Artikel Photo Gallery Primer von Otto sehr geholfen. Er war auch so nett, eine Frage von mir in den Kommentaren sehr ausführlich zu beantworten. Dafür hab ich ihm ein Bier gekauft

Hier auf dem Wellenspeicher könnt Ihr euch als Beispiel das Fotoset von Herb Leonard ansehen.

Sonstiges

Im Zuge der Artikelformate haben auch die Artikelbilder (Post Thumbnails) Einzug gehalten. Diese werden auf der Einzelseite eines Artikels ausgegeben (falls vorhanden). Somit muß eine kleine Illustration oder ein Logo nicht im Text selber untergebracht werden.

Weiterhin wurden von mir die Kategorien (Schubladen) leicht angepasst und ein paar (nun) überflüssige Plugins entfernt.

Fazit

In den letzten Wochen habe ich bzgl. WordPress und Themegestaltung wieder einiges gelernt. Teilweise war es ein bißchen anstrengend, vor allem wenn etwas nicht so funktionierte wie ich wollte, andererseits hat es aber auch jede Menge Spaß gemacht. Ab und zu liebe ich es einfach an etwas zu frickeln.

Laßt doch mal in den Kommentaren hören, wie euch die neue Version gefällt.

Bei der Erstellung meines Blogdesigns wollte ich etwas weiter gehen als nur ein bißchen PHP, HTML und CSS Code zu schreiben. Zu diesem Zwecke und aufgrund der sehr positiven Resonanz legte ich mir das Buch “Modernes Webdesign” von Manuela Hoffmann zu.

Wie der Titel schon vermuten läßt, geht es um die Gestaltung von Internetseiten und deren Umsetzung. Dabei werden Theorie und Praxis gleichermaßen behandelt. Der Inhalt erstreckt sich über drei Teile:

1. Design – Webstandards, Gestaltung, Layout, Typografie, Farbe, Medien
2. Technik – (X)HTML und CSS im Überblick, Arbeitsvorlagen
3. Praxis – Anhand eines Beispielprojekts wird die komplette Entstehung einer Webseite auf der Basis von WordPress beschrieben

Ich möchte hier nicht näher auf die einzelnen Kapitel eingehen, diese sind ausführlich auf der eigens für das Buch eingerichteten Webseite beschrieben. Im speziellen empfehle ich die Stimmen zum Buch zu lesen. Nur soviel: Auf jeder Seite spürt man die große Erfahrenheit der Autorin. Ihr Schreibstil ist einfach zu konsumieren, alle behandelten Themen werden umfassend und vor allem immer praxisnah vermittelt. Zudem gibt es zahlreiche weiterführende Links zu Artikeln im Netz. Ein wahres Füllhorn an Informationen.

Abgerundet wird das Ganze mit einer beiliegenden DVD. Diese beinhaltet alle Beispieldateien aus dem Buch und zudem zahlreiche Tools und Software. Weiterhin versorgt einen der Buch-Update des Verlags Galileo Design mit eventuellen Korrekturen (wobei positiverweise zum jetzigem Zeitpunkt noch keine vorhanden sind).

Beim Lesen fiel mir leider auf, wie wenig Ahnung ich doch noch von Webdesign Themen wie z. B. Konzeption, Gestaltung, Typografie oder Farbauswahl habe. Da gibt es noch soviel zu lernen und zu verstehen. Und genau hier liegt für mich der Nutzwert dieses Buchs: Es hat mir eine neue Sichtweise vermittelt. Ich achte jetzt auf ganz andere Dinge, die vorher nicht mal auf meinem “Schirm” waren.

Zu guter Letzt muß ich noch etwas loswerden: Ich habe noch nie ein “schöneres” Fachbuch in den Händen gehalten. Das Werk ist ausgesprochen ansprechend und durchgehend 4-farbig illustriert und weist eine unglaubliche Wertigkeit in Verarbeitung und Material auf.

Muß immer alles perfekt aussehen? Also ich mag das ja, in diesem Fall wollte ich es aber nicht. Ist doch irgendwie langweilig, oder? Und sehen tut man auch nichts. Anstatt also alles im stillen Kämmerlein vorzubereiten á la Maggi Kochstudio, wird die gesamte Schrauberei an dieser Site mitzuverfolgen sein. In Farbe. Und bunt.

Angefangen habe ich übrigens bei Null. Ich wollte einfach keine fertiges WordPress Theme. Also nichts von der Stange, sondern alles zugeschnitten auf meine Vorstellungen, und zwar in Design und Funktion. Und lernen kann man dabei auch noch etwas.

Ich bin gespannt!