1024.1 - Dokumentation zur neuen Gestaltung
Was hier schonmal Erwähnung fand und die rätselhafte Bezeichnung 1024.1 trägt, ist eine Artikel-Serie für die nächsten paar Wochen, mit dem Ziel, dieser Seite einen kleinen neuen Anstrich zu verpassen. Dies ist also der erste Teil, auf dem Weg zu einem funktionierenden 1024 Pixel breitem Webdesign. 1024.1 halt.
Das Ganze fing so simpel an und entwickelt sich langsam zu echten Herausforderung. Die Idee war recht einfach, eine zusätzliche Spalter für das Grundraster, dort hinein die üblichen Randspalten-Daten des Blogs und fertig. Nun daraus ist nun offensichtlich mehr geworden. Das Raster hat sich verändert bzw. ist feiner geworden und damit kommen die Probleme.
Im Gegensatz zu vielen anderen gebe ich hier offen zu woran ich mir bei der Gestaltung so orientiere. Die Times (also das Printmagazin Times) hat neulich ein Redesign auf die Beine gestellt, was einfach gnadenlos gut funktioniert. Wer die Chance hat sollte mal einen Blick riskieren. Es gibt es einen kurzen Online-Artikel drüber.
mehr Platz, mehr Probleme
Statt einfach eine neue Spalte reinzuknallen versuche ich die Seite insgesamt harmonischer in die Breite wachsen zu lassen. Dabei ergeben sich immer wieder neue Lücken, die es zu füllen gilt. So zum Beispiel wird das Formular für die Kommentare auch neu angeordnet werden müssen:
Layout Kommentar-Eingabe
Lässt sich das Formular noch relativ einfach auf das neue Raster legen, so fällt dies bei anderen Elementen schwerer. Was den Kopf der Einträge angeht, so werde ich hier noch mehr vereinfachen. Zur Zeit gibt es noch viele Einschränkungen für mich. Es gibt einen Grund wieso ich keine großen Bilder zu Beginn eines Eintrags integrieren kann, weil diese Bilder mit den Rand-Informationen an gleicher Stelle überlagern würden. Dies ist der aktuelle Stand des neuen Seiten-Kopfes eines Eintrags:
Layout Seiten-Kopf
Ein offensichtliches Problem entsteht dann, wenn das Grundraster ausgeblendet ist, denn dann findet das Auge eine unansehnliche optische Lücke zwischen den Randinformationen und dem eigentlichen Mittel-Teil. Die Idee war nun, die Breite für Texte und Bilder eines Eintrags ein klein wenig zu erhöhen und so die Lücke zu schließen. Was gut klingt funktioniert nur teilweise sehr gut, denn ich habe ich mich nun was die Bilder betrifft auf eine Größe festgelegt, genau so breit wie der Text-Block. Wenn ich diesen nich breiter angelege passen die Bilder nicht mehr.
Wenn der Text breiter läuft als bisher kommt es zu Problemen.
Andererseits funktioniert es, wenn die gleichen Bilder eine Bildunterschrift besitzen:
Genau an dieser Stelle hänge ich nun fest. Ich fürchte auch dieses Problem so schnell nicht lösen zu können. Vermutlich wird trotz eines breiteren Layouts, die Breite der Eintragsinhalte gleich bleiben. Es gäbe zwar Lösungen, aber die wären alle zu umständlich und unflexibel für meinen Geschmack. Irgendwie habe ich mir die Sache einfacher vorgestellt, diese zusaätzlichen Pixel bringen mehr Arbeit mit sich, als ich dachte.
13 Kommentare
Die Times (…) hat neulich ein Redesign auf die Beine gestellt, was einfach gnadenlos gut funktioniert.
Hmm, das Times Layout haben wir ausgiebig studiert und wir fanden eigentlich, dass es genau das nicht macht: gut funktionieren. Allzuoft (und die Redaktion strengt sich offenbar redlich an die Texte ‘passgenau’ zu schreiben) entstehen da im Content riesenhafte Lücken, logischerweise dort, wo die Spalten horizontal durchbrochen sind. Davon abgesehen ist das mal eine der größten Textwüsten jenseits des Rio Grandes.
Ganz anders hier. Ich komme ja hier regelmäßig vorbei und erfreue mich am Layout (von den ganzen Onlinespielekrams verstehe ich ja nicht ein Wort
). Was Dein Problem angeht: man könnte vielleicht die Bilder nach links aus dem Text in die Marginalienspalte ziehen, dann hat der Fließtext rechts mehr Platz zum Umnlaufen. Allerdings müsste dann evt. Bildunterschriften an andere Stelle (ganz klassisch unter das Bild zum Beispiel?).
Also meinst Du das “Time” (time.com) Magazin oder Die Times (times.com) ? Auch wenn time.com ein bischen besser funktioniert als times.com, muss ich auch sagen, dass beide zumindest nicht “gnadenlos gut” funktionieren.
Online Zeitungen sind aber auch arschschwer.
Was Dein Problem angeht: man könnte vielleicht die Bilder nach links aus dem Text in die Marginalienspalte ziehen, dann hat der Fließtext rechts mehr Platz zum Umnlaufen. Allerdings müsste dann evt. Bildunterschriften an andere Stelle (ganz klassisch unter das Bild zum Beispiel?).
Dies ist noch eine der Lösungen, die ich in Betracht ziehe, einzig weil sie funktionieren würde, ohne im Inhalt der jeweiligen Einträge was ändern zu müssen. Das Problem bleibt primär funktioniell. Bilder in der normalen Breite der Texte, haben im CSS die gleiche Formatierung. Soweit so gut. Problem entsteht, wenn Bildunterschriften ins Spiel kommen, die im HTML auch noch vor dem img-Tag stehen. Im Klartext heisst dies, dass egal ob mit oder ohne Bildunterschrift, Bilder dieser einen CSS-Klasse an der gleichen Stelle sitzen müssen.
Mein HMTL-Code ist auch so aufgebaut, wie die Elemente visuell im CSS Erscheinen. Kommen noch innere Überschriften hinzu, entsteht ein Float-Modell, dass kaum zu bändigen ist. Dass alles bisher so gut funktioniert, ist mir immer noch ein Rätsel. Auch ich habe mehr als einmal Einträge so verfasst, dass die Text-Blöcke mit dieser Breite einen angenehmen vertikalen Rhythmus bekommen: was du als “passgenaues Schreiben” bezeichnest, habe ich manchmal auch hier gemacht und genau das rächt sich jetzt. Ändere ich die Breite und benutze deinen Vorschlag, geht dieser vertikale Rhythmus verloren und es entstehen z.B. zweizeilige Text-Blöcke zwischen zwei Bildern. Hier mal ein Beispiel.
Ich komme wohl nicht herum, da ein paar Inhalte zu ändern.
Also meinst Du das “Time” (time.com) Magazin oder Die Times (times.com) ? Auch wenn time.com ein bischen besser funktioniert als times.com, muss ich auch sagen, dass beide zumindest nicht “gnadenlos gut” funktionieren.
Ich meinte schon die Print-Ausgabe, auch wenn mein Urteil nur von einer Ausgabe stammt.
Online Zeitungen sind aber auch arschschwer.
Abgesehen von der Start-Seite ist die Online Ausgabe der NY Times relativ perfekt. Kein Wunder, da führt auch er hier Regie.
Zugegeben Online-Zeitungen haben auch wirklich alles an Inhalten darzustellen. Ich hier kann meine Bilder auf zwei Maße schneiden, Texte anpassen, zur Not neue CSS-Formate schreiben usw. Solche Freiheiten besitzen große Informations-Seiten nicht. Es hat einen Grund, wieso es sehr wenige gute Auftritte von alten Printmedien gibt und ja auch ich gebe zu, Zeitungen im Web zu präsentieren ist arschschwer.
Es hat einen Grund, wieso es sehr wenige gute Auftritte von alten Printmedien gibt und ja auch ich gebe zu, Zeitungen im Web zu präsentieren ist arschschwer.
**gg tja, selbst wenn man den Tiger im Tank hat… da kommen dann immer noch die Leute, die die Seiten füttern. Da ist dann meist Hopfen und Malz verloren, wenn man kein Nothing-Allow-CMS benutzt(en kann).
Zu Bildern und Textrhythmus: die Grafik zeigt sehr einleuchtend, was gemeint ist. Was Code-Reihenfolgen angeht, das hätte ich tatsächlich anders interpretiert, bspw. bei “Bildunterschriften”. Die kommen IMHO dorthin wie der Name schon sagt: unters Bild
(damit sie ohne CSS auch dort angezeigt werden). Aber das ist natürlich auch Erbsenzählerei… 
Frohe Ostern.
“Nothing-Allow-CMS” ist ein schöner Begriff, besonders weil er ja ein All-Allow-CMS impliziert.
@chrismue: Oh. PRINT-Ausgaben, ja das hatte ich gar nicht in Betracht gezogen.
Die Screenshots in diesem Artikel scheinen schon aus dem Browser zu sein. Wie kommen dann die Rasterstreifen in Bild? Ein Entwicklungs-Hintergrundgrafik? Magste die vielleicht verlinken - die könnte ja auch für andere hilfreich sein.
Ach ja und noch überhaupt: Suuuper! Ich freu mich hier wieder hinter die Kulissen blicken zu dürfen und freue mich riesig, dass Du soviel von deinem Know How hier dokumentierst. Herzlichen Dank!
@ben_: Genau, das ist wieder eine normale Hintergrund-Grafik für das body-Tag der HTML-Seite. Die Grafik hier zeigt sowohl Spalten- als auch Grundlinien-Raster. Zwar etwas verwirrend zum Arbeiten, aber anders bekommt man eine solche Präzision beim Positionieren nicht hin.
Kuhl! Danke. Und ich bin erstaunt. Im “Tutorial: Gestaltungsraster im Webdesign” bestand dein Layout noch aus 3 Spalten. Jetzt sind es 8. Ich sehe ein, dass man mit der feineren Einteilung mehr erreichen kann, aber warum gerade 8? Ich nehme an, 8 ist die nächsthöhere Zahl, die ähnliche Proportionen wie 3 Spalten erlaubt, oder? Und wie breit sind jetzt die Spalten und die Zwischenräume?
Vermutlich wird trotz eines breiteren Layouts, die Breite der Eintragsinhalte gleich bleiben.
Halte ich auch deshalb für die bessere Lösung, weil der Text in seiner aktuellen Breite einfach hervorragend lesbar ist. Auch auf Monitoren mit deutlich höherer Auflösung als 800 in der Breite. Das ist bei noch breiteren Haupttextspalten dann eher nicht mehr so, zumindest nach meinem Empfinden.
Ja. Wenn Du die Fließtextschriftgröße nicht änderst ist die eigentliche Textbreite super so. Ich hab aber trotzdem nochmehr fragen:
In deinem Grundlinienraster, sind da die schmalen Abstandsspalte zwischen den breiten Spalten genau so breit, wie die Zeilenhöhe? In der Grafik sieht das so aus und in den meisten Anleitungen zur Rastertypographie wird das auch immer so gemacht. Ich bin mir aber nicht sicher, ob das so soll.
In der Grafik ist mir dabei aufgefallen, dass das nicht ganz passt. Die Zeilen des Fließtextes verschieben sich zum Raster. Ziehst Du das noch “gerade” oder muss man beim Webdesign damit leben?
Fragen werden alle in folgenden Einträgen beantwortet. Zumindestens viele die hier gerade aufkommen sind schon im zweiten Teil irgendwie mit drin. Nur soviel kurz hierzu:
In der Grafik ist mir dabei aufgefallen, dass das nicht ganz passt. Die Zeilen des Fließtextes verschieben sich zum Raster. Ziehst Du das noch “gerade” oder muss man beim Webdesign damit leben?
Damit muss man leben, einfach deshalb weil sich vertikal ganz schlecht im Browser bemaßen lässt. Im Print-Layout setzt du ein Häckchen und alle Texte kleben auf dem Raster, egal welche anderen Elemente dazwischen rücken, die Zeilen klinken sich immer wieder ein. Im Webdesign noch undenkbar.
Ich habe die Zeilen momentan noch als Grafik drin, um die jeweiligen Blöcke an sich zu kontrollieren, denn mit allzu relativen Größen entstehen in fast allen Browsern schnell Rundungsfehler, was die Maße betrifft. Sowas sieht man dann recht schnell mit einer solchen Hintergrundgrafik.
Zeilenhöhe = Spaltenbreite? Reiner Zufall, dass dies bei mir um nur 2 Pixel variiert. Aktuell entsteht dann eine Zeilenhöhe von 18 Pixeln bei Standart-Browser-Font-Größe (16 Pixel), während die Spalten immer noch noch mit 20 Pixel Abstand liegen.
Vorschau:
HTML ist in Kommentaren zugelassen. Erlaubt sind die HTML-Tags:
<a href>, <i>, <p>, <strong>, <em>, <ul>, <ol>, <li>, <blockquote>.
Alle themenfremden oder persönlichkeistverletzenden Beiträge werden gelöscht, also immer schön sachlich argumentieren.
schrieb: