Gruß
Thomas

An die Kommentaransicht muss man sich zwar kurz gewöhnen, aber es ist mal was anderes. Und man muss ja nicht immer alles so machen wie es überall sonst zu finden ist.

Nun funktioniert bei mir auch der Styleswitcher auf SMALL SCREEN mit 800px Breite ohne horizontalem Scrollbalken.

Bei mir auch, aber nur bei Zoom 100% (= Normal)  oder Text Zoom.
Bereits bei Full Zoom 110% erscheint ein horizontaler Scrollbalken.
Getestet mit Firefox 3.0.1.
Das nur zur Info. Normalerweise verkleinere ich nicht das Fenster auf 800x600.

Lediglich die nicht ganz so gut lesbare Schrift, ist nach meiner aktuellen Einschätzung noch verbesserungsbedürftig.

Das sehe ich auch so (Kommentar #26). Aber wie soll das gehen?

Dirk hat darauf schon geantwortet
@ Dirk #35 und @ Dieter #34
Ich habe immer noch Windows XP - bei mir sind alle 6 VISTA-Schriften verfügbar, wobei ich gar nicht weiß, woher ich sie habe, sie sind vielleicht in Microsoft Wort 2003 enthalten. In Windows XP kann man die Kanten von (Bildschirm)Schriftarten glätten mit der Einstellung ClearType (Default-Einstellung ist “Standard”, warum auch immer, viele Nutzer werden die Einstellung ClearType gar nicht finden).  Mit ClearType geglättet sieht Calibri bei mir unter Windows XP gut aus, aber sie ist eben wesentlich “zierlicher” als z.B.  Trebuchet MS oder Verdana, die mitunter als “plump” empfunden werden. Die Schriftgröße hat Dirk mit 14px festgelegt [das ist wohl die jetzt empfohlene Schriftgröße für große Bildschirme > 1280x 1024)] , und mehr dürfte nicht akzeptabel sein. Wenn unter Windows XP Calibri nicht installiert ist, wird der Text mit ‘Trebuchet MS ’ bzw. mit Verdana angezeigt - und dann erscheint der Fließtext schon relativ groß. 
Das Einzige, was mir noch einfällt, um die Lesbarkeit des Textes zu verbessern, wäre die Veränderung (Erhöhung? Herabsetzung? )  des Kontrastes: Für color ein tieferes Schwarz verwenden oder background-color verändern?
Dazu habe ich bei praegnanz.de [http://praegnanz.de/essays/typo-im-web-html-schriften-unter-der-lupe] im Kommentar von Thomas Scholz gelesen:
“Wesentlich für den Erfolg der Schriftglättung ist der Kontrast zwischen Vorder- und Hintergrund: Je stärker der ist, desto schlechter das Ergebnis, weil der Ausgleich zwischen beiden schwerer wird. Deshalb sei jedem von allzu hellem Hintergrund abgeraten, der ein vernünftiges Schriftbild anbieten möchte.”
Dieser Zusammenhang ist mir neu! Da hilft nur mal testen.

Die Lesbarkeit, speziell die Schriftgröße,  ist seit jeher ein Streitthema - ein Webseitenersteller kann es niemals allen Leuten recht machen. Wie gut für die User, dass es den Text Zoom bzw. bereits bei drei Browsern den Full Zoom gibt. Ist dem User der Text zu klein, dann muss er eben zu “Nadel und Faden greifen” und sich selbst behelfen.

Lediglich die nicht ganz so gut lesbare Schrift, ist nach meiner aktuellen Einschätzung noch verbesserungsbedürftig.

Das ist auch das Schwierigste, denn es gibt ja nur eine Hand voll Schriften und darunter sind wieder nur ein Teil serifenlos. Die Auswahl ist also sehr begrenzt. Die Vista-Schriften sind um ein Vielfaches besser, nur leider unter XP meist nicht verfügbar.

@Micha
Hehe .. erwischt. Ja, die kommen wieder rein, allerdings nicht mehr oben auf der Seite, sondern in Zukunft unterhalb des Kommentarfeldes.

Den Sprung zur Vorschau hast Du ebenfalls realisiert.

Lediglich die nicht ganz so gut lesbare Schrift, ist nach meiner aktuellen Einschätzung noch verbesserungsbedürftig.

Respekt, wie schnell Du Verbesserunngen an Deinem Blog vornimmst. Ich brauche für so was immer länger und von jquery habe ich überhaupt keine Ahnung. :-(

Nachtrag: Bei der Vorschau wird jetzt korrekt zur Kommentarvorschau gesprungen. Leider momentan mit 2 Zeilen jQuery, mal sehen wann die EE hier ne ordentliche Lösung liefert. Es wird alles gut.

@ Dirk
Wenn ich die Sache mit dem Styleswitscher richtig verstehe, wird bei kleinen Bildschirmen (Seitengröße 800x600) mit der Einstellung Small Screen der lästige horizontale Scrollbalken abgeschaltet. Das funktioniert jetzt wieder, danke.
Bei Seitengröße 640x480 verschwindet mit Small Screen der horizontale Scrollbalken nicht, logisch, denn die Mindestbreite der Seite, die bei Big Screen 960px beträgt, wird bei Small Screen auf 760px herabgesetzt.
[Sorry, ich hatte versehentlich in meinem Beitrag #26 horizontal statt vertikal geschrieben - wie kann man das nur verwechseln, ich werde alt!).

Nochmals zur Schriftart und zur Schriftgröße:
Bei einem Flachbildschirm sollte man ohnehin die Kanten glätten und das habe ich bei mir auch getan. Die Schriftart Calibri sieht auch bei mir gut aus, sie wirkt halt selbst bei Schriftgröße 14px etwas klein. Bei Herabsetzung der Schriftgröße auf 13px wird sie doch noch kleiner.  Aber mach wie Du das für richtig hältst, zum Glück kann man den Text vergrößern oder die ganze Seite zoomen.

... mit Big Screen erscheint der <s>vertikale</s> horizontale Scrollbalken, der allerdings auch mit Small Screen nicht verschwindet.  Das trifft jetzt sogar auf die Seitengrößen 640x480 und sogar 340x340 zu.

Mein Fehler – schon wieder. Hatte ich bei der Korrektur übersehen. Der Grund für den Styleswitcher ist, das das Layout für große Displays entwickelt wurde ( > 1280px) und auch dort richtig gut aussehen soll (Ich selbst arbeite auf einem 1920px breitem Desktop). Daher war eine Anpassung für normale/kleine Bildschirmgrößen erforderlich, die jetzt auch fehlerfrei sein sollte.

Was die Schrift angeht, sind 14px unter Windows XP ohne Kantenglättung etwas schwierig. Hier muss ich noch nach Alternativen suchen. Mit der Vista-Schrift Calibri und Kantenglättung sieht die Seite sehr gut aus. Vielleicht sollte ich für normale Monitore den Small-Modus zum Standard machen. Die 13px Schrift ist deutlich besser lesbar.

Was die Kommentardarstellung angeht, so sind das auch meine Gedanken gewesen. Wie gesagt, dazu kommt ein Beitrag ... und dauch das Script wird noch weiter verbessert.

@Dieter

Darüber hinaus erzeugt deine Seite schon relativ früh einen horizontalen Scrollbalken.

Nun, das ist das Leben mit dem Seitenzoom. Da Grafiken und Randabstände mitskaliert werden, kommt der Scrollbalken zwangsläufig eher. Dagegen kann man per CSS nicht viel unternehmen. Im FF reicht im Menü ein Klick auf Ansicht->Zoom->Nur Text Zoomen, um das vom FF2 gewohnte Verhalten zu reaktivieren. In beiden Fällen skaliert das Layout sehr gut.

PS: Wenn man Vorschau anklickt, dann springt die Seite nach oben und ich war erst mal verwirrt.

Das habe ich auch bemerkt. Das ist aktuell ein Problem der ExpressionEngine. Das Formular wird dynamisch generiert, weshalb ich den Sprunganker nicht beeinflussen kann. Mal sehen, mit jQuery sollte ich da aber rankommen und auch im EE Forum werde ich dazu mal was posten.

An Euch beide, Danke für das umfangreiche Feedback.

Gruß
Dirk

Verbesserungspotential wurden ja einige Kleinigkeiten schon genannt.
Mir persönlich ist sofort die gegenüber früher schlechter lesbare Schrift aufgefallen. Darüber hinaus erzeugt deine Seite schon relativ früh einen horizontalen Scrollbalken. Da sehe ich einen im Zusammenhang mit den seitlich angeordneten Kommentaren. Das liese sich bestimmt leichter abstellen, wenn die Kommentare - wie meistens üblich unter dem Artikel ausgegeben würden. Irgendwie hat sich das als Quasi-Standard etabliert und durch einen Link/Anker zu den Kommentaren beim Artikel-/Beitragskopf käme man auch ohne viel Scrollen selbst bei Nichtlesen des Artikels direkt zu den Kommentaren.

Das mit den aufgeschobenen Projekten kenne ich übrigens nur zu gut. Der Tag hat einfach zu wenig Stunden.

PS: Wenn man Vorschau anklickt, dann springt die Seite nach oben und ich war erst mal verwirrt.

Die Feinheiten erschließen sich nicht sofort und gleich. Man muss zunächst ein bisschen rumspielen und auch mal unter die Haube gucken.

Zur Schriftgröße
Für die linke Seite des Blogs wurden 14px als Schriftgröße festgelegt (16px x 87,5%). Ich wunderte mich zunächst, dass mir die Schrift so klein vorkommt, normalerweise kann ich eine 14px-Schrift ganz gut lesen, hier muss ich auf 120% zoomen! Warum? Das dürfte mit der Formatierung der Schriftfamilie zusammenhängen:
font-family: Calibri, „Trebuchet MS“, Verdana…
Von diesen drei Schriftarten ist Calibri am kleinsten! Aha?!
Frage: Könnte die Lesbarkeit vielleicht durch einen stärkeren Kontrast noch verbessert werden? 

Zum Problem mit den Kommentaren
Der Mensch ist doch ein Gewohnheitstier! Selbst erfahrene Profis äußern sich etwas befremdet bzw. beklagen sich, dass die Kommentare nicht unter den Beiträgen, sondern rechts daneben stehen.
Mich stört das überhaupt nicht, ich finde das sogar gut.
In vielen Blogs muss man endlos nach unten scrollen, wenn man alle Kommentare lesen will, die Seite wird immer länger und rechts und links bleibt viel ungenutzte Fläche. Stehen die Kommentare rechts neben den Beiträgen, wird die Seitenfläche besser genutzt.
Mir gefällt auch, dass zunächst nur die letzten 5 Beiträge angezeigt werden – will man nur die letzten Beiträge sehen, muss man nicht die ganze lange Liste nach unten scrollen. Und alle Beiträge sind doch nur einen Mausklick entfernt. 
Ein Mausklick genügt auch, um zum entsprechenden Formular zu springen, will man den Beitrag kommentieren. 
Das alles ist gut durchdacht und umgesetzt und auch sehr bedienungsfreundlich.
Vorschlag: Vielleicht wäre der Link „Nach oben“  unten in der Sidebar besser aufgehoben, im Footer könnte er leichter übersehen werden.
Zum Styleswitscher
Die Funktion des Styleswitchers hat sich mir zunächst nicht auf Anhieb erschlossen. Der Beitrag 23 von Kersten Lorenz hat mich veranlasst, mit dem Styleswitscher etwas rumzuspielen.
Auf meinem Flachbildschirm mit 19 Zoll beträgt die maximale Seitengröße von 1280x1024.
Bei dieser Seitengröße und bei Seitengröße 1024x768 ist es egal, ob Big Screen oder Small Screen eingestellt ist, die Breite von body beträgt 1259px bzw. 995px.
Bei einer Seitengröße von 800x600 beträgt die Breite von body 771px, bei Big Screen erscheint ein vertikaler Scrollbalken und rechts verschwindet der weiße Hintergrund zum Teil. Bei Small Screen verschwindet der vertikale Scrollbalken und der weiße Hintergrund wird vollständig angezeigt. Aha?!
Denkste!  Dirk hat nachgebessert - siehe Beitrag 25
Das was ich oben (in meinem Entwurf) geschrieben und auch beim Schreiben jetzt nicht gelöscht habe, stimmt nicht mehr. Der weiße Hintergrund wird jetzt auch bei Seitengröße 800x600 sowohl mit Big Screen als auch mit Small Screen vollständig angezeigt, mit Big Screen erscheint der vertikale Scrollbalken, der allerdings auch mit Small Screen nicht verschwindet.  Das trifft jetzt sogar auf die Seitengrößen 640x480 und sogar 340x340 zu. Nun weiß ich wieder nicht: Wozu braucht man den Styleswitscher? 

Dirk schreibt im Beitrag

In einem der nächsten Artikel werde ich etwas näher auf den hier umgesetzten Entwurf eingehen und auch ein wenig über die typischen Stolpersteine berichten.

Auf diesen Artikel darf man gespannt sein – dann werden sich dem Betrachter noch mehr Einzelheiten und Feinheiten erschließen.

Wenn man das Browserfenster verkleinert, verschwindet der weiße Hintergrund an der rechten Seite.

Danke für den Hinweis. CSS ist halt doch komplexer als man denkt. Das Problem sollte jetzt behoben sein.

Räusper ... etwas nörgeln muss ich auch. Das mit den Kommentaren rechts, finde ich als Idee gut, aber aus Usability-Sicht auch net - wie einige der Vorredner - so optimal.

Mir gefällt das design auch sehr gut.

Mit den Kommentaren auf der rechten Seite kann ich mich aber auch nicht anfreunden. Man ist es einfach anders gewöhnt. Auch bei der Technikwürze brauche ich immer einen kleinen Moment bis ich merke das sie nicht da sind wo ich sie vermute. Ich denke das es durchaus Nutzer gibt die sie nicht auf den ersten Blick finden und darum weiter ziehen ohne sich an der Diskussion zu beteiligen.

Ansonsten würde ich das Logo noch als Link zur Startseite anlegen. Auch hier schlägt die Gewohnheit zu. Selbst wenn der Home Link direkt darunter sitzt – Ich klicke zu erst auf das Logo.

Ansonsten ist es wirklich super geworden.

PS: Gibt es einen zusammengefassten Feed für Essays und Blog?

Feedback hast du ja schon von mir bekommen. Glückwunsch zu der sehr gut gelungenen Umsetzung!

Ich mag langes Scrollen nicht, um an die Kommentare zu kommen.

Naja, eigentlich vergrößert sich der Scrollweg, weil ich ja nach dem ich den Artikel gelesen habe erst wieder hoch und dann wieder runter scrollen muss. Und das länger, weil die Spalte so schmal ist.

Und dann muss ich hier noch auf alle Kommentare klicken, weil ich ja nicht weiß ob ich vielleicht doch noch einen Kommentar nicht gelesen habe. Für mich eine sehr ungewohnte und anstrengende, fast „stressige“, Art Kommentare zu lesen.

Noch ne Frage: Der Stylesswitcher wirkt nicht auf alles. Die Kommentartexte zB. bleiben so klein. Ist das gewollt?

Ja, das ist Absicht. Die Kommentare werden auch im big screen Layout schon mit Schriftgröße 12px ausgegeben, kleiner wollte ich es auch im small screen Modus nicht mehr machen. Daher werden nur Überschriften und der normale Contentbereich korrigiert, sowie die Größe der Titelgrafiken und die Mindestbreite dann auf 760px heruntergesetzt.

Ein paar Optimierungen an den Stylesheets sind sicher noch nötig, aber ich möchte zunächst diesbezüglich etwas Feedback einfangen.

Glückwunsch, ganz großes Kino! Tolles, klares, benutzerfreundliches Layout. Die Kommentardarstellung ist mein Favorit ebenfalls nicht, aber das wird sich als weitere Konvention durchsetzen. Also: tolle Arbeit, tolle Site.

Ich durfe die Webseite ja vorab schon einmal begutachten und stelle schon dort fest, dass dir echt was feines gelungen ist.
Bei den Kommentaren arbeite ich bei Techikwürze ja auch noch an einer Lösung. Und obwohl ich deine Kommentarfunktion von dir kannte, hat mich verwirrt, dass ich nicht beim ersten Kommentar anfange zu lesen, sondern weiter hinten. Vielleicht zeigst du erst alle, wartest drei Sekunden und klappst dann alle anderen zu. Dann weiß man, dass da noch mehr sind, aber der Übersicht halber versteckt werden.

Da ist das Ding!

In diesem Zusammenhang natürlich Gratulation zum neuen Design und auch zur weiteren Annäherung an die Zugänglichkeit. Kompliment vor allem zu den zahlreichen Detail-Lösungen, ich fühle mich inspiriert.

Ich persönlich bin aber kein Fan von den Kommentaren am Rand, ich habe zuerst den Text gelesen und mich dann gewundert wo die „versprochenen“ Kommentare denn geblieben sind :)

Ich mag langes Scrollen nicht, um an die Kommentare zu kommen. Daher habe ich mir hier etwas besonderes überlegt. In den nächsten Tagen werde ich auch etwas ausführlicher auf die Kommentaransicht, speziell auf die dynamische Darstellung der neuesten Kommentare eingehen.

Freue mich schon auf weitere informative Blog-Posts und die CSS-Spielwiesen.

Greetings

Das Layout ist schön klar. Ärgerlich ist nur, daß Firefox die Schrift so schlecht darstellt. Aber da ich ja eh ein RSS-Leser bin, wird mir das nur auffallen, wenn ich mal kommentiern will. Kommentare per RSS, das wär’s :-)