bewertung meiner neuen spielwiese

[suit]

bitte um bewertung der obrigen baustelle - aktuell gehts vorrangig um den inhaltsbereich links

zugangsdaten (ist nur, um bots und crawler halbswegs zuverlässig auszusperren):
user: suit
pass: rebell

der inhaltsbereich hat eine minimalbreite und eine maximalbreite und wächst dynamisch mit der viewportbreite mit

todo:
formulare

bekannte probleme:
aktuell spinnt natürlich der ie6, da dieser weder min- noch max-width versteht - hierzu wären ein paar vorschläge praktisch, primär habe ich aber für die ie6 eine feste breite vorgesehen, die der minimalbreite entspricht

safari 3 unter windows stellt das <pre>-<code>-konstrukt nicht wie gewünscht dar (erste zeile im code verschwindet negativ oben rein - hängt wahrscheinlich mit dem negativen margin oben zusammen ;)

anregungen/wünsche/beschwerden/fehler aller art bitte hier posten
btw: bis auf den rot-gelben sidebar-bereich sind die farben bzw das farbschema weitestgehend final - grau/weiss/grün soll es sein

für neugierige, das ziel der seite:
es sollen auf dieser seite codeschnipsel (vorwiegend html/css-optimierungsmaßnahmen im zusammenhang mit typo3) veröffentlicht werden, da ich der meinung bin, dass viele vorhandene typo3-ressourcen eine frechheit sind (teilweise gibts 100 zeilen typoscript die irgend ein depp als lösung präsentiert, obwohl eigentlich nur 2 oder 3 zeilen relevant sind ;)) zudem dient das ganze für mich selbst als spielwiese um zu sehen, wie einfach die standard-frontend-erweiterung (css_styles_content) kastriert werden kann, um sinnvollen html-code zu produzieren - den den aktuellen webseiten die ich betreue ist mir das persönlich immer noch zu viel obwohl der code schon sehr sauber ist

[Patrick Andrieu]

Hallo suit!

bitte um bewertung der obrigen baustelle - aktuell gehts vorrangig um den inhaltsbereich links

Was soll ich da bewerten? Im IE 6 bekommen ich nichts zu sehen, außer einen als »header« betitelten, dunkelgrauen Bereich, viel nichts in der Mitte, und nochmals einen grauen Bereich unten.

Und einen waagrechten Scrollbalken gibt es auch noch, der aber auch zu  »nichts« führt.

Viele Grüße aus Frankfurt/Main,
Patrick

[suit]

Was soll ich da bewerten? Im IE 6 bekommen ich nichts zu sehen, außer einen als »header« betitelten, dunkelgrauen Bereich, viel nichts in der Mitte, und nochmals einen grauen Bereich unten.

scherzkeks ;) ich sagte doch bereits, dass ich mir für diesen defekten browser noch etwas überlegen muss

[Patrick Andrieu]

Hallo suit!

scherzkeks ;) ich sagte doch bereits, dass ich mir für diesen defekten browser noch etwas überlegen muss

Hm ja... wärst Du nicht ein fanatischer Großschreibungsverweigerer, wär' mir das vielleicht aufgefallen ;)

Viele Grüße aus Frankfurt/Main,
Patrick

[Beat]

der inhaltsbereich hat eine minimalbreite und eine maximalbreite und wächst dynamisch mit der viewportbreite mit

Unter 960px ist es nicht liquide.
Das finde ich etwas sperrig.

hover Link: Unterstreichung verschwindet:
== Der Link will sich vor mir verstecken.

Ich mag es nicht, wenn Text sich nicht an eine bestimmte konstante em Grösse bezüglich der Zeilenbreite hält, sprich, alle Breite beim Hochskalieren schon verschenkt ist.

Bei text-align:justify bitte mehr line-height.

mfg Beat

[suit]

Unter 960px ist es nicht liquide.
Das finde ich etwas sperrig.

ich hatte es schon breiter - rund 1250 + den sidebar damit sich das ganze mit einem 1680 breiten viewport gut ausgeht - die frage ist, ob dann nicht die zeilen zu lang werden (ist mir halt so vorgekommen)

hover Link: Unterstreichung verschwindet:
== Der Link will sich vor mir verstecken.

da bin ich auch noch am überlegen, wie ich das am besten mache - aber ein reiner farbwechsel beim mouseover eines links ist teilweise schwierig zu erkennen

Ich mag es nicht, wenn Text sich nicht an eine bestimmte konstante em Grösse bezüglich der Zeilenbreite hält, sprich, alle Breite beim Hochskalieren schon verschenkt ist.

dem kann ich nicht ganz folgen, sprich ich versteh nicht, was du da meinst

Bei text-align:justify bitte mehr line-height.

ist notiert

[Beat]

Ich mag es nicht, wenn Text sich nicht an eine bestimmte konstante em Grösse bezüglich der Zeilenbreite hält, sprich, alle Breite beim Hochskalieren schon verschenkt ist.
dem kann ich nicht ganz folgen, sprich ich versteh nicht, was du da meinst

Ich habe halt gerne Text-Zeilen die 35em breit sind, egal wie ich zoome, und dass sie das auch innerhalb eines gewissen Bereichs schaffen.

also
p{ max-width:35em; width: nn%; }

liest sich einfach besser.

mfg Beat

[suit]

also
p{ max-width:35em; width: nn%; }

liest sich einfach besser.

muss ich mal ausprobieren - aktuell hab ich mich beim wachsen des inhalts auf viele andere seiten die ich so kenne bezogen - die wikipedia zb

flexibler inhaltsbereich mit variabler schrift - die breite des inhaltsbereichs ist unabhängig von der schriftgröße und füllt immer den verbleibenden viewport

kurz: die lösung wie sie zb die wikipedia hat (einfach einen gummi-inhaltsbereich) ist nicht das deine?

im übrigen, mir sind da die textzeilen zu lang ;)

[Beat]

muss ich mal ausprobieren - aktuell hab ich mich beim wachsen des inhalts auf viele andere seiten die ich so kenne bezogen - die wikipedia zb

Ach, der heutige Webdesigner plagt sich mit zwei, drei Spalten und Floats.
Wenn du da noch was sagst von wegen optimalen Lesezeilen, dann ist der reif...

flexibler inhaltsbereich mit variabler schrift - die breite des inhaltsbereichs ist unabhängig von der schriftgröße und füllt immer den verbleibenden viewport

Genau. Das ist 0815, und erfüllt eher die Frage:
Wie fülle ich den Bildschirm, statt
Wie behalte ich die Eigenschaft des Bildschirms als ein nicht ermüdendes Medium auch für die Wahrnehmung von Worten, Phrasen, Absätzen, Geschichten und letztlich: verbale Erfahrung.

kurz: die lösung wie sie zb die wikipedia hat (einfach einen gummi-inhaltsbereich) ist nicht das deine?

Nein.
Es gibt bei Wikipedia viele Situationen, wo es nicht mehr funktioniert.
Beispiel:
Eine Tabelle wird im Content-Flow aufgeführt.
Diese Tabelle wird sich nicht anpassen, sondern überall drücken und schieben, sobald ich zoome.
Dies gilt besonders bei deutsch mit langen Worten.
Noch schlimmer wird es, wenn Tabellen in einer Randcolumne vorliegen. Die überdecken dann einfach den Inhalt.

Wenn ich einen typischen Blog lese mit Randspalte etc... so ergibt sich auf _meinem_ Bildschirm meistens nicht das Problem zu langer Zeilen. Das Problem taucht wie gesagt erst auf, wenn ich dann Zoome und dann das Schlamassel ganz schnell offenbar wird.

Im Falle von Wikipedia etc gäbe es eine Abhilfe, wenn man partout prozentual relativ zum Viewport dimensionieren will:
Tabellen in einen div container stecken mit overflow:auto.

Das Arbeiten mit einer max-width für Text verlangt, dass man etwas Rand verschenkt, für den Fall, dass jemand doch zoomen muss/will.
In Massen gezoomt tritt dann das Wiki-Problem nicht mehr auf.

Aber wie gesagt, das Argument ist Geschmackssache.
Sobald viel Lektüre angesagt ist, finde ich eine max-width zwischen 35 und 40 em angenehm.

In Massen kannst du bei mir (link oben) den Inhaltsbereich zoomen.
Ich habe die Breite immer noch etwas weiter als die typische Buchzeile gewählt.

Weil es nicht ganz einfach ist, optimale Lesezeilen mit Mehrspalten-Layout zu kombinieren, habe ich auf ein solches Layout von Anfang an verzichtet.
Ich hatte aber auch, ehrlich gesagt, strukturell keinen Bedarf dazu.

[Edgar Ehritt]

Hallo erstmal!

anregungen/wünsche/beschwerden/fehler aller art bitte hier posten
btw: bis auf den rot-gelben sidebar-bereich sind die farben bzw das farbschema weitestgehend final - grau/weiss/grün soll es sein

Aber ausgerechnet das ist der einzige Punkt, den ich an der sonst sehr stimmigen Gestaltung ansprechen wollte. Kopf- und Fußbereich des Dokuments bilden einen zu starken Kontrast zur sonst ausgewogenen und schön dezenten farblichen Akzentuierung. Ein helleres, vielleicht auch mattes, hoffnungsvolles Grün statt des grimmigen Schwarz könnte das ausräumen. Die Navigation (rechts) könnte sich farblich entweder daran anlehnen (ohne Blickfang zu werden) oder kontrastieren (Rottöne [auch diese vielleicht eher matt]).

Gruß aus Berlin!
eddi

[suit]

Ein helleres, vielleicht auch mattes, hoffnungsvolles Grün statt des grimmigen Schwarz könnte das ausräumen.

damit hab ich auch schon herumprobiert, einen kräftigen, eher dunkleren grünton statt dem grau - sieht ansich ganz gut aus - aber der header und footer werden ohnehin noch etwas befüllt, dann siehts ggf nicht mehr so schlimm aus denke ich - und im zweifelsfal kann man den hintergrund noch tauschen

[sebastian1992]

Hallo,

das Farbkonzept gefällt mir gut, nur scheint die Navi mir überflüssig breit. Mal sehen, was draus wird.

Gruß Sebastian

[suit]

das Farbkonzept gefällt mir gut, nur scheint die Navi mir überflüssig breit. Mal sehen, was draus wird.

die primärnavigation soll über die seite drüber, rechts sollen rubriken hin, tags und weiterführende informationen - könnte aber wirklich etwas breit sein, da hast du recht ;)

[Inita_]

!?!

doch muss man css/html bewerten, nicht farben !!!

Inita

[suit]

doch muss man css/html bewerten, nicht farben !!!

alles bewerten, warum nicht - wenn ich einen totalen gehirnkrampf hatte und ich jetzt noch darauf hingewiesen werde, ist das gut ;)

die farben im inhaltsbereich selbst sind ja schon weitestgehend final

am html kann bzw darf/soll ich übrigens nicht viel ändern - die templates sollen möglichst auf anderer systeme protabel sein, darum ist das markup immer weitestgehend gleich (ist sowas wie yaml)

[bleicher]

Grüße,
die tonwerte könen töten - knallgelb mit knallrot am rande wird jede versuche sich auf den inhalt zu konzentrieren scheintern lassen. lenk den user/leser nicht vom inhalt ab.

das ist sowas wie eine nackte frau am rande der kreuzung - nicht sehr konzentrationsfördernd

MFG
bleicher

[Christoph Schnauß]

hallo suit,

user: suit
pass: rebell

funktioniert nicht (mehr?) :-(

Grüße aus Berlin

Christoph S.

[suit]

funktioniert nicht (mehr?) :-(

grade ausprobiert, funktioniert

[Inita_]

Suit,

in den beispielen sollte man den css in .html file schreiben, damit man kann leichter mit den code spielen!

Inita

[suit]

in den beispielen sollte man den css in .html file schreiben, damit man kann leichter mit den code spielen!

wie ist das gemeint?
das aktuell vorliegende template (und der vorliegende html code) ist bereits der entwicklungsstand

wenn ich damit spielen will, kann ich das css-file direkt editieren oder im browser mit dem webdeveloper toolbar herumspielen - dabei ist es egal, ob das css ausgelagert ist oder nicht, sauberer ist aber die ausgelagerte variante

oder hab ich dich jetzt falsch verstanden?

[Inita_]

hh

und noch sidebar (gelbe bereich), waer gut, wenn es bin nach unten gehen wuerde, also, solang wie das content ist.

Inita

[suit]

und noch sidebar (gelbe bereich), waer gut, wenn es bin nach unten gehen wuerde, also, solang wie das content ist.

ja, sidebar wird mittels faux columns bis nach unten gezogen - der gelbe bereich ist der eigentliche sidebar, der rote rand ist der pseudomargin zum rand anders hab ichs mit dem abstand zum rand nicht hinbekommen, sonst hat der internet explorer 7 unsinnigerweise einen horizontalen scrollbalken ;)

[Inita_]

hh

und noch waer gut, wenn das content in der mitte stehen wurde, also, margin:0 auto.

Inita

[suit]

und noch waer gut, wenn das content in der mitte stehen wurde, also, margin:0 auto.

der content ist bewusst nicht in der mitte - einerseits wirkt so ein flexibles layout sehr seltsam, andererseits sind zentrierte webseiten bei breiten viewports und besonders im mehr-monitor-betrieb äusserst hinderlich

das ist natürlich geschmacksache, aber wenn man sich so umsieht - die tendenz geht doch eher mehr wieder zu linksbündigen geschichten (auch im blog-bereich)

[Joachim]

Hi,

bitte um bewertung der obrigen baustelle - aktuell gehts vorrangig um den inhaltsbereich links

hm, ist aber noch sehr Baustelle...

Die Farben sind schwer zu beurteilen, da gelb-rot ja wohl temporär ist. Dunkelviolett und zartgrün prallen auf jeden fall sehr hart aufeinander, bei den derzeitigen Grössenverhältnis´entsteht hier eine sehr ungleiche Gewichtung.

Bei der Typografie gibts imho auch einiges zu tun: justify in der Breite ohne Absätze ist schwer leserlich (Bin eh kein Freund von Blocksatz). Wenns sein muss solltest Du mit dem padding und vor allem mit line-height etwas grosszügiger sein.

Die Abstimmung zwischen Überschrift und Fliesstext ist recht unstimmig, so dass Deine Überschriften sehr grob erscheinen. Wenns unbedingt diese Grösse sein soll ggf. mal "normal" versuchen...
Für die Listen lässt Du Dir aber noch etwas einfallen oder? Die sind _sehr_ puristisch.

Nur bei vollem Viewport erkennt man, dass der Header sowohl links als auch rechts etwas übersteht (oder ist rot nur der rechte Randabstand?). Dadurch kippt die Seite optisch nach links, wenn der Viewport kleiner ist. Ich bin mir nicht sicher, ob dieses "Überstehen" glücklich gewählt ist.

Nun denne, soweit erst mal...

Gruesse, Joachim

[suit]

hm, ist aber noch sehr Baustelle...

jep - lieber vorher den plan korrigieren, als das haus nachher abzureissen ;)

Die Farben sind schwer zu beurteilen, da gelb-rot ja wohl temporär ist. Dunkelviolett und zartgrün prallen auf jeden fall sehr hart aufeinander, bei den derzeitigen Grössenverhältnis´entsteht hier eine sehr ungleiche Gewichtung.

dass der sidebar ggf zu breit ist, wurde auch schon gesagt - wird mit hoher wahrscheinlichkeit schmäler

Bei der Typografie gibts imho auch einiges zu tun: justify in der Breite ohne Absätze ist schwer leserlich (Bin eh kein Freund von Blocksatz). Wenns sein muss solltest Du mit dem padding und vor allem mit line-height etwas grosszügiger sein.

line-height wird erhöht, darauf wurde ich schon hingewiesen - ob blocksatz bleibt oder nicht, weiss ich auch noch nicht

Die Abstimmung zwischen Überschrift und Fliesstext ist recht unstimmig, so dass Deine Überschriften sehr grob erscheinen. Wenns unbedingt diese Grösse sein soll ggf. mal "normal" versuchen...

etwas größere überschriften hätte ich schon gern - farblich hinterlegt und dafür nicht fett oder ähnlichs, bin für vorschläge (oder beispiele) offen

Für die Listen lässt Du Dir aber noch etwas einfallen oder? Die sind _sehr_ puristisch.

ja, bei den listen hab ich noch keine ideen - die sind in der tat noch sehr einfach ;) sprich default

Nur bei vollem Viewport erkennt man, dass der Header sowohl links als auch rechts etwas übersteht (oder ist rot nur der rechte Randabstand?). Dadurch kippt die Seite optisch nach links, wenn der Viewport kleiner ist. Ich bin mir nicht sicher, ob dieses "Überstehen" glücklich gewählt ist.

dieses überstehen bis in alle ewigkeit ist gewollt (links stehts ja auch etwas über) der rote streifen ist in der tat der aussenabstand (ist aber wegen ie7 ein border geworden)

[Marla]

Hallo suit,

für neugierige, das ziel der seite:
es sollen auf dieser seite codeschnipsel (vorwiegend html/css-optimierungsmaßnahmen im zusammenhang mit typo3) veröffentlicht werden, da ich der meinung bin, dass viele vorhandene typo3-ressourcen eine frechheit sind (teilweise gibts 100 zeilen typoscript die irgend ein depp als lösung präsentiert, obwohl eigentlich nur 2 oder 3 zeilen relevant sind ;)) zudem dient das ganze für mich selbst als spielwiese um zu sehen, wie einfach die standard-frontend-erweiterung (css_styles_content) kastriert werden kann, um sinnvollen html-code zu produzieren - den den aktuellen webseiten die ich betreue ist mir das persönlich immer noch zu viel obwohl der code schon sehr sauber ist

das ist eine tolle Idee! Ich bin schon sehr gespannt und danke Dir jetzt schon dafuer.
Gruesse
M.