Die neue praegnanz.de-Website

Je nachdem, welche Vorstufe man als tatsächliche Designiteration mitzählt, ist heute das vierte oder fünfte grundsätzlich neue Design von praegnanz.de online gegangen. Versionsnummern sind sowieso out, deshalb einfach: Die neue Website.

Hauptanliegen des Redesigns war natürlich, die Existenz der neu gegründeten praegnanz.de GbR würdig widerzuspiegeln. Seit April 2012 bin ich zu zweit unterwegs: Der exzellente Philip Bräunlich verdoppelt die verfügbare Arbeitskraft meiner kleinen Unternehmung und ist als gleichberechtigter Gesellschafter fest mit an Bord. Sagt alle brav »Hallo« auf Twitter: @phlp!

Darüber hinaus war natürlich auch technisch und gestalterisch Bedarf für ein Update. Pixelgrafiken zu Layout- und Styling-Zwecken haben wir zugunsten von unbegrenzter Skalierbarkeit komplett über Bord geworfen, es wird nun alles über CSS3 und einem individuellen Iconfont (Danke an IcoMoon) gelöst. Nur für inhaltliche Zwecke werden natürlich weiterhin Fotos und Bitmap-Grafiken eingesetzt. Diese sollen grundsätzlich noch in Retina-Auflösung angelegt und eingebaut werden – derzeit allerdings noch nicht vollständig. (Ausnahme bilden natürlich Blogartikel von früher. Die dort verwendeten Bilder bleiben Non-Retina.)

An einigen Stellen sind übrigens kleine Gimmicks und Lustigheiten eingebaut, die man erst auf den zweiten Blick erkennt. Dahingehend haben wir auch noch ein paar weitere Ideen für die Zukunft.

Auf der gestalterischen Front gibt es jetzt endlich ein richtiges Logo mit Wort- und Bildmarke, sowie Unterzeile. Es werden noch kreative Assoziationen aufgenommen: kotzender Pacman, sprechender Pacman usw. Die allzu generische Georgia weicht der charakteristischeren Adelle, doch die bewährte Facit bleibt als Arbeitstier für den Mengentext erhalten, genau wie das grundsätzliche Gestaltungskonzept: Großzügige #090-Flächen, wenig Schnickschnack, Dreispaltenraster, usw.

(Übrigens verwenden wir – je nach Betriebssystem – verschiedene Typekit-Sets mit jeweils unterschiedlichen Schriftschnitten. Ist das eigentlich schon Responsive Typografie?)

An einigen Stellen knarzt und knirscht es noch. Das wissen wir. Sachdienliche Hinweise gerne in die Kommentare oder per Mail. Und bevor jemand fragt: Ja, ein mobiles, responsives Stylesheet wird es natürlich geben. Aber jetzt war uns erstmal wichtig, das Ding online zu bringen. Alles weitere folgt in der Live-OP am offenen Herzen. Wir freuen uns auf euch als Zuschauer.

Credits: Danke an @vivalamovie für die schicken Portrait-Fotos.

41 Kommentare

Sascha

Tolle neues Design. Vor allem die Startseite wirkt extrem sympathisch und die Arbeitsproben machen einen guten Eindruck :)

SebM

Lob! :) Wirklich sehr schick geworden. Daumen hoch!

Frank

Mit dem Feed ist irgendwas faul…. http://praegnanz.de/atom/?section=weblog -> Fatal error: Cannot redeclare atom() (previously declared in /is/.../publish/atom.php:18) in /is/.../publish/atom.php on line 293

Jan

Sieht ein wenig nach 08/15 aus. Das alte war besser.

Alexander Strobel

Gefällt mir sehr gut! Eine sehr schöne Schrift!
Welches CMS wird verwendet?
Bin schon gespannt Dein WebTYPO-Buch zu lesen.
(Wird es auch mal eine Seminar-Reihe geben?)

Gerrit

@Alexander: Das Blog läuft unter Textpattern, die anderen Seiten sind zwar auch in Textpattern angelegt, aber quasi fast manuell in HTML geschrieben, ohne Artikel-Loop.

Eric Eggert

Gefällt!

Und dazu würde ich gerne mehr erfahren:

(Ãœbrigens verwenden wir – je nach Betriebssystem – verschiedene Typekit-Sets mit jeweils unterschiedlichen Schriftschnitten. Ist das eigentlich schon Responsive Typografie?)

Gerrit

@Eric: Windows-User bekommen eine Stufe fetter, weil das Font-Rendering unter Windows bekanntlich schmaler ausfällt als unter OS X. Zum Glück ist die Facit sehr detailliert abgestuft, was die Fette angeht.

Herbert

Was soll der schmarrn im ….meta name=keywords content=….?
Stört das den Suchmachinen nicht?

Das zittern der Textboxen, bei fehlender Eingabe finde ich auch nicht schön. Ist störend!

Fusszeile ist ca. 5cm hoch, auf einem 19-Monitor :-(

Ansonsten, klasse!

Gerrit

@Herbert: Das stört den Suchmaschinen nicht. Das Zittern ist schön in unseren Augen. Fusszeile sieht geil so aus, finden wir.

Herbert

Sieht schon gut aus, aber bei der Fusszeile denke ich halbe höhe reicht auch. Klar ist so ein zittern eine feine Sache, aber dann sollte man so bald man den Cursor in das Feld setzt, das Zittern abschalten und die rote Umrandung lassen. Das zittern nicht für jedem angenehm. Denkt daran, es geht um die Leser.

Wie auch immer, ist nur Vorschlag ;-)

Philip

@Herbert: Das zittern sollte aufhören, wenn man in das Feld klickt. Macht es bei uns zumindest.
Wenn das bei dir nicht geht, nenne mir doch bitte OS und Browser, damit ich mir das mal anschauen kann.

Herbert

Habe mich unvollständig ausgedrückt. Alle Pflicht-Textboxen sollten aufhören zu zittern. Das Zittern der aktuelle Textbox (Cursor) hört schon auf, aber nicht in der zweiten Textbox, daneben ;-)

Philip

@Herbert: nagut, das soll so. die andere ist zu dem Zeitpunkt ja auch noch nicht ausgefüllt und damit weiterhin »fehlerhaft«.

Matthias

Das großflächige grelle Grün schmerzt etwas in den Augen :). Schaut mal, ob ihr nicht es etwas abmildert, oder mit einem Hintergrundpattern verseht. Ansonsten ein kleiner aber feiner Fortschritt im Vergleich zu vorher.

Gerhard Großmann

Sehr schönes, klares Design, tolle Schriftwahl!

Wie wär’s, wenn ihr eure h3-Ãœberschriften ein bisschen tiefer setzt (also etwas mehr Abstand oben, den gleichen Abstand dafür unten wegnehmen). Schließlich gehören die Titel ja zum nachfolgenden Absatz und stehen nicht gleichberechtigt zwischen vorigem und folgendem Absatz.

Wo wir schon dabei sind: Ist es Absicht, das die h3 im Firefox grau, im Chrome dagegen grün ist?

Mmh, ja, das Zittern. Kann man machen … man könnte es auch auf 1 Sekunden oder zweimal Schütteln beschränken.

Carsten Lexa, LL.M.

Sehr stark – Gratulation!

Viele Grüße
Carsten Lexa, LL.M.
Rechtsanwalt

fwolf

Also .. das Grün schmerzt überhaupt nicht. Falls doch: Monitor richtig einstellen bzw. kalibrieren! Auf meiner Eizo-Röhre kommt das prima! :P

Zum Design selbst: Sieht gut aus. Sehr feine Fortsetzung des bisherigen Designs ;)

Und: Schön, dass dieser nette Effekt mit der auf/zuklappenden Suchleiste immer noch da ist. Hat mir im letzten Design schon so gut gefallen, dass ich das andernortens nachgebaut hab ;)

Quelltext wurde schon unter die Lupe genommen, sieht sehr fein aus, bis auf: die body-class ist etwas irritierend, hätte dank HTML5 eher auf das html-Tag gesetzt, so a la html5boilerplate, aber das ist eher Geschmackssache.

Ansonsten werde ich noch etwas herumwandern und entdecken ;)

cu, w0lf.

ps: ach ja – Schriften sehen unter Linux (Firefox 14, x86-64, GNU/Debian 6.0) prima aus!

pP

Schade, dass zum Aufklappen der Suche JavaScript erforderlich ist. Ansonsten gewohnt elegant. Das Feedback bei vergessenen Formular-Feldern finde ich super.

Vincent

Schick, gefällt mir.

Søren

Hallo Gerrit,

schick geworden! Aber: hast du absichtlich keine Hintergrundfarbe für den body definiert? In meinem Testbrowser erstrahlt alles in herrlichem pink. :-)

Gerrit

@Søren: Danke für den Hinweis, ist gefixt!!

Emanuel

also grundsätzlich ein schickes design. nur das markup-gefrickele beim logo verstehe ich nicht. da würde ich einfach modernizr einbinden, svg-support checken und für browser, die es können, eine svg-grafik einsetzen und alle anderen mit einer klassichen pixel-grafik »abspeisen«.

und bevor das request-erbsengezähle losgeht: modernizr ist auch bei vielen anderen gelegenheiten sinnvoll ;-)

Papa Bodehase

Hallo,

ich stehe ja momentan auf klare Designs mit großer Schrift. Deshalb mag ich das hier sehr!
Allerdings hat mich das Zappeln auch etwas überrascht, als ich es sah… gewöhnungsbedürftig. Aber Euers! :-)

Weiter so!

Niclas

Ich finde das Design in Ordnung. Das Zittern der Boxen bei fehlendem Eintrag geht aber wirklich gar nicht! Wieso reicht nicht einfach die rote Hervorhebung Rands?

Gregor

Sehr schön. Finde ich besser als das alte Design. Logo und Schriftzug sehen sehr ansprechend aus. Große Grafiken spar-, aber wirksam eingesetzt. Insgesamt ein schöner, klarer Auftritt. Verwirrend finde ich nur die Suche oben. Die Lupe sieht aus wie ein Submit-Button. Ich dachte erst, da wäre vielleicht ein Textfeld ohne Umrandung daneben. Der Submit-Button fehlt nach dem Ausklappen dann aber (benutzt man zwar eh nicht, entspräche aber mehr dem vertrauten Interface).

Dominik

Die Seite ist schick aus. Die Schriften gefallen mir gut.
Hier und dar wirkt es vielleicht etwas klopig (z. B. Footer). Eventuell eine leichte Struktur oder dezente Details wären ein Eyecatcher. :)

hans

ich mag das zittern und den footer. ansonsten – sehr sauber, gefällt.
der rote innere schatten in den boxen ist m.e. zu fett, auch der innere schatten in dem lupe symbol ist zu fett, nur meine meinung.

David

Also ich sehe da einen »Hubba-Bubba-Pacman«.

Frank

Warum noch keinen touch-icon? schnüff

Ansonsten super!

Maximilian

Sehr schönes, klares Design. Gefällt mir sehr. Eine Sache ist mir allerdings aufgefallen:

Der aufklappende „Kodex“ auf der Startseite ist bei mir durch Doppelklicken recht schnell in einen Zustand zu bringen, in dem der Rest der Seite nach unten ausgefahren, der Text aber trotzdem ausgeblendet ist, sodass sich eine große weiße Lücke ergibt.

Tobias

Schöner Relaunch! Gefällt sehr! :)
Da wollte ich dann gerade auch mal die Posts mit den »zitternden« Textboxen nachstellen, und prompt kommentiere ich Müll => siehe voriger Test-Kommentar. Keine E-Mail-Validierung beim Absenden von Kommentaren? Ist das so gewollt?

martzell

Unsortierte Usability-Anmerkungen, Bugs und Feature Requests:

A) Links sind leider nicht immer eindeutig zu erkennen: Ich habe deinen Namen angeklickt um weitere Informationen über deine Person zu erhalten: Kein Link. Grüner Text ist meistens ein Link, aber nicht immer. Mit der Maus hovern um rauszufinden was ein Link ist hat was von einem Adventure-Spiel.

B) Die Textfelder zittern arg nervös. Das Mac OS Anmeldefenster wackelt angenehmer. Dass die anderen Boxen weiterzittern, während man am tippen ist, stört.

C) Warum nicht einfach ein Suchfeld rechts oben? Erst habe ich die Suche nicht gefunden, da ich aus Gewohnheit nach einem Suchfeld geschaut habe. Dachte dann auch erst das Textfeld sei unsichtbar ohne Rahmen vor dem Lupe-Knopf, der wirklich wie ein »Suche starten«-Button aussieht.

D) Das Nummernzeichen # bei Kommentaren würde ich weglassen und den Permalink über die Kommentar-Nummer verlinken.

E) Ihr solltet erklären warum Name und E-Mail-Adresse verlangt werden um ein Kommentar zu hinterlassen. Unter Datenschutz schreibt ihr sogar die Angabe sei freiwillig, was irritieren kann wenn man dann doch gezwungen ist E-Mail und Name anzugeben.

F) Suchfeld hat einen Darstellungsfehler bei starker Vergrößerung.

G) Idee: Dunkles Smartphone-Theme spart Strom und passt besser zur nativen Oberfläche.

F) Alles was ich hier geschrieben habe wurde beim Absenden vernichtet. Da dies bei Webformularen häufig passiert kopierte ich vor dem Absenden den Text in die Zwischenablage. Wer das vergisst hat Pech gehabt. Session Timeout ist zwar üblich aber schön ist das trotzdem nicht.

Responsive Layout damit die Website auch auf kleine Smartphone-Displays passt kommt ja noch. Retina-optimiert pixelfrei ist cool. Das alte Design sah allerdings Interessanter aus, sofern ich mich noch daran erinnere. Auf dem neuen Foto hast du einiges an Haare gelassen und siehst damit mir ähnlicher.

Gerrit

@mattzell: Danke für die Hinweise. Viel Sinnvolles dabei, manches sehen wir anders. Wir arbeiten dran!

Andreas Hecht

Hervorragende Arbeit! Klares, frisches Design ohne Spielereien – gefällt mir ausnehmend gut. Das beste Theme bisher.

martzell

Responsive Webdesign Idee: Auf großem Monitor die Kommentare rechts vom Artikel auflisten. Neuester oben. Mehr Präsenz für die soziale Mitmachfunktion. Ist aber Geschmacksache.

Michael

Früher hat sich die Seite beim verändern der Breite angepasst, das ist nun nicht mehr der Fall. Woran liegt das? Hat es nicht zuverlässig funktioniert? Auch eine Version für Smartphones scheint es nicht zu geben (ich sehe jedenfalls auf meinem keine andere Version als auf dem Desktop, aber ich habe auch kein iPhone, das ihr ja so liebt).

Ãœbrigens: Bei mir wackeln keine Textboxen, geht das am Firefox nicht?

Gerrit

@Michael: Die responsive Version folgt, sobald wir wieder etwas Zeit haben!

John

Eine Sache irritiert mich auf einigen Seiten sehr, wie auch hier. In unserer Gesellschaft werden Zeitstrahlen von Links nach Rechts dargestellt. Auch lesen wir von Links nach Rechts. Deshalb irritiert es mich jedes mal, wenn der Link »Ältere Artikel« auf der rechten Seite steht und ebenfalls nach rechts zeigt. Geht das nur mir so? Gerade bei einer Seite, die so schön auf die Details achtet, finde ich es extrem schade, wenn es an einer Solche stelle, meiner Meinung nach, einen so klaren Bruch gibt.

Gerrit

@John: Darüber werden seit 2003 erbitterte Diskussionen geführt. Ich begreife es so: Das neueste steht in Blogs immer oben. Dadurch ist die Zeitstrahl-Metapher eh schon invertiert und nicht zu gebrauchen.

Und dann nehme ich lieber das Buch, dort fängt man auch links oben an zu lesen und blättert nach rechts durch. Niemand liest Blogs chronologisch, sondern immer umgekehrt, und deswegen ist der Zeitstrahl nicht angebracht als Metapher.

Hier das einzig sinnvolle mentale Modell, grafisch aufbereitet

John

@Gerrit: Es gibt natürlich gute Gründe, warum es so hart diskutiert wird. Ich meine nur, dass eine Buchsseite von Rechts nach Links umgeschlagen wird. Somit würde Sie von Links nach Rechts wandern. Die bereits gelesene Seite liegt als links. Aber ich möchte dich gar nicht »belehren«, da Du ja schon richtig andeutest, dass es einfach verschiedene Sichtweisen gibt. Gab es hier schon einmal eine Diskussion dazu? Wäre interessant es einmal zu lesen.
Mit dem Hinweis auf den aktuellsten Blogeintrag oben nimmst Du natürlich ein gutes Argument auf. :) BTW. Wollte Dir auch keine Diskussion aufzwingen. Es ging mir nur um die inhaltliche Ãœberlegung.

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.