Boxenstopp

Keine Boxen mehr auf praegnanz.de – dafür ein neues Design, das sich trotzdem vertraut anfühlt. Noch ist ganz viel Arbeit zu tun, weil viele Elemente und Funktionen noch kein richtiges Styling bekommen haben, aber das wird sich in den nächsten Tagen legen. Nur ganz kurz zwei Punkte zur Intention:

  • Herzstück und Basis-Idee dieses Designs war die Navigation, welche ich für ziemlich gut gelungen halte, weil sie konsequent URL-Design, Navigation und Seitentitel in einem verbindet.
  • Der Blogbereich ist wieder klassischer und blogmäßiger geworden. Wichtig war mir, dass auch Bilder mit mehr als 450px Breite gut hineinpassen, und einfach nach rechts wegflattern können, was beim Boxendesign nicht der Fall war.
  • Startseite, Essays, Portfolio und Vorträge sind nicht mehr so generisch-listenartig. Ich kann somit besser Schwerpunkte setzen und unterschiedliche Inhalte unterschiedlich darstellen.

Ich habe noch keinerlei Explorer-Tests durchgeführt, das kommt noch. Allerdings werde ich für den IE6 das Stylesheet sperren – Unterstützung dieser Website nur ab IE7.

Ich hoffe, meinen Lesern gefällt das neue Design. Wie gesagt: Fertig ist hier noch gar nichts, deshalb bitte erstmal keine Bugreports – ich weiß schon, wo es noch klemmt! Sobald ich das Gefühl habe, dass halbwegs fertig ist, sage ich bescheid und freue mich dann auch über eure Bugreports!

(Es ist 4:45 Uhr in der Früh und ich gehe jetzt ins Bett. Es war mir wichtig, diese Operation am offenen Herzen zu einer Zeit mit möglichst wenig Traffic durchzuführen.)

69 Kommentare

helloroot

Guten Morgen!
Ich find’s prima und wollte Dir das kundtun. Und noch besser find ich, dass immer mehr Webdesigner den IE6 aussperren. :)
Weiterhin frohes Schaffen!

fwolf

Moin moin,

das wirkt alles etwas … ungewohnt. Wird man sich noch dran gewöhnen müssen. Wobei ich finde, das die Navi + Co. rechter Hand irgendwie besser hinpasst.

Das mit dem fertig bekommen kann ich nachvollziehen – allerdings war’s mir bei UI piepegal, ob heavy traffic oder nicht – Hauptsache, Geburt endlich überstanden! (nachdem der Kram schon seit fast 4 Monaten rumlag und immer noch nicht live geschaltet war)

Ergo: Gratulation! ;)

cu, w0lf.

ps: und zum Rest werd ich dich morgen bzw. heute mittag mal rausbimmeln ..

Martin

Find ich gut. Hatte mich am alten Design schon bissel satt gesehen. :)

mds

Was mir spontan auffällt:

1. Gesamturteil gut!

2. Schriftgrössen in der Seitenleiste eher zu klein.

3. «Podroll»? Weisst Du, was «Pod» bedeutet? Jedenfalls passt’s bedeutungsmässig nicht zu «Blogroll» …

4. Ein bisschen mehr Luft würde dem eigentlichen Inhaltstext nach oben gut tun.

Gregor

sehr prägnant, Operation gelungen Gerrit.
Gefällt mit echt gut das neue Design, gewohnt ungewohnt :-)

ff

Toll. Vor allem, dass du den IE6 sperrst :-)

Sören G. Prüfer

Wie immer Prägnant. Nun das dritte Design. Diesmal mit weniger Mühe für den Leser verbunden, sich zurecht zu finden. Die Neugier treibt einen voran und nach 3 Minuten hat man den kompletten Inhalt der Internetseite gescannt. Toll!

Zudem fällt die schnelle Lade- und Verarbeitungsgeschwindigkeit auf. Außerdem zeigt Gerrit, dass Gestaltung mit Grafik auch ohne Ãœberladung durch Bitmaps geht. Liebe zum Detail.

Gelungen.

Johannes

Schön!

Ich find’s gut gelungen, wie du die Navigationsleiste für den Rest mitbenutzt. Bei deinem Portfolio sind dort die kleinen Infotexte dazu.

Genial gemacht!

Ralf G.

Chic, gefällt. Sehr gelungen, keine Einheitskost in der Art der populären WP-Templates, die langsam aber sicher alle Blogs mehr oder weniger gleich aussehen lässt. Aber das war von Dir eh nicht zu erwarten.
Und kein überflüssiges Gedöns auf der Seite. Gut gemacht, der Herr! ;)

Ole

Sehr gelungen. Auf jeden Fall besser, als das vorherige Layout. Einziger Kritikpunkt (wie schon oben angemerkt): Schriftgröße in der Navigationsleiste zu klein. Der solltest Du 12px gönnen ;-)

Martin

Wenn von links oben anfängt, könnte man meinen, alle grünen Schriftteile sind Links zu anderen Seiten. Nun sind aber die grünen Punkte unter »Das biete ich Ihnen:« keine Links, das fand ich etwas »gewöhnungsbedürftig«.

Etwas Schade außerdem: »vortraege« ohne Umlaute, um die »Linkfähigkeit« des Textes zu erhalten.

Beides evt. Punkte, die für das alte Design auch schon galten – hab schon länger nicht mehr über die Seite gesurft…

Michael

Sehr schön, sehr schön. Mir fehlt zwar irgendwie eine dritte Farbe (neben weiß/grün), ansonsten fein. Und noch immer auf Textpattern, wie ich sehe?!

Gerrit

@Michael: Hey, das Grau ist erst neu dazugekommen! Und schwarz ist ja auch noch da! Ãœber mangelnde Farbvielfalt kann sich hier keiner beschweren ;-) Wie sagte mein alter Professor für Gestaltungsgrundlagen? »Buntheit ist der Tod der Farbe!«

Daniel

Sehr schön geworden. Schlichter, und deutlich moderner als vorher. Witzige Idee mit dem Menü links oben.

Und gut, endlich den IE6 auszusperren. Mach ich inzwischen auch immer öfter.

Lucas von Gwinner

Chapeau! Wieder einfach und doch wieder sehr besonders. Gefällt!

Alex

Hm… habe erst mal mehrmals auf Reload geklickt, da ich dachte, ein altes störendes Stylesheet im Chache zu haben. Und jetzt glaube ich immer noch nicht, dass es so aussehen soll, wie es bei mir aussieht. Naja, zum Glück gibt’s Feedreader die alle Blogs einheitlich und lesbar machen! ;-)

cmi

Ich finde es sehr gut gelungen. Die Boxen auf der eigentliche Webseite fand ich vorher nicht gelungen, da gefällt es mir so, wie es jetzt ist, deutlich besser.

Oliver Gerken

Jepp, deine Argumentation fürs Design finde ich sehr schlüssig. Und nebenbei finde ich den »Boxenstopp« sehr gelungen… Viel Erfolg weiterhin und hoffentlich weiterhin so tolle Berichte.

Damian

Ja, was soll man sagen, das Design spricht mir aus dem Herzen. Perfekt :)

Björn Wolf aka we5

Absolut delicious. Durchaus angenehmer als das vorherige Design. I like!

datenkind

Wurde auch Zeit, Gerrit! :)

Ist wirklich gut geworden, sehr klar und durchdacht. Nur bei den Videos ein Popup? Ich denke mal, da arbeitest du noch dran … ;)

_Sven

Das mit dem Menü verstehe ich nicht; ist vielleicht nicht ganz zu Ende gedacht? denn im fall „boxenstopp“ müsste es dann doch praegnanz.de/weblog/boxenstopp heißen?
aber die URL steht doch auch oben in der Adresszeile? wieso denn dann doppelt. Ein Brotkrumen hat eine andere Funktion, oder?

Grün ist schick, der Blog ist offener als vorher. Ein bisschen extra hätte ich es gefunden, wenn das Layout wirklich rechts bündig wäre und es nicht nur durch die dicken grünen Balken suggeriert wird.

Felix de Ruiter

Hallo Gerrit,

das Navigationsmenü auf der linken Seite? Ungewohnt. Navigationsliste im URL-Stil? Genial! Darf ich mir die Idee abschauen? ;-) Insgesamt sehr ungewohnt, muss ich mich erst einmal dran gewöhnen. Wie beim Peter, als er sein neues Design online hatte.

Lieben Gruß
Felix

Gerrit

@datenkind: Die PopUp-Videos gibt es seit 2 Jahren und ich halte sie für das einzig sinnvolle, weil man sie schön nebenher laufen lassen kann, während man im normalen Browserfenster weitersurfen kann. Video-Permalink ist natürlich die entsprechende Seite beim Videodienst, wo der Kram ja auch physisch gehostet ist.

@_Sven: Das Hauptmenü ist kein Brotkrumen, sondern dient nur der Navigation zu den Hauptbereichen der Website, und gleichzeitig dem Branding. In der Artikel-Einzeldarstellung genügt es ja, wenn die entsprechende Sektion korrekt gehighlightet wird.

nicht Matt

Sehr schön, wie du die breite eines heutigen Screens ausnutzt.

Der alte Einspalter war damals ja hip, gerade wenn man seinen Monitor noch vom Word-Dokumentieren auf Pivot verstellt hatte, aber jetzt endlich mal ein Design, dass die volle Breite einnimmt.

Klasse :)

Daniel Rose

Ahhh so muss das sein.

Alternativ zum Stylesheet sperren für den IE6 vielleicht sowas wie Universal Internet Explorer CSS? Hat ja einen ähnlichen Effekt aber dann siehts nicht so ungewollt aus.

Gerrit

@nicht Matt: Danke, das ist ein weiterer Punkt, der mir wichtig war. Zum einen ist das eigentliche Layout problemlos mit 1024er-Breite (auf Netbooks und zukünftigen Apple-Tablets) darstellbar, zum anderen wirkt es so, als ob stets die gesamte Breite ausgenützt wird, obwohl das natürlich fake ist, denn die Linien sind ja reiner Schmuck.

Also quasi ein flexibles Layout, das trotzdem alle Inhaltsspalten fix hat, um Kontrolle über die Zeilenlänge zu bewahren. Ist ja generell mein Hobby: Pseudoflexible Layout – das mit den Boxen war ja auch so ein Kandidat.

Nina

Mir gefällt es. Ich warte gespannt auf den von dir erwähnten Feinschliff und bleibe weiter eine treue Leserin :)

Michael

Spontan-intuiver Ersteindruck:
1. besser
2. Content vs. Navi: Genau andersrum wäre stimmiger

Fabian

Wow, gefällt mir! Gerade der Portfolio- und Essay-Bereich ist jetzt noch aufgeräumter! Und natürlich dieses »Pseudoflexible« ist einfach genial!

Was mir noch mehr gefällt ist der Einsatz von HTML 5. Zumindest passt der Dokumenttyp. Allerdings habe ich keine neuen Elemente gefunden, bewusst darauf verzichtet wegen dem IE-Problem?

paxos

»Allerdings werde ich für den IE6 das Stylesheet sperren – Unterstützung dieser Website nur ab IE7.«

Daumen rauf. Das muss endlich mal anfangen. Ich kanns net mehr sehen das Kunden IE6 Unterstützung fordern und nix dafür zahlen wollen.

Eric Eggert

Ein wirklich schönes schlichtes Design, mir gefällt die Spielerei im Portfolio-Bereich. Ansonsten kann ich mich der gerechtfertigten sonstigen Lobhudelei nur anschließen!

Kriesi

Sehr hübsch geworden, gefällt mir deutlich besser als die box-version :)

Hauptnavigation find ich auch sehr gelungen. Weiter so =)

Bob

Vorallem die Portfolio- und die Essayseite sind sehr schön. Hast du das als Plugin umgesetzt oder machst du das per Hand?

Kleiner weiterer Nebeneffekt, Werbung ist jetzt direkt ein Eye-Catcher, wie die Vodafone Werbung momentan. Trotzdem stört sie an der Seite nicht, echt gelungen.
(Beispielscreenshot)

Jonas

ich muß dir auch ganz ehrlich sagen: das vorherige design gefiel mir um einiges besser.

die aktuelle gestaltung wirkt sehr unruhig und unübersichtlich. man hat das gefühl, die inhaltselemente sind miteinander verzahnt (z.b. die überschriften lappen aus dem fliesstext heraus). gefühlt existieren keine klaren trennlinien, obwohl sie natürlich irgendwo da sind.

schön finde ich die darstellung der referenzen zum sliden und die navigationsidee ist auch sehr gut!

mark

Sieht gut aus!

Gerrit

Gar keine Provokation diesmal? Alle zufrieden (bis auf Jonas?) Mann, ich werde alt! ;-) Danke für all das Lob!!!

Markus Thömmes

Klasse! Vorallem Portfolio und Voträge sind klasse umgesetzt. Sieht auch deutlich moderner aus als das Alte!

Grosses Lob von mir.

david

Wow! Ich bin begeistert! Während man dem Blog noch vorwerfen könnte, ein wenig textlastig zu sein (aber bestimmt lässt du dir da auch noch was einfallen :P ), sind die anderen Bereiche in der Hauptnavi (plus diese selbst natürlich) genial umgesetzt und zeigen sehr eindrucksvoll, warum das Redesign nötig war und was das neue Design drauf hat.

Für HTML5 und IE6-Aussperren gibt es nochmal je 100 Pluspunkte! ;)

Christian Haller

Die Breadcrumb oben links ist ja eine tolle Idee!
Schöner Relaunch.

Roman

Lob, großes! ;-)

Dieter

Mit Provokation kann ich dienen! ;-)

Grün gefällt mir (siehe meine Website mit modifiziertem YAML Green-Theme), da es damit an das vorhergehende Boxendesign noch anknüpft und so den Wiedererkennungswert nicht ganz vernichtet. Gleichwohl ruft diese Masse an Neongrün fast schon Augenkrebs bei mir hervor.

Schriftgröße der Navigation ist für meinen Geschmack zu klein (wurde auch von einigen anderen Kommentatoren so gesehen).

Darüber hinaus ist die Schrift für die Artikel und Kommentare trotz ihrer Größe für mich nur schlecht leserlich.

Schließlich finde ich es angenehmer, wenn die Navigation rechts, also in der Nähe des Scrollbalken ist, und nicht links. Das hat sich erfreulicherweise auch bei Blogs inzwischen als Standard etabliert und ist selbst bei Portalen und Webseiten immer öfter anzutreffen.

Zum Schluss noch der versöhnliche Schlusssatz, dass das minimalistische Design (weniger ist mehr) mir aber gleichwohl gut gefällt.

Rafael

Grundsätzlich: i like. Gefällt mir sehr gut – einfach aber trotzdem ungewohnt und modern.

Aber:
Kann der Kommentar Button nicht ans Ende der Posts wandern? Ist zwar schön zu sehen, dass ich schon beim lesen des Titels die Anzahl Kommentare sehe, aber dann wenn es mich evt. interessiert die Kommentare auch zu lesen, muss ich wieder hochscrollen. (v.a. bei längeren Posts)

Ausserdem find ich die grauen Balken nach links zu dünn/lang. Und – was man gerade hier gut sieht – so zwischen Kommentar 5 und 39 ists‹ ein bisschen arg leer.

Gerrit

Die Kommentaraufforderung werde ich wohl am Ende eines Artikel (zusätzlich?) platzieren, das hat mich tatsächlich auch schon selber gestört.

Was die Schriftgröße in der Sidebar angeht – ja, mal sehen, wie es sich auswirkt vom Umbruch.

Henry

Ich finde das Design großartig. Schön frei und verspielt. Echt beeindruckend.

Thomas Scholz

Gefällt mir recht gut.
Eine Frage: Warum Lucida Grande? (War das vorher schon so?) Die hat keinen Kursivschnitt – und gerade du wirst deinen Lesern doch bestimmt kein Slanting zumuten wollen, oder?

Gerrit

@Thomas Scholz: Ja, das ist mir zu spät aufgefallen. Vielleicht mache ich noch einen Wechsel zu Droid per font-face…

theinsidenoob

die kommentare von dir würde ich wieder hervorheben, war vorher auch so und manchmal sehr nützlich.

Gerrit

Die Autorenkommentare waren noch nie hervorgehoben, aber ich habe es schon lange geplant, das stimmt!

Boris

Gefällt mir sehr gut.
Ich hätte noch etwas mehr »Luft« zwischen Navigationsspalte und Inhaltsspalte gelassen. Gerade auf der Startseite scheinen mir beide Spalten sich etwas arg aneinander zu reiben.

Max

Hut ab, wieder mal. Sehr hübsch.

Tobi

Die beste Inkarnation bisher, selbst im unfertigen Zustand. Glückwunsch!

Pascal

Vertraut und besser. Klarer. Funktionniert mit Safari 4.0.2 ohne Boxprobleme. Das hat gelohnt in den Stunden der Nacht zu arbeiten. Am ersten Blick erscheint mir die Nummerierung der Kommentare etwas zu groß. Links ist noch sehr viel Luft. Aber als erster Wurf ist es gelungen Bravo!

Frank

Ups, da gehör ich zur Minderheit. Lese hier immer gern, finde das neue Design aber nicht so gelungen. Mal ein paar Kritikpunkte:

- Warum mutest Du Deinem Besucher an so zentraler Stelle ein so massives Non-Design-Element wie den grünen Block über der Haupt-column zu?

Dir muss doch klar sein, dass Du damit dem Besucher im Zweifel ein mehr an Scrollen zumutest, wo nicht ganz klar ist, was ich im Gegenzug an optischem Gewinn bekomme.

- Warum verändert sich das Element jedesmal? Ich finde, dass allein der »Gag«, dass die Seitenüberschrift jedesmal auf der Höhe des aufgerufenen Navi-Elements liegt, in keiner Weise den Bruch der ästhetisch-funktionalen Konvention aufwiegt, wonach sich der Header eben nicht zu verändern hat: Ein virtueller Raum ist nunmal kein Moderne-Kunst-Museum; Konventionen wiegen stärker!

Bleibt also sozusagen ein Ãœberschuss an Konventions-Bruchs-Provokation, wo man sich aber fragt, wo Du damit hin willst, bzw. ob Dir das überhaupt bewusst ist. Ich finde, man spürt das Konzept dahinter nicht wirklich.

- Gleiches mit der dadurch spiegelverkehrten Betonung der Navigationsleiste, die noch dazu an der Stelle kommt, wo normalerweise das – bei Dir nicht vorhandene – Logo kommt.

Ich meine, ist schon klar, dass Dein Design irgendwie ironisch um eine No-Logo bzw. Non-Design-Attitüde kreist.

Aber genau an der Stelle haperts: Deine Website beinhaltet jedenfalls für mich kein intuitiv klar erfassbares Statement von Dir, wie Du das Verhältnis von Design und Funktionalität siehst.

Mal so ins Blaue formuliert.

- Unüberlegt erscheint mir auch die jeweilige Verwendung der Schriften sowie die Gestaltung der Links. Gibt es da irgendein Muster, das ich intuitiv verstehen könnte, in welchem Bereich, welcher Funktion, welcher Hierarchiebene ich welche Schrift zu erwarten habe? Wie ein Link aussieht und wie nicht (meinetwegen mit konsequenter Trennung Funktions- und Inhaltsbereich)? Vielleicht liegt es an mir, aber ich bin selbst mit Nachdenken nicht darauf gekommen.

P. S.: Weil der Vorschreiber die großen Kommentarziffern rügt: Das war so ziemlich das einzige Element, dass mir spontant so richtig gefallen hat.

Gerrit

Warum mutest Du Deinem Besucher an so zentraler Stelle ein so massives Non-Design-Element wie den grünen Block über der Haupt-column zu?

Weil das Design vom kraftvollen Umgang mit Farbflächen lebt, und eine stabile Verankerung am oberen Bildrand stört meines Erachtens nicht, und »zumuten« ist hier der falsche Ausdruck. Mut zur Farbfläche, Mike Meire wäre begeistert!

Dir muss doch klar sein, dass Du damit dem Besucher im Zweifel ein mehr an Scrollen zumutest, wo nicht ganz klar ist, was ich im Gegenzug an optischem Gewinn bekomme.

Scrollen muss der Besucher so und so, da machen die 100 Pixel mehr oder weniger den Kohl wirklich nicht fett. Außerdem ist Scrollen nichts schlechtes.

Warum verändert sich das Element jedesmal? Ich finde, dass allein der »Gag«, dass die Seitenüberschrift jedesmal auf der Höhe des aufgerufenen Navi-Elements liegt, in keiner Weise den Bruch der ästhetisch-funktionalen Konvention aufwiegt, wonach sich der Header eben nicht zu verändern hat: Ein virtueller Raum ist nunmal kein Moderne-Kunst-Museum; Konventionen wiegen stärker!

Doch, der Gag ist es wert! Das, was klassischerweise Logo, Navigation, Headerbereich und Ãœberschrift ist, verschmilzt hier zu einem einzigen interaktiven Konstrukt. Und das es babyleicht zu bedienen und zu verstehen ist, kann man es machen.

Bleibt also sozusagen ein Ãœberschuss an Konventions-Bruchs-Provokation, wo man sich aber fragt, wo Du damit hin willst, bzw. ob Dir das überhaupt bewusst ist. Ich finde, man spürt das Konzept dahinter nicht wirklich.

Naja, ich sehe das nicht so: Ich habe die Konventionen so behutsam gebeugt, dass die Seite immer noch sehr einfach zu bedienen ist und wirklich niemand Probleme haben sollte, sich zurechtzufinden. Da gibt es ganz andere Killer-Beispiele!

Ich meine, ist schon klar, dass Dein Design irgendwie ironisch um eine No-Logo bzw. Non-Design-Attitüde kreist.

Naja, ich habe seit Jahren schon geemrkt, dass man kein explizites Logo-Signet benötigt, wenn die Farbe #090 in Kombination mit Georgia 28 Pixel (wahlweise invers) und einer schlichten Gesamtanmutung als Erscheinungsbild völlig ausreichen. Ich verstehe diesen Logo-Wahn nicht. Es ist doch viel geiler, wenn man ein paar fixe Designparameter hat, und sich daraus die Identität ergibt.

Aber genau an der Stelle haperts: Deine Website beinhaltet jedenfalls für mich kein intuitiv klar erfassbares Statement von Dir, wie Du das Verhältnis von Design und Funktionalität siehst.

Ich dachte, dass das sehr klar wird: Reduktion auf das Nötigste, aber die vorhandenen Elemente können spannend neu zusammengesetzt werden, ohne der Usability zu schaden.

Unüberlegt erscheint mir auch die jeweilige Verwendung der Schriften sowie die Gestaltung der Links. Gibt es da irgendein Muster, das ich intuitiv verstehen könnte, in welchem Bereich, welcher Funktion, welcher Hierarchiebene ich welche Schrift zu erwarten habe? Wie ein Link aussieht und wie nicht (meinetwegen mit konsequenter Trennung Funktions- und Inhaltsbereich)? Vielleicht liegt es an mir, aber ich bin selbst mit Nachdenken nicht darauf gekommen.

Links sind unterstrichen, keine Links sind nicht unterstrichen. Ausnahme: Headlines in der Blogübersicht, weil es nicht gut aussähe.

Was die Schriftgrößen-Hierarchie angeht: Meine Website ist keine wissenschaftliche Arbeit. Ich nehme mir die Freiheit, eine non-hierarchische Gewichtung der Inhalte vorzunehmen, um das Auge zu führen und auf Dinge aufmerksam zu machen, die mir wichtig erscheinen. Kaum jemand sucht verzweifelt nach der logischen Abfolge der Headlines und vergleicht dann deren visuelle Auszeichnung.

Zusammengefasst: Ich bin immer noch in erster Linie Designer und kein hauptberuflicher Semantiker oder Informatiker. Von der einen Seite wird mir vorgeworfen, ich würde jeglichen spielerischen Keim im Ansatz ersticken wollen, von der anderen Seite wird mir nun mangelnde Konsequenz in der visuellen Strukturierung vorgeworfen. Das ist eigentlich toll, denn genau in der Mitte dieser beiden Pole fühle ich mich wohl!

@dworni

Hm, ich mag einfache Designs (siehe auch mein Blog). An diesem Design gefällt mir der wuchtige L-förmige Header aber nicht. So würde er mir besser gefallen: -> Mashup

alp

Doch … das hat was. Ich weiß zwar (noch) nicht genau was, aber das ist meist ein Zeichen dafür, dass der Designer sich was dabei gedacht hat und es sich dem User erst später erschließt ;-)

Aber ich stehe ja sowieso auf solche »Konzept-Designs« …

Christoph

Zunächst mal Glückwunsch! Sehr schöne Website!
Besonders gelungen finde ich das Element aus Titel, URL und Navigation auf der linken Seite und die mitlaufende Headline rechts, sehr cool.
Mit Abstand am besten gefällt mir die Startseite, die weniger blog-mäßig wirkt und als Eigenwerbung wesentlich besser funktioniert als die alte Startseite.

Die größere Freiheit durch das Wegfallen der Boxen kommt auch den übrigen Seiten zugute, gut gefällt mir die Essay-Sektion mit den Büchern im Header, übersichtlich und erfrischend.

Aus der Titel/Navi/Headline-Anordnung und den »Knick« im grünen Header ergibt sich fast schon zwangsweise die Positionierung der Sidebar links, womit ich zu dem Teil komme, der mir nicht gut gefällt.

Grade in der Blog-Sektion drängt sich die Sidebar mit der Werbung regelrecht auf und wirkt störend. Auch beim Lesen eines Artikels fällt sie immer wieder ungewollt ins Auge.
Evtl. könnte man das durch mehr Abstand korrigieren?

Trotz des vertrauten Non-Designs (eigentlich ist es das keineswegs, aber mir fällt kein besseres Wort ein) hätte ich mir etwas mehr Kreativität bei der Gestaltung der Formular-Felder gewünscht, sieht etwas plugin-out-of-the-box-mäßig aus.

Ansonsten: Thumbs up!

Nikolaus Rademacher

Hallo Gerrit,
zwei Sachen stören mich:

1) Da du die grüne Header-Box immer am Text orientierst und nicht am Box-Rand, funktioniert dein Konzept auf der Blog-Seite nicht — da gibt es ja immer noch das (für mich an der Stelle störende) Datum. Die Box ist damit nicht bündig, auch wenn der Text ausgerichtet ist.

2) Die langen grauen Balken in der linken Seitenleiste passen für mich nicht ins Gesamtbild: Der Rest ist grün und schwer. Konsequenterweise müssten die Balken wenigstens die Höhe eines Navigationselementes haben, oder?

Ansonsten gewöhnungsbedürftigerweise sehr schön (so wie dein letztes Design ja auch)…

Gregor Nathanael Meyer

Ich hab mich total in Deine neue Navigation verliebt, die Idee (und die Umsetzung) ist einfach bestechend. Sowas werden wir demnächst bestimmt häufiger sehen, Du Trendsetter.

Auch der Rest mit seiner klaren Aussage gefällt mit, wenn nur die flackernde und vor allem rote Vodafone Werbung nicht alles wieder zunichte machen würde. ;)

Claus

Nachdem ich jetzt gut eine Woche nicht mehr auf praegnanz.de vorbeigeschaut habe, war der erste Eindruck erschreckt »Huch, wo ist denn das schöne Design hin?« Das neue Design wirkt deutlich minimalistischer, aber man gewöhnt sich schnell dran. Das spricht für gute Arbeit.

Aber Du hast Dein Design offenbar nicht ausreichend mit schmalen Browsern getestet. Ich betreibe meine Browser nie im Fullscreen-Modus sondern im Hochformat. Der Canvas ist meist gut 600px breit. Das reicht um eine Spalte Fließtext und noch ein bischen drum rum zu lesen und daneben bleibt auf meinem Bildschrim noch genügend Platz zum Arbeiten oder weitere Browserfenster.

Auf den ersten Blick scheint dass auch hier gut zu funktionieren. Von der Hauptnavigation sieht man zwar nur ein »de/weblog« statt »praegnanz.de/weblog«, aber das stört nicht. Die Funktion in keiner Weise beeinträchtigt.
Um den eigentlichen Inhalt zu lesen muss die Seite horizontal nach rechts scrollen. Aber da die Zeilen des Inhalts dann komplett auf meinen Canvas passen ist auch das kein Problem. Etwas schade ist, dass sie dann rechts bis ganz an den Rand des Canvas gehen. Ein Sicherheitsbstand rechts von 5-10 px zum fensterrand würde dem Text gut tun.

Ein dicker Klopps hat sich aber bei den grünen Boxen für die Ãœberschriften eingeschlichen. Wenn ich die Seite linksbündig
anzeige, geht die grüne Box bis zum rechten Rand. So weit, so gut. Wenn ich jetzt nach rechts scrolle wird die grüne Box nicht breiter, sie wandern nur nach links. Rechts von der Box ist weißer Rand, auch wenn der normale Text darunter noch weiter geht. Das sieht nicht schön aus.
Richtig schlimm wird es aber bei längeren Ãœberschriften. Die Breite der Box für die Ãœberschrift orientiert sich offenbar an der Breite des Textes, nicht an der Breite der grünen Box. Damit kann die Ãœberschrift über den grünen Hintergrund hinausgehen. Weiße Schrift auf weißem Grund ist bekanntlich eher schlecht lesbar.

Eine Kleinigkeit noch:
Bei normaler Schriftgröße stehen in der Navigation
»start«, »weblog« etc. schön linksbündig. Beim ausgwählten Element steht dann noch ein »praegnanz.de/« davor.
Wenn ich die Schrift vergrößere oder verkleinere, passt das nicht mehr. Hier muss man wahrscheinlich »start«, »weblog« etc. linksbündig ausrichten und das »praegnanz.de/« als getrenntes Element rechtsbündig davor.

peterp

@Claus: Das gleiche Problem gibt es auch unter freien OS (bei mir Ubuntu) mit installierter Liberation-Schriftfamilie. Hier ist »praegnanz.de« in der Navigation zu kurz, weshalb die gesamte Zeile nach links rutscht und nicht mehr bündig mit den oberen/unteren Navigationselementen abschließt.

peterp

P.S.: Die Boxen erinneren mich etwas an bahn.de bzw. deren Werbeplakate. :-)

Claus

@peterp: Das ist zunächst mal vom OS unabhängig. Die Frage ist nur, welche Fonts installiert sind. Ich habe auch ein »freies OS« (von Gentoo), aber Georgia ist vorhanden, deshalb passt es – solange ich die Fontgröße nicht verändere (was ich aber meist mache).

Markus Schlegel

Hi Gerrit,

mir hat pragnanz.de 3.0 sehr gut gefallen, weil es angenehm konsumierbar war. Bei dem neuen Design hab ich da noch ein paar kleinere Probleme, vor allem was die Sidebar und deren Zusammenspiel mit dem Inhalt und dem Kopfbereich angeht.

Ich fange aber zunächst mit dem Positiven an. Das komplette Design wirkt auf jeden Fall frischer und zeitgemäßer, was beides zwar ziemliche Buzzwords sind, aber es doch ganz gut treffen. Die grünen Balken mit weißer Schrift lassen die Website PDF-artiger (frag mich nicht, wie ich darauf komme) erscheinen und den Verzicht auf die Georgia (oder irgend eine andere Serife) im Mengentext begrüße ich sehr.

Was mir auch gut gefällt, ist, dass die Seiten theoretisch bis 800px ohne horizontale Scrollbar darstellbar sind. Die JavaScript-Justierung der aktiven Menüzeile würde ich persönlich weglassen. Mich stört es nicht, wenn da bloß „nz.de/Weblog“ steht; man kann sich denken, was das heißen soll.

Am besten gefallen mir am Design die Textauszeichnungen und der Kommentarbereich. Zitatkästen und Listen sind sehr sauber verwirklicht und erreichen beim Lesen genau die Menge an Aufmerksamkeit, die man ihnen verleihen möchte. Die großen Nummerierungen bei den Kommentaren geben Halt beim Durchscrollen und die Hervorhebung der Autorenkommentare sind auch eine große Hilfe. Einzig mit den tieferen Headlines (h3–h6) komme ich noch nicht ganz klar. Ist da eine Trennlinie jeweils über dem Text?

Jetzt aber genug Lob gehudelt. Einiges gefällt mir nämlich auch gar nicht.

Das Menü ansich entspricht zwar genau meinem Geschmack, aber meiner Meinung nach hängt es da oben etwas planlos in der Gegend herum. Die ersten Ãœberschriften, deren Balken sich bis auf die Höhe des aktiven Menüpunktes ziehen, nehmen sich etwas zu viel Aufmerksamkeit, dadurch, dass sie den kompletten Kopf der Seite mitnehmen. Die Tatsache, dass die Höhe des Balkens vom Menü abhängt ist mir übrigens erst nach sehr langer Beobachtung aufgefallen; davor hatte ich das einfach nur als kaputt erachtet.

Durch den abrupten Abbruch entstehen nämlich ungewollte imaginäre Linien, die das Layout komplett zerschießen. Das wirkt sich besonders bei den Essays stark aus, denn dort wird noch eine zweite, vertikale Linie suggeriert. Ich habe das Bild mal getwitpict.

Ich würde den grünen Balken immer (auf jeder Unterseite) bis zum unteren Rand des Menüs ziehen, dann stabilisiert sich das Ganze wieder.

Wie ich ganz oben schon angemerkt habe, gefällt mir auch die Sidebar noch nicht. Leider kann ich nicht genau sagen, was mir nicht gefällt; sie passt einfach nicht richtig zum Rest. Wahrscheinlich sind es die hellgrauen Balken; eine zweite Farbe (auch wenn sie durch den Text quasi schon gegeben ist) ist nicht praegnanz.de, zumindest nicht, wenn man ein Freund des vorigen Designs war. Die Balken zu begrünen würde ihnen zu viel optische Wertung verschaffen, deshalb wäre ich für gar keine Balken in der Sidebar.

Zum Schluss wären da dann noch die kleinen optischen Feinheiten im Kommentarbereich, der – das wurde ja auch schon erwähnt – noch etwas nach Standardmatsch ausschaut. Außerdem fehlt noch der Header-Link auf die Feeds.

Jedenfalls schaue ich jetzt noch lieber direkt vorbei, um Artikel zu lesen, anstatt sie im Feedreader aufzunehmen, denn der Inhaltsbereich ist noch viel angenehmer geworden. Als jemand, der das erste Mal auf die Website stößt, bekäme ich aber zunächst Kopfweh von der etwas konfusen Linienbildung im Seitenkopf.

Thorsten

Der grüne Block stört mich ein wenig aber sonst gut gelungen

Oliver

Ich hab bei der Gelegenheit gleich mal in den Quelltext geschaut und bzgl. der Ãœberschaubarkeit ein Vorbild für die längst überfällige Ãœberarbeitung einer meiner Seiten gefunden (aber das war vorher bestimmt auch schon so). Sehr schön!

hans

auf meinem 22« 16:9 wirkt es irgendwie verloren. die grauen balken die von links reinkommen da dachte ich erst das wär ein darstellungsfehler. ansonsten ganz gut. runde ecken mit css3 sind geil ne?

Simon

Gerade drüber gestolpert: Florian Pichler hat in seinem Blog das selbe minimalistische und selbsterklärende Navigationskonzept.
Das gefällt!

Kommentar verfassen

Mit dem Absenden dieses Formulars erklären Sie sich damit einverstanden, dass ich die von Ihnen eingegeben Daten auf meinem Webserver speichere. Ihr Name, der Kommentartext und die angegeben Website werden für die anderen Besucher von praegnanz.de angezeigt. Ich gebe jedoch insbesondere Ihre E-Mail-Adresse nicht an Dritte weiter und nutze diese auch nicht zu Marketing- oder Statistik-Zwecken. Sie können alle Daten zu einem späteren Zeitpunkt wieder entfernen lassen.