liquid design auf em/ex Basis

Gert Thiel Feb. 10, 2005, 4:56 p.m.

Das mit dem Bild sollte nicht schwer sein. Hintergrundbild an der linken Seite um eine breite blaue Fläche erweitern und das Bild per CSS am rechten Rand anschlagen.
Siehe auch http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_position

Gert Thiel Feb. 10, 2005, 4:58 p.m.

Ach so: Und den Titel als normalen Text linksbündig über das Hindergrundbild fliessen lassen. Auf diese Weise bildet der Text ein Gegengewicht zum Bildmotiv.

hugo Feb. 10, 2005, 6:22 p.m.

Naja, die blaue Fläche ist nicht so eine gute Idee, da im Bild Himmel ist - und Digitalkameras in monochromen Flächen immer leichtes Farbrauschen haben. Das sähe mann :-)

Eher werde ich mir wohl was für den Titel überlegen wie ich ein normales Bild entsprechend vorbereite so das es nach links "ausblasst" und dann entsprechend in einen "künstlichen" Farbbereich reinsetzen. Oder ich kippe das mit dem Bild komplett und mache da nur Textart.

Oder ich lass das ganze so wie es ist. Letzteres ist bei meinen überragenden Design-Fähigkeiten sowieso das warscheinlichere ;-)

Gert Thiel Feb. 10, 2005, 9:39 p.m.

Die "Fläche" braucht doch keine einzelne Farbfläche zu sein. Wenn Du die Himmelfäche links kopierst und in die neue Weissfläche eines vergröserten Bildes einstempelst, solltest Du einen schönen Hintergrund für Titeltext und Foto haben.
Das Bild solltest Du lassen, wo es ist. Nur Textart oder so und 'the unique design' ist hinüber.
Du kannst mir das Bild (in möglichst guter Qualität) ja mal zumailen.

hugo Feb. 10, 2005, 9:49 p.m.

Nene, das macht keinen Spaß den Hintergrund des Bildes zu "verlängern" - ich hab da Erfahrung mit, Himmel anstückeln ist witzigerweise weitaus schwerere Arbeit als deutlich bewegtere Motive. Beim Himmel würde ich die Übergänge immer sehen und mich ärgern. Und zur dynamischen Verlängerung braucht es ja eine gut "kachelbare" Fläche. Das macht bei Himmel einfach keinen Spaß.

Zumal an diesem Design garnichts unique oder originell ist - das einzige eigene Element ist halt die Kopfgrafik und mein blödes Foto. Alles andere ist mehr oder weniger (mehr mehr als weniger) Kubrick Standard. Von daher lohnt es sich eh nicht da gross was reinzustecken, wenn was neues kommt muss es schon was wirklich neues sein.

Gert Thiel Feb. 10, 2005, 10:03 p.m.

Nanu, von einer "dynamischen Verlängerung" hatte ich nicht geschrieben. Da "Anstückeln" müsste in Photoshop o.Ä. vorgefertigt werden. Der Browser soll vom Bild dann nur den rechten Teil verwenden, der in DIV oder was auch immer passt.

hugo Feb. 10, 2005, 10:11 p.m.

Ja ebend. Und wenn der rechte Teil des Bildes benutzt wird und untendrunter der "Himmel" liegt als Hintergrund, dann sieht man die Überlappungen. Und an den Grenzen bilden sich genau die Übergangslinien. Klar, man könnte die Nicht-Himmel-Bestandteile freistellen - aber Transparenz gibts nur mit GIF Browserübergreifend. PNG tuts nur mit wenigen Browsern mit der Transparenz. Also fällt auch das flach, denn Fotoelemente in GIF sehen einfach nur bescheiden aus.

Einen gleichmäßigen Himmel aufbauen kann man, klar. Einfach einen Streifen ausschneiden und diesen so präparieren das er ordentlich und ohne auffällige Kanten kachelt (das meinte ich mit "dynamischer Verlängerung" - bei einem Liquid-Design weiss ich ja nie wie breit das Browserfenster ist und muss daher realistisch mit Kachelbarem Hintergrund arbeiten).

Manuell zu erstellen ist das nervig, aber dafür gibts ja zum Glück Software die das macht. Nur kriegt man da eben nicht wirklich gut integriert andere Bildelemente rein die sich glatt einbinden lassen. Das Foto ist ja drübergelegt - aber das hat so wenige Farben das ich es als GIF speichern konnte mit Transparenz. Dadurch geht das. Fällt aber eben bei den anderen Elementen flach. Und würde ich einfach nur den rechten Teil des Bildes abschneiden und "drüberlegen" über den gekachelten Hintergrund bildet sich sofort eine Übergangskante wo der Rand des drübergelegten Bildes ist - denn egal wie man den Hintegrund vorbereitet, das drübergelegte Bild kann aufgrund der Mikrostruktur nie 100prozentig da draufpassen.

Aber genau das ist ja das Problem bei Liquid-Designs: das die überlappenden Bereiche eben dynamische Positionen einnehmen. Deshalb sind Liquid-Designs mit beweglichem Kopfbereich viel einfacher wenn man dafür gezeichnete/konstruierte Grafiken nimmt, da man diese auf Reinfarben auslegen kann. Damit kann man dann problemlos einen passenden Hintergrund wählen und die Übergänge sind nicht sichtbar. Ausserdem kann man oft auch mit Transparenz arbeiten, da man aufgrund der reduzierten Palette problemlos mit GIF arbeiten kann.

Abgesehen davon das es eh nicht so ganz simpel ist, weil das derzeitige Top-Bild ja schon der Hintergrund des entsprechenden DIV ist. Klar, man kann mehrere DIVs übereinanderlegen und dann unterschiedliche Hintergrundgrafiken setzen, nur hat dann das Ergebnis nicht mehr wirklich viel mit semantischem Markup zu tun. DIV-Inflation ist genauso wenig spannend wie Table-Desgin :-)

Gert Thiel Feb. 10, 2005, 10:13 p.m.

Übrigens: Wenn ich in Exposé zehn Fenster verkleinert vor mir sehe, finde ich das Fenster im Deinem Weblog immer wieder; Das blöde Foto *ist* unique.

hugo Feb. 10, 2005, 10:15 p.m.

Aber wirklich nur das blöde Foto, alles andere ist geklaut oder ge-"faul"-t ;-)

Gert Thiel Feb. 10, 2005, 10:16 p.m.

Scheint mir als denkst Du an zwei Bilder. Ich denke an nur ein Bild. Und nur das kommt per CSS in den Hintergrund. Skype me: gustavgans2005

Gert Thiel Feb. 10, 2005, 10:20 p.m.

Etwa so:
div#TitelMitFoto {
background-image: url(RiesigeBloedesFoto.png);
background-repeat: no-repeat;
background-position: right;
}

hugo Feb. 10, 2005, 10:21 p.m.

Dann ergänzt sich das Bild aber nur bis auf eine maximale Breite, wenn es nur eines ist. Dadurch kann man das Browserfenster nur auf eine maximale Breite ziehen - und das Hauptproblem: das Bild komprimiert aufgrund der Mikrostruktur im Himmel nicht so gut das man es einfach mal eben auf 2000 Pixel verbreitern könnte.

Um die Ladelast klein zu halten macht man üblicherweise einen gekachelten Hintergrund, der damit "unendlich" ist. Und legt dann die eigentlichen Design-Elemente darüber (z.B. die Kacheln als Hintergrund des umspannenden DIV und die design-Elemente als CSS-Image-Ersatz für den H1 oder als Hintergrund eines enthaltenen DIV). Dadurch kann das Browserfenster beliebig breit werden, der Hintergrund geht nicht aus und das überliegende Bildelement passt auch immer.

Geht halt nur bei Fotos nicht. Ich könnte mir natürlich eine Baggerschaufel selber malen, oder mit Filtern das Foto in Reinfarben wandeln - letzteres wäre warscheinlich sogar eine halbwegs realistische Methode, denn meine Photoshop-Filter-Fähigkeiten sind weitaus besser als meine Zeichenfähigkeiten (was nicht schwer ist, da meine Zeichenfähigkeiten nicht existent sind ;-) ). Vielleicht wäre das mit dem Filter zur Palettenreduktion wirklich ne sinnige Idee, damit muss ich mal rumspielen wenn ich Zeit hab.

Und nix Skype hier - die doofen Heinis machen das nur für 10.3 und ich hab noch 10.2 ...

hugo Feb. 10, 2005, 10:31 p.m.

Achso, und ein zweites Problem ist natürlich, das das Top-Bild die runden Ecken etc. mit enthält. Um sowas hinzubekommen muss man eh zwei Bilder wählen, die sich übereinanderschieben - und das geht dann auch wieder nur mit Reinfarben (die beiden Bilder würden oben links und unten rechts angetackert und überlappen sich in der Mitte). Aber auch das wäre dann wieder mit einer maximalen Breite versehen, ausser man arbeitet da dann wieder mit getrennten Bildern für die Ecken und einem kachelnden Hintergrund. Aber das wird dann so viele DIVs und ergibt einfach nur noch hässliches HTML, da machts dann auch keinen Spaß mehr.

Die runden Ecken würd ich warscheinlich sowieso kippen. Solange CSS kein verbreitetes Standardelement für runde Ecken hat, ist das eh alles nur Gebastel mit komischen Bildchen.

Gert Thiel Feb. 10, 2005, 10:32 p.m.

Alternative: Das Bild freistellen, in einen transparent Hintergrund montieren und für das Kachelbild etwas verwenden, was man horizontal vervielfältigen kann. Dein Fotohimmel ist nämlich horizontal konstant und das Blau changiert nur von Oben nach Unten.

Gert Thiel Feb. 10, 2005, 10:33 p.m.

Wolltest Du nicht ein ganz neues CSS. Liquid, auf em/ex Basis?

hugo Feb. 10, 2005, 10:35 p.m.

Das ist mir schon klar - nur dummerweise kann man bei Fotos das mit dem Freistellen zwar machen, aber das drüberlegen über den gekachelten Hintergrund nicht. Jedenfalls nicht sinnvoll - denn das tuts nur mit GIF. Und GIF hat nur maximal 256 Farben, was bei Fotoelementen zu hässlichem Dithern führt. In diesem Fall könnte es vielleicht klappen wenn ich die Schaufel und das Haus getrennt freistelle, da beide wieder relativ reduzierte Farbigkeit haben. Das Haus müsste problemlos als GIF gehen (evtl. ein bischen mit Filter drüber), aber die Schaufel wird hakelig. Ohne Farb-Reduktion wird das warscheinlich nix werden. Und Schaufel+Haus zusammen werden warscheinlich auch wieder den Umfang von GIF sprengen.

Gert Thiel Feb. 10, 2005, 10:38 p.m.

Auch PNG bietet Transparenz. Und Netscape 4 sollte mittlerweile Geschichte sein.

hugo Feb. 10, 2005, 10:40 p.m.

Und ja, klar, wenn würde es ein neues Layout. Aber auch ein neues Layout hat eine grundsätzlich ähnliche Struktur - also die Elementverteilung auf der Seite wollte ich schon so lassen. Es ginge - wenn ich denn überhaupt was dran mache - hauptsächlich darum das Layout erstmal von der starren Breite zu befreien, damit Besucher den Font vergrössern oder verkleinern können ohne das das Layout zerfetzt wird.

Oder halt ein ganz flüssiges Layout, bei dem die Zeilenlängen nicht mehr vorgegeben sind - denn auch bei dem ganz oben verlinkten Layout bleibt natürlich das Problem bestehen das es irgendwann Scrollbalken produziert. Denn eigentlich ist es ja garnicht liquid, sondern fixed auf em/ex Basis.

Oder ich lass es so wie es ist :-)

Übrigens ist das ganz oben verlinkte Layout natürlich nicht liquid, sondern fixed. Nur halt em/ex. Hab ich irgendwie falsch geschrieben. Egal. Merkt ja ausser mir eh scheinbar keiner ;-)

Gert Thiel Feb. 10, 2005, 10:41 p.m.

Wenn ich ein Experte in Photoshop wär -- freistellen und so -- hätte ich das schon fertig. Aber in Wirklichkeit bin ich Programmierer (Ein von den Spinnern, die HTML-Seiten mit den Texteditor bauen).

hugo Feb. 10, 2005, 10:41 p.m.

PNG und IE? Oha. Nicht sehr verlässlich. Und auch diverse andere Browser zicken damit rum - besonders bei Transparenz. Leider. Ich würde viel lieber mit PNG arbeiten. Wobei allerdings Fotos und PNG dann wieder grosse Dateien bedeutet, also letztendlich in diesem konkreten Fall auch keine Lösung darstellt.

Gert Thiel Feb. 10, 2005, 10:42 p.m.

Eine feste Breite mach Sinn. Sonst werden die Zeilen überlang und erschweren das Lesen. Und das "Liquid" habe ich nur zitiert.

hugo Feb. 10, 2005, 10:47 p.m.

Ich weiss - ich schrub ja, ich hab das selber oben falsch geschrieben :-)

Klar, feste Breiten sind förderlich fürs Lesen. Aber hinderlich für Sehbehinderte: wenn diese den Font grösser stellen kommen irgendwann die horizontalen Scrollbalken, was dann für diese Besucher das Lesen deutlich erschwert.

Gerade unter dem Aspekt Fontvergrösserung machen echten Liquid Designs wieder deutlich mehr sinn. Nur sehen die halt meistens ziemlich scheisse aus, wenn der Benutzer einen Minifont auf einem 2000x1500 Pixel Display mit Browserfenster Fullscreen hat ...

Theoretisch gibts dafür min-width und max-width in CSS. Nur dummerweise haben einige Browser böse Bugs bei der Verwendung von diesen beiden in Kombination. Denn das wäre ja das Optimale: einfach ein Liquid Design und in em angeben wie viel Breite maximal und minimal da sein sollte. Minimalbreite evtl. auch in px, da man sich dabei ja in der Regel auf Layoutelemente wie Grafiken etc. bezieht. Dadurch hätte man das beste aus beiden Welten. Dummerweise vermiesen einem die Browserbugs sowas.

Jutta hat sich da in der letzten Zeit mal intensiver mit beschäftigt als sie die Debian-Webseiten komplett auf CSS umgebaut hat. Da ist sie über eine ganze Reihe von diesen Beschränkungen gestolpert. War nicht wirklich schön - und hat sie letztendlich gezwungen das ganze Design wieder voll Liquid auszulegen.

Gert Thiel Feb. 10, 2005, 10:50 p.m.

Ohne Kompromisse geht es nicht. Oder spezielle CSS für spezielle Browser. Oder wie wäre Styleswitcher?

hugo Feb. 10, 2005, 10:55 p.m.

Styleswitcher ginge schon, ja. Mal schauen. Im Moment hab ich eh nicht die Zeit und die Lust mich da tiefer reinzuwühlen. Layoutänderungen kommen bei mir in der Regel schlagartig und sind dann ausgesprochen grausig - oder ich sitze ewig auf dem Default-Style. Bei meiner PyDS Website habe ich immer noch das armselige grüne Basislayout das ich damals mal für den PyDS gestrickt habe als ich angefangen habe das Teil zu programmieren :-)

Ich hab allerdings gerade mal die Kopfgrafik mir in Photoshop angeguckt, müsste sich sehr gut Farbreduzieren lassen. Mit 128 Farben habe ich schon eine recht brauchbare Basis und wenn ich dann noch die Schaufel und das Haus freistelle und auf einen reinfarbenen Hintergrund lege müsste das sogar gehen. Die Schaufel scheint doch in der Farbigkeit schon deutlich reduzierter zu sein als ich vermutet hab. Naja, gut, ich hab jetzt ja auch das schon selber reduzierte Kopfbild genommen und nicht das Originalbild.

Gert Thiel Feb. 10, 2005, 10:58 p.m.

Ok. Dann wünsche ich uns eine gute Nacht.