ofhouse

Die Facebook-Chronik

Nun ist mein Facebook-Konto schon auf den Tag genau 1471 Tage alt. Zeit für etwas Neues: Die Facebook-Chronik.

Vor wenigen Tagen erhielt ich das, was unaufhaltsam scheint: Die automatische Umstellung meines Profils auf das neue Chronik-Design. Ob ich will oder nicht, am 14. August erstrahlt mein Profil in neuem Glanz.

Stark angefangen, Stark nachgelassen

Wenn man sich die Chronik so ansieht, sieht sie auf den ersten Blick wirklich ansehnlich aus. Facebook hat es endlich geschafft, durch das Titelbild den Profilen endlich ein Stück Persönlichkeit in dem sonst eher unpersönlichen Netzwerk zu geben. Doch was danach kommt, lässt die Chronik komplett scheitern:

Ich habe hier mal die beiden Designs auf Facebook nebeneinander gestellt, die auf Facebook Neuigkeiten anzeigen. Links der normale News-Stream von der Startseite, Rechts Das Chronik-Design.

Mit Rot habe ich mal den Lese-Verlauf eingezeichnet. Dabei fällt auf, dass der Newsstream einen natürlichen Lese-Verlauf von oben nach unten hat, während das Chronik-Design einen vollkommen unnatürlichen Lese-Verlauf hat. So habe ich, wenn ich einen Eintrag in der Chronik gelesen habe, mehrere Möglichkeiten was ich als nächstes lesen kann. Das verwirrt den Betrachter extrem, wodurch das Lesen überhaupt nicht mehr effektiv ist.

Was hat die Chronik mit meinem Leben zu tun?

Die letzte Frage, die mich im Zusammenhang mit der Chronik beschäftigt hat, ist, was sie überhaupt darstellt. Facebook ist ein Medium, was Hauptsächlich die Wege der Kommunikation in den letzten Jahren perfektioniert hat. Doch wenn ich etwas auf Facebook poste, hat es für mich nach wenigen Tagen keine Bedeutung mehr. Das merkt man daran, dass man sich überhaupt nicht mehr daran erinnern kann, was man vor über einer Woche alles gepostet hat.

Facebook ist vor allem ein Medium, was von seiner Aktualität lebt. Wenn ich mir nun meine Chronik ansehe und sehe, was ich vor 4 Jahren geschrieben habe, ist es für mich, als wenn ich eine Zeitung von vor 4 Jahren lesen würde.

Diese Posts haben für mich aber keinen wirklichen ideellen Wert mehr, weil ich sie mit keinem Lebensereignis verknüpfen kann. Deswegen sind die meisten Posts für mich eine wertlose Erinnerung, weil man den genauen Zusammenhang nicht mehr kennt. Man weiß nicht mehr, wie man sich gefühlt hat, als man ihn geschrieben hat, man sieht nur ausdruckslose Zeilen Text.

Kurz gesagt ist die Chronik ein Tool, welches alte Daten aufarbeitet, die aber weder effizient gelesen werden können, noch die Mehrheit der Nutzer interessieren dürfte.

Viele Leute, die mit dem (Web-)Designen anfangen, oder schnell was designen möchten, greifen sehr schnell zu den bekannten Paketen von Adobe und meinen damit schon die halbe Miete zu haben.

Aber Design ist mehr als nur Adobe. Wichtig sind vor allem Erfahrung, Kreativität und ein geübter Umgang mit dem Design-Programm. Vor einigen Jahren habe ich mich deswegen für Inkscape entschieden, ein Vektor-Grafik-Programm, was gerade auch für Einsteiger leicht zu durchschauen ist und dazu noch kostenlos ist.

Zugegeben, die Beispiele und Tutorials, die man bei Google findet, wirken nicht halb so professionell wie die von Adobe, aber das liegt auf keinen Fall am Programm.

Zum Schluss noch als kleines Extra: Ein Browser-Overlay, welches keinem Webdesigner bei seiner Präsentation fehlen sollte.

Mini_Browser.zip

Redesign

Da ich mit dem alten Design meines Blogs kurz nach der Veröffentlichung schon wieder ziemlich ernüchtert war, musste jetzt endlich was neues her.

Sinn des Designs war ursprünglich die Einfachheit in der Darstellung von Texten verbunden mit ein paar „Spielereien“. Jedoch waren es gerade jene „Spielereien“, die mich an dem Konzept zweifeln ließen, durch das übergroße Logo bekam der Text, der eigentlich das wichtigste des Blogs sein sollte, nicht mehr die erwünschte Aufmerksamkeit. Und durch die Buttons, die oben angebracht waren, wurde viel zu viel Raum beim scrollen verschenkt, was gerade auf kleinen Bildschirmen nervig sein konnte.

Ziel war es nun, den Text in den Vordergrund zu rücken und das Branding minimal zu halten um ein angenehmen Lesen – ohne große Ablenkungen – zu ermöglichen.

Was nun herausgekommen ist, ist ein zeitloses Design, welches vor allem durch seine Einfachheit besticht. Die „Spielereien“ wurden weitgehend reduziert und nur in Verbindung mit Funktionalität eingesetzt, so dass man sie auf den ersten Blick gar nicht erkennt.

Das Branding wurde dabei im wesentlichen auf ein Logo Rechts vom Eintrag und das markante Orange reduziert, welches aber nur dezent zur Hervorhebung von wichtigeren Dingen auf der Seite dient, statt sich über die ganze Seite zu stecken.

Den Schluss bildet der Footer, welcher drei Links zu Sozialen Netzwerken beinhaltet sowie den Tribut an meinen Hoster tumblr.

HTML: Links ohne Weiterleitung

Heute möchte ich ein Geheimnis des Webentwickelns bekannt geben, welches gerade für Suchmaschinenoptimierung (SEO) interessant ist. Es geht dabei um Folgendes: Wenn man auf einen Link klickt, dann wird man auf eine neue Seite weitergeleitet. Das erkennt man im Browser daran, dass unten eine Adresse (z.B. http://www.example.com) erscheint, wenn man mit der Maus über den Link fährt.

Jetzt wird einigen aufgefallen sein, dass dort auch manchmal javascript:void(0); steht, womit ein Javascript ausgelöst wird. Hat man Javascript aber deaktiviert, führt der Link nirgendwo hin. Es gibt aber noch eine dritte Alternative: Man hat einen vollständigen Link und dazu ein Javascript, welches ausgeführt beim klicken ausgeführt wird.

Der Vorteil dabei liegt auf der Hand: Ist Javascript aktiviert, wird die Javascript-Funktion ausgeführt und man wird nicht weitergeleitet. Ist Javascript deaktiviert, verhält sich der Link wie ein ganz normaler Link. Da ich lieber mit jQuery programmiere als mit blankem JavaScript, gibt es hier die Möglichkeit die Weiterleitung sehr einfach zu unterdrücken:

HTML:

<a href="http://www.example.com">Mein Link</a>

jQuery Code:

$('a').click(function(event) {
    event.preventDefault();
    // Hier kann weiterer Code ausgeführt werden
});

Durch event.preventDefault(); wird also der Browser daran gehindert, einen neuen Tab für den Link zu öffnen bzw. weiterzuleiten.

Für weitere Informationen dazu empfehle ich die jQuery Dokumentation zu dem Thema.