Archiv:

Latest photoblog

photoblog

Blog » Redesign abgeschlossen. Juchee!

Redesign abgeschlossen. Juchee!

Wie die Besucher meiner Seite, welche nicht mit Textbrowser oder Screenreader unterwegs sind vielleicht sehen können, habe ich endlich mein lange geplantes Redesign abgeschlossen. Gleichzeitig kann ich nun auch mein eigenes kleines CMS endlich unter »Live Bedingungen« testen.

Das Design reizt den CSS 2 Umfang schon sehr aus, ich habe viele :after, :before und andere Pseudoelemente benutzt, mit verschachtelungen (#marginalie > ul li …) gearbeitet, aber dennoch darauf geachtet das die Seite möglichst kompatibel zu allen gängigen Browsern ist. Außen vor blieb, wie sollte es anders sein, natürlich mal wieder der IE, der eine absolut simple Version der Seite bekommt, die im Funktionsumfang allerdings nicht eingeschränkt ist. Nur halt nich so schön.

Wer möchte kann ja einmal ein wenig rumklicken, und wer rumklickt der wird evtl merken das ich von »Du« auf »Sie« umgestellt habe. (Hier im Weblog behalte ich das Du weiter bei). Das hat den Grund das ich mich seit einigen Monaten selbstständig durchschlagen muss, und die Seite nun weniger als Spielwiese, als als erste Basis zur Kundengewinnung nutzen möchte.

Sollte also irgendwer da draußen Aufträge in Sachen xhtml/css/barrierefreiheit/usability/… zu vergeben haben, hallo! hier bin ich! ;)

27 Kommentare zu “Redesign abgeschlossen. Juchee!”

  1. Grafik: Gravatarbarett:

    Schön geworden :)

  2. Grafik: GravatarManuel:

    danke :)

  3. Grafik: GravatarFlo:

    Nett geworden. Respekt.

  4. Grafik: GravatarJeena Paradies:

    Sehr schön aufgeräumt sieht es aus und ich sehe auch wirklich nette Gimicks die du da mit CSS hinbekommen hast. Vor allem die Grafische Aufwertung kann man nicht übersehen, sehr gut.

    Zwei sachen habe ich allerdings, die mir nicht ganz so gut gefallen: 1. die Seitenleiste ist zu Voll und 2. schade dass es wieder ein nasses Handtuch Design geworden ist.

    PS: der »Get Firefox« Button scheint einen falschen Pfad zu haben.

  5. Grafik: GravatarManuel:

    danke. was ich mit dem nassen handtuch mache muss ich mir nochmal überlegen ;)
    aber ich fahre ne 1600er auflösung, und finds eigentlich noch recht erträglich hier was den weißraum angeht. blieben natürlich noch die möglichkeiten variable breite, oder auf 1024×768 optimieren. aber hm. werd ich mir mal vormerken. bin froh das ich damit endlich durch bin, da ich höllenviel andere sachen zu tun hab im moment. aber ich konnt das alte design echt mal überhaupt nich mehr sehen. hehe.

    Und die Seitenleiste ist eigentlich nur hier im weblog so voll, was mich selbst auch ein bisschen stört. bliebe mir aber nur die möglichkeit, entweder die kategorien abzuspecken oder das archiv zu verstecken. und beides möcht ich eigentlich nur ungerne.

    ach, und der olle getFirefox button *g*
    den hab ich relativ eingebunden. kann aber mit dem von wordpress erzeugten modrewrite nich klappen, klar. danke für den hinweis. ;)

  6. Grafik: GravatarBjörn:

    Also ich find‘ dieses nasse Handtuch ;-) sehr gelungen. Dezentes Design, schöne Farben, aufgeräumt und angenehm anzusehen. Interessant finde ich die versetzten Linklisten in der Sidebar.

  7. Grafik: GravatarManuel:

    hehe. die sind allerdings eigentlich eher aus zufall entstanden. hatte einfach mal das halbfertige stylesheet im blog eingebaut, und das sah so ähnlich aus. da dacht ich mir „oh, cool. lass ich doch direkt mal so“ ;)

  8. Grafik: GravatarBjörn:

    Selbst die Gurus aus Übersee arbeiten nicht anders ;-) Vieles hängt vom Zufall ab. Aber wie bereits bemerkt finde ich es insgesamt sehr gelungen!

  9. Grafik: GravatarHorst Scheuer:

    Dein neues Layout sieht gut aus. Respekt!

  10. Grafik: GravatarMarkus:

    ist wirklich serh schön. besonders die Navigation im Seitenkopf gefällt.

  11. Grafik: GravatarThomas:

    Das neue Design ist wirklich sehr schön geworden! Respekt. War eh schon überfällig, wie du selbst bemerkst hast. ;)

    Aber ich fiebere dem Augenblick entgegen, wo du es aufgibst, alles mit „_blank“ zu verlinken…

  12. Grafik: GravatarMarcel Widmer:

    Schön! Schön!! Ich mag nasse Handtücher ;-) Kompliment!!!

    Lesbarkeit: 1a! Farbwahl: sehr, sehr angenehm! CSS-Gimicks: wow! Wirklich ein tolles Design!

    Was mir persönlich nicht ganz so gut gefällt, ist das „Box-in-Box-Design“ in der Sidebar; für meinen Geschmack gibt’s so ein paar Rahmen zu viel.

    P.S. Beim Kommentar-Schreiben stimmt’s mit der Tag-Reihenfolge noch nicht ganz: 1) Name 2) eMail 3) Text 4) URL

  13. Grafik: GravatarStefan:

    Fein! :)

    Vielleicht noch der kleine Vorschlag, wenn du schon auf die
    Screenreader eingehst:

    Wenn man bei dir ohne Styles unterwegs ist, wenn erkennt man
    nicht, welcher Menüpunkt angewählt ist. Ich orientiere mich da
    gerne an wertewerk.de – die machen das bspw so:

    [code]Standort: 1: Lösungen[/code]

  14. Grafik: GravatarStefan:

    Gna, natürlich die falschen Tags erwischt …

    <li><span class="hier">Standort: </span><strong><dfn>1: </dfn>L&ouml;sungen</strong>

  15. Grafik: GravatarThomas:

    Jetzt hab ich mir mal die Seite im IE6 SP2 angesehn – und war entsetzt. Alles außer dem Blog sieht zwar „ok“ aus (mit(!) und ohne ActiveX), das Blog hingegen zerfällt total.

    Lässt du das so, Manuel? Oder sieht das nur bei mir so aus…

    Und im Firefox hab ich was gefunden, weiß aber nicht, ob dir das bekannt ist (ich nehme es an): Wenn man einen längeren Kommentar schreibt, bleibt der Footer an seinem Platz und man schreibt über ihn hinweg und unter ihm weiter.

  16. Grafik: GravatarManuel:

    Stefan, das mit dem Strong ist keine schlechte Idee. Werd ich bei Gelegenheit einbauen :)

    Thomas, danke für den Hinweis. Sollte ich wohl nochmal ändern. Irgendwie scheint der IE im Blog die Hacks zu ignorieren. Warum auch immer. Kack Browser. Das mit dem Footer ist mir auch bekannt. Einfach einmal kurz das Fenster in der Größe verändern. Dann ist wieder alles normal.

  17. Grafik: GravatarManuel:

    So, das IE Stylesheet (ja, er kriegt ein eigenes, und er hat es eigentlich garnicht verdient!) war falsch verlinkt.

    Die aktiven Menüpunkte werden jetzt durch:
    <dfn>Aktuell aktiv:<dfn>
    <dfn>Aktuell aktiv, zweite Ebene:<dfn>
    <dfn>Aktuell aktiv, dritte Ebene:&lt;dfn>
    gekennzeichnet.

    Wieder ein kleines Stück mehr Benutzerfreundlichkeit für mein CMS ;)

  18. Grafik: GravatarMechthild:

    Super Seite, gefällt mir sehr gut.
    Zeigt, dass es auch ohne Tabellen geht.
    …Und cool auch der Hinweis für die IE-Benutzer, den ich im Quelltext entdeckt hab ;-)

  19. Grafik: GravatarJens Grochtdreis:

    Sehr schön ist das Redesign geworden. Respekt. Allerdings irritiert mich Deine Schriftwahl. Überall serifenlos, aber in der Hauptnavigation eine häßliche Serifenschift. Warum? Die übereinanderliegenden Boxen in der Seitenleiste sind mal was anderes. Gut.

  20. Grafik: GravatarManuel:

    Frag mich mal was leichteres ;)
    Ich hatte zuerst überall die Georgia als Headline. Die Headlines hab ich dann durch sIFR ersetzt. Da ich die Georgia aber eigentlich recht schick finde, und keinen Mix aus 3 serifenlosen haben wollte, und mir dachte das die georgia eigentlich perfekt zur Trebuchet passt, nehm ich die.

    keine ahnung, häßlich find ich die jetzt nich unbedingt, oder? *g*

  21. Grafik: GravatarDas Ich:

    Du verwendest 3 Schriften und noch verschiedene Schriftschnitte. Ich persönlich, finde die Schrift in der Headline nicht so schön. Ich würde sie gegen die Trebuchet ersetzen, um die Anzahl zu reduzieren.

    Warum hast du die Bilder so gewählt!? Keine Frage: Die Bilder sind schön! Aber was genau haben die Motive mit jemandem zu tun, der sich spezialisiert hat auf Programmierung und Design!? Das Konzept ist nicht schlüssig!

    Du verwendest in der Navigation nur Kleinbuchstaben, in den Kategorien allerdings fängst du mit Großbuchstaben an. Mach alles groß und setz den Punkt Home nach Links in die Navigation. Es ist die erste Seite, die man betritt, also steht sie auch an erster Stelle: Links! Das entspricht dem europäischen Lesefluss.

    Der graue Balken im Hintergrund ist denke ich überflüssig. Man müsste mal schauen, wie es ohne aussieht!?

  22. Grafik: GravatarManuel:

    Naja, zum Thema Schriften mischen heißt es man soll nur soviele Schriften nehmen wie nötig, und nach Möglichkeit nicht serif/serif, sans/sans. Sondern wenn dann eine Kombination aus serif/sans. Ich denke die Georgia passt schon ganz gut zur Trebuchet, werde aber mal schauen wie die Trebuchet in der Navi wirkt.

    Die Bilder sollen der ganzen Seite einen »persönlichen Touch« geben. Passen nicht wirklich zum Thema, ich weiß. Vielleicht tausche ich sie irgendwann aus. Ich wollte jedoch keine Standardbildchen wie man sie so häufig sieht, Kugelschreiber oder Telefon bei Kontakt, Taschenrechner bei Angeboten, …

    Der Punkt Home ist bewusst ganz rechts. Wie Du schon sagst ist die Leserichtung von links nach rechts. Home ist in meinen Augen ein eher unwichtiger Punkt, der User soll direkt am Anfang die Möglichkeit haben zum eigentlichen Inhalt zu kommen. Und ein dicker fetter Home Link ist rechts meiner Meinung nach definitiv harmonischer als links, denn sonst wirkt die Seite so gequetscht.

    Aber danke für Deine guten Einwände du mysteriöser Ich ;)

  23. Grafik: GravatarChristian Strang:

    Wow, schönes neues Design (muss ehrlich sagen, dein altes kenn ich garnicht). Ich finds recht professionell, auch wenn ichs fürn Blog zu krass nach Firmendesign aussieht, aber was red ich da, ist toll geworden!!

  24. Grafik: GravatarThomas:

    Manuel, kannst du noch ermöglichen, dass man dein Menü ohne Bilder benutzen kann?

    PS: Mein Firefox stockt auf deiner neuen Seite zwischendurch, wenn ich mit der Laufleiste runterscrolle. Liegt wohl an dem ganzen sIRF und Co?

  25. Grafik: GravatarManuel:

    ööhm, ja? gerne. Aber wie. Die Navi ist als Liste mit alternativen Text angelegt für Leute die mit Textbrowser oder Screenreader kommen. Alles was ich nun noch tun könnte wären title-attribute im Menü?!

    Bei mir ist die Seite übrigens auch teilweise ziemlich langsam. Scheint wohl auch am Sifr zu liegen. Und an den ganzen :before, :after Klamotten, und und und. ;)

  26. Grafik: GravatarThomas:

    title-Attribute für die Menü-Link-Liste wär nett. Dann kann man wenigstens was lesen, wenn man mit der Maus drüberfährt. (Sowas benutze ich auch gerne als bessere Beschreibung des Links neben dem Textlink an sich.)

    Das ist halt alles der Nachteil von Image Replacement-Techniken. Ich sehne mir seit langem ein foreground-CSS-Element herbei, damit man HTML-Texte „überdecken“ kann. Als Gegenstück zu background.

  27. Grafik: GravatarAlex:

    So, nun muss ich auch mal Lob abgeben hier :-)
    Also die alte Seite kannte ich leider nicht. Aber dieses Design hier gefällt mir sehr sehr gut. Schlicht, und dennoch sehr schön anzusehen.
    Da sieht man mal wieder, was man mit CSS nicht alles machen kann.

    Wirklich sehr gute Arbeit.

    Einziger Bug, den ich gemerkt habe:
    – Formular wird beim absenden (noch) nicht überprüft
    – Die Kommentarvorschau dieser Seite legt sich unter den Footer (wurde aber glaube ich schon angemerkt)

    Ansonsten: echt FETT!

Die Trackback-URL lautet