Neues Design »western« ist das Thema | 22. Januar 2005 um 06:04 Uhr /
Es ist ein schwüler Sonntag Nachmittag in der heißen Wüstenstadt New Varberg. Der Sheriff - sie nennen ihn »Jeena Paradies« - ist unterwegs in seine neue Stadt. Bisher hatten die Schurken im Webdesign freie Hand, aber jetzt ist Schluss damit, jetzt wird aufgeräumt! Er hat auch einen Verbündeten namens »Pity« mitgebracht. Ein Meisterdetektiv, der ihm beim Suchen immer treu zur Seite steht.
Design
Wie schon einmal erwähnt wollte ich für meine Seite unbedingt ein flüssiges Design - und hier ist es endlich, es hört auf den klangvollen Namen »western«.
Grafiken
Bei den meisten Grafiken hat mir dieses mal mein Bruder, Karl Pannek vom Flashtac Team, geholfen, denn er kann sehr gut mit seinen Vektor-Zeichenprogrammen umgehen. Er hat alle Icons, die er für diese Seite produziert hat für euch zum kostenlosen Download auf der Seite Freie Icons bereitgestellt.
Flüssiges Design
Die Idee kam über den Schwung, welchen ich einbauen wollte, nachdem ich von meinem Box-Design der vorherigen Version endgültig genug hatte. Das hat sich nach einigem Herumgepfusche verselbständigt und wurde eine eigene kleine Welt, die sich jetzt auf jeder Seite meiner Webpräsenz abspielt. Der Schwung hilft dabei, den Head sinnvoll abzuschließen, ohne dass er bei größeren Bildschirmen wiederholt werden muss.
Ich habe dennoch einige max-width eingesetzt, um bei riesigen Fenstern nicht zu lange Laufweiten des Textes zu haben, die dann nur schwer lesbar sind. Das gilt aber nur für Fließtext, alles andere darf sich frei bewegen, mal sehen wie das angenommen wird.
Browserstatistik
| % | Browsername |
|---|---|
| 36,59 | Mozilla |
| 30,19 | Opera |
| 16,74 | Internet Explorer |
| 16,48 | andere (Konqueror, RSS Reader, Suchmaschinen Robots, usw.) |
So wie es aussieht besuchen meine Seite immer weniger Leute mit dem IE, so dass ich max-width ruhig einsetzen kann, um die Menschen mit einem guten Browser zu belohnen und ihnen das lesen einfacher zu machen. Natürlich kann man die Texte auch mit dem IE lesen, aber man muss dann bei größeren Fenstern seine Textlaufweite selbst begrenzen. Das kann man machen, in dem man das Fenster verkleinert.
Farben
Ich wollte, wie schon bei der letzten Verison, schöne warme Farben haben, die dem Auge schmeicheln. So kamen wir auf das warme Orange des Sonnenunterganges wie in der Wüste Schwedens.
Um einen Kontrast zu schaffen und einen hellen Hintergrund für die Schrift zu bekommen legten wir ein beiges Blatt Papier auf den schwarzen Hintergrund und ließen den Header und das Blatt ein wenig miteinander verschmelzen. Es war zwar vor allem im IE mit seinen bescheidenen CSS Fähigkeiten und seiner komischen Interpretation derer ein Kraftakt, aber schließlich hat es doch geklappt.
Menü
Die Idee zum Menü ist die einer alten Schatzkarte. Auf dieser ist der zu gehende Weg eingezeichnet. Die Position an welcher man sich gerade befindet wird mittels eines kleinen Fähnchens gekennzeichnet.
Kommentare
Vorschau
Auch bei den Kommentaren hat sich einiges geändert. Das was am meisten gefehlt hat, eine Vorschau, ist nun implementiert. Sie zeigt - anders als bei so manch anderem Weblogsystem - den Kommentar genau so und an der gleichen Stelle, wie er dann nach dem Veröffentlichen aussehen wird.
Globally Recognized Avatar
Ich habe auch das Gravatar eingeführt. Das ist das kleine Bildchen neben jedem einzelnen Kommentar. Die Idee dahinter ist, dass man beim Kommentieren in Weblogs meist eine E-Mail Adresse hinterlässt, über die man zentral identifiziert werden kann. Der Dienst schickt dann, nachdem er eine Anfrage von mir bekommen hat das dort gespeicherte Bild. Dieses Bild muss jeder selbst beim anmelden hochladen.
Benachrichtigung
Es gibt ab jetzt auch die Möglichkeit sich beim Eingang eines neuen Kommentars per E-Mail benachrichtigen zu lassen. Abbestellen kann man es dann mittels des in der E-Mail angegebenen URL.
BBCode
Auch eingeführt, mit dieser Version »0.21 tuned« der Blogsoftware »Jlog« die hier läuft, habe ich BBCode in den Kommentaren.
- Zeilenumbrüche werden automatisch erzeugt und man kann die Codeschnipsel auch kombinieren.
- [url]http://example.com[/url]
- [url=http://example.com]Beispiellink[/url]
- [b]fett[/b]
- [i]kursiv[/i]
[quote]Ein zitierter Text welcher aus einer anderen Quelle stammt. Es empfiehlt sich die Quelle auch mit anzugeben.[/quote]
Metaangaben oben
Metaangaben zu den Kommentaren sind jetzt immer über dem eigentlichen Kommentartext. So sieht man sofort den Namen des Kommentators und kann dann den Kommentar besser einer Person zuordnen. Bisher waren diese Metadaten immer darunter, was dazu führte, dass man bei längeren Kommentaren erst einmal herunterscrollen musste um zu wissen wer schreibt, um dann wieder hochzuscrollen damit man den Text lesen kann. Im normalen Leben stellen wir uns ja auch immer erst vor, bevor wir das reden anfangen.
Kommentare ausblenden
Alle Kommentare kann man jetzt auch jeweils auf der Seite per JavaScript ausblenden, um sich den Weblogeintrag ohne Kommentare ausdrucken zu können. Natürlich lassen sie sich danach wieder einblenden.
Zusatzfunktionen
Suche
»Pity« wurde ja im einleitenden Text schon erwähnt. Er ist die neue Suchfunktion. Mit seiner Hilfe kann man in allen Weblogeinträgen, Artikeln und in der Sektion Webdesign suchen. Er hat die von mir immer schon sehr stiefmütterlich behandelte, und kaum aktualisierte Sitemap ersetzt.
Neue URLs beim Weblog
Ich habe lange überlegt wie meine neuen URLs aussehen sollen, damit sie leicht verständlich, merkbar und international sind. Vorher waren sie schon ziemlich gut, nur hatten sie das Problem, dass sie deutsche Monatsnamen beinhalteten, was ich nicht aufrechterhalten kann, wenn ich nach Schweden ziehe und anfange immer mehr in Englisch zu bloggen. Deshalb sehen sie jetzt folgendermaßen aus:
http://jeenaparadies.net/weblog/2005/jan/neues-design
Aufgeschlüsselt
http://jeenaparadies.net- meine Domain
weblog- Sektion der Seite, es gibt weblog, artikel und webdesign, wobei ich noch am überlegen bin ob es wirklich notwendig ist das Wort artikel in der URL ins Englische zu übersetzen. Erst einmal bleibt es so wie bisher, da in der nächsten Zeit wohl alle Artikel erst einmal in deutsch bleiben.
2005- das Jahr der Erscheinung des Eintrages
jan- der Monat der Erscheinung des Eintrages, es werden die englischen Abkürzungen verwendet: jan, feb, mar, apr, jun, jul, aug, sep, oct, nov, dec. Das sollte eigentlich überall verstanden werden, hier in Deutschland, bei den englischsprachigen Besuchern und bei den Schweden.
neues-design- Kurzüberschrift für die URL, wird von mir jedes mal von Hand eingegeben. Bisher folgte aus technischen Gründen immer ein Slash dieser Kurzüberschrift, welcher jetzt endlich wegfällt. Er war ja auch eigentlich entgegen meiner damaligen Meinung unsinnig. Jeder Artikel ist wie eine einzelne Datei zu verstehen und nicht wie ein Ordner, der durch einen Slash symbolisiert wird.
Alle älteren Links funktionieren aber dank mod_rewrite weiterhin und müssen nicht geändert werden, da die Umleitung für immer bestehen bleiben wird, ihr wisst ja:
Cool URLs don't change.
Neue RSS Feeds
Seit der Diskussion über RSS-Feeds haben viele ihre RSS Feeds auf Vordermann gebracht, genau das war meine Intention, vielen Dank für die Reaktionen. Jetzt bin ich an der Reihe.
Ich habe meine Blogsoftware jetzt so umgeschrieben, dass sie mir auch verschiedene RSS-Feeds produziert. Jetzt habt ihr die Möglichkeit die Artikel und die Weblogeinträge separat zu abbonieren. Natürlich bleibt die Möglichkeit alles in einem Feed abzuholen weiterhin. Dann ist da noch die Möglichkeit hinzugekommen all diese Feeds als Teaser zu bestellen.
Nebenbei habe ich von RSS 0.92 auf 2.0 geupdatet, damit im RSS-Reader das richtige Datum und die Uhrzeit der Veröffentlichung erscheint und nicht wie bischer die, des Downloads.
Resüme
Viel neues also bei mir, hoffentlich gefällt euch das was ich hier fabriziert habe. Ich freue mich schon auf Kommentare, Kritiken, oder auch Lob.
Jeena Paradies
Kommentare
Die Kommentare sind für diesen Eintrag geschlossen.




abonnieren.
nag aus Gießen schrieb am 22.01.2005
Meine Meinung zum neuen Layout kennst du ja bereits. Gerade habe ich einen kleinen Schönheitsfehler entdeckt.
Es betrifft
http://jeenaparadies.net/artikel/
Unter dem kursiven Einleitungstext und der folgenden Artikelübersicht gibt es in meinem Opera (7.50) keinen Abstand (sprich Absatz).
Unter
http://jeenaparadies.net/webdesign/leistungen
gibt es bei "Einteilung der Ihnalte auf Bildschirm, Drucker usw." einen Schreibfehler.
Ihnalte <-> Inhalte
Das soll es erstmal gewesen sein.
bis dahin
nag
Björn aus Ludwigshafen a. Rhein schrieb am 22.01.2005
Sehr schön geworden. Da hats mal wieder jemand geschafft, ein sehr persönliches und unverwechselbares Design zu stricken. Die Farben sind mal was anderes, warm und man fühlt sich hier sehr wohl. Super!
René aus Dresden schrieb am 22.01.2005
optisch sehr interessant - Das Gimmick oben ist lustig.
was fehlt: ein Favicon
René aus Dresden schrieb am 22.01.2005
bytheway: deine Browserstatistik ist sehr interessant ... bei mir ist der IE-Anteil leider noch etwas höher!
wahsaga schrieb am 23.01.2005
wow! wirklich mal ein super-schickes design, respekt!
tja, einen bruder, der's mit dem erstellen von grafiken drauf hat, könnte ich auch mal brauchen ...
dass es den feed jetzt auch als RSS 2.0 gibt, kann ich nur begrüßen. vor allem das fehlende datum und die fehlenden verlinkungen im reader finde ich bei 0.91 oder sonstwas immer extrem ätzend. (aber wenn du ihn noch validieren würdest, wäre schön - weil derzeit verweigert beispielsweise die "sage"-extension des firefox mit der meldung "xml-fehler" die anzeige ...)
ach nochwas, zur vorschaufunktion: dabei dann den ganzen blogeintrag und sämtliche kommentare nochmal anzeigen zu lassen, finde ich hyperfluid :-)
André aus Düsseldorf, Deutschland schrieb am 23.01.2005
Glückwunsch zum Relaunch.
Die Links im RSS Feed stimmen noch nicht ganz: http:///weblog/2005/jan/neues-design
Jeena Paradies aus Burgpreppach schrieb am 23.01.2005
Danke für die Tipps Jungs. Den language Fehler kann ich ganz leicht beheben, da sind die älteren Beiträge wohl noch ohne »language« in der DB drin. Das mit dem link, da habe ich vergessen die Konstante PARH davor zu schreiben, wird sofort erledigt.
Was ist aber mit dem <object> Tag? Warum darf das nicht im Feed sein? Ach ich sehe schon:
Hm komisch nur dass der Validator zwei Bilder gelb unterlegt anstatt des <object> Tags. Wie kriege ich die jetzt raus? Am besten wohl mit einem Regex.
Jeena Paradies aus Burgpreppach schrieb am 23.01.2005
RSS-Feeds sind jetzt endlich valide, so dass dem ungebremsten Feedvergnügen jetzt nichts mehr im wege steht. Auch die übrige Seite sollte jetzt überall valide sein.
Eric aus Leimen / Südwestpfalz schrieb am 23.01.2005
Schönes Design. Gefällt mir sehr! Angenehme Farben, gut zu lesen. So soll's sein!
Jeena Paradies aus Burgpreppach schrieb am 24.01.2005
Ich habe mein neues Design auch im SELFHTML Forum zur Diskussion freigegeben.
[update] Argh Wahsaga hast recht, habe wieder einmal nicht daran gedacht. Jetzt müssten es auch alle anderen lesen können :-)
wahsaga schrieb am 24.01.2005
@jeena: ich finde es auch unglaublich, aber angeblich soll noch nicht jeder einen /my/-account im selfforum haben ;-)
deshalb wäre ein link ohne /my/ evtl. angebrachter.
Matthias Ripp aus Bamberg schrieb am 26.01.2005
Hallo Richard, Dein neues Design gefällt mit ziemlich gut! Vielen Dank noch mal die gute Arbeit an meiner Seite http://worldheritage-forum.net !
kronn aus Berlin schrieb am 26.01.2005
Ganz nett, ganz schön, aber noch ein wenig ungewohnt. Ich bin aber zuversichtlich, dass ich mich schnell umgewöhnen werde, immerhin empfinde ich es als sehr lesefreundlich. Nur nach Schweden würde ich es nicht einsortieren (bin halt ein wenig voreingenommen).
Nur ein spontaner Verbesserungsvorschlag: Im Abschnitt "RSS-Feed" könnte man den Zeilenabstand so anpassen, dass die "XML Newsfeed"-Grafik besser reinpasst. Spontan sage ich mal 15px + 2px, also line-height:17px. An sich passt der geringe Zeilenabstand für die Seitenleiste aber recht gut.
Komischerweise finde ich die Navigation recht passend. Komischerweise, weil eine Schatzkarte doch eher in den Piratenbereich fällt. Die Idee der Flagge als Positionierungsanzeige finde ich super.
Der nächste Verbesserungsvorschlag: Den Abstand, der die Kommentare links begleitet, würde ich etwas verringern. Bei einer 1024er sieht sieht was zwar gut aus, aber bei meinem üblichen 852er Fenster werden die Kommentare doch arg an den Rand gedrängt.
Ein riesengroßes Dankeschön übrigens für die Vorschau-Funktion! Aber - und da muss ich dem wahsaga recht geben - dürfte es doch erheblichen Traffic hervorrufen, jedesmal den kompletten Beitrag inkl. Gravatar, Grafiken usw. erneut zu laden. Ein extra Vorschaufenster, in dem nur der eigene Beitrag und das Formular erscheinen, wäre meines Erachtens besser.
Insgesamt gefällt es mir (nachdem ich jetzt einige Zeit mit diesem Kommentar zugebracht und mich entsprechend eingewöhnt habe) recht gut, das neue Design. Nur was Schweden und Wüsten miteinander zu tun haben, verstehe ich nicht...
Jeena Paradies aus Burgpreppach schrieb am 26.01.2005
Hej, Schweden ist von der Fläche viel größer als Deutschland und hat dennoch nur ein Zehntel der Menschen ergo »Menschenwüste«, oder wie man es sonst noch verbinden kann ;-) Das Alte Design war ja auch nicht auf Deutschland bezogen, warum soll das neue auf Schweden bezogen sein? Nimm einfach die Geschichte »Es ist ein schwüler Sonntag Nachmittag...« als kleinen Aufhänger zum besseren merken meines Namens und gut ist ;-)
Das mit line-height und margin bei den Kommentaren werde ich gleich mal versuchen. Schatzkarten gab es aber auch im Wilden Westen, als es immer wieder zu Überfällen auf Postkutschen und Geldtransporte gab. Dann mussten die Verbrecher ihre Beute irgendwo vergraben. Aus genau diesem Grund gab es auch da Schatzkarten :-).
Naja so extrem finde ich das mit dem neu laden des HTML nicht. Immerhin werden alle CSS, JS, SWF und Bilddateien im Browser zwischengespeichert. Dann müssen bei dieser Datei zum Beispiel insgesamt ca 28kb an HTML heruntergeladen werden. Wenn ich eine Extra Seite mache werden das ca 6kb, also eine Ersparnis von 22kb bei der Vorschau, die wohl auch nicht so oft benutzt wird, wie das lesen an sich. Auch wenn jeden Tag 10 neue Kommentare reinkommen wird das »nur« 0.2MB mehr Traffic am Tag verursachen.
Der Nachteil ist aber für den User, dass wenn ihm bei der Vorschau noch etwas einfällt, er nicht einfach hochscrollen kann, um zu gucken was die anderen geschrieben haben Er muss stattdessen wieder zurück auf die andere Seite. So wie es jetzt ist sieht man außerdem genau wie der Kommentar sich in die Seite einfügen wird.
Das ganze mit einem PopUp zu lösen wäre vielleicht eine Möglichkeit, über die ich erst einmal mehr nachdenken muss :-)
elya aus Köln schrieb am 27.01.2005
Hi Jeena,
ich bin begeistert! Und völlig verzweifelt auf der Suche nach den zusätzlichen Flash-Gimmicks, die Du so geheimnisvoll angekündigt hast ;-) Auf der Suche danach habe ich allerdings zwei kleine Bugs gefunden, einen eher CSS-lastigen, und dann habe ich Deine Suche bzw. Deine Suche hat meinen Firefox (0.9) abgeschossen, beim Abschicken eines leeren Formulars.
Ich tippe auf eine Endlosschleife oder sowas...
Lieben Gruß von Köln nach Schweden,
von elya, neuerdings auch heftigst bloggend...
Jeena Paradies aus Burgpreppach schrieb am 27.01.2005
Hallo Elya,
Hm danke für das Testen. Ganz navollziehen kann ich das aber jetzt irgendwie nicht wirklich. In allen meinen Browsern (auch FF 1.0/Linux und Windows) funktioniert das tadellos. Ist das ganze reproduzierbar? Versuche mal JavaScript abzuschalten und es noch einmal zu versuchen.
Jeena
PS: hast du die Flash Gimmicks gefunden?
elya aus Köln schrieb am 27.01.2005
Ja, es ist mehrfach reproduzierbar, und zwar auch auf dem Win-IE 6 (der im übrigen vom Seitenaufbau noch extremer aussieht bei leerem Suchergebnis, fast schwarze Seite). Ich probier das gerne nochmal heute abend am Mac aus. Wie gesagt, ein leeres Suchfeld, und auf Absenden klicken.
Achso: ohne JS hab ich noch nicht probiert, muß jetzt auch weg, bis später.
Lieben Gruß,
Elya
P.S.: nein, verflixt, ich hab sie noch nicht gefunden ;-)
elya aus Köln schrieb am 27.01.2005
OK, jetzt hab ich meine diversen Browser noch ein paarmal abgeschossen, um den ?Fehler? einzugrenzen: wenn Du zweimal hintereinander einen Leerstring im Such-Textfeld ?eingibst? (das kommt vom sinnlosen Rumgeklicke auf der Suche nach easter eggs ;-)) und das Formular abschickst, steht im get-String der Browserleiste q=&x=14&y=10 oder so, jedenfalls ein leerer Parameter q. Beim zweitenmal Klicken hängt sich anscheinend das Script auf.
Auf'm Mac kommen dafür keine CSS-Merkwürdigkeiten vor.
Schöne Grüße,
elya
Jeena Paradies aus Burgpreppach schrieb am 28.01.2005
Ja jetzt weiß ich was du meinst. Das scheint wirklich irgendeine komische Schleife zu sein. Mein FireFox hat sich gerade auch aufgehängt. Opera hängt zwar auch ein bischen, aber dann fängt er sich doch wieder und geht weiter.
Ich werde mal eine kleine Testseite machen und schauen ob man das irgendwie verhindern kann.
Frau Paradies aus Schwedenland schrieb am 03.02.2005
Du machst immer alles so schön, mein Prinz! ;-)
geht di nix an aus afgahnistan schrieb am 04.10.2006
kann man des au downloaden?