17. November 2006 in Journal » Intern
Delighted Mini - Simplicity is King
Programmierung: Dynamik schafft Flexibilität
Die neue Ausgabe-Ebene der Website ist so ausgelegt, dass die drei Bereiche Journal, Tipps und Folio aus haargenau den selben Dateien bestehen. Nur die URL entscheidet, welche Artikel angezeigt werden, welche Farbe die Ãœberschriften haben etc.
Klar, kleine Unterschiede sind zwischen den Bereichen sind nicht zu übersehen, jedoch werden diese nur durch Ausnahme-Behandlungen hervorgerufen.
Ein weiter Vorteil der Dynamik ist das die globale Kontrolle mittels der Konfigurationssebene über einige Ausgaben. Denn signifikante Bereiche, wie die Anzeige von Gravataren, Google-Anzeigen und auch die Statistikführung etc. lassen sich über kleine Änderungen in einer einzigen Datei aktivieren oder deaktivieren.
Die Steuerungsebene hat sich dank mod_rewrite um 75% reduziert. In der voherigen Version dieser Website hatte fast jede Unterseite eine eigene Zeile in der .htaccess. Nun sind es gerade mal 25 Zeilen, wovon 10 dafür veranwortlich sind, dass die alten RSS-Feed URLs weiterhin funktionieren.
Design: Linear, schlank, schnell und sauber
Markup
Die XHTML-Struktur hat eine erhebliche Diät hinter sich. Wo sich vorher 30 KB Code und Inhalte getummelt haben, sind nur noch durchschnittlich 10 - 20 KB übrig geblieben.
Layout
Das Layout ist extrem linear geworden. Das Ziel von Delighted mini war es, dass Fließtext möglichst immer die gleiche Zeilenlänge hat. Dadurch bleibt beispielsweise ein Umgewöhnen der Lesegewohnheit zwischen Artikel und dessen Kommentare erspart. Hier gibt es aber auch wieder Ausnahmen, wie z.B. bei der Startseite oder im gesamten Infobereich.
Farben
Apropos Bereiche: Jedes Element der Website hat nun eine präzise Zugehörigkeit. Selbst die Links auf der Startseite, die auf die letzten Kommentare zeigen, unterscheiden sich farblich.
Die Farben sind grundsätzlich gleich geblieben:
- Journal: grün
- Tipps: orange
- Folio: blau
- Info: rot
Die Startseite ist führt direkt in dieses Prinzip ein, indem sie nicht nur die Bereiche vorstellt, sondern auch farblich passend kennzeichnet.
Die Bar
Nein, hier gibt es kein Alkohol - die Rede ist von der oberen Leiste, die in modernen Browsern immer sichtbar ist.
Diese zeigt links passende Sprungmarken, die sich von Seite zu Seite durchaus ändern. In der Artikelansicht gibt es beispielsweise die Sprungmarke zum Kommentar-Formular, die bei der Artikel-Übersicht keinen Sinn machen würde.
Rechts sind die RSS-Feeds zu finden. Es gibt nun endlich ein Feed für Artikel, egal ob Journal, Tipps oder Folio. Natürlich kann man die einzelnen Bereiche auch einzelnd abonnieren. Die Einzel-Feeds sind im Menü neben dem Komplett-Feed zu finden. Bei ausgeschaltetem Javascript wird man beim Klick auf "verfügbare Feeds" zu einer Alternativ-Seite im Info-Bereich geführt.
Das Archiv
Jede Datumsangabe eines Artikels besitzt einen Link zum dazugehörigen Monats-Archiv. Gleich neben dem Datum ist die Kategorie verlinkt, welche zum passenden Kategore-Archiv führt.
Die Chronik ist auf den Ãœbersichts-Seiten unten zu finden. Dort ist auch eine Kategorie- und Top-Atrtikel Ãœbersicht geplant. Aber alles zu seiner Zeit.
Diskussion geschlossen
Die Kommentarfunktion dieses Artikels wurde deaktiviert. Private Mitteilungen an Martin bitte per E-Mail an martin@labuschin.com. Danke.
48 Kommentare
Steffen am 17. November 2006 #
Das neue Design weiß durchaus zu überzeigen mit klaren Strukturen und Formen.
Was mir weniger gut gefällt, sind die zahlreichen Fehler im IE. Das du dann auf den Firefox verweist, ist für dich als Webdesigner keine elegante Lösung...mit ein wenig Arbeit kann man das sicherlich auch für den IE optimieren...
Zu der Technik:
Nutzt du immer noch Wordpress?
Zu der neuen Dynamik: Wie hast du das denn vorher verzapft? Hört sich für mich reichlich kompliziert an, da war der Wechsel zur Dynamik längst überfällig.
Grüße
Steffen
Martin Labuschin am 17. November 2006 #
Zu den kleinen Fehlern im IE komme ich leider erst morgen. Der Hinweis bleibt trotzdem. Die paar Prozent IE-Nutzer können sich wohl noch n Tag gedulden.
Zu der Dynamik: Nein, ich nutze kein Wordpress für Labuschin Webdesign. Die Dynamik war schon in der letzten version gegeben, jedoch habe ich seit dem viel dazugelernt und alles verbessert, was zu verbessern war. Allein die index.php hatte 400 Zeilen, die alles mögliche machten, nur nicht, was sie sollten :)
Schönen Abend noch.
Tobi am 17. November 2006 #
Hat schon was. Allerdings fällt es auf meinem Monitor ziemlich auseinander wenn sich die obere Leiste über 100% erstreckt, der Rest aber so gequetscht ist. Die Top-Leiste schreit nach einem Home-Button. Wenn sie schon da ist, warum muss ma dann scrollen?
Martin Labuschin am 17. November 2006 #
Gute Idee, Tobi. Ich werd mich morgen drum kümmern.
Wenn du eine Auflösung von 1600*1200 (oder höher) hast, empfiiehlt es sich ja nicht gerade mit Vollbild zu surfen. Das ist reine Platzverschwendung. Alle Auflösungen darunter lassen meines Erachtens die Leiste noch einigermaßen zusammenziehen.
Tobi am 17. November 2006 #
Nein, ich habe gar nicht so ein Monster. Ich finde es schon bei 1280x800 "lose".
Martin Labuschin am 17. November 2006 #
Also mein Notebook läuft auch mit 1280x800 und mir kommt es sehr gut so vor.
Aber nagut, das ist wohl Geschmackssache.
BenediktRB am 17. November 2006 #
Ich finde die Neugestaltung wirklich sehr gelungen. Die Leiste dort oben ist sehr hilfreich und mal was neues, bzw. habe ich es so noch nicht gesehen.
Auch die Akzentsetzung durch Hovergrafiken ist nett gemacht.
Alles in allem eine runde, schöne Sache.
Rainer am 17. November 2006 #
Sie verwenden den Internet Explorer, einen technisch veralteten und unsicheren Browser. Hier bekommen Sie Firefox mit Google Toolbar! Firefox ist absolut kostenlos, schneller, sicherer und angenehmer zu bedienen.
IE7 ist nach eigner Erfahrung schneller als FF. Außerdem ist er ebenfalls kostenlos und mindestens genauso einfach zu bedienen. Veraltet ist er schon gleich gar nicht. Diese Warnung ist also völlig überflüssig.
Nun liegt es an dir, deine Webseite soweit zu optimieren, dass sie dort fehlerfrei angezeigt wird.
Martin Labuschin am 17. November 2006 #
Ich weiss zwar nicht, wie gut du dich mit dem Internet Explorer auskennst, aber ich weiss, dass der IE den modernen Browsern um Jahre hinterher hinkt.
Kosten müssen nicht immer finanzieller Natur sein. Er kostet vielen Benutzern sicherlich Nerven, wenn dieser wieder einmal eine neue Startseite hat oder 5 Popups aufpoppen.
Schneller als FF. Vielleicht beim Laden von Websites, aber nicht beim Navigieren, Suchen oder beim Entfernen sensibler Daten.
Jeena Paradies am 17. November 2006 #
Mir gefällt das neue Design auch sehr. Das einzige was wirklich unschön ist, ist wenn ich oben auf den Link "Kommantare" oder "Jetzt kommentieren" klicke hüpft der Browser logischerweise so dass zum Beispiel die Überschrift von der Toolbar verdeckt wird. Das ist wirklich unschön und wurde von molily auch schon mal thematisiert: http://molily.de/css-position-fixed#css1
Zur zeit nerven auch die Gravatare, die unheimlich lange dauern bis sie geladen sind, ich arbeite gerade wieder mit einem Helfer an der Pavatar ( http://pavatar.com ) Specifikation, und es gibt auch schon ein paar Implementationen, ich bin gespannt wie das ganze weitergehen wird.
Martin Labuschin am 17. November 2006 #
Danke erstmal an alle, die an dem Design gefallen gefunden haben.
@ Jeena: Hm.. das mit den Überdeckungen lässt sich eigentlich gut beheben, indem man den verankerten Element einen negativen Abstand nach oben gibt. Undzwar mit dem Wert, wie das fixierte Element hoch ist. Dann braucht man nur noch den oberen Innenabstand den denselben Wert - jedoch positiv - geben.
Ich werd mich bei Gelegenheit drum kümmern. Danke für den Hinweis.
Martin Labuschin am 17. November 2006 #
Folgendes hat sich heute doch noch getan:
* Alle groben im IE 6 und IE 7 sind beseitigt.
* Cookies sind verfügbar
* Smartlinks funktioneren nun wirklich ;)
* Gravataranzeige aufgrund langer Ladezeiten deaktiviert
Ich genieße nun noch meinen wohlverdienten Abend. Gute Nacht.
Rainer am 17. November 2006 #
"Ich weiss zwar nicht, wie gut du dich mit dem Internet Explorer auskennst, aber ich weiss, dass der IE den modernen Browsern um Jahre hinterher hinkt."
Der IE7 kann in etwa mit dem Firefox2.0 verglichen werden. Beide bieten sehr ähnliche Funktionen. Was der IE noch hat ist ein klasse Feedreader.
Auch bei der Sicherheit haben beide einige Lücken - denkt nicht immer FF wär der Superbrowser schlechthin nur weil er nicht von MS ist.
Martin Labuschin am 17. November 2006 #
Der IE 7 kann noch nicht mal korrektes XHTML verstehen. Wir müssen alle Tag-Soup ausliefern, damit der IE keine weiße Seite anzeigt, wenn man uns besucht. Findest du das fortschrittlich?
Von CSS Unterstützung brauchen wir gar nicht erst reden...
Aber ich möchte jetzt auch nicht, dass sich dieser Artikel wieder einmal in einen kleinen Browserkrieg verwandelt. Also jedem das seine.
Rainer am 17. November 2006 #
dann mach doch die Warnmeldung einfach weg - sie stört nur und zerstört deine ganze Einfachheit, denn du willst ja auf alles Unnütze verzichten.
Martin Labuschin am 17. November 2006 #
Die Meldung komm nun nur noch im IE 6. Zufrieden? ;)
Jeriko One am 17. November 2006 #
Uuuiii. Bis auf so ein paar Kleinigkeiten gefällt mir das richtig gut hier, haste fein gemacht :-)
Schön wäre halt ein kleiner Teaser vom letzten Beitrag auf der Startseite. Deine Überschriften sind zwar immer aussagekräftig, dennoch würde es noch einen weiteren Leseanreiz schaffen. Die Überschrift der Kommentarliste sollte vielleicht etwas mehr Abstand zum Artikel haben, damit man besser zwischen den beiden Teilen unterscheiden kann (Stichwort Scanning). Und die Chronik sollte aufgeklappt werden, wenn man in der Bar auf den Archiv-Link klickt.
Zum Thema Gravatar, schau dir doch mal das Gravatar2 Plugin für WordPress an, das benutzt Caching und Timeouts. Da viele Besucher eh Wiederkehrer sind kann man so die Ausfälle des Gravatar-Servers ganz gut überbrücken.
Jeriko One am 17. November 2006 #
FF 2.0: Wenn ich auf Kommentar senden klicke, erscheint zwar "Kommentar wurde gespeichert", wird aber erst nach einem Reload angezeigt.
Und benutzt du script.aculo.us noch für was anderes als die Fading-Effekte? Dann würde sich vielleicht auch moo.fx anbieten, ist wesentlich schlanker. Ansonsten mindestens gzip-Kompression aktivieren, 177 Kilobyte sind kein Pappenstiel ;-)
Rainer am 17. November 2006 #
Super! Genau so habe ich mir das forgestellt. Jetzt bin ich rundum zufrieden :-)
Koka am 17. November 2006 #
Gefällt mir auf jeden Fall besser als das alte Design.
Kannst ja noch die Namen in den Kommentare mit der jeweiligen Website verlinken
Horst Scheuer am 18. November 2006 #
Dein neues Layout liegt genau auf meiner Linie. Auch ich bin ein Fan des Einfachen.
Martin Labuschin am 18. November 2006 #
Jeriko, danke für den Tipp mit dem Teasern auf der Startseite. Ich würde gerne moo.fx einsetzen, jedoch steig ich da nicht so durch. Bin absolut kein JS-Kenner, der sich mal eben ne Funktion für nen Effekt schreibt. Und die Doku von mad4milk kann man auch vergessen.
Christian Vogt am 20. November 2006 #
Das Design spricht mich ebenfalls an, was mir jedoch überhaupt nicht gefallen mag ist die Größe deiner Webseite, über 300KB müssen doch nun wirklich nicht sein oder? So passt der Name für mich leider überhaupt nicht zum Design.
Noch ein Fehler ist mir gerade aufgefallen, schau dir mal die Footerlinks an, irgendwie parst der da deine $_Server Variablen nicht.
Martin Labuschin am 20. November 2006 #
Wie du auf 300 KB kommst, ist mir schleierhaft. Diese Seite mit relativ vielen Kommentaren kommt gerade auf 30 KB.
Die Footerlinks müssten nun funktionieren.
Christian Vogt am 20. November 2006 #
Du darfst die Javascripte die du da eingebaut hast nicht einfach aussen vor lassen, die müssen nämlich wohl oder übel auch erstmal geladen werden. Anscheinend hast du das eben schon dezimiert, denn jetzt sind es "nur noch" 150KB. Wie ich darauf komme? Webdeveloper Toolbar -> Informationen -> Größen der verwendeten Dateien anzeigen.
Grüße aus Magdeburg, Christian.
Martin Labuschin am 20. November 2006 #
Danke für den Tipp mit den Größen der einzelnen Dateien. Ich denke, ich kann noch etwas an den Bildern komprimieren.
manuel am 20. November 2006 #
niiice! =)
Martin Labuschin am 20. November 2006 #
Durch ein paar Optimierungen der Bilder und der Stylesheets habe ich die Startseite nun auf 94 KB (inkl aller Dateien) herunterkomprimiert). Eine Übersichtsseite wie Journal hat nun nur noch 120 KB. Dieser Artikel ist nur noch 150 KB groß.
Vielleicht lässt sich noch mehr optimieren... musss ich mir heute abend mal näher anschauen.
Zufrieden? :)
Gruß Martin
Christian Vogt am 20. November 2006 #
Bitte Martin :)
Ja, ein wenig besser ist es schon, zumal das JS ja glaube im Cache behalten wird. Ich selbst war nur bis vor einem halben Jahr noch leidiger ISDN-Nutzer und weis daher wie schnell man diese armen Menschen doch vergisst, so gehts mir jetzt mit DSL16000 zumindest ;)
Ein Manko hab ich noch gefunden, etwas sehr merkwürdiges.
Webdeveloper sagt mir du nutzt folgende Grafik:
http://labuschin.com/style/delighted_mini/images/stripes.jpg
Das JPG wird mir mit 22KB ausgegeben, bei einer größe von 600px*1px, wie ist das möglich?
Martin Labuschin am 20. November 2006 #
Jo das hat mich auch gewundert. Die GIF Variante nimmt glücklicherweise nur 608 bytes ein. Damit wären wir bei 122 KB bei diesem Artikel.
Christian Vogt am 20. November 2006 #
Bei mir sogar nur 115KB ;) Ich denke das ist annehmbar. Brauchst du denn von den Javascripten wirklich alles? Ich meine mehr als die Scrollfunktionen verwendest du doch derzeit nicht wirklich oder?
Martin Labuschin am 20. November 2006 #
Hab nun noch GZIP angeboten, damit schrumpfen alle HTML-Ausgaben auf etwa 10% des Originals. Besser gehts nimmer.
Tom S. Weber am 21. November 2006 #
Sieht ganz toll aus Martin! Gefällt mir auf jeden Fall besser als das voherige Design.
Ich finde jedoch, adss die Gravatare überdimensionell gross rüberkommen, was wiederum die Ladezeit vergrössert ? nimm doch nur die halbe Grösse; spart Zeit und sieht noch "simpler" aus ;-)
Ps. der Footer scheint ein bisschen zu verpixelt aus.
Grüsse
Tom
Martin Labuschin am 21. November 2006 #
Danke Tom. Habe die Gravatare um 20 Pixel gekürzt. Damit wären wir bei 60 Pixel. Kommentare haben nun auch Permalinks und werden nicht von der Bar halb verdeckt.
Jetzt steht das Backend erstmal an erster Stelle. Dort gibts noch Einiges zutun...
Gruß
Michel Balzer am 21. November 2006 #
Sehr leicht muss man ja sagen :) Auch der "CSS-Frame" (position: fixed;) ist eine nette Sache, da fehlt aber wie bereits gesagt wurde ein "Home"-Link :)
Allerdings finde ich, dass der Text teilweise etwas lang läuft, aber Ansichtssache.
So gesehen gut gemacht ;)
Martin Labuschin am 21. November 2006 #
Dank dem recht großen Zeilendurchschuss ist eine durchschnittliche Anzahl von 75 Zeichen pro Zeile durchaus gerechtfertigt. Die Praxis wird es zeigen...
Tom S. Weber am 22. November 2006 #
Übrigens kannst du eine fixe Positionierung auch in IE erreichen: http://tagsoup.com/cookbook/css/fixed/
Grüsse
Michel Balzer am 23. November 2006 #
Kannst ja dem »html« eine #labuschin-com geben, dann kann das jeder selbst ändern mit der Zeilenlänge :D
Und danke für's Namen ändern. ;)
Martin Labuschin am 24. November 2006 #
Done! Danke für den Hinweis.
PS. Namensänderung: Kein Problem.
Martin Labuschin am 24. November 2006 #
Ich merke gerade, dass html keine ID besitzen darf. Ich erarbeite heute noch eine Lösung dafür, dass ich dem body die id "labuschin-com" geben kann. Dazu muss ich aber die CSS Files ändern da die auf andere body-IDs aufbauen. Etwas Geduld ist daher gefordert. Ich hoffe, dass es nicht allzu dringend ist :)
Michel Balzer am 24. November 2006 #
Ist mir vorhin auch mal aufgefallen. Kann auch sein, dass die eigentliche "Lösung" auf was anderem aufbaut. Tschuldigung für Falsch-Infos.
Alexander Look am 25. November 2006 #
Deine neue Seite sieht echt schick aus. Das mit der fixen Bar ist eine Superidee. Habe das Gefühl, dass durch die Javascripts das Scrolling beeinflusst wird, und zwar insofern, dass der Text bei Scrollen ruckelt. Außerdem zeigt der Validator noch eine kleinen Listenfehler.
mfg Alexander
Johannes Leis am 27. November 2006 #
Wow, lange nich mehr auf deiner Seite gewesen. Absolut klasse das Design. Respekt ;-)
Christian am 28. November 2006 #
Ein ein-spalten-Design mit soviel Funktionalität, echt genial! Mir gefällt besonders die Navigationsleiste die oben immer präsent ist und das man direkt zum kommentieren kommen kann, sehr schön!
Martin Labuschin am 28. November 2006 #
Danke für eure ehrlichen Meinungen. Hätte nicht gedacht, dass etwas so einfaches so gut ankommt.
Alexander Look am 28. November 2006 #
Ich finde, es war zu erwarten, dass dieses Konzept zumindest einen großen Teil an Befürwortern hat, da ja die Meisten, die sich auf deiner Seite bewegen aus dem Bereich Webdesign/-programmierung kommen und somit nachvollziehen bzw. beurteilen können was wichtig ist bei einer Seite, und das Etwas schlichtes, gut geordnetes und sich auf die Grundfunktionen beschränkendes Design einem total überladenen, mit Grafiken und unnötigen Code vollgestopften Design, vorzuziehen ist. Keine falsche Bescheidenheit.
Btw: Wie machst du das mit dem setzen des Cookies um sich die Eingaben beim Kommentareschreiben bspw. zu sparen ? Wird der automatisch auf eine bestimmte Zeit gesetzt oder wird der beim Seitenaufruf aktualisiert, sodass die Gültigkeitsdauer wieder auf einen bestimmten Wert gesetzt wird ?
Ich frage, weil es ja auch mal sein kann, dass man in einer Bibliothek oder so deine Seite besucht und dann evtl. solche vordefinierten Felder nicht unbedingt von Vorteil sind wenn sich der nächste auch deine Seite anguckt....
mfg Alex
Martin Labuschin am 28. November 2006 #
Der Cokie wird gesetzt, wenn ein Kommentar gespeichert wird. Dieser gilt dann 30 Tage und wird beim nächsten Kommentar des Autor erneut auf 30 Tage verlängert.
Klar in Internet Caffees ist das ein nicht ganz so praller Effekt. Jedoch plane ich eine Abfrage, die bestimmt, ob ein Cokie gesetzt wird oder nicht.
Der Vorteil ohne Abfrage ist eindeutig klar: Der Kommentar kann schneller abgeschickt werden um beim nächsten Kommentar freut man sich über ein individuell angepasstes Formular.
Alexander Look am 28. November 2006 #
Evtl. kann man diese Funktion, dass der Cookie gespeichert bleibt auch in dem Cookie speichern, sodass einmal bestätigt werden muss, dass die Daten in einem Cookie gespeichert werden, jedoch diese Funktion nicht wieder erneut gewählt werden muss sondern nur ggf. deaktiviert werden kann.
Gruß Alexander