Der Trend ein­zelne Blog-Artikel ähnlich wie in Print-Magazinen indi­vi­duell zu gestalten, wird immer beliebter. So kann man spe­zi­elle Artikel beson­ders her­vor­heben. Das macht die Blog-Artikel attrak­tiver, und man kann bezüg­lich des Layouts viel besser auf die Bedürfnisse des Inhalts ein­gehen. Ich habe ein paar der schönsten Beispiele für indi­vi­du­elles Artikel-Design, sowie einige Tipps und Über­le­gungen zur Umsetzung des Trends in WordPress zusammen gestellt.

1. Die schönsten Beispiele für indi­vi­du­elle Blog-Artikel

Webdesigner wie Jason Santa Maria haben mit ihren indi­vi­du­ellen Blog-Artikeln ganz neue Maßstäbe gesetzt, und immer mehr krea­tive und expe­ri­men­tier­freu­dige Webdesigner folgen diesem Beispiel. Hier einige indi­vi­du­elle Artikel-Seiten der Trendsetter.

1.1. Jason Santa Maria

1.2. Trent Walton

1.3. I love typo­graphy

1.4. Gregory Wood

1.5. 72^nd Ave.

1.6. coldheat

1.7. Danny Garcia

1.8. Dustin Curtis

1.9. Graphic Novelty

1.10. Gregory Wood

2. Möglichkeiten der Umsetzung in WordPress

2.1. Benutzerdefinierte Felder nutzen

Eine Möglichkeit indi­vi­du­elle CSS-Styles für deine Artikel zu inte­grieren, ist es ein benut­zer­de­fi­niertes Feld für das jewei­lige Style-Sheet in deinem Artikel anzulegen.

Lade dazu das zuvor off­line ange­legte Style-Sheet (postXY.css) für deinen indi­vi­du­ellen Artikel unter uploads auf deinen Server hoch. Jetzt legst du in deinem Artikel ein benut­zer­de­fi­niertes Feld mit dem Namen custom-style an, dem du den Wert der URL deines indi­vi­du­ellen Style-Sheets gibst.

Anschließend fügst du in deinem Header fol­genden Code-Schnipsel unter­halb deines Main Style-Sheets ein.

<?php $customcss = get_post_meta($post->ID, 'custom-style', true); ?> <?php if ($customcss != "") { ?> <link href="<?php echo $customcss ?>" rel="stylesheet" type="text/css" /> <?php } ?>

(Quelle des Codes: Webdesigner Wall)

2.2. Post-IDs nutzen

Auf seinem Blog »Diggging into WordPress« beschreibt Chris Coyier eine wei­tere prak­ti­sche Möglichkeit indi­vi­du­elle Artikel zu stylen. Füge dazu fol­genen Code in die functions.php Datei deines Themes ein.

function artStyle() {
    global $post;
    if (is_single()) {
        $currentID = $post->ID;
        $serverfilepath = TEMPLATEPATH.'/art-direction/style-'.$currentID.'.css';
        $publicfilepath = get_bloginfo('template_url');
        $publicfilepath .= '/art-direction/style-'.$currentID.'.css';
        if (file_exists($serverfilepath)) {
            echo "<link rel='stylesheet' type='text/css' href='$publicfilepath' media='screen' />"."\n";
        }
    }
}
add_action('wp_head', 'artStyle');

Lege dann den neuen Ordner art-direction in deinem WordPress-Theme Ordner an. Nachdem du deinen neuen indi­vi­du­ellen Artikel in WordPress ange­legt hast, fügst du das dazu­ge­hö­rige Style-Sheet mit dem Namen style-XY.css (XY steht für die Post-ID deines Artikels) in den Ordner art-direction ein. Das Custom Style-Sheet wird so auto­ma­tisch zuge­ordnet, sobald der Artikel mit der ent­spre­chenden ID auf­ge­rufen wird.

(Anleitung und Code von Digging into WordPress)

2.3. Das »Art Direction« WordPress-Plugin

Mit dem hilf­rei­chen Plugin »Art Direction« kannst du eben­falls ganz ein­fach Custom CSS-Styles für deine Artikel anlegen. Chris Coyier hat bei CSS Tricks ein aus­führ­li­ches Video-Screencast (41 Minuten) zur Nutzung des Plugins gemacht.

Allerdings weisst Chris in seinem Artikel »Custom CSS per Post« (siehe Umsetzung im Punkt 2.2.) darauf hin, dass das Plugin leider nicht zusammen mit einem Cache-Plugin für WordPress funk­tio­niert. Wenn du also ein Cache-Plugin auf deinem Blog ver­wen­dest, sind die ersten beiden Varianten die bes­seren Optionen für die Umsetzung deiner indi­vi­duell gestylten Artikel.

3. Über­le­gungen zu den Vor- und Nachteilen indi­vi­du­eller Artikel

• Ein großer Vorteil des indi­vi­du­ellen Stylings ist, dass du beson­dere Artikel (z.B. kleine Serien oder Features) auch durch das Layout her­vor­heben kannst.
• Außerdem kannst du besser auf die Bedürfnisse eines ein­zelnen Artikels ein­gehen. Vielleicht wäre es z.B. sinn­voll, in einem Artikel beson­ders große Bilder zu zeigen, oder spe­zi­elle Textpassagen zu betonen.
• Ein wei­teres Plus ist, dass du die Aufmerksamkeit deiner Leser auf einen bestimmten Artikel lenken kannst. Der Leser ist nicht vom immer glei­chen Layout gelang­weilt, das indi­vi­du­elle Layout funk­tio­niert also quasi als »Wachrüttler«.
• Meiner Meinung nach ist es jedoch sinn­voller, nicht jeden Artikel indi­vi­duell zu gestalten. Ansonsten nimmt man sich den Effekt eines indi­vi­du­ellen Artikel-Layouts selbst wieder weg. Auch in Print-Magazinen wird schließ­lich nicht jeder Artikel mit glei­cher Priorität behan­delt, son­dern vor allem der Magazin-Aufhänger durch ein ent­spre­chendes Layout beson­ders hervorgehoben.
• Ein rie­siger Nachteil ist natür­lich der Zeitfaktor für ein indi­vi­du­elles CSS-Stylesheet. Schließlich kann man im Web nicht ein­fach wie in einem Layout-Programm für Druckmedien die Elemente hin und her schieben. Diese wich­tige Aspekt ist auch ein Argument dafür nicht jeden Artikel indi­vi­duell zu gestalten, son­dern nur ganz spe­zi­elle Posts.
• Ein anderes Argument gegen das Custom CSS Styling könnte auch sein, dass man als Leser durch die unter­schied­liche Optik ver­wirrt ist und sich nur schwer auf dem Blog zurecht­findet. Ich denke die Kunst bei indi­vi­du­ellen Artikel-Styles liegt darin, eine den Artikel-Inhalt beto­nende Gestaltung zu finden, und trotzdem im Design-Stil des Blogs zu bleiben. Dabei hilft es sehr, sich auch von Print-Magazinen inspi­rieren zu lassen, die diese Herausforderung ja oft kreativ meistern.

4. Weitere Inspirationen und Lesestoff zum Thema

Der Smashing Magazine Artikel »Death of the Blog Post« (eben­falls in einem indi­vi­du­ellem Post-Styling umge­setzt) bietet jede Menge inter­es­sante Anregungen zum Thema.

Christian Mücke von coldheat hat eine span­nende Sammlung indi­vi­du­eller Blog-Artikel von 28 ver­schie­denen Webdesignern ange­legt. Um immer auf dem Laufenden zu bleiben, kannst du dir auch den RSS-Feed zur Sammlung abonnieren.

Auch der Artikel »Unique Blog Posts und WordPress Tips« bei WebdesignerWall zeigt etliche schöne Beispiele, sowie eine Besschreibung der Umsetzung von Custom Posts in WordPress.

Welche Gedanken hast du dir bereits zum Thema indi­vi­du­eller Artikel im Webdesign gemacht? Kennst du wei­tere, inno­va­tive Beispiele für Blogs mit indi­vi­du­ellen Artikeln? Über deine Einschätzung und deine Tipps freue ich mich sehr!