Kurz vor Acht
Konstantin hat mich mit seinen Kommentaren, dran erinnert, vielleicht mal etwas mehr zur Überarbeitung zu notieren, auch während des Prozesses. Wo stehe ich derzeit? Ich habe mein Grundraster, eine lange Liste mit kleinen Details für später, eine übersichtliche Liste mit Elementen die komplett rausfliegen, ein paar Screenshots und – ganz wichtig – eine genaue Vorstellung was ich nicht möchte. Was fehlt ist der Rest.
Hier ist der erste Fakt. Es ist unmöglich, dass ich alle Kleinigkeiten mit einmal überarbeite. Dafür ist mein Anspruch zu hoch und die Seite inhaltlich zu fragmentiert. Wenn ich nach langer Zeit mal wieder auf das CSS schaue, da muss ich mich schon wundern, welcher Anfänger da am Werk war. Ordnung schaffen ist der einfachere, spätere Teil, aber es scheitert von an den Grundlagen.
Ich schmeiße sehr viel raus. Am Ende wird außer einer Start- und Artikelseite nicht viel bleiben, aber die wenigen Sachen, die müssen makellos sein und deshalb suche ich seit Monaten nach dem perfekt einzelnen Absatz. Oh ja, ich verbringe Ewigkeiten damit nur eine kleine Sammlung von Sätzen gekonnt in Szene zu setzen. Meine erste Zeile HTML und CSS habe ich 98 geschrieben als die Premium Seite tolle Splashpages mit „Diese Seite ist optimiert für eine Auflösung von 800×600 Pixeln und Netscape Navigator“ aufwarten konnten. Web Design seit dem war sehr lange Zeit ziemlich genaue Kontrolle und es fällt mir durchaus schwieriger dies abzugeben.
Zwei Punkte dazu. Selbst der heißeste responsive Webscheiß, sieht in jedem Browser, auf jedem Gerät, auf jeder Version, auf jedem Display anders aus. Mein Ziel ist es einfach nur, dass es überall nach meiner Seite aussieht und sehr gut lesbar ist. Dieses Sehr gut Lesbar ist schon eine Herausforderung. Zeit für verrückte Wissenschaft1.
Schrift
Ich tue mich noch schwer damit, einen gewissen Grenzwert bei der Schritgröße zu überschreiten. Ich bin überzeugt davon, auch dieses mal mit Standard Systemschriften für normalen Artikeltext auszukommen. Diese Schriften sind jetzt nicht für epische Größen vorgesehen. Momentan sehe ich eine Hierarchie von 15 (small screen), 16 (medium screen) und 17 (large screen) Pixeln. Wenn ich noch höher gehe, werden die Buchstaben vieler bekannter Displayfonts unglaublich fett und wirken nicht mehr „balanciert“. Hinzu kommt, dass Fonts bei gleicher Größe teilweise sehr unterschiedlich groß wirken. Apropos Größen und Einheiten.
Momentan herrscht ein Einheiten Chaos, wie es CSS noch nie gesehen hat: px, em, rem, %. Die Wahrheit ist, dass (CSS) Pixel, die eben keine Systempixel sind, immer funktioniert haben und auch weiter funktionieren. High-DPI Displays und Geräte nehmen einem die Arbeit ab, die sich viele zu Unrecht auf Stylesheet Seite machen. Meine Lösung ist einfach. Ich definiere eine Basis-Einheit von 10 (CSS) Pixeln und faktorisiere diese als em-Einheit. Ich habe genug Geräte angeschaut und damit noch auf keinem eine Überraschung erlebt. Was mir noch fehlt ist das Testen auf einem Konsolen / Fernsehbrowser, aber wer sowas benutzt, der muss nicht dafür belohnt werden. Trend geht eh zum Zweit-Display 😉
Heute, spätestens morgen will ich eigentlich das Design einer einzelnen Artikelseite rund haben. Der Rest wird dann einfach, aber dieser verflixte Textabsatz, der schafft mich noch. Irgendwas ist immer. Ich wär schon froh bei der Frage Serifen oder nicht, eine eindeutige Antwort zu finden. Serifen sehen dann irgendwann doch wieder schick aus, oder ich hab mich hier nur satt gesehen?
Teaserbild von Art of Jeff West. ↩
5 Kommentare
Für diesen Eintrag wurden die Kommentare geschlossen.
global $hemingway ?>Sehr schön. Weiter so! Nich ablenken lassen kurz vor der Ziellinie.
Was die perfekte Typografie angeht, haben wir im Office gemerkt, dass es kaum geht, ohne ne eigene Schrift zu schneiden. Davon würde ich allerdings in den allermeisten Fällen eher abraten, wenn’s um Blogs geht.
Ich verstehe jetzt aber auch sofort, warum ihr auf eine eigene Lösung gesetzt habt, einfach mehr Kontrolle, wo andere Schriften versagen. Ich hab mir heute ohne Scheiß 700% Zooms in Photoshop angeschaut, um zu sehen wie schlecht die Schriftglättung in Browser X auf System Y funktioniert: der Horror mit Standardschriften oberhalb der 20px.
Ich muss das ja mal nutzen, um mich nochmal für das Raster zu bedanken, das Du mir geschenkt hast. Nachdem ich ja auch eine Weil hin und hergerissen war, was den möglichen Einsatz von Media-Queries angeht, bin ich inzwischen wieder in einem Zustand großer Ruhe angekommen. Mehr noch: Seit ich Smacss verstanden habe, erschließt sich mir die Schönheit des Rasters und die Einfachheit dessen, was wir hier eigentlich machen erst so richtig. Ich hoffe, dass ich dieses Jahr noch die Zeit finde mein Theme zu versmacssen. Smacsss + Raster ist wirklich ein bischen wie das Nirvana.
Lustigerweise lande ich damit ein weiteres Mal wieder an einem Punkt an dem ich schon mal war: Ganz am Anfang hatte mein Blog nur ein HTML, es gab nur EINE Seite und alles war darauf.
Wir sind weit gekommen und ich freu mich schon sehr drauf, was hier noch passiert. Du warst viel zu lange ruhig.
Ich kann mit einer PS3 un integrierten Browser zum testen dienen. Aber damit Surft glaube ich wirklich niemand weil die Bedienung über Gamepad der totale Horror ist.
@ben_ Mittlerweile war ich auch beim SMACSS Workshop und auch wenn ich nicht alles davon blind umsetzen möchte (ein paar der Ansätze gehen mir zu weit, Stichwort eine Millionen Klassen), aber heute sehe ich halt nur Fehler im aktuellen Stylesheet des Blogs, die ich nicht mehr machen möchte, auch mit Erinnerung an den SMACSS Ansatz.
@Benjamin Darauf greife ich gern mal zurück, allein schon zum zu erfahren, welche Standardgrößen solche Browser nutzen und ausgeben. Bin nächste Woche ja wieder im Büro 🙂
Ansonsten habe ich nun die Größen festgeklopft, aber bin nur verwirrt, wie unterschiedlich System- und separate geladene Fonts dargestellt werden. Hier eine Testseite: Zwei mal Standardfonts, einmal ein Google Webfont, der einfach mal gigantisch mächtiger wirkt.
Zehn Zeichen Unterschied pro Zeile, bei gleicher Größe ist pures Chaos in meinen Augen.