Hausinternes
Mittwoch23. Juli 2008

Mit dem Relaunch hat sich nicht nur die Optik des Weblogs verändert, auch einige neue Funktionen haben Einzug gehalten. Eine davon – die dynamische Ansicht der Kommentare – werde ich in diesem Beitrag ausführlich vorstellen. Dieser Beitrag ist der erste einer kleinen 3er Reihe, in denen ich ein paar Einblicke in das Gestaltungskonzept und die technische Umsetzung der neuen Highresolution Seite geben werde.

The long tail

Weblogs werden üblicherweise als 2- oder 3-Spalten-Layouts angelegt. Neben dem Hauptinhalt hat in den Randspalten der Sekundär-Content (Sidebar, Werbung, ect.) seinen Platz. Bei längeren Artikeln ist es mit den “Randinformationen” schnell vorbei und so macht sich der Artikel in seiner schmalen Spalte allein auf in Richtung Fußzeile. Besonders bei schmalen Bloglayouts verbleibt so auf größeren Bildschirmen ein schmales Inhaltsband neben endlosen ungenutzten Flächen. Ein Beispiel dafür ist dieser aktuelle Beitag bei den Webkrauts, der sich selbst auf meinem großen Bildschirm über 22! Bildschirmseiten zieht.

Ist man endlich bei den Kommentaren angelangt, schlägt der Standardhammer zu. Während Weblogbeiträge umgekehrt chronologisch ausgegeben werden (der neueste Beitrag zuerst), werden Kommentare üblicherweise in der Reihenfolge ihres Eintreffens (also chronologisch, mit dem ältesten beginnend) aufgelistet. Will man Beitrag und Kommentare vollständig lesen, ist diese Anordnung ideal, denn man fängt oben mit Lesen an und wenn man unten ankommt, hat man Beiträge und Kommentare vollständig überblickt. Leider liest man in dieser Form einen Beitrag nur ein einziges Mal.

Viel öfter hingegen verfolge ich Diskussionen in anderen Blogs, indem ich einen interessanten Beitrag immer wieder im Browser aufrufe, um die neuesten Kommentare zu lesen. Dabei ist es die Ironie des Schicksals, dass ich jetzt erst ganz ans Ende der Seite reisen muss, um die neuesten Kommentare zu lesen. Besonders bei interessanten und vielkommentierten Beiträgen empfinde ich das als lästig (siehe oben genannter Webkrauts-Artikel). Ebenso lästig empfinde ich Infomails für neue Kommentare oder Kommentar-Feeds. Weder möchte ich per Mail zugespammt werden, nur weil ich gerade 2..3 Diskussionen im Netz verfolge, noch will ich ständig meine Feedliste anpassen müssen. Es hat halt jeder seine Vorlieben, weswegen dieses Weblog selbstverständlich Kommentarfeeds und Emailbenachrichtigungen anbietet. Ich selbst verfolge die Diskussionen lieber direkt auf der Webseite mit und schaue dann gern auch ein/zwei Mal pro Tag vorbei.

 

Den gesamten Beitrag lesen


Sonntag20. Juli 2008

Vor knapp 3 Jahren habe ich unter der Domain highresolution.info zwei unabhängige kleine Projekte gestartet. Das eine, mein privates Weblog konnte ich über die Jahre mit wechselnden Themenschwerpunkten recht ordentlich durchbringen. Das andere, meine kleine Firmenseite, vegetierte eigentlich seit ihrer Erstellung mehr oder weniger unbeachtet vor sich hin. Nicht weil meine Arbeit sich nicht positiv entwickelte, sondern weil die Seite seinerzeit auf dem dateibasierten CMS phpCMS aufsetzte, dessen Funktionsumfang begrenzt ist und dessen Pflege nicht gerade zu täglichen Aktualisierungen einlud. Und so geschah es, dass die Seite in der Prioritätenliste immer weiter nach hinten rutschte. Vor zirka 6 Monaten habe ich es dann nicht mehr ausgehalten. Ein neues Design musste her, die beiden Projekte sollten vereint werden.

Screenshot der Webseite

Nur was man sich so beim Schlafengehen überlegt, bedeutet nicht selten sehr viel Arbeit. Daher hat es nach dem ersten Gedanken noch schlappe 5 Monate gedauert, bis der Layoutentwurf stand und dann noch pfeilschnelle 3 Wochen der Umsetzung. Wie mein bisheriges Weblog wird die komplette Site nunmehr von einer ExpressionEngine angetrieben.

Den gesamten Beitrag lesen


Montag10. September 2007

Erst vor ein paar Tagen habe ich hier im Blog über den Ansatz von Chris Heilmann berichtet, gleichlange Spalten nicht mit CSS sondern nachträglich per Javascript zu erzeugen.

Dieser Weg ist immer dann sinnvoll, wenn gleichlange Container einen optisch ein reizvollen Effekt darstellen, für die Funktion der Webseite jedoch nicht zwingend relevant sind. Aus eigener Erfahrung würde ich sagen, dass dies in den meisten Fällen zutrifft. Nicht lange nachdem mein Blogbeitrag im Netz stand, meldete sich Dirk Ginader und wir bastelten eine Lösung für YAML auf Basis von jQuery. Die wenigen Codezeilen waren schnell geschrieben,  doch letzte Woche hatten wir beide viel umdie Ohren, sodass ich erst jetzt dazu komme, unser kleines Plugin mit dem Namen SyncHeight kurz vorzustellen.

Das Plugin synchronisiert die Höhe einer beliebigen Anzahl von Elementen innerhalb eines Layouts. Einzige Voraussetzung: Die Elemente müssen sich lediglich über einen gemeinsamen CSS Selektor ansprechen lassen (also beispielsweise eine gemeinsame CSS-Klasse). Als Beispiel hier der Aufruf zur Anpassung der Containerhöhen der YAML Subtemplates:

$(document).ready(function(){
  $('.subcolumns > div').syncHeight();
}); 

Für Layouts mit fixer Breite war’s das bereits. Innerhalb eines flexiblen Layouts kann es nötig sein, die Angleichung der Containerhöhen zu aktualisieren wenn die Breite des Browserfensters geändert wird. Dazu kann der Resize Event von jQuery genutzt werden:

$(document).ready(function(){
  $('.subcolumns > div').syncHeight();
  $(window).resize(function(){ 
    $('.subcolumns > div').syncHeight();
  });
});

Nachtrag 11.9: Befinden sich gleich mehrere Subtemplates auf der Seite empfielt es sich, den gewünschten Subtemplate-Container direkt über eine ID anzusprechen. Sollen hingegen ALLE Subtemplates innerhalb einer Webseite mit einem Schlag bearbeitet werden, so sind noch ein paar mehr Zeilen Javascript nötig. Hier hat sich Reinhard Hiebl bereits Gedanken gemacht schlägt folgenden Code vor:

$(document).ready(function(){
  var eachCase = '.subcolumns'; // for each lines/paragraphs
  var element = '> div'; // elements within lines/paragraphs from eachCase

  $($(eachCase)).each(function() {
    var el = $(this).find(element);

    el.syncHeight();
    $(window).resize(function(){
      el.syncHeight();
    });
  });
});

In diesem Fall werden alle Subtemplates einer Webseite erfasst, jedoch die Container-Höhen immer nur jeweils innerhalb eines Subtemplates synchronisiert.

Letztlich ist die Anwendung nicht auf YAML begrenzt. Über den Selektor können beliebige Elemente in ihrer Höhe manipuliert werden.

Download des Plugins (v1.0): jquery.syncheight.zip (Dual licensed under the MIT and GPL licenses)


Dienstag24. April 2007

Vor kurzem habe ich einen knuffigen Bugfix zur Beseitigung des Italics-Bugs vorgestellt. Der Bugfix musste nun aufgrund eines Problems im IE5.x leicht modifiziert werden.

Mein damaliger Beitrag hat daher ein Update erfahren. Die Probleme im IE5.x sollten damit verschwunden sein.


Mittwoch04. April 2007

Gerade habe ich in die Kommentare zu Gerrits Rezension meines Buches - für die ich mich hiermit herzlich bedanken möchte - geschaut und dabei ein Thema entdeckt, dem ich mich in der Vergangenheit immer wieder stellen musste, bisher jedoch keinen Blogbeitrag dazu verfasst hatte.

Stein des Anstoßes in allen Diskussionen dieser Art, die ich bisher miterleben durfte, ist die “große” Anzahl von vordefinierten DIV-Containern innerhalb der Quelltextstruktur von YAML. Die Kritik bezieht sich dabei in erster Linie auf die Schachtelungstiefe der Container bis zum eigentlichen Inhalt. Gleiches ist auch für die Grids von Yahoo zu vermuten. Ich möchte hier nicht die Quelltexte auseinander nehmen. Wer die Projekte nicht kennt, für den stehen die jeweiligen Online-Dokumentationen (Grids & YAML) bereit. Stattdessen möchte ich einige, ggf. kontroverse Thesen in den Raum werfen, um die Diskussion anzuregen.

Es stellt sich die Frage: Steht ein XHMTL/CSS-Framework (wie YAML oder Yahoo Grids) ernsthaft in Konkurrenz zu dem Ziel, schlanken Code zu erzeugen?

Den gesamten Beitrag lesen


Seite 3 von 5 Seiten

 <  1 2 3 4 5 >