Skip to content

Das neue S9Y Template: 2k11

Ich bin schon länger ein Fan der Weboberflächen von Matthias Mees. Seine Templates sind meistens eher schlicht gehalten, dadurch aber immer klar strukturiert und schön anzusehen. In letzter Zeit habe ich bei ihm beobachtet, dass er sehr viel Wert darauf legt, die Weboberflächen auf allen Devices gut benutzbar und schick zu machen. Sie passen sich dem Gerät an.

Da ich selber mittlerweile locker zu 75% nicht mehr am PC surfe, ist mir eine gute "mobile Darstellung" recht wichtig geworden, weshalb ich damals das Mobile Output Plugin erweitert habe. Matthias hatte damals schon (zu recht) angemerkt, dass dieses nicht den optimale Weg geht. Es erkennt (einige) Browser und schaltet dann das Template komplett auf ein anderes, mobil besser zu benutzendes Template um. Matthias geht da einen anderen Weg: Das Template bleibt das selbe, es fügt sich aber per JS und vor allem per CSS (z.B. mittels Media Queries) geschmeidig in das Display ein.

Das hat einen enormen Vorteil: Es funktioniert überall, nicht nur auf "bekannten Devices". Auf den beiden Screeshots sieht man z.B. mein Blog auf dem Android, einmal Portrait und einmal Landscape. Man sieht schon deutlich (z.B. am Menü), dass sich die Optik angepasst hat.

2k11

Matthias hat nun für Serendipity das neue Template 2k11 nahezu fertig gestellt und einen Betatest gestartet. Das alleine war für mich ein Grund, mal mein in die Tage gekommenes, unsicheres Blog auf die neueste Serendipity Version 1.6 zu erneuern und in einem Testblog mit dem neuen Template herum zu spielen (und Matthias mit Fragen zu nerven). :-D

Der erste Eindruck von dem Template, so wie es ausgeliefert wird, war leicht enttäuschend. Es ist sehr schlicht, manche Aufteilungen sagen mir und einigen anderen nicht ganz so zu. Matthias sagte mir, dass es dazu gedacht ist, mit einer user CSS erweitert zu werden, nicht unbedingt dazu, es einfach so wie es ist zu benutzen. So nahm ich mir den Samstag Zeit, mich mal ein wenig mit dem Template zu beschäftigen und es zu erweitern. Mittlerweile ist mein Eindruck: Einfach nur genial!

Matthias baut gerade sogar einen Generator, mit dem man sich Teile seines users.css selbst zusammen stellen kann! :-O

Meine Erweiterung des Templates ist nahezu fertig und hier zu bewundern: Das Blog hat wieder einen ähnlichen Look wie vorher, hat aber nun all die schicken Features, die mich bei Matthias Seiten immer neidisch gemacht haben. Das Mobile Output Plugin konnte ich inzwischen komplett wieder aus meinem Blog entfernen, es wird einfach nicht mehr benötigt.

Vielen Dank für Deine Arbeit an dem Template, Matthias! :-)

Update: Leere Menü Selektionsbox

In dem ersten Screenshot oben sieht man unterhalb der Suche eine leere Selektionsbox. Dies ist ein Fehler, hier kann man normaler Weise einen der Menüpunkte auswählen. Nun ist auch das Problem gefunden: Es lag am Lightbox Plugin und hier speziell an der von mir ausgewählten Variante Thickbox. Diese scheint die Werte der Selektionsbox zu leeren. Wählt man eine der anderen Varianten (ich habe hier jetzt z.B. LightboxPlus), so tritt dieser Fehler nicht mehr auf.

Unbedingt dabei zu beachten ist: Falls ihr gecachte Artikel benutzt, müsst ihr alle eure Artikel einmal komplett manuell cachen (letzter Eintrag im Admin Menü "Einträge"). Ohne dies funktioniert ein Wechsel auf eine andere Variante nicht, es erscheint dann kein Popup. Falls ihr die Varianten erst einmal ausprobieren wollt so bietet es sich an, das Caching im Plugin "Erweiterte Artikel Einstellungen" temporär auszuschalten.

Update: Matthias schreibt ein paar Gedanken zu 2k11 auf.

Trackbacks

RobLen

RobLen on : RobLen via Twitter

Continue reading "RobLen via Twitter"
Ein Fan berichtet: Das neue #S9Y Template: 2k11 http://t.co/2h0bToae
Grischa

Grischa on : Serendipity mobil benutzen

Continue reading "Serendipity mobil benutzen"
Seit einiger Zeit bin ich nun schon von Posterous genervt: Absolut mangelhafter Support, Entscheidungen, die (meiner Meinung nach) in die falsche Richtung gingen, und dazu immer mehr Serverausfälle in letzter Zeit. Was ich allerdings an Posterous mag
Jesper S. Dramsch

Jesper S. Dramsch on : Des Blogs neue Kleider

Continue reading "Des Blogs neue Kleider"
Vielleicht habt ihr es gemerkt. Das Blog hat sich ein wenig gewandelt. Ich war mit den Designs, die ich bisher so probiert hatte meist unzufrieden. Sie haben für mich nicht die Möglichkeiten geboten, das mit dem Blog anzustellen, was ich wollte. Immerhin

Comments

Display comments as Linear | Threaded

Matthias Mees

Matthias Mees on :

1. „eher schlicht gehalten“ – Frechheit! ;-)

2. Die Anpassung an das Display hat *nichts* mit JS zu tun, wenn man mal davon absieht, dass den ollen IEs mittels JS die @media-Queries, die sie nativ nicht beherrschen, beigebracht werden.

3. Die Schlichtheit von 2k11 ist der Tatsache geschuldet, dass es ein Default-Template sein soll, das heißt aber nicht (wie Du es hier für meine Begriffe vermittelst), dass es halbfertiger Kram ist. Man kann 2k11 sehr wohl und sehr gut genau so benutzen, wie es ist – dass Ihr da alle was zu meckern habt, ist Eure subjektive Meinung. :-)

4. Es ist auch nicht wirklich „dafür gedacht“, es mittels user.css zu erweitern – es gibt diese Möglichkeit, was mir nicht mal unbedingt gefällt, aber nur so wird es für CSS-Laien überhaupt anpassbar. Trotzdem kann man es ganz wunderbar auch ohne user.css benutzen.

Grischa

Grischa on :

Wollen wir uns darauf einigen, dass das Template hervorragende Arbeit ist und seine Optik "Geschmackssache" (wobei ich in meinem Blog natürlich meinen äußere)?

:-D

Matthias Mees

Matthias Mees on :

Jede Optik, auch Deine, ist „Geschmacksache“. :-)

Grischa

Grischa on :

Natürlich! Somit darf ich 2k11 zwar technisch extrem toll aber eben "etwas schlicht" finden, oder? :-)

Zu meiner Optik hier: Nun ja. Find's schon recht schick, bei manchen Sachen muss ich noch mal drüber grübeln. Z.B. über die Kommentare, die im Moment so ein wenig an Traueranzeigen erinnern.. :-D

Konrad Bauckmeier

Konrad Bauckmeier on :

Danke für den Hinweis auf 2K11. Ich hatte schon einmal davon gelesen, aber wusste noch nicht, dass es schon einsatzbereit ist.

Was mich wundert, dass der Link auf den Betatest ins Leere führt. Auch das Demoblog bei Matthias welches ursprünglich unter 2k11.yellowled.de verknüpft war ist abgeschaltet.

Matthias Mees

Matthias Mees on :

Die Betatest-Einleitung steht auf Google+, der Post ist aber nicht öffentlich, weil er eigentlich nur meine G+-Kontakt, die Serendipity nutzen, interessieren dürfte. Damit muss ich nicht die anderen Kontakte dort nerven.

Das Demoblog ist beim Umzug meiner Domains zu einem neuen Hoster unter den Tisch gefallen, ich hatte aber schon ganz am Anfang angekündigt, dass er vermutlich nicht von Dauer sein würde, sondern nur für Tests online stehen würde.

Konrad Bauckmeier

Konrad Bauckmeier on :

Danke für die Klarstellung. Dann kommen also die Fragen ab sofort ins s9y-Forum? Erste Tests die ich heute gemacht habe, sind schon einmal sehr vielversprechend, etwas Feinschliff braucht es bei mir aber auch noch.

Matthias Mees

Matthias Mees on :

Forum wäre eine Möglichkeit, zumal es wohl in s9y 1.6.1 oder 1.6.2 ohnehin in den Kern wandert. G+ ginge auch, aber da scheinst Du nicht zu sein.

Issue-Tracker auf GitHub lieber nicht, da das meiste, was jetzt an Nachfragen kommt, individuelle Anpassungen sind, die wenig mit dem eigentlichen Template zu tun haben – es sei denn, sie entpuppen sich (wie bei Grischa) tatsächlich als Bugs.

Twitter ist dafür komplett untauglich. Zu guter Letzt kannst Du mir Deine Fragen natürlich auch mailen, das hat aber den Haken, dass die Antworten dann nicht öffentlich dokumentiert sind. Falls per Mail: Bitte gesammelt, keine Einzelfragen im Minutentakt. :-)

Grischa

Grischa on :

Übrigens.. Durch die ganze Rumspielerei mit dem Template hier habe ich wieder richtig Lust bekommen, das Blog auch zu nutzen. :-)

Außerdem kommen mir wieder Ideen, was ich an einigen Plugins geändert haben möchte. Ich sehe z.B. gerade, dass ich unbedingt noch mal an das Microblogging Plugin ran müsste, die Tweetbacks gehen aus mehreren Gründen im Moment ja gar nicht mehr.

Mal schauen, wie lange die Laune anhält und ob ich auch wieder ein wenig Zeit für s9y Plugins finde. :-)

Grischa

Grischa on :

Nanu? Für das auf- und zuklappen der Trackbacks gibt es doch so schicke Pfeile..

Am Android wird der zugeklappte aber nicht richtig dargestellt. Fehlt Android da etwa ein utf code?

Matthias Mees

Matthias Mees on :

Pffhh, da wird's jetzt echt lustig, das zu debuggen – die schicken Pfeile sind das neue HTML5-Element details, welches aber (da es leider noch nicht von vielen Browsern unter stützt wird) ein jQuery-Polyfill hat, welches das Element ggf. „nachbildet“.

Das Polyfill arbeitet definitiv mit UTF-8-Zeichen für diese Pfeile, es können also keine Grafiken fehlen oder so. Funktioniert denn das Ein-/Ausklappen grundsätzlich? Das wäre ja das Wichtigste, die Pfeile sind letztlich eye-candy …

Grischa

Grischa on :

Ja, die eigentliche Funktion klappt auch auf Android problemlos. Und hast recht, ist nicht wirklich wichtig, wäre nur schick. :-)

Wenn ich morgen im Büro dran denke, schaue ich es mir auch mal am Iphone und den ganzen Pads/Tabs an.

Matthias Mees

Matthias Mees on :

Das wäre super, so eine Testbatterie steht mit natürlich (leider) nicht zur Verfügung.

Das sieht mir ziemlich nach fe lendem UTF-8 Zeichen aus, so etwas Ähnliches gibt es in alten IE auch. Lustigerweise fehlt übrigens nur der „Zugeklappt“-Pfeil, der ausgeklappte wird korrekt dargestellt. (Android Standardbrowser in 2.3.3)

Grischa

Grischa on :

Ich habe gestern mal schnell ein wenig getestet. Das "Pfeil Problem" scheint (nur) ein Android Problem zu sein, auf dem Motorola Xoom (ein Tablet) war dies genauso vorhanden, ansonsten funktioniert das Template dort problemlos, alles sieht gut aus und lässt sich gut bedienen. Das Xoom hat so eine große Auflösung, dass das Blog dort wie am Desktop aussieht, man kann also noch viel vom Rahmen sehen. Wenn meine Augen mich nicht getäuscht haben, wurde aber der Schatten dort nicht dargestellt.

Auf dem Iphone: Keine Probleme erkennbar.

Auf dem IPad gab's ein Problem: Im Portrait läuft es wie es soll, wechsele ich nach Landscape, vergrößert sich zwar alles aber zu weit: Ich sehe dann ziemlich genau die linke und die mittlere Spalte, die rechte Spalte ist außerhalb des Screens.

Mir ist bei den Tests aber etwas grundsätzliches aufgefallen: Auf einem Display im Portrait Modus will man keine Seitenleisten haben. Das sieht ziemlich unnatürlich und irgendwie gequetscht aus. Und zwar völlig unabhängig von der Auflösung.

Das Auge erfasst einen Text nur in einer bestimmten Breite, deshalb begrenzt man diesen im Ladscape Modus auf beiden Seiten und nutzt den freien Platz für andere Elemente (wie eben Seitenleisten). Im Protrait Modus hat man aber genau eine Fläche, auf der man den Text "natürlich" verteilen kann. Dass dieser dann durch Elemente an der Seite "zusammen gequetscht" wird, sieht merkwürdig aus.

Bekommt man es mit den Mobile Queries hin, dass die Seitenleisten im Portrait Modus immer nach unten geschoben werden? Je nach Auflösung dann eben mit echtem Menü und 2 Spalten oder mit Selectbox und einer Spalte? Im Landscape Modus aber genau ein Verhalten, wie es jetzt implementiert ist? Das wäre in meinen Augen ideal.

Matthias Mees

Matthias Mees on :

Ein Problem speziell, aber nicht nur bei Tablets ist, dass sie sich in puncto Auflösung mit Geräten überschneiden, die den Modus portrait/landscape gar nicht haben, etwa Netbooks. Ist allerdings mittlerweile bei einigen Smartphones nicht anders.

Es ist niemals eine gute Idee, ein Layout auf ein bestimmtes Gerät oder eine bestimmte Gruppe von Geräten auszurichten. Geräte kommen und gehen. Auch die Aussage, in portrait-Modus wolle man immer einen Einspalter, finde ich gefährlich – das Zweispalten-Layout zumindest funktioniert in 768 Pixeln (iPad) ganz gut, der Dreispalter ist aus meiner Sicht (wie ich bereits mehrfach erwähnte), ohnehin fast unbrauchbar.

Abgesehen davon gibt es das @media-Query "@media only screen and (orientation: landscape)" – aber auch *das* ist *nicht* spezifisch für mobile Geräte, sondern bezieht sich rein auf das Verhältnis der beiden Bildschirmseiten zueinander.

Grischa

Grischa on :

Wie geschrieben: Es geht mir nicht um spezielle Geräte sondern um Landscape vs. Portrait (egal welches Gerät oder welche Auflösung).

Natürlich "funktioniert" das Template auf iPad Portrait, aber "man" will da einfach keine Seitenleiste haben. Weder zwei noch eine.

Ausnahme: Das Display ist so riesig, dass es z.B. die maximal gewählte Breite überschreitet. Dann kann man wieder anfangen, Seitenleisten einzuführen. Das war aber auf dem iPad noch nicht der Fall (selbst auf dem Xoom noch nicht).

Ist natürlich meine Meinung / mein Geschmack. Ich vermute aber, dass ich da nicht alleine bin..

Matthias Mees

Matthias Mees on :

Würdest Du denn sagen, „man“ will auch auf Laptop/Desktop in unter z.B. 800 Pixel keine Seitenleiste? Denn das wäre die Konsequenz.

Das empfinde ich z.B. *nicht* so, wobei Dein Dreispalter hier in 800x600 schon grenzwertig ist. Aber ich habe auch schon empörte User gehabt, die sich beschwerten, weil sie auf einem Laptop-Browser in 750px Breite das „Mobil-Layout“ serviert bekamen.

Grischa

Grischa on :

Ich bekomme den Eindruck, ich spreche arabisch (oder verstehe Dich nicht). ;-)

Ich sage doch die ganze Zeit: Unabhängig von der Auflösung sondern wenn es ein Portrait Screen ist. Ich habe noch keinen Laptop gesehen, der einen solchen hat, aber wenn der von Dir genannte das hat: Dann ja! Da sollten dann auch die Seitenleisten weg. :-)

Matthias Mees

Matthias Mees on :

Nein, Du sprichst kein arabisch – ich frage nur sehr gründlich und lieber 2× zuviel nach. :-)

Ich muss mal gucken – im Prinzip müsste das über das erwähnte orientation gehen. Ich bin nur immer noch skeptisch, was vermutlich daran liegt, dass ich es selbst noch nie auf einem Tablet so gesehen habe.

Außerdem geht es nicht komplett unabhängig von der Auflösung. Irgendwann will man mal die Zeilenlänge im Zaum halten, sonst werden Texte unlesbar.

Aber ich brüte da die Tage mal drauf rum. :-)

Grischa

Grischa on :

Arabisch: Dann bin ich beruhigt. :-)

Völig richtig, irgendwie müsste das von der gewählten Breite des Blogs abhängig sein. Wenn das Portrait Device deutlich breiter ist (wobei ich gerade keinen Anhaltspunkt habe, was "deutlich" bedeutet), will man dann wieder den Platz an der Seite ausnutzen und den eigentlichen Content nicht zu breit werden lassen.

Zum Tablet: Jap. Das erkennt man erst, wenn man das mal ausprobiert hat. Hätte ich mir vorher nicht träumen lassen, dass "man" das so will, als ich die Dinger in der Hand hatte, fiel mir das dann sofort auf.

Mein Desktop Monitor kann auf Portrait geschwenkt werden. Ich vermute, dass wäre dann ein Device, bei dem man dann *langsam* anfangen wollte, Seitenleisten zu haben.

Die im CSS eingestellte Gesamtbreite darf halt in keinem Fall überschritten werden. Vermutlich will "man" die Seitenleisten dann nur haben, wenn der Screen mindestens die komplette Breite schafft, evtl ein paar % vorher, aber nicht viel (da die Seitenleisten dann zu gequetscht rüber kommen). Das mit dem "gequetscht" könnte auch im Landscape ein Problem werden fällt mir gerade ein..

grübel..

Vielleicht muss man die Seitenleisten einfach viel später hinzuschalten? Ist das Zuschalten gerade von Pixeln abhängig oder von Prozenten? Evtl fällt das bei mir so auf, weil meine Blogbreite weiter als die von Dir ursprünglich gewählte ist und die Seiteleisten deshalb nun einfach zu früh hinzu geschaltet werden? Wenn das so wäre, dann würde das genau den "gequetschten Eindruck" erzeugen. (Mal so in's Blaue hinein gegrübelt)

Matthias Mees

Matthias Mees on :

Im Original hängt die Positionierung der Seitenleisten ausschließlich von der Bildschirmbreite ab: Ab 768px (iPad schmalere Seite) gibt es „echte“ Seitenleisten – das ist, soweit ich es auf dem Desktop emulieren kann, mit einer Seitenleiste sehr okay, mit zwei Seitenleisten grenzwertig. Mit zwei Seitenleisten ist aber in meinen Augen *immer* grenzwertig, zudem ist das Ganze subjektiv und es kommt sehr auf die tatsächlichen Inhalte an. Übervolle Seitenleiste mit quietschbunten Drittinhalten sah schon immer in jedem Layout nicht gut aus.

(Übrigens ist Deine Blogbreite gar nicht weiter, Du bist hier immer noch auf 70em/1120px maximale Breite und 96%. Und Dein Suchformular erzeugt in 800x600 horizontale Scrollbalken, weil es breiter als sein Container wird, fällt mir gerade auf.)

Ich glaube nicht, dass das eine Änderung für die Standardform ist. Möglich, dass es bei Dir durch die Anpassungen besser wäre, später auf das Desktop-Layout zu schalten, aber das kann ich nun beim besten Willen nicht im Original schon mitberücksichtigen. :-)

Was ich mir allerdings definitiv nochmal ansehen werde im Original ist der Dreispalter in Auflösungen zwischen 640 und 1024, evtl. macht es da tatsächlich Sinn, erst drei Spalten nebeneinander auszugeben, wenn die nötige Breite vorhanden ist.

Hans Klebmantel

Hans Klebmantel on :

Was mir nicht gefällt, ist das Besucher einfach wild kommentare

hinterlassen können und das Ohne vorherige Prüfung durch den Admin. Aber das ist 9sy typisch.

Matthias Mees

Matthias Mees Read on twitter: on :

Wie kommst Du denn auf das schmale Brett?

Es gibt selbstverständlich in s9y-Blog Wege, Kommentare zu moderieren und einer Spam-Prüfung zu unterziehen. Das ist eine reine Frage der Einstellungen und ggf. der installierten Plugins.

Wenn ein s9y-Blog Kommentare unmoderiert zulässt, ist das Sache des Blogbetreibers. Es hat weder etwas mit Serendipity noch mit 2k11 zu tun.

Matthias Mees wrote about: Mein neues Build-Tool: Grunt

Add Comment

E-Mail addresses will not be displayed and will only be used for E-Mail notifications.
This blog allows you to add audio comments using audioboo.fm. Create a new boo and enter the link to the page into the boo field.
record
If you enter your twitter name, your timeline will get linked to your comment.
Promote one of your recent articles
This blog allows you to announce one of your recent blog articles with your comment. Please enter your the corresponding URL as homepage and a selection box will pop up letting you choose an article. (Javascript needed)
(Requirements: 1 comments written)
Standard emoticons like :-) and ;-) are converted to images.
tweetbackcheck