Seitdem ich mich Ende 2009 selbständig gemacht habe, wurde es Zeit, meine Präsenz im Internet zu überarbeiten. Ich habe mir dafür professionelle Hilfe ins Boot geholt, für die ich mich sehr bedanke. Manuela Hoffmann entwarf das Design, das Logo und meine Visitenkarten. Nicolai Schwarz war mir bei der Entwicklung guter Texte behilflich. Das Foto auf der Startseite stammt von Patrick Lenz.
Im Laufe der Zeit werde ich sicherlich noch ein paar Verbesserungen und Optimierungen vornehmen. WAI-ARIA fällt mir als Optimierung noch ein. Aber da ich eine Webseite nicht als ein statisches Gebilde verstehe, das ab seiner Veröffentlichung in Stein gemeißelt ist, nehme ich mir die Freiheit, die Optimierungen in der Zukunft vorzunehmen.
Das Layout ist nicht in Stein gemeißelt. Kommen mir neue Ideen, gefallen mir bestehende Details nicht, wird das Layout angepaßt. Genauso flexibel gehe ich bei der Unterstützung der Browser vor. Es ist nicht die Frage, ob man die Seite in einem IE anschauen kann, sondern wie. Die Basis des Ganzen bildet das CSS-Framework YAML. Es ist robust und ausgefuchst genug, um selbst in antike IE-Regionen vorzustoßen. Doch all die Details, die ein IE nicht anzeigen kann, weil selbst der aktuelle Microsoft-Browser noch immer nicht auf der Höhe der Zeit ist, wird ihm auch nicht mit einer Hilfskonstruktion beigebracht. Die allseits beliebten runden Ecken, gegen die ich früher immer lästerte und die jetzt ein Teil meines Designs sind, wurden mit CSS3 realisiert. Der IE zeigt die Ecken eckig an. Das sieht nicht so schön aus, tut dem Inhalt aber keinen Abbruch. Einzige Ausnahme ist ein kleines Javascript, das auch den IE6 in die Lage versetzt, eine Mindest- und eine Maximalbreite zu verstehen.
Die Inhalte der Startseite werden zum Großteil mittels YQL gesammelt. Sehr hilfreich war dafür ein Artikel von Chris Heilmann im Adventskalender 2009 der Webkrauts. Bei der Bearbeitung des PHP-Codes half mir netterweise David Maciejewski auf die Sprünge.
Ein Blick in die ursprünglichen Layouts
Bei einem erneuten Blick bin ich überrascht, wie weit das Endprodukt sich von den ursprünglichen Layouts entfernt hat. Wichtige Grundzüge sind aber erhalten. Das Logo entstand in einer zweiten oder dritten Schleife und hat mich sofort gepackt.
Kommentar?
Ich bin auf Eure Kommentare und Anregungen gespannt.
4. Februar 2010 um 15:30 Uhr
Insgesamt sehr schön geworden. Freue mich, dass es bei dir endlich geklappt hat. Ich mnehme das mal als Inspiration für mein eigenes Redesign.
4. Februar 2010 um 15:54 Uhr
Gefällt mir sehr gut. Stimmig, aber nicht „übertrieben modern“. Dürfte ich nur ein Wort wählen, wäre es wohl „pfiffig“ 🙂
4. Februar 2010 um 16:17 Uhr
Durch die ungünstig sehr großflächig wirkende Seite, fast schon zu große Flächen, die fast nicht vorhandenen Design-Details, das knallige Orange und den einfallslosen Farbverlauf im Header komme ich zu dem Schluß:
Übersichtlich aber austauschbar. Es fehlt an Wiedererkennungswert und „Liebe“ zu einem persönlichen Blog. Für einen nicht Exzesiv-Surfer wie mich wohl aber eine gefällige Optik.
4. Februar 2010 um 16:22 Uhr
Sieht gut aus, allerdings ist das Rendering im FF3.6 auf dieser Seite „Über den Relaunch“ für mich ein bisschen gestört. Unten, wo die Grafiken der Layouts stehen, „mischt“ sich der Kommentare Text dazwischen, je nach Fenstergröße mehr oder weniger.
Aber sonst schick und gefällig. Vielleicht noch die letzten 6 Kleinigkeiten fixen, die dem W3C XHTML Validator sauer aufstoßen, dann isses sogar richtiges XHTML Strict – sehr lobenswert.
4. Februar 2010 um 16:40 Uhr
Oh es gibt noch fluide Layouts. Sehr gut. Auf meinem 1680px siehts schon recht üppig aus. Extrem übersichtlich ist immer gut.
Willst du gar nicht mehr Kontaktmöglichkeiten in den Header packen /Twitter /FB wäre noch okay. Das Attribut „role“ hast du auch verwendet. Ansonsten top!
4. Februar 2010 um 18:37 Uhr
Schnittig, clean und clear 🙂 Und endlich auch ein Eigenheim 😉 Freue mich auf neue Artikel in der neuen Bude. Hätte mir den Relaunch nur gestern schon gewünscht, um es auf einem größeren Bildschirm zu sehen.
4. Februar 2010 um 19:49 Uhr
Tut mir leid das sagen zu müssen, aber das ist optisch nicht der große Wurf. Das Logo finde ich ja ganz gut, aber das Layout der Seite wirkt einfallslos und austauschbar. Mir gefällt es leider gar nicht.
5. Februar 2010 um 1:24 Uhr
Generell gefällt mir die Klarheit und Simplizität. Die Farbwahl ist ausgewogen und stimmig.
Die Typografie im Großen und Ganzen ist auch gut gelungen. Schöne Größe und gute Lesbarkeit. Allerdings sind es nach meinem Geschmack zu viele unter unterschiedliche Schriftgrößen.
5. Februar 2010 um 7:18 Uhr
@Daniel: Der Validator zeigt Fehler an, aber das sind eher sein, nicht meine. Ich habe der Struktur Rollen hinzugefügt. Die sind zwar W3C-Standard, das weiß der Validator aber nicht. Wenn ich demnächst noch WAI-ARIA hinzufüge, dann werden noch mehr „Fehler“ auftauchen.
5. Februar 2010 um 12:47 Uhr
Im Prinzip gefällt es mir gut, aber zwei Punkte stören mich:
Das Logo an der Überschrift wirkt rangeklebt und paßt da meiner Meinung nach nicht so zusammen.
Du schaust auf dem Foto aus der Seite raus. Ich hätte eher ein Foto gewählt, was mehr Kontakt zum Betrachter aufnimmt.
5. Februar 2010 um 15:38 Uhr
Glückwunsch! Sehr dezentes und klares Design, man erkennt sofort wo was zu finden ist. Ein Klicki-Bunti hätte ich von Dir auch nicht erwartet. Mir gefällt’s gut. Eine Kleinigkeit vielleicht: Die Kommentarbox oberhalb der Kommentare, damit man nicht ganz nach unten scrollen muss, oder den Kommentieren-Link ins Formular verankern.
5. Februar 2010 um 20:34 Uhr
Hättest Du nur mal eins der ursprünglichen Layouts beibehalten…
Die sehen mE wesentlich stimmiger und professioneller aus.
6. Februar 2010 um 10:01 Uhr
leider gar nicht mein geschmack.
viel zu viel whitespace, zu groß und unübersichtlich.
meiner meinung nach, nicht die beste werbung für einen frontendentwickler. trotzdem viel erfolg!
7. Februar 2010 um 2:25 Uhr
Arial in der Größe als Standard ist auch mein Favorit zur Zeit. Allerdings schwören Mac-User ja darauf, erst Helvetica für die font-family und dann Arial. Für code{} würde ich aber noch »Consolas« einbauen. Ist ja unter Windows mittlerweile Standard und »Courier« ist einfach grausam.
Die Farben gefallen mir überhaupt nicht. Der Header ist irgendwie völlig unstimmig. Rot-orange mit hellblau-grau und die Menüpunkte in grau-petrol? Barrierefreiheit ist ne feine Sache, aber deswegen kann man ja trotzdem noch einen Header mit Grafiken bestücken. Aber das ist insgesamt natürlich die gute alte Geschmackssache.
Dem Main-Text könnte man bei der Breite übrigens ruhig ein justify mitgeben, das würde auch im Rahmen der Typographie-Lehre schon passen.
Die Smileys in den Kommentaren würde ich in WP deaktivieren, das passt eher zu Seiten die 1997 mit Frontpage gebastelt wurden und auf denen der Hund von Susi mit IE6-blink-Tags präsentiert wird.
7. Februar 2010 um 11:31 Uhr
Ich finde, das Redesign geht in Ordnung und ist ein großer Schritt nach vorne. Layouttechnisch hast Du ein paar neue Ingredienzien hinzugemischt, die ersteinmal ungewöhnlich sind (im Kulinarischen zu vergleichen mit einem „schmeckt interessant“), die aber nach einigem Wirkenlassen vollkommen okay, oder gar hilfreich und effektiv sind. Dazu zählt vor allem der Punkt „Dimensionen“. Ich find es gut, dass Du das Pferd mal von hinten aufzäumst und out of the box große Schriften und ein breites Layout anbietest, und denen die es kleiner wollen (oder brauchen) den Weg per EM-Maßeinheit nach unten ebnest. Nur das min-width und dessen Breite verstehe ich in dem Kontext noch nicht ganz…
In Sachen Punkte zum weiteren Herumdoktorn- und knobeln schließe ich mich Katharina in beiden Punkten an.
Die Kombination Titel-Text + Logo-Bild hat wirkungstechnisch noch Luft nach oben. Nun hast Du neuerdings einen schönen Mac, aber unter Windows haben wir ja alle (noch!) mit dem Drecksantialising zu kämpfen, und so fällt hier die Eleganz des Textes stark hinter der des Logos zurück: zwei Welten prallen da oben unter Windows aufeinander. Gönn Dir doch ein geglättetes Cùfon mit der Delicious, das Du auf exakt die benötigten Zeichen abspeckst. Das wär toll und auch schlank beim Laden.
Und ein professionelles, noch größeres Foto fänd ich sinnvoll, da Du hier an dieser Stelle ja Dich selbst anpreisen und verkaufen willst. Da solltest Du auch einen größeren tolleren Jens auf Deine Startseite packen, schließlich bist Du: „The Man“!
sagt der Schepp
7. Februar 2010 um 15:43 Uhr
Ne, also das ist der berühtme Satz mit x. Dieses Layout ist einfach nichts. Die Helvetica ist wirklich schlimm. Schau dir das mal an auf nem Windodws Rechner. Lesbarkeit ist furchtbar und Barrierefreiheit gilt nicht nur für Screenreader, sondern auch für das was man als normaler User lesen muss. Das tut in den Augen weh.
Farblich langweilig und insgesamt absolut unprofessioneller Auftritt für einen der sich rühmt Frontendentwickler etc. zu sien.
7. Februar 2010 um 16:17 Uhr
7. Februar 2010 um 17:04 Uhr
Das missratene ClearType ist aber nicht dem Jens anzulasten. Ich empfehle jedem Windows-User sowieso GDI++ respektive FreeType. Ansonsten könnte/müsste man ja nur mit Verdana und Georgia arbeiten.
11. Februar 2010 um 18:49 Uhr
Herzlichen Glückwunsch zum Relaunch!
Gefällt mir gut. CSS3 setze ich auch gerne für runde Ecken ein.
Was in den Browsern auf meinem WindowsXP-PC verbesserungsbedürftig erscheint ist die Schrift (insbesondere in den Artikeln und Kommentaren). Die ist für mich nur schwer lesbar. Das erinnert mich stark an das ursprüngliche Lesbarkeitsproblem der Schrift beim Relaunch des Blogs von Dirk Jesse. Wäre schön, wenn Du da noch optimieren könntest.
12. Februar 2010 um 9:42 Uhr
Meines Erachtens liegt das Problem hier:
font-family: Frutiger, Geneva, Helvetica, Arial, sans-serif;Zumindest die Helvetica, die ich hier habe, scheint kein für Windows optimiertes Font-Hinting aufzuweisen (eines das dem sch$%&&ß Antialiasing der GDI-Schnittstelle entgegentritt). Windows nimmt sie natürlich aufgrund der Anweisung da oben dennoch, und schon sieht alles furchtbar aus.
Das „Helvetica“ kannst Du aber gefahrlos streichen, da OSX die Arial automatisch durch die Helvetica ersetzt (Linux ebenfalls). Es ändert sich da also nichts, während wir Windows-Nutzer dann auch wieder klarer sehen können.
PS: Wenn Du darüberhinaus Langeweile haben solltest, dann korrigier doch weiter oben bitte meinen fehlerhaft geschlossenes Zitat… 🙂