Damit diese Webseite korrekt und mit vollem Funktionsumfang angezeigt wird, benötigen Sie JavaScript. Wie Sie JavaScript in Ihrem Browser einschalten

2k11 – Fragen und Antworten

Das mögliche neue Standardtemplate für Serendipity, 2k11, hat speziell in der öffentlichen Testphase und insbesondere in den Kommentaren zu G+-Posts von mir ein paar Fragen aufgeworfen, die ich gerne nochmal ausführlich, in Ruhe und öffentlich zugänglich erklären möchte. Wohlgemerkt: Ich möchte nicht über diese Aspekte verhandeln – sie sind bewusst so, wie sie sind. Sie sind zudem relativ einfach und updatesicher anpassbar, dazu weiter unten mehr.

(Zum Einstieg in 2k11 sei auch nochmal auf die Ausgabe 9 des s9y InfoCamp-Podcasts verwiesen.)

Warum ist die Seitenleiste in den 2-Spalten-Layouts so breit?

Das muss man im Zusammenhang zwischen Inhaltsbereich (Artikel) und Seitenleiste sehen. Diesen habe ich nach zwei Grundsätzen bestimmt: Einerseits dem Goldenen Schnitt, einer uralten, nahezu universell anwendbaren Gestaltungsregel, die ästhetische, harmonische Proportionen zwischen mehreren Elementen über eine mathematische Formel herstellt, andererseits der Zeilenlänge im Inhaltsbereich.

Webseiten bestehen zu 95% aus Text, diesen am Bildschirm zu lesen, fällt dem Auge deutlich schwerer als gedruckten Text. Über eine adäquate Zeilenlänge stellt man sicher, dass das Auge Text gut erfassen kann – man geht davon aus, dass eine Zeile etwa 35 bis 45em breit sein darf, um ein angenehmes Lesen zu ermöglichen. Diese Zeilenlänge hat 2k11 in den meisten Desktopauflösungen (soweit das in einem flexiblen Layout überhaupt möglich ist), daran orientiert sich die Breite der Seitenleiste – sie nimmt schlicht den übrigen Platz ein.

Dabei entsteht ein gewisser Whitespace am rechten Rand der Seitenleiste, der allerdings für Benutzer mit Textzoom recht hilfreich ist – so ist einigermaßen sichergestellt, dass das Layout halbwegs hält, wenn der Text um bis zu 2 Stufen vergrößert wird (auch wenn diese Vergrößerung leider nicht in allen Webbrowsern zur Verfügung steht). Hinzu kommt, dass man in der Seitenleiste „mit allem rechnen“ muss – eine gewisse Platzreserve schadet da (und optisch generell) nicht.

Warum sieht das 3-Spalten-Layout so „gedrängt“ aus?

Ich mache kein Geheimnis daraus, dass 2k11 als Zweispalter konzipiert wurde, das 3-Spalten-Layout ist quasi „angeflanscht“, weil mir klar war, dass ansonsten viele Nutzer danach fragen würden. 3-Spalten-Layouts sind schwierig. Man muss (stets mit Blick auf das 2-Spalten-Layout) in einer Art Zieharmonika vorsichtig die Breiten der Seitenleisten und der Inhaltsspalte anpassen, wobei aber die Seitenleisten nicht zu schmal werden dürfen, weil bestimmte Seitenleistenplugins eine Art Mindestbreite haben, ohne die ihre Inhalte nicht sinnvoll dazustellen sind. Gleichzeitig möchte man die Inhaltsspalte nur so wenig schmaler wie unbedingt nötig halten, denn die Zeilenlänge kann auch zu kurz und dadurch schwierig lesbar werden.

Hinzu kommt, dass man normalerweise zwei Seitenleisten nutzt, weil man in den Seitenleisten extrem viele Plugins oder sonstige Inhalte unterbringen möchte, die ggf. auch noch von Drittanbietern stammen, wie etwa externe Widgets, die über HTML-Klötze eingebunden werden. Eine einzelne Seitenleiste würde dadurch überdimensional lang im Vergleich zum Inhalte. Es ist ganz logisch, dass das Erfassen des eigentlichen Seiteninhalts schwieriger wird, weil das Auge von den zusätzlichen Inhalten in den Seitenleisten abgelenkt wird. Ich kann nur empfehlen, die „Notwendigkeit“ der Seitenleisteninhalte genau zu prüfen – ich kenne kein Blog, das nicht vom Reduzieren der Inhalte in Seitenleisten in puncto Lesbarkeit profitiert hätte. Weniger ist mehr.

Warum hat 2k11 keine Farbschemata?

Die Farben in 2k11 sind dem üblichen s9y-Farbschema, vorgegeben durch das Projektlogo, entnommen, was für ein Standardtemplate absolut Sinn macht. Farben sind jedoch, zumal sie in 2k11 mit minimalen Ausnahmen (RSS-Icon) ausschließlich über CSS vorgegeben werden, auch für CSS-Anfänger relativ simpel zu ändern. Der Code-Ballast in Form von per Dropdown auswählbaren Farbschemata stünde in keinem Verhältnis zum Ergebnis, zumal das Basis-Farbschema bereits in blau gehalten ist, was erfahrungsgemäß die Farbe ist, für die sich die meisten Benutzer entscheiden. Auch würden intergrierte Farbschemata die Wartbarkeit und Anpassungsfähigkeit des Codes für neue Templates deutlich einschränken.

Warum ist das alles und mehr nicht über Theme-Options einstellbar wie in Bulletproof?

Auch das ist der Wartbarkeit und Ausbaufähigkeit des Templates geschuldet. 2k11 soll bewusst kein „Baukasten-Template“ wie Bulletproof sein, sondern eine solide Basis, in der dennoch die wichtigsten Dinge (Headerbild, Navigation, eigene Styles) für jeden einfach zu ändern sind.

Als kleines Projekt mit einer relativ kleinen Entwicklergruppe (auch und gerade im Templatebereich) fehlt es s9y in der Masse an Templates, ein Zustand, der immer wieder von Nutzern bemängelt wird. Also ist es sinnvoll, den wenigen und potenziellen neuen Templategestaltern eine solide Basisvorlage zu bieten, in die sie sich relativ leicht einarbeiten können. Nahezu jeder Entwickler nimmt automatisch das Standardtemplate eines Systems als Vorlage, also sollte sie diese Forderungen möglichst erfüllen. Die Tatsache, dass es kaum aus Bulletproof abgeleitete Templates gibt, belegt ziemlich deutlich, dass es in dieser Hinsicht auf ganzer Linie gescheitert ist.

Ich will all das aber trotzdem anpassen!

Es ist vollkommen legitim, dass der eine oder andere bestimmte Aspekte von 2k11 subjektiv schlecht findet. Ich kann es selbst bei einer recht überschaubaren Nutzerzahl nicht allen Recht machen. Genauso ist es allerdings aus den oben erwähnten Gründen unsinnig, aus 2k11 ein „Baukasten-Template“ zu machen. 2k11 lässt sich individuell anpassen – nur eben nicht ganz so simpel wie Bulletproof, was auch daran liegt, dass 2k11 „unter der Haube“ (Stichwort: Responsive Design) ein wenig komplizierter ist.

Für CSS-Anpassungen gibt es (wie in Bulletproof) die zuschaltbare Datei user.css, die nicht Teil des 2k11-Kerns ist, sondern vom Benutzer manuell angelegt werden muss, wodurch sie im Fall eines Updates von 2k11 und/oder Serendipity nicht überschrieben wird. Eine Basis für diese user.css könnt Ihr über den eigens zu diesem Zweck entwickelten Generator erzeugen (Danke an Sven für diese sehr gute Idee!) – der Generator kann Styles für veränderte Layout-Breiten sowie ein simples Farbschema erzeugen, Ihr müsst nur noch den erzeugten Code in einer user.css speichern. Allerdings dürfte das Ergebnis nur in den wenigsten Fällen bereits ideal sein, es sollte eher als Grundlage für weitere Feinanpassungen dienen.

Weitere Fragen? Immer raus damit.

5 Trackbacks

Trackback-URL für diesen Eintrag

20 Kommentare

Kommentar-Feed für diesen Eintrag
Konrad Bauckmeier

Konrad Bauckmeier am :

Erst einmal ganz vielen Dank für deine Arbeit, ich freue mich schon darauf, das Template auf meinem Blog einzusetzen! Das wird dann auch besser auf Mobilgeräten nutzbar sein und somit zumindest in meinem Fall besser sein, als ein extra Template für die Mobilgeräte.

Die Hintergrundinformationen sind erst einmal schlüssig und zum Verständnis hilfreich.

Beim Testen von 2k11 ist mir aufgefallen, dass der Standardabstand der Grafiken in Verbindung mit der breiten Seitenleiste bei mir dazu führt, dass die "Poor Mans Gallery" (drei Bilder nebeneinander) nicht mehr funktioniert, es passen nur noch zwei Vorschaubilder nebeneinander. Da werden ich dann also noch etwas schrauben und vom Ideal abweichen müssen...

Vielleicht machst du noch mal ein Spezialeintrag zum Thema Headerbild ? Für mich ist die neue Platzierung zwischen Titel und horizontaler Navigation ungewohnt. Es nimmt ja auch deutlich mehr Platz weg. Was siehst du für Vorteile darin? Warum war nicht die Variante von Grischa http://blog.brockha.us/ Standard?

Ich hatte im Demoblog einen Bug mit Opera bei der Ausfüllhilfe der Name/E-mail Felder berichtet. Bei Grischa gibt es das Problem nicht, es ist also lösbar. Hier in deinem Blog, welches ja nicht auf 2K11 beruht besteht das Problem aber auch.

Die Umsetzung mit dem User.CSS Generator finde ich sehr gelungen und ausbaufähig. Der Code des eigentlichen Templates bleibt schlanker und es werden doch viele Anpassungen auch für Mausschubser (=ich) möglich. Sinnvollerweise sollte der Link auf den Generator in der Config-Oberfläche verlinkt sein und es sollte sichergestellt werden, dass dieser auch noch in ein paar Jahren zur Verfügung steht.

Matthias Mees

Matthias Mees am :

Okay, der Reihe nach:

  1. Die Inhaltsspalte des 3 Spalters ist schmaler – das hat wenig mit dem Abstand der Bilder zueinander zu tun, es ist einfach nicht genug Platz für dieselbe Anzahl Bilder nebeneinander. Layout per Generator verbreitern oder Thumbnails kleiner machen.

  2. Das Headerbild als Hintergrundbild zu setzen (wie bei Grischa) ist erheblich komplizierter im Zusammenspiel mit dem responsiven Design – bzw. es ist eigentlich nicht komplizierter umzusetzen, aber erheblich schwieriger vorherzusehen. Da ist mit einfach die Wahrscheinlichkeit, dass sich unbedarfte Nutzer in den Fuß schießen, zu hoch. Zudem hätte ich dann etliche Theme-Options für Positionierung und Ausrichtung einbauen müssen, wollte aber die Anzahl der Theme-Options insgesamt gering halten. Wem es zuviel Platz frisst, der kann es ja abschalten oder wie Grischa per CSS als Hintergrundbild einsetzen.

  3. Das Opera-Ding habe ich im Issue-Tracker auf GitHub, es ist aber im Moment ganz einfach nicht oberste Priorität, weil es nur eine sehr, sehr kleine Nutzergruppe betrifft.

  4. Ich habe nicht vor, den Generator weiter auszubauen, es sei denn, jemand kommt noch mit einem sehr konkreten Vorschlag, den ich für gut und wichtig halte. Der Code ist bereits jetzt leidlich unüberschaubar, allerdings könnte sich gern jemand mit jQuery/Javascript-Kenntnissen beteiligen. Der Code des Generators liegt wie der Generator selbst auf GitHub, damit ist auch seine Verfügbarkeit gesichert.

Grischa

Grischa am :

Zu 2. noch mal: Ich glaube der größte Vorteil von Matthias Variante ist, dass sich das Bild an die Fenstergröße anpasst (so wie alle anderen Bilder auch). Das ist bei meinem Hintergrundbild nicht der Fall (bzw. habe ich noch nicht geschaut, ob man etwas ähnliches da auch machen könnte). Selbst wenn es ginge: Mit ziemlicher Sicherheit wird es dann zu klein, um den Header Text zu fassen, was z.B. mobil Portrait ziemlich schlecht aussehen würde. Ich persönlich fand auch die gefühlte Platzverschwendung relevanter als obige Probleme, und lebe dann damit, dass bei kleineren Screens nur ein nicht erkennbarer Ausschnitt meines Header Bildes gezeigt wird. Aber Matthias Ansatz hat eben wie immer gute Gründe.

Grischa

Grischa am :

Ich habe übrigens 2 Dateien, die ich immer patchen muss: comments.tpl und trackbacks.tpl. In beiden habe ich den SmartyCode für die Avatarbildchen eingebunden (und dann im Avatar Plugin Smarty angeschaltet), damit das Template entscheidet wo die hinkommen und nicht das Plugin, das über das Template ja keine Ahnung hat und sie somit immer an die gleiche Stelle mit Formatierungen rein patcht. Mit SmartyCode werden die Avatare dann ohne Formatierung übergeben, was es dem Template einfacher macht, diese zu steuern.

Da der SmartyCode hier neutral ist (funktioniert auch ohne Plugin und selbst wenn das Plugin nicht auf Smarty geschaltet ist), wäre das auch noch etwas, das in die Default Auslieferung hinein könnte. Es ändert das Aussehen höchstens, wenn Smarty in einem Avatar Plugin angeschaltet wurde.

comments.tpl: {if $comment.avatar}{$comment.avatar}{/if}

trackbacks.tpl: {if $trackback.avatar}{$trackback.avatar}{/if}

Beide habe ich direkt unterhalb des article tags hinterlegt.

Matthias Mees

Matthias Mees am :

Sagen wir so: Es gibt mittlerweile durchaus Techniken, mit denen man (in modernen Browsern) auch ein Hintergrundbild so anpassen könnte. Aber diese Methode ist mit weniger Aufwand robuster umzusetzen.

Über die Avatar-Geschichte habe ich genau so auch schon nachgedacht, weil mir die Standardformatierung des Plugins ein Dorn im Auge ist. Aber wenn ich das so einbaue, dann mault wieder irgendwer rum, wieso man das nicht über Theme-Options anders positionieren kann … :-/

Grischa

Grischa am :

:D

Na gut, das "Maulproblem" ist doch ein prinzipielles. Irgendwer wird immer über irgendwas maulen. So mault "man" jetzt darüber, dass Du die entsprechenden Smarty Codes gar nicht eingebaut hast. (Scherz).

Matthias Mees

Matthias Mees am :

Tjo, und damit wäre dann auch der von Konrad gefundene Fehler im Opera diagnostiziert: Es liegt an den Google Webfonts. Ich kann absolut nicht ausmachen, was daran das Schwärzen der ausklappenden Liste in Opera auslöst, aber es ist definitiv der Grund.

Und ich sehe ehrlich gesagt nicht ein, für ein einzelnes Exklusivfeature eines selten genutzten Browsers darauf zu verzichten, schöne Schriften anzubieten.

Konrad, hast Du dasselbe Problem in diesem Blog hier? Denn das verwendet (neuerdings) auch Webfonts von Google.

Konrad Bauckmeier

Konrad Bauckmeier am :

Sorry für die späte Antwort, ja wie bereits oben geschrieben, habe ich das Problem mit dem Schwärzen auch hier.

Ich gebe dir recht, wenn es am Font liegt und sonst überall funktioniert, würde ich auch nicht darauf verzichten.

Siegfried

Siegfried am :

Ich habe vor längerer Zeit mit mehrspaltigem Text experimentiert. Dabei habe ich herausgefunden, dass die optimale Spaltenbreite bei Text eher etwas schmaler ist. Bei mir habe ich drin stehen:

div.entry-content { column-width: 26em; column-gap: 1.6em; column-rule: thin dotted black; }

Plus die browser-spezifischen Varianten davon. Das funktioniert bei Fließtext ganz passabel. Ist in der Form natürlich nur für Fließtext anwendbar. Aber für mich reicht das erst mal.

Hagen Röwer

Hagen Röwer am :

Mir ist das jetzt unter Mac mit Chromium aufgefallen mit der Extension FastestChrome, die scheint anscheinend das Layout zu zerstören, d.h. der Inhalt wird so breit gezogen wie das Fenster, und die Sidebarinhalte tauchen ohne Design als nackte Inhalte unter den Elementen auf.

Ich habe das nur unter Mac beobachtet, unter Windows nicht. In Linux habe ich die Extension nicht. Da anscheinend FastestChrome anscheinend von FasterFox müsste ich mal diese Extension mit Firefox testen.

Testobjekte war der Blog von Grischa Brockhaus und der Blog von Dirk Deimecke, die schon auf 2k11 umgestellt haben.

Matthias Mees

Matthias Mees am :

Bei allem guten Willen, aber auf Browser-Extensions kann ich nun wirklich keine Rücksicht nehmen – wo sollte man da anfangen zu testen?

Hagen Röwer

Hagen Röwer am :

Ich habe nochmal den Chromium getestet, und zwar im Modus "Inkognito-Fenster" sowie jegliche Proxy (hier in dem Fall Privoxy) deaktiviert. Auch hier tritt der Fehler auf. Soll ich mal ein Screenshot anfertigen und zusenden? Die andere Webkit-Maschine Safari macht das nicht.

Matthias Mees

Matthias Mees am :

Äh, nein. Wie ich bereits sagte, kann ich auf einzelne Modi von Browsern, Wechselwirkung mit Proxys oder Erweiterungen keine Rücksicht nehmen. Wo soll ich da anfangen, zu testen?

Wenn es ein Problem ist, dass in einer halbwegs „normalen“ Browserumgebung ohne drollige Erweiterungen, seltsame Netzwerkbedingungen oder so auftritt, dann melde ihn bitte im Issue-Tracker auf GitHub mit einer möglichst klaren Fehlerbeschreibung oder per E-Mail.

Matthias

Matthias am :

Hi Matthias, :)

ich richte mir gerade 2k11 ein.

Im 2k11 Template ist das Textfeld für neue Kommentare in der Breite festgelegt.

Browser, mit denen der User die Textfelder in Breite und Höhe verändern können (wie hier zum Beispiel auch), können das Kommentartextfeld nicht mehr breiter machen.

Ist diese festgelegte Breite wichtig/Voraussetzung für das Responsive Design?

Vielen Dank und Grüße

Matthias

Matthias Mees

Matthias Mees am :

Jein. :)

Grundsätzlich soll zumindest innerhalb bestimmter Dimensionen die Breite des textarea beschränkt werden, damit man es nicht breiter ziehen kann als in der jeweiligen Auflösung sinnvoll. Das würde zwar nicht das responsive Layout kaputt machen, sieht aber einfach nicht gut aus. :)

Tatsächlich ist das aber im Moment in den „Desktop-Auflösungen“ etwas arg restriktiv. Ich hab's mal in die Issues aufgenommen, kann aber jetzt eine Weile dauern, ehe ich dazu komme. (Technisch gesehen ist die Breite übrigens nicht wirklich festgelegt, man kann per CSS festlegen, ob man textareas uni- oder bidirektional in der Größe verändern kann.)

Matthias

Matthias am :

Hehe, alles klar, danke dir für die Aufklärung!

Hagen Röwer

Hagen Röwer am :

Ich kann inzwischen für Chromium für Mac inzwischen Entwarnung geben, nach einem weiteren Update via Chromatic (19.0.1044.0 (Entwickler-Build 122251 Mac OS X)) hat sich anscheinend mein geschildertes Problem erledigt.

Ich bin dazu Deine Pinboard-Liste der 2k11-Benutzer durchgegangen.

Bla

Bla am :

Wenn ich in 2k11 (neueste dev) die Nutzung der user.css einschalte und keine in 2k11/ vorhanden ist, wird die in bulletproof/ genommen. Irritierend.

Matthias Mees

Matthias Mees am :

Ich kann verstehen, dass das für Nutzer verwirrend ist. Technisch gesehen macht es aber Sinn. Zunächst mal soll man die Option ja nur anschalten, wenn auch eine user.css im Template-Verzeichnis von 2k11 vorhanden ist. (Ansonsten wäre es auch ein unnötiger HTTP-Request, was eine potenzielles Performancebremse ist.)

Die user.css wird über serendipity_getFile eingebunden und ist damit (vermute ich) Teil des Fallback-Mechanismus für Templates, der z.B. auch dafür sorgt, dass .tpl-Dateien, die in einem Template nicht vorhanden sind, aus den „Fallback-Templates“ (erst BP, dann Serendipity 2.3) verwendet werden.

Ich werde aber mal klären, ob man das in 2k11 besser lösen kann.

Bla

Bla am :

Hab' noch mal rumprobiert und kann das Verhalten nicht reproduzieren, auch wenn ich Bulletproof wieder mit user.css einschalte und zurück zu 2k11 wechsel. Evtl. war da irgendein rudimentärer Rest aus alten Zeiten.

Kommentar schreiben

Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.
Markdown-Formatierung erlaubt