36 Tipps und Inspirationen für Blogger

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 ﬁnicolaischwarz.de. Vektorgrafik von vectorious via ﬁhttp://goo.gl/t5G61

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.

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 ﬁpisto-magazin.de habe ich immer leicht andere Autorentexte für mich benutzt, jeweils mit Bezug zum Artikel.

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.

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 wesentliche 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.

04 NO PINNING ﬁPinterest 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 ﬁhelp.pinterest.com.

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.

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).

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.

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: ﬁhttp://www.karlgroves.com/2012/04/03/ captcha-less-security/

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.

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 ﬁtherverge.com. Nun ist das ein Magazin und die Startseite auch überladen, aber zumindest nicht das Übliche. Siehe auch: ﬁhttp://www.robertbasic. de/2013/02/die-umsonstige-startseite-der- blogs/

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.

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: ﬁhttp://pisto-magazin.de/artikel/tagging-pflicht-kür-experimente

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 ﬁtheverge.com.

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.

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 ﬁGeShi-Filter.

16 JUMP TO Und wieder ﬁtheverge.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«).

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…

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 ﬁheise.de.

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 ﬁNew 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 passend als redaktioneller Inhalt gestalten.

20 LOGOWANDERUNG Noch eine Spielerei: Auf ﬁt3n.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 ﬁwebkrauts.de über- nommen habe. Natürlich muss man dafür etwas JavaScript können.

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 ﬁoglaf.com.

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 ﬁaintitcool.com zeigt im Header schon seit Jahren animierte gifs, bei denen der Gründer der Website im Zusammenhang bekannter Filme zu sehen ist.

23 BESONDERE ANLÄSSE Wer von zufälligen Inhalten nichts hält, kann
sich auch auf spezielle Anlässe bezie- hen. Auf ﬁwebkrauts.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.

24 TRANSFORM Hier eine kleine CSS3-Spielerei. ﬁChristian 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.

25 ANIMATION Neben transform und transition könnt ihr mit CSS3
auch Animationen (animation) erstellen. Auf ﬁcup.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.

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 ﬁSmashing Magazine. Interessant sind die Druck-Styles auch für Services, die aus der Seite ein PDF machen.

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.

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 ﬁWebkrauts 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).

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 ﬁhttp://www.bfdi.bund.de/bfdi_wiki/ index.php/Website#Datenschutz

30 HUMANS.TXT Eine ﬁhumans.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 ;)

31 AUTHOR SEO Der Autor eines Textes wird für Google
immer wichtiger. Stichwörter: ﬁGoogle Author- ship, ﬁAuthor 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.

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. ﬁsmart.sistrix.de

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 ﬁhttp://www.hessendscher.de/wai-aria/

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 ﬁmizine.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!

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, ﬁRuhrgebiet. Wer keine Gruppe in seiner Nähe findet, macht einfach eine eigene auf.

36 VG WORT Wer bloggt, will auch Leser haben. Wer
genug Leser hat, kann für seine Texte etwas Geld über die ﬁVG 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 haben). 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

36 Tipps und Inspirationen für Blogger

36 Tipps und Inspirationen für Blogger

Other Decks in Education

Featured

Transcript