Alle Artikel zu #webdesign


D wie Design im Blogger-Alphabet

In Runde 4 im Blogger-Alphabet geht es um das Design und das Layout eines Blogs. Ich bin kein guter Designer, generell fallen mir grafische Arbeiten schwer, dennoch ist das Erscheinungsbild meines Blogs von mir selbst entwickelt, es basiert auch nicht auf anderen Designs. Anne fragt dazu:

Was macht für dich ein gutes Blogdesign aus?

Übersichtlichkeit und Bedienbarkeit. Man kann, außer den Artikeln, alle möglichen Inhalte auf seinen Blog packen, aber eigentlich ist mir nichts davon wichtig. Selbst "Über mich"-Seiten finde ich verzichtbar (wenngleich ich selbst eine habe). Vollgestopfte Sidebars oder viele viesuelle Spielereien nerven mich und sind der Grund, warum ich fast nur im Feedreader lese. Wenn ich doch mal die Website eines Blogs besuche, suche ich nach älteren Artikeln - und wünsche mir dann eine funktionierende Navigation und gute Möglichkeiten, Artikel zu bestimmten Themen zu finden.

Was ist dir bei deinem eigenen Bloglayout wichtig? Verwendest du vielleicht bestimmte Farben, die charakteristisch für deinen Blog sind und somit einen Wiedererkennungswert schaffen?

Ich stehe auf die Farbe grün und ich mag sie auch in Kombination mit der Kontrastfarbe rot. Mir war ein grünes Grundscheinungsbild des Blogs wichtig und nach allerlei Bastelei habe ich den Farbverlauf im Hintergrund, der durch den Textbereich nur leicht durchscheint, als sinnvolle und simple Variante entdeckt. Alles, was klickbar ist, wird in rot dargestellt, dass sorgt für Hervorhebung und Abwechslung ohne aufdringlich zu sein. Der Rest ist schlicht gehalten, damit man nicht von den Artikeln abgelenkt wird, inzwischen habe ich sogar - danke CSS3 - die Schlagworte an den Rand verbannt.

Wann passt für dich auf einem Blog eher der Magazin-Style (viele angeteaserte Beiträge auf einmal auf der Startseite), wann bevorzugst du die „klassische“ Variante, bei dem die Beiträge gleich komplett angezeigt werden? Was sind absolute No-Gos in Sachen Layout?

Ich hasse den Magazin-Style. Im Feed noch mehr als auf der Website, aber auch auf der Website nervt es mich tierisch. Am Schlimmsten ist es, wenn man Artikel zum vollen Lesen anklicken muss, dann aber nicht vom Artikel aus direkt zum nächsten springen kann. Bei extrem langen Artikeln halte ich klickbare Sprungpfeile oder Tastaturnavigation wie im Feedreader für praktischer. Viele Fotos gehören ohnehin in Galerien ausgelagert und haben im Text nichts zu suchen. Daher sehe ich keine Notwendigkeit für gekürzte Artikel auf der Startseite.

Von wegen Galerien - meine ist noch sehr rudimentär und vielleicht nicht für jeden intuitiv, aber zum Beispiel bei den Island-Fotos schon im Einsatz.

Erinnerst du dich noch an Webdesign-Trends, die heute nicht mehr angesagt sind?

Lauftexte, Gif-Animationen, "Under Construction"-Baustellenmännchen, Flash... gut dass wir das (auf Websites) größtenteils los sind. Ich vermisse nichts.



Blogseminar 5 & 6

Nie ganz vergessen, aber auch nicht aktiv bearbeitet: Konnas Blogseminar. Vor längerer Zeit hat sich hier mal einiges geändert dadurch, inzwischen hat sich wieder vieles geändert, vor allem durch das neue Design und den dadurch bedingten Wegfall der Sidebars.

Während ich generell an meinem Theme weiterarbeite, werde ich auch die verbleibenden fünf Seminare aufarbeiten. Im fünften geht es dabei um die Sidebar, die hier ja weg gefallen ist. Dafür gibt es den Header. Ernsthafte Widgets verwende ich hier aber nicht, so muss ich mir auch keine Gedanken um langsame Ladezeiten durch Facebook- oder Twitter-Spielereien machen, auch Javascript ist hier nahezu gar nicht vorhanden.

Der Seitwert einer Seite war außerdem Thema. Der bewertet eine Website nach diversen Kriterien, manche sinnvoll, manche weniger; ich stellte erfreut fest, dass Konzertheld.de inzwischen Pagerank 3 erreicht hat und in diversen Ranking-Systemen recht brauchbar abschneidet (in anderen dafür weniger). Dass ich nicht bei Wikipedia bin, halte ich einfach mal für irrelevant. Geändert habe ich einige Metadaten, es gibt jetzt ein Favicon und eine Überschrift erster Ebene.

Das Thema des Seminars Nummer 6 waren Artikelserien. Ich habe damals eine gestartet, was auch wie erwartet für kontinuierlich gesteigerte Zugriffszahlen gesorgt hat. Inzwischen messe ich die Zugriffe auf Konzertheld.de nicht mehr, aber eine Artikelserie wird es hier schon bald wieder geben... und abgesehen von solchen kurzen Serien über einige Tage gibt es hier ja auch die regelmäßigen Posts zu den Projekten {52s} und {ph} sowie meine monatlichen Vorstellungen (für mich) neuer Songs.

Auch wenn diesmal konkret wenig zu tun war, waren einige Gedanken dabei, die mir gefallen. Mit Widgets überladene Seiten nerven definitiv, da sie bei jedem Aufruf hohe Ladezeiten haben. Außerdem ist es eine gute Idee, komplexe Themen in mehrere Artikel zu zerteilen. So kann man nicht nur seine eigenen Gedanken gut ordnen und strukturieren, sondern erleichtert auch den Lesern das Verfolgen des Themas. Und ein Blog ist ja auch nicht gerade ein Medium, von dem man einen 20-seitigen Text erwartet - in der Folge liest man so lange Artikel ungern.



Konzertheld.de verlässt die Beta-Phase!!

Letztens noch habe ich mich selbst veralbert und das Beta-Logo um "since 2008" ergänzt, dann kamen ein Motivationshoch und ein paar IRC-Sitzungen mit den Entwicklern von Habari, meiner Blogsoftware, und diese Nacht konnte ich endlich den letzten hartnäckigen Bug fixen - alle mir bekannten Fehler sind jetzt behoben!

Ich habe außerdem mal wieder meine Blogroll aktualisiert und die Sidebar verbessert. Es gibt jetzt einen Block, der die drei zuletzt kommentierten Artikel anzeigt. Die Tag-Cloud ist kleiner geworden und bei "inhalt entdecken" gibt es jetzt einen Link zur Liste aller Events, über die ich bisher berichtet habe.

Die Farben auf Konzertheld.de sind jetzt konsequenter. Am Design gibt es vor allem codetechnisch noch viel zu tun, aber davon kriegt ihr als Leser ja nichts mit. Auf jeden Fall sollte jetzt bis auf die Überschriften der Einträge alles, was man anklicken kann, grün sein, und umgekehrt alles grüne anklickbar sein (wir reden hier von Text, nicht von Linien).

Das Bild hinter dem Logo wechselt jetzt, ich werde zusehen, dass ich noch mehr Hintergrundbilder einbaue. Das Logo selbst wird evtl. auch noch überarbeitet.

Die Zitate sind wieder da und es gibt eine neue Über-mich-Seite, immer noch erreichbar rechts in der rechten Sidebar, bei "wer schreibt?" auf "mehr" klicken.

Beitragsserien kriegen gerade alle eine Projektseite verpasst. Das ist die Folge einer Änderung meines Tag-Verhaltens: Bei Serien werde ich nur noch die Projektseite taggen und den Rest dann nur mit dem Projekt-Tag, damit man bei der Ansicht des Tags "Musik" z.B. nicht eine Million Projekt Hörsturz-Artikel und Musik-Neuentdeckungen angezeigt bekommt. Die Einträge der jeweiligen Serie sind bereits jetzt über ihr Tag erreichbar.

Dies ist der 479. Eintrag auf Konzertheld.de. Ein bisschen stolz bin ich da schon drauf. Und jetzt, wo ich mich endgültig in Habari eingearbeitet und an das Chatverhalten der Entwickler gewöhnt habe, werde ich auch bei Habari bleiben und hoffe, dass ich in Zukunft mehr Fehler behebe als finde...



Konzertheld.de goes Eventblog

Seit 2009 berichte ich immer wieder von Konzerten, Festivals und ähnlichen Veranstaltungen, auf denen ich war; diese Berichte sind ein wesentlicher Bestandteil des Blogs geworden und werden es bleiben. Um Artikel zu Events in Zukunft besser zu erkennen, habe ich ihnen ein neues Design verpasst, das Design wieder verworfen, überarbeitet, kritisieren lassen - jetzt steht es. Artikel, die Events ankündigen oder über eben diese berichten, haben ein vertikales oranges Textlogo oben links und der Header ist grün und um neue Metadaten ergänzt.

Damit einher geht zunächst mal auch eine Liste aller Eventberichte (Ankündigen habe ich ausgefiltert). Diese Liste findet man rechts in der Sidebar als ersten Eintrag unter "Inhalt entdecken", momentan ist der Link noch mit NEU gekennzeichnet. Etwas ähnliches wird es demnächst auch für Artikelserien geben, z.B. wenn ich wie beim Kirchentag mehrere Artikel über ein Event schreibe, aber auch wenn für solche Berichte wie den London-Bericht, der immer noch aussteht (aber nicht vergessen wurde). Die Liste der Events wird noch angepasst und erweitert, aber für den Anfang sollte es genügen, einfach alle Artikel aufzulisten.

Was haltet ihr von diesen Änderungen? Und von der nicht mehr ganz so neuen Änderung, dass regelmäßige Posts auf der Startseite nur noch mit einem Banner dargestellt werden? Trägt das zu mehr Übersicht bei wie geplant oder ist es verwirrend wenn es viele verschiedene Arten gibt, wie ein Post dargestellt werden kann?



Basteleien

Es ist schon wieder nach 4 und die Bastelei am Blog hat mich mal wieder wach gehalten. Jetzt ist aber erstmal Feierabend. Neben kleinen optischen Veränderungen fällt momentan wohl vor allem eins auf: Die fünf Artikel vor diesem hier sind alle etwas ungewöhnlich. Das liegt an einer Häufung von sowohl Serien- als auch Projekt-Artikeln.

Da es vielleicht nicht für jeden ersichtlich ist, hier rückwärts mal ein paar Worte zu den letzten Artikeln. Generell gilt: Für Artikelserien habe ich Logos eingeführt, damit die Serienartikel in der Listendarstellung aller Artikel zwar gut sichtbar sind, aber platzmäßig nicht so ins Gewicht fallen. Durch die aktuelle Häufung sieht das etwas merkwürdig aus... die Einzelansicht mit dem Artikeltext bekommt man in jedem Fall durch Klick auf das Logo.

  • Koooooooooonzertheld.de?!
    Meine kleine Reihe über kuriose Suchbegriffe, über die Menschen auf meinem Blog landen. Im Gegensatz zu den anderen beiden Serien wird hier das Logo auch in der Einzelansicht dargestellt. Das Logo ist an Google angelehnt und in den Blogfarben gehalten... hat's jemand gemerkt?
  • Musik-Neuentdeckungen 09/2010
    Nunja, das spricht für sich. Monatlich erscheinende Artikelserie mit meinem neuesten Zuwachs zur Musiksammlung. Das Logo wird auf der gleichen Basis erstellt wie das Hauptlogo des Blogs, aber in grün eingefärbt.
  • Projekt Hörsturz 28 - Bonus
    Ein Nachzügler aus dem Projekt Hörsturz. Infos zum Projekt habe ich ab dem aktuellen Beitrag zu Runde 30 in jedem Post eingebaut. Ausnahmsweise mit Teaser - da ich für den Teaser noch kein gescheites Design habe, verwende ich den normalerweise nicht. Das Logo ist an die Farben des Blogs angelehnt, der das Projekt verwaltet, das ändere ich aber vermutlich noch, weil es sich zu sehr von den restlichen Blogfarben abhebt.
  • Grossstadtgeflüster [Ankündigung]
    Ein Event-Beitrag. Auch für die Events habe ich noch kein endgültiges Design, momentan ist es der sehr auffällige Block mit HTML-Effekt. Werde mir da noch was einfallen lassen. Abweichend zu normalen Einträgen werden statt Kommentarzahl und Veröffentlichungsdatum die eventspezifischen Daten angezeigt.
  • Projekt Hörsturz 30 - Bad Taste
    Okay, für den Sonderbeitrag zum Projekt Hörsturz habe ich mir erlaubt, passend zum Inhalt das Logo in knallbunte Farben zu tauchen :D


Smileys! und andere Designigkeiten

Ahem. Wer diesen Eintrag noch in einer kürzeren Form gesehen hat, ist Zeuge meines Missbrauchs der Funktion geworden, mit der man die Veröffentlichung von Beiträgen in die Zukunft legen kann. Konnas Blogseminar (erklärender Eintrag kommt Montag) hat diesmal zur Aufgabe, eine Woche lang jeden Tag einen Post zu veröffentlichen und diesen hier hatte ich für Freitag vorgesehen. Leider habe ich dann keine Lust gehabt ihn fertig zu schreiben...

Konzertheld.de hat ein paar grüne Elemente verpasst gekriegt! Seit ich Habari als Blogginplattform nutze, wollte ich Smileys haben, und zwar welche, die sich farblich ins Theme fügen und auch ansonsten gut aussehen. Weiß nicht, warum ich nicht eher darauf gekommen bin, aber die von cabezudo.de passen hier eigentlich wunderbar rein, außerdem find ich die total knuffig. Als Smiley-Plugin nutze ich Tabasamu, welches es ermöglicht, eigene Smileysets zu erstellen, so dass ich die grünen Blob-Smileys selbst anpassen konnte (einfache XML-Datei). Ursprünglich wurden die übrigens von Irma E. erstellt, vielen Dank dafür, man darf sie für private Blogs kostenlos nutzen.

Ansonsten habe ich in den letzten Tagen an den Sidebars gebastelt und die Bezeichnungen geändert, die HTML-Validität verbessert und etwas über XHTML gelernt, nämlich dass man es eigentlich gar nicht so verwenden sollte wie ich es tue... nun ja, wenn HTML5 fertig ist, stelle ich vielleicht mal um. Links sind jetzt auch im normalen Artikeltext grün, das gefällt mir besser als vorher. Dieweil ich das ursprüngliche FadeIn-Theme immer mehr verändere, habe ich gesehen, dass planmäßig inzwischen Version 2.0 erschienen wäre, die komplett neu erstellt worden wäre, aber, wäre, wäre, der Auto hängt mal wieder hinterher.

Auf dem Plan, bis das BETA da oben verschwindet, stehen jetzt eigentlich nur noch die Fertigstellung der Custom Content Types an denen ich arbeite und deren Einbindung in das Theme (insbesondere in die Ansicht, in der mehrere Posts dargestellt werden) und die restliche Übersetzung von Habari. Wenn euch noch was einfällt, würd ich mir über einen Kommentar freuen!

Zu guter letzt für die, die sich fragen, was denn hier mal stand - und für meine spontan kreierte lose Reihe darüber wie ich blogge, erkennbar am Tag backstage, hier der Text, der als Notiz für diesen Artikel gespeichert war:

:)

cabezudo.de gefunden, Quelle nennen und in Footer einbauen

Der Smiley ist jetzt übrigens weg gefallen - eine Präsentation aller Smileys füge ich vielleicht ein, wenn ich mit der XML-Datei fertig bin.



Social Net Icons

Es wird einigen aufgefallen sein, in der oberen rechten Ecke befinden sich seit neuestem Icons zu allen sozialen Netzwerken in denen ich öffentlich zu finden bin sowie zu Wikipedia und den RSS-Feeds. Entdeckt habe ich die Dinger bei cabezudo.de und haben wollte ich sie schon länger, bin allerdings nie auf die Idee gekommen einfach mal durch die anderen Seiten des Blogs zu blättern, dann hätte ich sie gefunden... naja, so hat Google mich auf die DeviantArt-Seite von Tydlinka gebracht, die etliche dieser Icons dort bereit stellt. MrStrauss hat mir noch ein Picasa-Icon dazu gebastelt und ich hab mir eins mit dem Wikipedia-Logo gemacht (welches übrigens jeder gerne frei verwenden darf!), so ist's jetzt vollständig hahahah



Fertig! Konzertheld.de läuft jetzt mit Habari :)

Yay, es ist vollbracht! Es ist nicht perfekt und es kann nicht alles, was der ganz alte funktionierende Blog mal konnte, aber es viel toller, mindestens im Vergleich zu dem tristen Wordpress was zuletzt lief. Hier mal ein Überblick was passiert ist.

  • Das Wesentliche zuerst: Die gesamte Blogengine wurde umgestellt. Statt Wordpress läuft hier jetzt Habari. Für euch Leser bedeutet das vor allem, dass ein komplett neues Design da ist und die Kategorien zu Tags geworden sind. Dadurch kann man jetzt anders - und meiner Meinung nach besser - auf Inhalte im Blog zugreifen. Für mich als Admin bedeutet es mehr Komfort und Geschwindigkeit.
  • Mit dem neuen Design habe ich einige Veränderungen eingeführt. Auf der Startseite sind jetzt die neuesten acht Posts zu lesen, rechts in der Sidebar die ersten drei von Seite zwei. Darunter gibt's den Ausblick auf den nächsten vorterminierten Post. Bei der einzelnen Postansicht werden die neuesten drei Posts angezeigt. Das Bild im Header ist wieder da, wechselt aber nicht mehr bzw. noch nicht, muss ich mir noch überlegen. Die Zitate sind wieder da und an einer Stelle, die mir sehr gut gefällt.
  • Die Suche funktioniert leider noch nicht so gut wie im Wordpress-Blog. Tags werden nicht berücksichtigt, das ist Mist, aber ich arbeite dran. Falls jemand weiß oder rausfindet, wie man die Habari-Suchfunktion dahingehend modifiziert, dass sie Tags berücksichtigt, bitte melden!
  • Die Picasa-Alben-Einbindung funktioniert nicht mehr, da das Plugin für Habari nicht existiert. Ich werde es beizeiten umschreiben, bis dahin müssen Links herhalten, die noch eingepflegt werden müssen. Überhaupt sind die ganzen Medien alle noch nicht so funktionsfähig. In Arbeit.
  • Jetzt wieder was Gutes: Zum Relaunch gibt's außer diesem noch fünf neue Beiträge und einen Gastbeitrag hahahah

Es ist noch viel zu tun. Einige Feinheiten die sich geändert haben (geänderte Tags zur Anpassung an die kategorielose Struktur usw) werden dem ein oder anderen vielleicht auffallen, wichtiger sind Fehler, die noch da sind. Wer was findet, möge bitte hier kommentieren.

Übrigens bin ich jetzt auch Gastschreiber bei HabariMag... dort wird in nächster Zeit der ein oder andere Artikel von mir erscheinen, natürlich zu Themen, die während der Umstellung eine Rolle gespielt haben. Es wird auch hier im Blog noch einen eigenen Artikel über Habari geben. Wer sich schonmal ein Bild machen möchte, ist bei HabariMag gar nicht schlecht aufgehoben. Der Blog richtet sich aber vor allem an Leute, die schon Habari nutzen und es verbessern (oder überhaupt erstmal vernünftig einrichten) möchten. Denn soviel kann ich schon sagen: Habari ist nichts für Anfänger. Zumindest noch nicht.

Hoffe, euch gefällt, was ich gebaut habe, ich bin jedenfalls schon ein bisschen stolz drauf hahahah Ich denke, im Vergleich zum alten Blog sind schon jetzt viele Verbesserungen erreicht.