36 Tipps und Inspirationen für Blogger

of 38/38
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. Vektorgrafik von vectorious via fihttp://goo.gl/t5G61
  • date post

    30-Nov-2014
  • Category

    Education

  • view

    4.849
  • download

    0

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.

Transcript of 36 Tipps und Inspirationen für Blogger

  • 1. Vektorgrafik von vectoriousvia http://goo.gl/t5G61 DETAILS, DETAILS Drei Dutzend kleine Tipps und Inspirationen fr euer eigenes Blog. Querbeet aus den Bereichen Content, Design, Usability, Accessibility, SEO, Performance, Gimmicks Nach dem Motto: Mein Blog muss schner / besser werden. Ob ein Tipp fr euch in Frage kommt oder nicht, hngt vom Blog ab. Pickt euch einfach raus, was euch sinnvoll erscheint. Mrz 2013 Nicolai Schwarz | @textformer Falls ich die Zeit finde, gibt es das Thema demnchst auch etwas ausfhrlicher unter nicolaischwarz.de.
  • 2. DISCLAIMERJa, auch ich habe ein eigenes Blog. Undviele der folgenden Anregungen wrdenauch meinem Blog gut tun. Sobald ich dieZeit findeEinige Beispiele sind selbstreferenziell(webkrauts.de, pisto-magazin.de,nicolaischwarz.de). Sorry, aber da weiich zumindest genau, warum wir das sogemacht haben.
  • 3. 01 OHNE AUTOREs gibt Blog-Eintrge, bei denen nicht klarist, wer den Text geschrieben hat. Ich ver-traue aber bekannten Autoren mehr als un-bekannten oder gar anonymen (siehe Tipp31). Auch in Blogs von einzelnen Autorenmag es sinnvoll sein, nicht nur eine bermich-Seite zu haben, sondern tatschlicheine eigene (kleine) Autorenbox unter jedenArtikel zu setzen. Bei pisto-magazin.de habeich immer leicht andere Autorentexte frmich benutzt, jeweils mit Bezug zum Artikel.
  • 4. 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 wrde ich eineZeitmarke einbauen und die Einordnungdem Leser berlassen. Zumindest kann esein kleines zuletzt aktualisiert am xx amFu des Artikels sein. Neben einer Zeitmarkeim Layout kann natrlich auch eine in derURL hinzukommen.
  • 5. 03 OHNE NUTZENBei Erklrungs-Posts sollte man kurz ber-legen, was der Leser davon hat und er-wartet. In diesem Beispiel geht es um einCode-Snippet fr die Website. Der wesentli-che Teil, der eigentliche Code, ist aber alsBild hinterlegt. Ein User ist eigentlich aufCopy&Paste aus, wird hier aber gezwungen,den Code abzutippen. Unntig.Worum geht es hier? Siehe Tipp 4.
  • 6. 04 NO PINNINGPinterest erlaubt es, Bilder zu sammeln.Erst einmal knnen Bilder dazu von be-liebigen Websites gepinnt werden. FrIllustratoren-Blogs mag das manchmal auchsinnvoll sein, weil der Vorteil durch die Wer-bung berwiegt. Wer nicht will, dass Bilderseiner Website gepinnt werden, kannauf seiner Site einbauen (in den ).Der Code lsst sich um eine Erklrung er-weitern. Siehe help.pinterest.com.
  • 7. 05 OHNE KONTEXTWer ber Software und Tools schreibt, sol-lte nicht vergessen, deutlich zu sagen, umwelche Version es geht. Das Beispiel zeigteinen Artikel ber Drupal; es wird nur nichtklar, ob es um Drupal 6 oder 7 geht.Ein gebter Programmierer liest die Versionnatrlich am Code selbst ab. Aber wer soetwas erkennt, braucht diesen Blog-Beitraggar nicht erst.
  • 8. 06 OHNE KOMMENTAREAm Fu dieses Blogs gibt es keine blicheKommentarfunktion. Stattdessen verweistein Feedback und so am liebsten bei Twit-ter auf einen anderen Kanal. Warum?Ein Kommentar knnte den Beitrag ergnzenoder Fehler korrigieren, es knnte eine Dis-kussion entstehen. Luft das Ganze berTwitter ab, bekommt keiner was davon mit.Mal abgesehen davon, dass Kommentareeurer SEO zugute kommen (mehr Text zumindexieren).
  • 9. 07 OHNE MICHEbenso: Die meisten von uns haben kleineBlogs. Wir knnen uns ber Kommentatorendoch nur freuen. Warum sollten wir dannzustzliche Hrden aufbauen? Wer kom-mentieren will, soll auch die Gelegenheitbekommen. Gegen Spam gibt es Hilfsmittel.Und im Zweifel kann man die Kommentareja moderieren.
  • 10. 08 BILD-CAPTCHAApropos Spam: Bild-Captchas sind zwarweit verbreitet, aber nicht barrierefrei undvor allem nerven sie. Es gibt fr alle CMSbessere Methoden. Von Akismet und Mollomber Honeypot-Formularfelder hin zu Frage-Captchas.Siehe zum Beispiel:http://www.karlgroves.com/2012/04/03/captcha-less-security/
  • 11. 09 SICHTBARER FEEDWenn ein Blog schon einen Feed anbietet(und das ist in der Regel ja der Fall), sollteder Feed auch deutlich als Icon oder Text-Link auf der Site zu sehen sein.In dem Beispiel hier wird zwar ein Feederzeugt, aber nicht sichtbar verlinkt.
  • 12. 10 START FREIStartseiten von Blogs sehen immer gleichaus; eine chronologische Anordnung derletzen Beitrge. Ihr knntet die Startseiteauch komplett anders aufbauen. Hier einBeispiel von therverge.com. Nun ist das einMagazin und die Startseite auch berladen,aber zumindest nicht das bliche.Siehe auch: http://www.robertbasic.de/2013/02/die-umsonstige-startseite-der-blogs/
  • 13. 11 DACHZEILENWas gehrt in eine berschrift? Wie freikann sie sein? Ich bevorzuge meist eineKombination 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 fhrt genauerin den Artikel ein.Man muss hier nur aufpassen, welche Textein das title-Element kommen (StichwortSEO), meist ist es eine Kombination ausDachzeile + Titel.
  • 14. 12 RUBRIKEN / TAGSTags oder Rubriken dienen dazu, Inhalte zuordnen und untereinander zu verbinden. Dasgeht aber auch ber experimentelle Tags.Beim Pisto-Magazin haben wir zum Beipieldie sieben Todsnden und sieben Tugendengenutzt.Mehr dazu gibt es in einem lngeren Artikelzum Thema Tagging von mir unter:http://pisto-magazin.de/artikel/tagging-pfli-cht-kr-experimente
  • 15. 13 ZITATEJeder wei: Wir knnen unsere Blog-Textemit berschriften strukturieren. Das machtes Lesern einfacher, sich einen berblick zuverschaffen. Um lngere Texte darber hin-aus aufzupeppen, eignen sich Zitate (oderAusschnitte aus dem Text). Ntig ist nur eineKlasse und ein wenig Styling per CSS.Hier ein Beispiel von theverge.com.
  • 16. 14 INFOBOXENEine weitere Mglichkeit, den Text etwasaufzulockern, sind Infoboxen. Die lassen sichgenauso leicht erstellen. Ihr braucht auchhier nur eine Klasse (meist fr ein
    )und ein entsprechendes Styling per CSS.Das Beispiel hier aus der ZEIT ist etwasaufwndiger. Verschiedene Stichwrter sindals JavaScript-Reiter zusammengefasst.
  • 17. 15 SYNTAX HIGHLIGHTWer ab und zu Code-Beispiele bringt, sollteeinen Syntax Highlighter hinzufgen. Fr diemeisten CMS gibt es entsprechende Module.Der Code wird dadurch deutlich besser les-bar.Achtet aber auf ein Detail: Der Text solltenach Copy&Paste nur den Code selbst en-thalten, nicht die Nummern am Beginn derZeile. Die msste man nach dem Kopierenper Hand lschen. Das nervt.Hier zu sehen: Der GeShi-Filter.
  • 18. 16 JUMP TOUnd wieder theverge.com: Hier geht es umeinen lngeren Artikel, bei dem links einebersicht der Kapitel eingeblendet wird.Die bersicht dient als Sprungmen; dasaktuelle Kapitel wird hervorgehoben. Auer-dem bleibt das Men fixiert an der linkenSeite stehen, wenn ein Besucher herunter-scrollt.Um das Men zu erzeugen, braucht ihr PHP-oder JS-Kenntnisse. Fr manche CMS gibt esModule (zum Beispiel Table of Contents).
  • 19. 17 PLAY IN TABEine kleine Spielerei aus meinem Blog.Zugegebenermaen wei ich nicht, ob dasirgendwem auffllt, aber ich statte jedenArtikel 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 30Minuten nach einem passenden Song), aberich finde es ganz charmant. Geht auch mitZitaten, Bchern, Filmen
  • 20. 18 ZWEI KLICKSKurzer Hinweis zum Datenschutz: WerGefllt-mir- oder Plus-1-Buttons nutzt, solltediese nicht direkt auf seiner Website einbin-den. Dadurch werden nmlich sofort Infor-mationen an Facebook, Google oder auchTwitter gesendet. Etabliert hat sich eineZwei-Klick-Lsung, bei der ein Besucher ersteinmal die Dienste generell erlauben muss.Viele CMS bieten entsprechnde Module. Oderihr schaut mal direkt bei heise.de.
  • 21. 19 PLEASE STAY!Ein Besucher hat einen Artikel gelesen undlandet am Fu der Seite. Und nun? Nunmchten wir ihn gerne auf unserer Web-site halten. Eine Mglichkeit ist, einen (odermehrere) verwandte Artikel anzeigen zulassen. Die New York Times blendet eineentsprechende Infobox am Fu ein. In derSession gab es Stimmen, die solche Boxengenervt als Werbung wahrnehmen. Ichmeine, die Boxen lassen sich aber auch pas-send als redaktioneller Inhalt gestalten.
  • 22. 20 LOGOWANDERUNGNoch eine Spielerei: Auf t3n.de gibt eseine fixierte Men-Leiste am oberen Rand.Scrollt ein Besucher herunter, verschwindetdas Logo erst einmal nach oben, um imnchsten Moment in der Menleiste wiederaufzutauchen (statt Startseite). Das ist einenette Methode, um das Logo immer obenim Blickfeld zu haben. Ich fand die Idee sogut, dass ich sie auf webkrauts.de ber-nommen habe. Natrlich muss man dafretwas JavaScript knnen.
  • 23. 21 ZUFALLSSPRUCHIhr habt ein Faible fr Slogans, Sprcheoder Zitate, knnt euch aber nicht auf eineneinzelnen fr euer Blog festlegen? Msst ihrauch nicht; nutzt einfach alle. Zum Beispielber einen Zufallsgenerator. Das kann aucheinfach ein zuflliger Spruch des Tages inder Seitenleiste sein.Hier zu sehen: Ein wechselnder Spruch imHeader von oglaf.com.
  • 24. 22 WECHSELNDE BILDERWer ein Hndchen fr Fotografie oder Illus-trationen hat, kann statt eines Zufallsspruch-es auch eine Zufalls-Illustration (oder einFoto) bemhen.Sie Website aintitcool.com zeigt im Headerschon seit Jahren animierte gifs, bei denender Grnder der Website im Zusammenhangbekannter Filme zu sehen ist.
  • 25. 23 BESONDERE ANLSSEWer von zuflligen Inhalten nichts hlt,kann sich auch auf spezielle Anlsse bezie-hen. Auf webkrauts.de bieten wir jedenDezember einen Adventskalender mit Web-worker-Artikeln. Im Jahr 2012 habe ich dafrdie Wort- und Bildmarke angepasst.Vorstellbar sind auch leicht unterschiedlicheDesigns im Tages- und Nachtrhythmus odergem der Jahreszeiten.
  • 26. 24 TRANSFORMHier eine kleine CSS3-Spielerei. ChristianHeilmann hat die rechte Spalte seiner Web-site mit transform (und transition) etwasin die dritte Dimension verschoben. Beimmouse-over wird die Spalte wieder geradegerckt. ltere Browser, die das CSS3 nichtverstehen, zeigen die Spalte ganz normalan.
  • 27. 25 ANIMATIONNeben transform und transition knnt ihrmit CSS3 auch Animationen (animation)erstellen. Auf cup.wpcoder.de fllt sich soder Becher per CSS passend zum SpruchBecher randvoll mit Wissen.Speziell in diesem Fall knnte das natrlichauch ein animiertes gif sein, aber ein up-to-date-Webworker spielt eben lieber mit denneuen Mglichkeiten mit CSS3 herum.
  • 28. 26 PRINT.CSSMssen wir uns noch um den Ausdruckvon Internetseiten kmmern? Wer drucktdie denn heute noch aus? Mehr Leute alswir denken. Insofern knnten wir unsere(meist veralteten) Druck-Style-Sheets ruhigeinmal aufpppeln. Heutzutage haben wirmehr Mglichkeiten, den Druck zu beeinflus-sen. Das obere Bild zeigt etwa den Ausdruckeiner Seite vom Smashing Magazine.Interessant sind die Druck-Styles auch frServices, die aus der Seite ein PDF machen.
  • 29. 27 TYPOGRAFIEHeutzutage knnen wir eine Unmengean Webfonts auf Websites unterbringen.Das ist toll, in manchen Fllen aber leidernicht durchdacht. Zum Beispiel dann, wennCode-Beispiele in einer Sans Serif angezeigtwerden, bei der ein Groes I nicht voneinem kleinen l (el) unterschieden werdenkann. Zumindest solltet ihr kurz die Zeichen I i l 1 ! testen. Im Beispiel oben stichtzwar die 1 heraus, bei Schriften