Interna: Layout 4.0
07.04.2010 in: CSS, Interna, Webdesign und WordPress • 14 Kommentare
Ich sage es gerne und darob immer wieder: Eine Website ist kein Zustand, sondern ein Prozeß. Diese Website verstehe ich vor allem als technische Spielwiese für Experimente, die ich bei meinen Kunden noch nicht wage; also gilt hier sowieso nichts als ›fertig‹.
Vorletzte Nacht habe ich eine Version meines Themes hochgeladen, die gleich ein ganzes Rudel kleiner Schliffe eingeführt hat:
- Die Kopfgrafik kann niemand mehr als ›tote Katze‹ interpretieren. Auch das Favicon habe ich erneuert.
- Das Stylesheet für Handhelds und ähnliche Kleingeräte habe ich entsorgt. Mein normales Layout paßt sich von allein an, und es brauchte nur wenige kleine Schubser, um auf einem schmalen Bildschirm gut auszusehen. Wieder einen Request gespart.
- In einem großen Fenster wird der Inhaltsblock nun zentriert. Ich muß nicht verstehen, warum jemand seinen Browser weiter als 1200 Pixel aufzieht – aber ich akzeptiere das Bedürfnis, in diesem Fall lieber geradeaus zu sehen als nach links.
- Das Theme unterstützt endlich auch Vorschaubilder; das werde ich künftig intensiver nutzen.
- Das Suchfeld wird bei
:focusdeutlicher hervorgehoben. - Navigation und Fußzeile haben jetzt kein eigenes Hintergrundbild mehr.
- Das Hintergrundbild für den
bodyhabe ich zunächst umgedreht; langfristig liebäugele ich aber wieder mit einer ›Tapete‹, auch wenn das nicht jeder mag. - Ich habe viele Tricks aus der
functions.phpin ein eigenes Plugin ausgelagert. Dazu schreibe ich demnächst mal etwas. - Die neuen Kommentare werden auf jeder Archivseite dargestellt. Dafür kommen sie aus dem Cache. Auch dazu werde ich bald sehr ausführlich schreiben.
- Die Überschriften der Archive zeigen die Zahl der Artikel insgesamt an, nicht nur die der jeweiligen Seite.
- Auf der Seite ›Alle Artikel‹ habe ich die Vorschau etwas verbessert. Einfach mal mit der Maus drüberfahren … die Tastaturbedienung bedarf noch ein wenig mehr Arbeit.
- Im
headgibt es auch einen Feed für meine Lesezeichen; das habe ich mir bei Sylvia Egger abgeguckt. - Die wichtigste und bislang noch ganz unsichtbare Neuerung: Gastautoren werden endlich angemessen herausgestellt. Warum das so wichtig ist, seht ihr bald.
Links alt, rechts neu:
Bestimmt habe ich nicht nur Probleme gelöst, sondern auch neue eingeführt – bitte weist mich darauf hin! Und wenn noch etwas offen ist, das ihr gerne anders hättet, dann habt sagt es bitte jetzt.
Außerdem suche ich noch nach einem leichtgewichtigen Script, das mit MooTools oder jQuery arbeitet und Tabellen schnell sortieren kann. Und zwar auch mit deutschem Datum und verlinkten Inhalten. Vorschläge?
Vorschlag: selbst ist der Mann ☺
Das Argument mit dem handheld-Stylesheet verstehe ich nicht ganz. Jeder vernünftige Mobilbrowser sollte doch @media:screen ignorieren und @media-handheld laden. Also ist das kein zusätzlicher Request. Und wenn doch, dann kommt halt in das normale Stylesheet ein @media {} rein und gut ist.
Ich find es schade, da die Seite hier sehr bequem auf meinem HTC ging. Die Navi ist schwerer zu Klicken (ist aber zu verkraften), der Skiplink fehlt (die Artikel fangen erst nach den ganzen Kommentaren an (ewiges Scrollen) und im Hochformat läuft der Header breiter als der Viewport, bedeutet horizontaler Scrollbar. (HTC 480x800, Opera Mobile). Ich schick dir mal einen Screenshot, wenn Du willst.
@David: Alle Screenbrowser haben immer auch das Handheld-Stylesheet geladen. Den Skiplink blende ich jetzt mal für kleinere Auflösungen direkt mit ein.
Warum Opera Mini die Kommentare lädt, ist mir noch unklar. Darf er gar nicht. Auf jeden Fall steht direkt unter der Überschrift auch ein Skiplink, um sie zu überspringen. Ein Screenshot würde mich sehr erfreuen!
Nachtrag
Ich kriege Opera Mini 5.0 nicht zum Anzeigen der Kommentare; allerdings steht mir nur der Simulator zur Verfügung:
Die Hakeleien mit der Navigation und dem zu breiten Header habe ich jetzt hoffentlich etwas entschärft.
Klasse remake. Noch schlichter und gut auf den Inhalt konzentriert.
Interessant, wie die Seite reagiert wenn es eng wird. Den Code nehme ich mir mal vor. :-)
Deinen Anforderungen an sortierbare Tabellen ist das von mir bisher verwendete tablefilterNsort.js aus dem XWiki-Projekt nicht gewachsen. Es müsste ja der Spalte das Format übergeben werden, damit es die Sortierung richtig durchführt...
Mal sehen was bei Deiner Suche raus kommt.
David am 07.04.2010 · 14:32
Ach so, das ist natürlich unschön. Bilder sind per E-Mail unterwegs.
Struppi am 07.04.2010 · 16:20
Tabellensortierer: http://javascript.jstruebig.de/javascript/74/
schnell und sortiert nach deutschen Datum. Hat aber Probleme, wenn eine Spalte sowohl Zahlen als auch Zeichenketten enthält.
@Struppi: Ja, dein Script habe ich schon in der engeren Auswahl. Es kriegt die Nicht-ASCII-Zeichen und Kleinbuchstaben (trotz passenden Markups) aber auch nicht so recht hin; das ist wohl ein recht schwieriges Problem.
Ich möchte langfristig auch gerne alles innerhalb eines Frameworks ansiedeln, um eventuell die einzelnen Lösungen miteinander zu kombinieren. Ist vielleicht Wunschdenken …
Neues Design mit seinen Verbesserung gefällt mir sehr gut.
Erfreulicherweise gibt es ja bei über mich weiterhin ein Foto von Deinem Kater.
Erster Aufruf der Startseite mit meinem Smartphone Milestone ergab gute Les- und Bedienbarkeit.
Das neue Layout gefällt mir sehr gut! Sieht sehr viel besser als als das alte, besonders, dass du es jetzt mittig zentriert hast. Linksbündige Webseiten sehen auf nem 16:9 Bildschirm immer so dämlich aus^^. Auf meinem Palm konnte das ganze auch gut dargestellt werden! :)
Schaut sehr gut aus, auch wenn mir die schlafende junge Katze ebenfalls sehr gut gefallen hat - hat was sympathisches an sich gehabt...
evt. noch ein kleiner Design-Tip:
#content { margin-top: 20px; border: 1px solid #fff; }
Einfach kurz mal mit FireBug testen...
@Projecta: Den Abstand habe ich übernommen, guter Vorschlag. Der obere Rahmen jedoch bisse sich mit den abgerundeten Ecken (für die Mozilla hier keine Extrawurst mehr bekommt).
Deine Site gefiel mir auch in den vorherigen Versionen in Bedienbarkeit, Übersichtlichkeit und Gestaltung sehr gut.
Daran hat sich nichts geändert. :)
Ein paar Kleinigkeiten:
1 Unterstrich (Navi)
Mir erscheint es konsistenter, den Unterstrich, wenn er denn benutzt wird, zur Abgrenzung zum aktuellen Aufenthaltsort zu verwenden. Sprich: ihn für jeden aufrufbaren Link zu verwenden.
2 Schriftfarbe (Navi)
Die orange Schriftfarbe des aktuellen Aufenthaltsortes verschwindet, wenn ich z.B. hier im Kommentarfeld etwas eintrage. Allerdings habe ich noch nicht genauer geprüft, ob es an irgendeinem Userstylesheet von mir liegt.
Jedenfalls ist mir das bei anderen Sites noch nicht aufgefallen.
3 Kopfbild
Das Auge des lauernden Jägers, welches seine Beute, den Betrachter, fixiert, empfinde ich als kein sehr "einladendes" Mittel.
Es transportiert zwar Deine scharfsinnigen Qualitäten, aber die anderen Assoziationen überlagern diese Botschaft in meinem Empfinden deutlich.
Meine sehr subjektive Vorliebe, im Kopf das Gesicht des Anbieters zu sehen, habe ich Dir ja vor längerer Zeit schonmal mitgeteilt. Ich selber kann mir Gesichter von allen Objekten wohl am besten merken und sie mit Inhalten verknüpfen.
4 Weißraum (Navi)
Mir gefiele mehr Weißraum zwischen den Links der oberen Navi. Das erleichterte die Erfassung.
Auch bei den Navi-Links in "prevnext" unter jedem Artikel machte sich ein größerer Abstand IMHO gut.
@Andreas Borutta: Der Unterstrich unter unbesuchten Links in der Navigation ist ein Experiment: Ich will sehen, ob das Konsistenzbedürfnis vielleicht jemanden dazu verleitet, die Striche komplett »wegzuklicken«, also alle Seiten aufzurufen. Nicht sehr wahrscheinlich, aber einen Versuch wert.
Orange ist ein Navigationspunkt nur, wenn er nicht verlinkt ist. Auf dieser Seite hier wird das also nie auftreten. Mich erstaunt eher, daß du es überhaupt hier gesehen hast.
Ich glaube, daß das Katzenbild mehr über mich sagt als ein Porträtfoto. Ich möchte auch nicht jeden gleichermaßen gerne hier sehen, sondern am liebsten Leute, die genau wissen, was sie wollen. Insofern begrüße ich die von dir empfundene Filterfunktion.
Der Hinweis auf die Leerräume trifft ganz gut. Das werde ich demnächst mal ändern. Ich benutze kaum einmal die Maus und noch seltener einen Touchscreen; da entgehen mir solche Details manchmal – zumindest auf dieser Seite, die ich schon viel zu gut kenne.
Ich finde das neue Layout der sehr. Im Vordergrund stehen Artikel mit tollen und hilfreichen Tipps, die es sogar für Lairen (wie mich) möglich macht bestimmte Dinge umzusetzen. DANKE! Und mach weiter so ...