Drei Dutzend kleine Tipps und Inspirationen für euer eigenes Blog. Querbeet aus den Bereichen Content, Design, Usability, Accessibility, SEO, Performance, Gimmicks…
Nach dem Motto: Mein Blog muss schöner / besser werden.
Ob ein Tipp für euch in Frage kommt oder nicht, hängt vom Blog ab. Pickt euch einfach raus, was euch sinnvoll erscheint.
März 2013 | Nicolai Schwarz | @textformer
Falls ich die Zeit finde, gibt es das Thema demnächst auch etwas ausführlicher unter http://nicolaischwarz.de.
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
36 Tipps und Inspirationen für Blogger
1. Vektorgrafik von vectorious
via fihttp://goo.gl/t5G61
DETAILS, DETAILS
Drei Dutzend kleine Tipps und Inspirationen
für euer eigenes Blog. Querbeet aus den
Bereichen Content, Design, Usability,
Accessibility, SEO, Performance, Gimmicks…
Nach dem Motto:
Mein Blog muss schöner / besser werden.
Ob ein Tipp für euch in Frage kommt oder
nicht, hängt vom Blog ab. Pickt euch einfach
raus, was euch sinnvoll erscheint.
März 2013
Nicolai Schwarz | @textformer
Falls ich die Zeit finde, gibt es das Thema
demnächst auch etwas ausführlicher unter
finicolaischwarz.de.
2. DISCLAIMER
Ja, auch ich habe ein eigenes Blog. Und
viele der folgenden Anregungen würden
auch meinem Blog gut tun. Sobald ich die
Zeit finde…
Einige Beispiele sind selbstreferenziell
(fiwebkrauts.de, fipisto-magazin.de,
finicolaischwarz.de). Sorry, aber da weiß
ich zumindest genau, warum wir das so
gemacht haben.
3. 01 OHNE AUTOR
Es gibt Blog-Einträge, bei denen nicht klar
ist, wer den Text geschrieben hat. Ich ver-
traue aber bekannten Autoren mehr als un-
bekannten oder gar anonymen (siehe Tipp
31). Auch in Blogs von einzelnen Autoren
mag es sinnvoll sein, nicht nur eine Ȇber
mich«-Seite zu haben, sondern tatsächlich
eine eigene (kleine) Autorenbox unter jeden
Artikel zu setzen. Bei fipisto-magazin.de habe
ich immer leicht andere Autorentexte für
mich benutzt, jeweils mit Bezug zum Artikel.
4. 02 OHNE DATUM
Ebenso nervig: Kein Datum beim Artikel.
Viele Texte sind nach Wochen, Monaten,
Jahren nicht mehr aktuell. Da ist es sinnvoll,
dem Leser einen Hinweis darauf zu geben.
Auch bei zeitlosen Artikeln würde ich eine
Zeitmarke einbauen und die Einordnung
dem Leser überlassen. Zumindest kann es
ein kleines »zuletzt aktualisiert am xx« am
Fuß des Artikels sein. Neben einer Zeitmarke
im Layout kann natürlich auch eine in der
URL hinzukommen.
5. 03 OHNE NUTZEN
Bei Erklärungs-Posts sollte man kurz über-
legen, was der Leser davon hat und er-
wartet. In diesem Beispiel geht es um ein
Code-Snippet für die Website. Der wesentli-
che Teil, der eigentliche Code, ist aber als
Bild hinterlegt. Ein User ist eigentlich auf
Copy&Paste aus, wird hier aber gezwungen,
den Code abzutippen. Unnötig.
Worum geht es hier? Siehe Tipp 4.
6. 04 NO PINNING
fiPinterest erlaubt es, Bilder zu sammeln.
Erst einmal können Bilder dazu von be-
liebigen Websites gepinnt werden. Für
Illustratoren-Blogs mag das manchmal auch
sinnvoll sein, weil der Vorteil durch die Wer-
bung überwiegt. Wer nicht will, dass Bilder
seiner Website gepinnt werden, kann
<meta name=“pinterest” content=“nopin” />
auf seiner Site einbauen (in den <head>).
Der Code lässt sich um eine Erklärung er-
weitern. Siehe fihelp.pinterest.com.
7. 05 OHNE KONTEXT
Wer über Software und Tools schreibt, sol-
lte nicht vergessen, deutlich zu sagen, um
welche Version es geht. Das Beispiel zeigt
einen Artikel über Drupal; es wird nur nicht
klar, ob es um Drupal 6 oder 7 geht.
Ein geübter Programmierer liest die Version
natürlich am Code selbst ab. Aber wer so
etwas erkennt, braucht diesen Blog-Beitrag
gar nicht erst.
8. 06 OHNE KOMMENTARE
Am Fuß dieses Blogs gibt es keine übliche
Kommentarfunktion. Stattdessen verweist
ein »Feedback und so am liebsten bei Twit-
ter« auf einen anderen Kanal. Warum?
Ein Kommentar könnte den Beitrag ergänzen
oder Fehler korrigieren, es könnte eine Dis-
kussion entstehen. Läuft das Ganze über
Twitter ab, bekommt keiner was davon mit.
Mal abgesehen davon, dass Kommentare
eurer SEO zugute kommen (mehr Text zum
indexieren).
9. 07 OHNE MICH
Ebenso: Die meisten von uns haben kleine
Blogs. Wir können uns über Kommentatoren
doch nur freuen. Warum sollten wir dann
zusätzliche Hürden aufbauen? Wer kom-
mentieren will, soll auch die Gelegenheit
bekommen. Gegen Spam gibt es Hilfsmittel.
Und im Zweifel kann man die Kommentare
ja moderieren.
10. 08 BILD-CAPTCHA
Apropos Spam: Bild-Captchas sind zwar
weit verbreitet, aber nicht barrierefrei und
vor allem nerven sie. Es gibt für alle CMS
bessere Methoden. Von Akismet und Mollom
über Honeypot-Formularfelder hin zu Frage-
Captchas.
Siehe zum Beispiel:
fihttp://www.karlgroves.com/2012/04/03/
captcha-less-security/
11. 09 SICHTBARER FEED
Wenn ein Blog schon einen Feed anbietet
(und das ist in der Regel ja der Fall), sollte
der Feed auch deutlich als Icon oder Text-
Link auf der Site zu sehen sein.
In dem Beispiel hier wird zwar ein Feed
erzeugt, aber nicht sichtbar verlinkt.
12. 10 START FREI
Startseiten von Blogs sehen immer gleich
aus; eine chronologische Anordnung der
letzen Beiträge. Ihr könntet die Startseite
auch komplett anders aufbauen. Hier ein
Beispiel von fitherverge.com. Nun ist das ein
Magazin und die Startseite auch überladen,
aber zumindest nicht das Übliche.
Siehe auch: fihttp://www.robertbasic.
de/2013/02/die-umsonstige-startseite-der-
blogs/
13. 11 DACHZEILEN
Was gehört in eine Überschrift? Wie frei
kann sie sein? Ich bevorzuge meist eine
Kombination aus Dachzeile, Titel und Teaser.
Die Dachzeile ist konkret (»Piwik 1.2 auf Dat-
enschutz trimmen«), der Titel kann frei sein
(»Schotten dicht«), der Teaser führt genauer
in den Artikel ein.
Man muss hier nur aufpassen, welche Texte
in das title-Element kommen (Stichwort
SEO), meist ist es eine Kombination aus
Dachzeile + Titel.
14. 12 RUBRIKEN / TAGS
Tags oder Rubriken dienen dazu, Inhalte zu
ordnen und untereinander zu verbinden. Das
geht aber auch über experimentelle Tags.
Beim Pisto-Magazin haben wir zum Beipiel
die sieben Todsünden und sieben Tugenden
genutzt.
Mehr dazu gibt es in einem längeren Artikel
zum Thema Tagging von mir unter:
fihttp://pisto-magazin.de/artikel/tagging-pfli-
cht-kür-experimente
15. 13 ZITATE
Jeder weiß: Wir können unsere Blog-Texte
mit Überschriften strukturieren. Das macht
es Lesern einfacher, sich einen Überblick zu
verschaffen. Um längere Texte darüber hin-
aus aufzupeppen, eignen sich Zitate (oder
Ausschnitte aus dem Text). Nötig ist nur eine
Klasse und ein wenig Styling per CSS.
Hier ein Beispiel von fitheverge.com.
16. 14 INFOBOXEN
Eine weitere Möglichkeit, den Text etwas
aufzulockern, sind Infoboxen. Die lassen sich
genauso leicht erstellen. Ihr braucht auch
hier nur eine Klasse (meist für ein <div>)
und ein entsprechendes Styling per CSS.
Das Beispiel hier aus der ZEIT ist etwas
aufwändiger. Verschiedene Stichwörter sind
als JavaScript-Reiter zusammengefasst.
17. 15 SYNTAX HIGHLIGHT
Wer ab und zu Code-Beispiele bringt, sollte
einen Syntax Highlighter hinzufügen. Für die
meisten CMS gibt es entsprechende Module.
Der Code wird dadurch deutlich besser les-
bar.
Achtet aber auf ein Detail: Der Text sollte
nach Copy&Paste nur den Code selbst en-
thalten, nicht die Nummern am Beginn der
Zeile. Die müsste man nach dem Kopieren
per Hand löschen. Das nervt.
Hier zu sehen: Der fiGeShi-Filter.
18. 16 JUMP TO
Und wieder fitheverge.com: Hier geht es um
einen längeren Artikel, bei dem links eine
Übersicht der Kapitel eingeblendet wird.
Die Übersicht dient als Sprungmenü; das
aktuelle Kapitel wird hervorgehoben. Außer-
dem bleibt das Menü fixiert an der linken
Seite stehen, wenn ein Besucher herunter-
scrollt.
Um das Menü zu erzeugen, braucht ihr PHP-
oder JS-Kenntnisse. Für manche CMS gibt es
Module (zum Beispiel »Table of Contents«).
19. 17 PLAY IN TAB
Eine kleine Spielerei aus meinem Blog.
Zugegebenermaßen weiß ich nicht, ob das
irgendwem auffällt, aber ich statte jeden
Artikel mit einem Soundtrack zum Text aus.
Mit Band, Titel, ein paar Zeilen aus den Lyr-
ics und Link zu einem Video.
Das macht Arbeit (ich suche manchmal 30
Minuten nach einem passenden Song), aber
ich finde es ganz charmant. Geht auch mit
Zitaten, Büchern, Filmen…
20. 18 ZWEI KLICKS
Kurzer Hinweis zum Datenschutz: Wer
Gefällt-mir- oder Plus-1-Buttons nutzt, sollte
diese nicht direkt auf seiner Website einbin-
den. Dadurch werden nämlich sofort Infor-
mationen an Facebook, Google oder auch
Twitter gesendet. Etabliert hat sich eine
Zwei-Klick-Lösung, bei der ein Besucher erst
einmal die Dienste generell erlauben muss.
Viele CMS bieten entsprechnde Module. Oder
ihr schaut mal direkt bei fiheise.de.
21. 19 PLEASE STAY!
Ein Besucher hat einen Artikel gelesen und
landet am Fuß der Seite. Und nun? Nun
möchten wir ihn gerne auf unserer Web-
site halten. Eine Möglichkeit ist, einen (oder
mehrere) verwandte Artikel anzeigen zu
lassen. Die fiNew York Times blendet eine
entsprechende Infobox am Fuß ein. In der
Session gab es Stimmen, die solche Boxen
genervt als Werbung wahrnehmen. Ich
meine, die Boxen lassen sich aber auch pas-
send als redaktioneller Inhalt gestalten.
22. 20 LOGOWANDERUNG
Noch eine Spielerei: Auf fit3n.de gibt es
eine fixierte Menü-Leiste am oberen Rand.
Scrollt ein Besucher herunter, verschwindet
das Logo erst einmal nach oben, um im
nächsten Moment in der Menüleiste wieder
aufzutauchen (statt »Startseite«). Das ist eine
nette Methode, um das Logo immer oben
im Blickfeld zu haben. Ich fand die Idee so
gut, dass ich sie auf fiwebkrauts.de über-
nommen habe. Natürlich muss man dafür
etwas JavaScript können.
23. 21 ZUFALLSSPRUCH
Ihr habt ein Faible für Slogans, Sprüche
oder Zitate, könnt euch aber nicht auf einen
einzelnen für euer Blog festlegen? Müsst ihr
auch nicht; nutzt einfach alle. Zum Beispiel
über einen Zufallsgenerator. Das kann auch
einfach ein zufälliger Spruch des Tages in
der Seitenleiste sein.
Hier zu sehen: Ein wechselnder Spruch im
Header von fioglaf.com.
24. 22 WECHSELNDE BILDER
Wer ein Händchen für Fotografie oder Illus-
trationen hat, kann statt eines Zufallsspruch-
es auch eine Zufalls-Illustration (oder ein
Foto) bemühen.
Sie Website fiaintitcool.com zeigt im Header
schon seit Jahren animierte gifs, bei denen
der Gründer der Website im Zusammenhang
bekannter Filme zu sehen ist.
25. 23 BESONDERE ANLÄSSE
Wer von zufälligen Inhalten nichts hält,
kann sich auch auf spezielle Anlässe bezie-
hen. Auf fiwebkrauts.de bieten wir jeden
Dezember einen Adventskalender mit Web-
worker-Artikeln. Im Jahr 2012 habe ich dafür
die Wort- und Bildmarke angepasst.
Vorstellbar sind auch leicht unterschiedliche
Designs im Tages- und Nachtrhythmus oder
gemäß der Jahreszeiten.
26. 24 TRANSFORM
Hier eine kleine CSS3-Spielerei. fiChristian
Heilmann hat die rechte Spalte seiner Web-
site mit transform (und transition) etwas
in die dritte Dimension verschoben. Beim
mouse-over wird die Spalte wieder »gerade«
gerückt. Ältere Browser, die das CSS3 nicht
verstehen, zeigen die Spalte ganz normal
an.
27. 25 ANIMATION
Neben transform und transition könnt ihr
mit CSS3 auch Animationen (animation)
erstellen. Auf ficup.wpcoder.de füllt sich so
der Becher per CSS – passend zum Spruch
»Becher randvoll mit Wissen«.
Speziell in diesem Fall könnte das natürlich
auch ein animiertes gif sein, aber ein up-to-
date-Webworker spielt eben lieber mit den
neuen Möglichkeiten mit CSS3 herum.
28. 26 PRINT.CSS
Müssen wir uns noch um den Ausdruck
von Internetseiten kümmern? Wer druckt
die denn heute noch aus? Mehr Leute als
wir denken. Insofern könnten wir unsere
(meist veralteten) Druck-Style-Sheets ruhig
einmal aufpäppeln. Heutzutage haben wir
mehr Möglichkeiten, den Druck zu beeinflus-
sen. Das obere Bild zeigt etwa den Ausdruck
einer Seite vom fiSmashing Magazine.
Interessant sind die Druck-Styles auch für
Services, die aus der Seite ein PDF machen.
29. 27 TYPOGRAFIE
Heutzutage können wir eine Unmenge
an Webfonts auf Websites unterbringen.
Das ist toll, in manchen Fällen aber leider
nicht durchdacht. Zum Beispiel dann, wenn
Code-Beispiele in einer Sans Serif angezeigt
werden, bei der ein Großes I nicht von
einem kleinen l (»el«) unterschieden werden
kann. Zumindest solltet ihr kurz die Zeichen
» I i l 1 ! « testen. Im Beispiel oben sticht
zwar die 1 heraus, bei Schriften <16px sehen
die anderen Zeichen aber zu ähnlich aus.
30. 28 INTERPUNKTION
Viele Texte begnügen sich mit Punkt und
Komma für die Interpunktion. Dabei gibt
es doch eine viel größere Auswahl! Bei den
fiWebkrauts habe ich mal für Doppelpunkt
und Semikolon geworben. Zur Verfügung
stehen auch Fragezeichen, Ausrufezeichen,
Gedankenstrich, Ellipse oder Interrobang.
Auch das richtige Zeichen ist viel wert.
Das kleine Bild oben zeigt den Unterschied
zwischen dem Prime (Minutenzeichen) und
einem richtigen Apostroph (unten).
31. 29 DATENSCHUTZ
Hat eure Seite eine Datenschutzerklärung?
“Die Pflicht zu einer Datenschutzerklärung
ergibt sich im deutschen Recht aus dem §13
Abs. 1 TMG. Der Anbieter eines Tele-
dienstes hat den Nutzer zum Anfang des
Nutzungsvorgangs über Art, Umfang und
Zwecke der Erhebung und Verwendung
personenbezogener Daten in allgemein
verständlicher Form zu unterweisen.”
Siehe fihttp://www.bfdi.bund.de/bfdi_wiki/
index.php/Website#Datenschutz
32. 30 HUMANS.TXT
Eine fihumans.txt ist das Pendant zu einer
robots.txt, richtet sich aber an Menschen
und bietet ein paar Hintergrundinfos zu
Team und Tools.
Einwurf aus der Session: »Wenn die Infos
relevant sind, warum schreibt man die nicht
auf die Website?« Tjoah, gutes Argument. In
Deutschland gibt’s ja ohnehin ein Impres-
sum. Insofern: Schreibt das Wesentliche
ruhig dorthin, die humans.txt könnt ihr als
Easteregg verwenden; für Leute wie mich ;)
33. 31 AUTHOR SEO
Der Autor eines Textes wird für Google im-
mer wichtiger. Stichwörter: fiGoogle Author-
ship, fiAuthor Rank. Daher ist es sinnvoll,
einen Account auf Google+ anzulegen und
den mit eurem Blog zu verknüpfen. Dafür
gebt ihr im Account an, für welche Sites ihr
schreibt und fügt euren Artikel im <head>
eine Info wie <link rel=”author” href=”https://
plus.google.com/xxxx” /> hinzu. Ein paar Tage
später erscheint bei Suchanfragen euer Bild
bei euren Artikeln.
34. 32 SEO ANALYSE
Wo wir schon beim Thema SEO sind: Sis-
trix bietet seit kurzem eine kleine, kosten-
lose SEO-Analyse für Websites an. Da kann
sich jeder schnell anmelden und schauen,
welche der Fehler, Hinweise und Tipps des
Tools er in seinem Blog umsetzen möchte.
fismart.sistrix.de
35. 33 WAI-ARIA-ROLES
Wer Zugriff auf sein Template hat, kann
das HTML mit ein paar role-Attributen
aufrüsten. Die Web Accessibility Initia-
tive hat ein paar Rollen wie role=”main”,
role=”complementary”, role=”navigation”,
role=”search” oder role=”banner” vorgesehen.
Blinde können so über ihre Screenreader
Bereiche inhaltlich besser wahrnehmen.
Neben diesen landmark roles gibt es noch
weitere Möglichkeiten, siehe etwa
fihttp://www.hessendscher.de/wai-aria/
36. 34 SCHNELLER
Jetzt schrauben wir noch an der Perfor-
mance: Ihr können versuchen, eure Website
schneller auszuliefern, indem ihr die
.htaccess anpasst. Das ist recht technisch. Es
gibt viele verschiedene Artikel im Netz dazu,
zum Beispiel auf fimizine.de. Dazu kommt,
dass euer Server die Funktionen auch anbie-
ten muss. Probiert es einfach aus. Achtet
aber darauf, dass ihr nicht eine vorhandene
.htaccess eures CMS löscht! Sonst funktioni-
ert ggf. eure Website nicht mehr!
37. 35 IRON BLOGGING
Wer einen Antrieb zum Bloggen braucht,
kann sich den Iron Bloggern seiner Region
anschließen. Die Teilnehmer verpflichten
sich, mindestens einmal in der Woche zu
bloggen. Wer nicht bloggt, zahlt 5 Euro in
die Kasse. Ist diese voll genug, gehen alle
einmal essen / was trinken.
Gruppen gibt es mittlerweile überall: Berlin,
Hamburg, Stuttgart, Kiel, fiRuhrgebiet. Wer
keine Gruppe in seiner Nähe findet, macht
einfach eine eigene auf.
38. 36 VG WORT
Wer bloggt, will auch Leser haben. Wer
genug Leser hat, kann für seine Texte etwas
Geld über die fiVG Wort verdienen. Dort
müsst ihr euch einmal anmelden und packt
dann Zählmarken in eure Artikel (die einen
Mindestumfang von 1.800 Anschlägen ha-
ben). Bei genug Zugriffen wird gezahlt. Im
Jahr 2011 etwa pro Artikel:
• bei 1.500 bis 5.999 Zugriffen: 10 Euro
• ab 6.000 bis 23.999 Zugriffen: 15 Euro
• ab 24.000 Zugriffen: 20 Euro