SlideShare ist ein Scribd-Unternehmen logo
1 von 38
Downloaden Sie, um offline zu lesen
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.
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 fipisto-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 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.
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.
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:
fihttp://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 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/
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:
fihttp://pisto-magazin.de/artikel/tagging-pfli-
cht-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 fitheverge.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 fiGeShi-Filter.
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«).
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 fiheise.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 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.
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.
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.
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.
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.
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.
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.
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.
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
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).
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
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 ;)
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.
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
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/
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!
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.
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

Weitere ähnliche Inhalte

Andere mochten auch

Onlinemarketing 2.0 - Teil 2
Onlinemarketing 2.0 - Teil 2Onlinemarketing 2.0 - Teil 2
Onlinemarketing 2.0 - Teil 2Christoph Deeg
 
Tome 2 : Services au public
Tome 2 : Services au publicTome 2 : Services au public
Tome 2 : Services au publicparoles d'élus
 
Discapacidad intelectual y sexualidad frances
Discapacidad intelectual y sexualidad  francesDiscapacidad intelectual y sexualidad  frances
Discapacidad intelectual y sexualidad francesMarta Montoro
 
Plaquette group sbp
Plaquette group sbpPlaquette group sbp
Plaquette group sbpNaziha Hajla
 
Marc Oliver Eckart Aktiencamp Berlin Eckart 5
Marc Oliver Eckart Aktiencamp Berlin Eckart 5Marc Oliver Eckart Aktiencamp Berlin Eckart 5
Marc Oliver Eckart Aktiencamp Berlin Eckart 5mystocks
 
[Infographie Enquête JLL/CSA] Efficacité au travail : l’opinion des salariés ...
[Infographie Enquête JLL/CSA] Efficacité au travail : l’opinion des salariés ...[Infographie Enquête JLL/CSA] Efficacité au travail : l’opinion des salariés ...
[Infographie Enquête JLL/CSA] Efficacité au travail : l’opinion des salariés ...JLL France
 
Dosier participate autismo
Dosier participate autismoDosier participate autismo
Dosier participate autismoMarta Montoro
 
Ariel Und Die Mathematik
Ariel Und Die MathematikAriel Und Die Mathematik
Ariel Und Die Mathematikgueste45b9d
 
Charruas, Minuanos und der Chef von den Pleijaden.
Charruas, Minuanos und der Chef von den Pleijaden.Charruas, Minuanos und der Chef von den Pleijaden.
Charruas, Minuanos und der Chef von den Pleijaden.Axel Thiel
 
Temoignage SilverDev - Moderniser l’existant en RPG avec SilverDev
Temoignage SilverDev - Moderniser l’existant en RPG avec SilverDevTemoignage SilverDev - Moderniser l’existant en RPG avec SilverDev
Temoignage SilverDev - Moderniser l’existant en RPG avec SilverDevSilverDev by Experia
 
Hang son doong cavern 29 april2011
Hang son doong cavern 29 april2011Hang son doong cavern 29 april2011
Hang son doong cavern 29 april2011Nguyen Thoai
 
In chile 2011 version fr
In chile 2011 version frIn chile 2011 version fr
In chile 2011 version frMR_Berthiaume
 
Extraits de textes Jacques Varlot
Extraits de textes Jacques VarlotExtraits de textes Jacques Varlot
Extraits de textes Jacques Varlotdel2206
 

Andere mochten auch (20)

Onlinemarketing 2.0 - Teil 2
Onlinemarketing 2.0 - Teil 2Onlinemarketing 2.0 - Teil 2
Onlinemarketing 2.0 - Teil 2
 
Maputo report fr
Maputo report frMaputo report fr
Maputo report fr
 
Tome 2 : Services au public
Tome 2 : Services au publicTome 2 : Services au public
Tome 2 : Services au public
 
Alone in the dark
Alone in the darkAlone in the dark
Alone in the dark
 
Lqde
LqdeLqde
Lqde
 
Budapest rapport
Budapest rapportBudapest rapport
Budapest rapport
 
Chora na rampa
Chora na rampaChora na rampa
Chora na rampa
 
Lettre
LettreLettre
Lettre
 
Discapacidad intelectual y sexualidad frances
Discapacidad intelectual y sexualidad  francesDiscapacidad intelectual y sexualidad  frances
Discapacidad intelectual y sexualidad frances
 
Plaquette group sbp
Plaquette group sbpPlaquette group sbp
Plaquette group sbp
 
Marc Oliver Eckart Aktiencamp Berlin Eckart 5
Marc Oliver Eckart Aktiencamp Berlin Eckart 5Marc Oliver Eckart Aktiencamp Berlin Eckart 5
Marc Oliver Eckart Aktiencamp Berlin Eckart 5
 
[Infographie Enquête JLL/CSA] Efficacité au travail : l’opinion des salariés ...
[Infographie Enquête JLL/CSA] Efficacité au travail : l’opinion des salariés ...[Infographie Enquête JLL/CSA] Efficacité au travail : l’opinion des salariés ...
[Infographie Enquête JLL/CSA] Efficacité au travail : l’opinion des salariés ...
 
Dosier participate autismo
Dosier participate autismoDosier participate autismo
Dosier participate autismo
 
Ariel Und Die Mathematik
Ariel Und Die MathematikAriel Und Die Mathematik
Ariel Und Die Mathematik
 
Charruas, Minuanos und der Chef von den Pleijaden.
Charruas, Minuanos und der Chef von den Pleijaden.Charruas, Minuanos und der Chef von den Pleijaden.
Charruas, Minuanos und der Chef von den Pleijaden.
 
Temoignage SilverDev - Moderniser l’existant en RPG avec SilverDev
Temoignage SilverDev - Moderniser l’existant en RPG avec SilverDevTemoignage SilverDev - Moderniser l’existant en RPG avec SilverDev
Temoignage SilverDev - Moderniser l’existant en RPG avec SilverDev
 
Hang son doong cavern 29 april2011
Hang son doong cavern 29 april2011Hang son doong cavern 29 april2011
Hang son doong cavern 29 april2011
 
In chile 2011 version fr
In chile 2011 version frIn chile 2011 version fr
In chile 2011 version fr
 
Extraits de textes Jacques Varlot
Extraits de textes Jacques VarlotExtraits de textes Jacques Varlot
Extraits de textes Jacques Varlot
 
Markov hidden
Markov hiddenMarkov hidden
Markov hidden
 

Ähnlich wie 36 Tipps und Inspirationen für Blogger

Blogging 1x1. In 10 Schritten zum erfolgreichen, eigenen Blog.
Blogging 1x1. In 10 Schritten zum erfolgreichen, eigenen Blog.Blogging 1x1. In 10 Schritten zum erfolgreichen, eigenen Blog.
Blogging 1x1. In 10 Schritten zum erfolgreichen, eigenen Blog.Gabriel Rath
 
Wie mache-ich-meinen-blog-bekannt-e book
Wie mache-ich-meinen-blog-bekannt-e bookWie mache-ich-meinen-blog-bekannt-e book
Wie mache-ich-meinen-blog-bekannt-e bookViktor
 
Bloggen mit Wordpress - Artwert Sommercampus
Bloggen mit Wordpress - Artwert SommercampusBloggen mit Wordpress - Artwert Sommercampus
Bloggen mit Wordpress - Artwert SommercampusSimone Janson
 
Besser lesbare Blogartikel erstellen
Besser lesbare Blogartikel erstellenBesser lesbare Blogartikel erstellen
Besser lesbare Blogartikel erstellenDani Schenker
 
Den eigenen Blog fürs Selbstmarketing nutzen
Den eigenen Blog fürs Selbstmarketing nutzen Den eigenen Blog fürs Selbstmarketing nutzen
Den eigenen Blog fürs Selbstmarketing nutzen Timo Stoppacher
 
Was ist Bloggen? Ein Vortrag für die Reformierte Landeskirche Aargau
Was ist Bloggen? Ein Vortrag für die Reformierte Landeskirche AargauWas ist Bloggen? Ein Vortrag für die Reformierte Landeskirche Aargau
Was ist Bloggen? Ein Vortrag für die Reformierte Landeskirche AargauMonah Sorcelli
 
Social Media Week 2012 - Bloggen für Anfänger
Social Media Week 2012 - Bloggen für AnfängerSocial Media Week 2012 - Bloggen für Anfänger
Social Media Week 2012 - Bloggen für AnfängerSimone Janson
 
Moderne Kommunikation für Wirtschaftssenioren, Teil2
Moderne Kommunikation für Wirtschaftssenioren, Teil2Moderne Kommunikation für Wirtschaftssenioren, Teil2
Moderne Kommunikation für Wirtschaftssenioren, Teil2reinhard|huber
 
Blogger als Markenbotschafter
Blogger als MarkenbotschafterBlogger als Markenbotschafter
Blogger als MarkenbotschafterJustyna Grund
 
hallo.digital: Content Relaunch
hallo.digital: Content Relaunchhallo.digital: Content Relaunch
hallo.digital: Content RelaunchEric Kubitz
 
Erfolgreich Bloggen - MIZ mediaCamp 2012
Erfolgreich Bloggen - MIZ mediaCamp 2012Erfolgreich Bloggen - MIZ mediaCamp 2012
Erfolgreich Bloggen - MIZ mediaCamp 2012Simone Janson
 
30 SEO Tipps
30 SEO Tipps30 SEO Tipps
30 SEO TippsPulpmedia
 
11 Tipps für erfolgreiche Unternehmens-Blogs
11 Tipps für erfolgreiche Unternehmens-Blogs11 Tipps für erfolgreiche Unternehmens-Blogs
11 Tipps für erfolgreiche Unternehmens-Blogscreazwo
 
Interne Verlinkung Planbar machen - SEOcruise 2013
Interne Verlinkung Planbar machen - SEOcruise 2013Interne Verlinkung Planbar machen - SEOcruise 2013
Interne Verlinkung Planbar machen - SEOcruise 2013Nicole Mank
 
10 Tipps, wie Sie Ihre Kunden mit guten Webseiten-Texten erfolgreich ansprechen.
10 Tipps, wie Sie Ihre Kunden mit guten Webseiten-Texten erfolgreich ansprechen.10 Tipps, wie Sie Ihre Kunden mit guten Webseiten-Texten erfolgreich ansprechen.
10 Tipps, wie Sie Ihre Kunden mit guten Webseiten-Texten erfolgreich ansprechen.eMBIS GmbH - Akademie für Online Marketing
 
How to build up a corporate blog
How to build up a corporate blogHow to build up a corporate blog
How to build up a corporate blogStart Talking
 
Multiposting für Blogbeiträge mit Blog2Social
Multiposting für Blogbeiträge mit Blog2SocialMultiposting für Blogbeiträge mit Blog2Social
Multiposting für Blogbeiträge mit Blog2SocialADENION GmbH
 

Ähnlich wie 36 Tipps und Inspirationen für Blogger (20)

Blogging 1x1. In 10 Schritten zum erfolgreichen, eigenen Blog.
Blogging 1x1. In 10 Schritten zum erfolgreichen, eigenen Blog.Blogging 1x1. In 10 Schritten zum erfolgreichen, eigenen Blog.
Blogging 1x1. In 10 Schritten zum erfolgreichen, eigenen Blog.
 
Wie mache-ich-meinen-blog-bekannt-e book
Wie mache-ich-meinen-blog-bekannt-e bookWie mache-ich-meinen-blog-bekannt-e book
Wie mache-ich-meinen-blog-bekannt-e book
 
Bloggen mit Wordpress - Artwert Sommercampus
Bloggen mit Wordpress - Artwert SommercampusBloggen mit Wordpress - Artwert Sommercampus
Bloggen mit Wordpress - Artwert Sommercampus
 
Besser lesbare Blogartikel erstellen
Besser lesbare Blogartikel erstellenBesser lesbare Blogartikel erstellen
Besser lesbare Blogartikel erstellen
 
Den eigenen Blog fürs Selbstmarketing nutzen
Den eigenen Blog fürs Selbstmarketing nutzen Den eigenen Blog fürs Selbstmarketing nutzen
Den eigenen Blog fürs Selbstmarketing nutzen
 
Was ist Bloggen? Ein Vortrag für die Reformierte Landeskirche Aargau
Was ist Bloggen? Ein Vortrag für die Reformierte Landeskirche AargauWas ist Bloggen? Ein Vortrag für die Reformierte Landeskirche Aargau
Was ist Bloggen? Ein Vortrag für die Reformierte Landeskirche Aargau
 
Social Media Week 2012 - Bloggen für Anfänger
Social Media Week 2012 - Bloggen für AnfängerSocial Media Week 2012 - Bloggen für Anfänger
Social Media Week 2012 - Bloggen für Anfänger
 
Moderne Kommunikation für Wirtschaftssenioren, Teil2
Moderne Kommunikation für Wirtschaftssenioren, Teil2Moderne Kommunikation für Wirtschaftssenioren, Teil2
Moderne Kommunikation für Wirtschaftssenioren, Teil2
 
Blogger als Markenbotschafter
Blogger als MarkenbotschafterBlogger als Markenbotschafter
Blogger als Markenbotschafter
 
hallo.digital: Content Relaunch
hallo.digital: Content Relaunchhallo.digital: Content Relaunch
hallo.digital: Content Relaunch
 
Der Blog ist tot…
Der Blog ist tot…Der Blog ist tot…
Der Blog ist tot…
 
Erfolgreich Bloggen - MIZ mediaCamp 2012
Erfolgreich Bloggen - MIZ mediaCamp 2012Erfolgreich Bloggen - MIZ mediaCamp 2012
Erfolgreich Bloggen - MIZ mediaCamp 2012
 
Mit WordPress durchstarten
Mit WordPress durchstartenMit WordPress durchstarten
Mit WordPress durchstarten
 
30 SEO Tipps
30 SEO Tipps30 SEO Tipps
30 SEO Tipps
 
11 Tipps für erfolgreiche Unternehmens-Blogs
11 Tipps für erfolgreiche Unternehmens-Blogs11 Tipps für erfolgreiche Unternehmens-Blogs
11 Tipps für erfolgreiche Unternehmens-Blogs
 
Ein Blog ist kein Selbstgespraech
Ein Blog ist kein SelbstgespraechEin Blog ist kein Selbstgespraech
Ein Blog ist kein Selbstgespraech
 
Interne Verlinkung Planbar machen - SEOcruise 2013
Interne Verlinkung Planbar machen - SEOcruise 2013Interne Verlinkung Planbar machen - SEOcruise 2013
Interne Verlinkung Planbar machen - SEOcruise 2013
 
10 Tipps, wie Sie Ihre Kunden mit guten Webseiten-Texten erfolgreich ansprechen.
10 Tipps, wie Sie Ihre Kunden mit guten Webseiten-Texten erfolgreich ansprechen.10 Tipps, wie Sie Ihre Kunden mit guten Webseiten-Texten erfolgreich ansprechen.
10 Tipps, wie Sie Ihre Kunden mit guten Webseiten-Texten erfolgreich ansprechen.
 
How to build up a corporate blog
How to build up a corporate blogHow to build up a corporate blog
How to build up a corporate blog
 
Multiposting für Blogbeiträge mit Blog2Social
Multiposting für Blogbeiträge mit Blog2SocialMultiposting für Blogbeiträge mit Blog2Social
Multiposting für Blogbeiträge mit Blog2Social
 

Mehr von Nicolai Schwarz

Gadgets Galore - Barcamp Hamburg, Nov 2015
 Gadgets Galore - Barcamp Hamburg, Nov 2015 Gadgets Galore - Barcamp Hamburg, Nov 2015
Gadgets Galore - Barcamp Hamburg, Nov 2015Nicolai Schwarz
 
Gadgets Galore - Barcamp Düsseldorf, Okt 2015
Gadgets Galore - Barcamp Düsseldorf, Okt 2015Gadgets Galore - Barcamp Düsseldorf, Okt 2015
Gadgets Galore - Barcamp Düsseldorf, Okt 2015Nicolai Schwarz
 
Medienmanagement mit Drupal 7
Medienmanagement mit Drupal 7Medienmanagement mit Drupal 7
Medienmanagement mit Drupal 7Nicolai Schwarz
 
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für AccessibilityBarrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für AccessibilityNicolai Schwarz
 
Responsive Design mit Drupal
Responsive Design mit DrupalResponsive Design mit Drupal
Responsive Design mit DrupalNicolai Schwarz
 
iico 2011: Webdesign-Trends
iico 2011: Webdesign-Trendsiico 2011: Webdesign-Trends
iico 2011: Webdesign-TrendsNicolai Schwarz
 
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)Nicolai Schwarz
 
Türme bauen mit Schildbürgern
Türme bauen mit SchildbürgernTürme bauen mit Schildbürgern
Türme bauen mit SchildbürgernNicolai Schwarz
 
Nicolai Schwarz: Einführung in SEO
Nicolai Schwarz: Einführung in SEONicolai Schwarz: Einführung in SEO
Nicolai Schwarz: Einführung in SEONicolai Schwarz
 
Nicolai Schwarz: Die moderne Webseite
Nicolai Schwarz: Die moderne WebseiteNicolai Schwarz: Die moderne Webseite
Nicolai Schwarz: Die moderne WebseiteNicolai Schwarz
 
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz BarrierefreiheitNicolai Schwarz Barrierefreiheit
Nicolai Schwarz BarrierefreiheitNicolai Schwarz
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)Nicolai Schwarz
 

Mehr von Nicolai Schwarz (15)

Gadgets Galore - Barcamp Hamburg, Nov 2015
 Gadgets Galore - Barcamp Hamburg, Nov 2015 Gadgets Galore - Barcamp Hamburg, Nov 2015
Gadgets Galore - Barcamp Hamburg, Nov 2015
 
Gadgets Galore - Barcamp Düsseldorf, Okt 2015
Gadgets Galore - Barcamp Düsseldorf, Okt 2015Gadgets Galore - Barcamp Düsseldorf, Okt 2015
Gadgets Galore - Barcamp Düsseldorf, Okt 2015
 
DNA von Gadgets
DNA von GadgetsDNA von Gadgets
DNA von Gadgets
 
Gadgets Galore
Gadgets GaloreGadgets Galore
Gadgets Galore
 
Vorschau auf Drupal 8
Vorschau auf Drupal 8Vorschau auf Drupal 8
Vorschau auf Drupal 8
 
Medienmanagement mit Drupal 7
Medienmanagement mit Drupal 7Medienmanagement mit Drupal 7
Medienmanagement mit Drupal 7
 
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für AccessibilityBarrierefreiheit im Fokus: 12 Beispiele für Accessibility
Barrierefreiheit im Fokus: 12 Beispiele für Accessibility
 
Responsive Design mit Drupal
Responsive Design mit DrupalResponsive Design mit Drupal
Responsive Design mit Drupal
 
iico 2011: Webdesign-Trends
iico 2011: Webdesign-Trendsiico 2011: Webdesign-Trends
iico 2011: Webdesign-Trends
 
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
 
Türme bauen mit Schildbürgern
Türme bauen mit SchildbürgernTürme bauen mit Schildbürgern
Türme bauen mit Schildbürgern
 
Nicolai Schwarz: Einführung in SEO
Nicolai Schwarz: Einführung in SEONicolai Schwarz: Einführung in SEO
Nicolai Schwarz: Einführung in SEO
 
Nicolai Schwarz: Die moderne Webseite
Nicolai Schwarz: Die moderne WebseiteNicolai Schwarz: Die moderne Webseite
Nicolai Schwarz: Die moderne Webseite
 
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz BarrierefreiheitNicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
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