Embed Size (px)
DESCRIPTION
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.
Citation preview
DETAILS, DETAILSDrei 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 2013Nicolai Schwarz | @textformerFalls ich die Zeit finde, gibt es das Thema demnächst auch etwas ausführlicher unter finicolaischwarz.de.
Vekt
orgr
afik
von
vec
torio
usvi
a fih
ttp:
//goo
.gl/t
5G61
DISCLAIMERJa, 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 AUTOREs 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 DATUMEbenso 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 NUTZENBei 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 PINNINGfiPinterest 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 KONTEXTWer ü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 KOMMENTAREAm 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 MICHEbenso: 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-CAPTCHAApropos 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 FEEDWenn 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 FREIStartseiten 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 DACHZEILENWas 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 / TAGSTags 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 ZITATEJeder 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 INFOBOXENEine 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 HIGHLIGHTWer 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 TOUnd 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 TABEine 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 KLICKSKurzer 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 LOGOWANDERUNGNoch 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 ZUFALLSSPRUCHIhr 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 BILDERWer 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ÄSSEWer 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 TRANSFORMHier 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 ANIMATIONNeben 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.CSSMü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 TYPOGRAFIEHeutzutage 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 INTERPUNKTIONViele 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 DATENSCHUTZHat 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.TXTEine 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 SEODer 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 ANALYSEWo 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-ROLESWer 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 etwafihttp://www.hessendscher.de/wai-aria/
34 SCHNELLERJetzt 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 BLOGGINGWer 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 WORTWer 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
