zu einem Layout

[siro]

Hallo Leute.

Ich habe ein Layout für die Seite eines evangelischen Jugendzentrums gemacht und wollte mal eure Meinung hören.

Ich habe dabei versucht die Seite möglichst für alle nutzbar zu machen und nebenbei trotzdem ein paar Spielereien einzubauen und die Seite etwas jugendlicher zu gestalten.
Ob es geklappt hat werdet ihr ja sehen. ;o)
Der einzige Link der funktioniert, führt zur Spielwiese (einer Art Sitemap). Um den Rest der Seite kümmer ich mich erst, wenn ich mir mit dem Layout sicher bin.

zur Seite: http://ch.23inch.de
    CSS: http://ch.23inch.de/style/main.css

Ein großes Danke schon mal im Vorraus.

MfG _Siro.

[Fritz]

Hallo Siro,

recht ansprechend, und IMHO technisch sauber.

Was mir aufgefallen ist:
Der CSS validator http://jigsaw.w3.org/css-validator/validator?uri=http%3A//ch.23inch.de/&warning=1 reklamiert jede Menge Fehler. Möglicherweise liegt das an der media declaration in
<link rel="stylesheet" media="screen,handheld,projection,tv" href="style/main.css">
ist aber nur ein Vermutung.

Am layout ist mir ins Auge gesprungen:

• Times für den Titel - nicht mein Geschmack ...
• Der dunkelblaue Rahmen ist natürlich links um die Navi nicht sichtbar. Die Seite wirkt daduch auf mich etwas unsymmetrisch.

Gruß Fritz

[siro]

Ich hab die Datei gerade nochmal durch den Validator gejagt.
Dabei war alles in Ordnung.
Hast du irgendwelche besonderen Einstellungen benutzt?

MfG _Siro.

[Dennis]

Hi siro,

Ich hab die Datei gerade nochmal durch den Validator gejagt.
Dabei war alles in Ordnung.
Hast du irgendwelche besonderen Einstellungen benutzt?

Ich kenne das Problem auch selber. Fritz hat deine Hauptseite durch den Validator gejagt (die HTML Seite) und da kamen die Fehler raus.
Wenn man dann (wie du) die Stylesheet selber durchjagt, so wird man für einwandfreies CSS gelobt ;-)

Bei meiner Seite ist es das gleiche Problem:

• http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Ftutorial.riehle-web.com&warning=1&profile=css2&usermedium=all ist nicht valide
• http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Ftutorial.riehle-web.com%2Fsrc%2Fstylescreen.css&warning=1&profile=css2&usermedium=all ist valide

Weiß hier vielleicht sonst irgendjemand woran das liegt?

Ich dachte zuerste, dass bei der Stylesheet Einbindung das Type Attribut fehlt und es daran läge, aber eine Ergänzung dessen half nicht weiter.

MfG, Dennis.

[Fritz]

Ich hab die Datei gerade nochmal durch den Validator gejagt.
Dabei war alles in Ordnung.
Hast du irgendwelche besonderen Einstellungen benutzt?

Hallo siro,
Ich hab nicht Deine CSS Datei, sondern die html Seite überprüft.
Wie schon gesagt:
Ich vermute, daß es an der media declaration in
<link rel="stylesheet" media="screen,handheld,projection,tv" href="style/main.css">
in Deinem html liegt. Probiers doch einfach mal aus, handheld, projedtion und tv wegzulassen - und sag uns, was dabei rausgekommen ist.
Gruß Fritz

[siro]

Hallo.

Ich hab jetzt alles bis auf 'screen' weggelassen und es funktioniert.
Danke nochmal.

MfG _Siro.

[Mortimer]

Auch wenn danach vielleicht mich die anderen bombadieren mit Wörtern wei "Usebility", "Performance" und "Asuagebfehler"...

Mir fehlen entschieden Grafische Rafinessen... ein Ordentliches Logo, Linkicons und ein übergeordnetes Coperate Design...

ciao

[Zeromancer]

Hallo,

ich finde die Seite ansprechend und hole mir gern Inspiration. Toll fand ich den Erläuterungstext in der Sprechblase. Hatte dies auch mal, aber irgendwas fehlte dabei. Nun weiß ich was: Eine Person, der man die Erläuterungstexte 'in den Mund legt'

Allein die Verweisfarben sollten sich auf der Index-Seite stärker abheben.

Fazit: Ich find's gut.

Mit freundlichen Grüßen

André

[Detlef G.]

Hallo Siro

Ich habe ein Layout für die Seite eines evangelischen Jugendzentrums gemacht und wollte mal eure Meinung hören.

Gefällt mir sehr gut.

Du scheinst auch an alles gedacht zu haben, worauf ich hier sonst hinweise.

Mir bleiben drei Kleinigkeiten anzumerken:

Du solltest für die Seite ein min-width in em angeben, damit bei größerer Schrift und/oder sehr schmalem Browserfenster nichts nach rechts heraustreten kann.

Der Link zur aktuellen Seite sollte möglichst kein Link sein.

Eventuell könntest du "Im zweijährigen Konfirmandenunterricht ..." anders formulieren und dann bei den ersten Worten einen Zeilenumbruch verhindern. Mich stört dort etwas, dass bei schmalem Browserfenster nur "Im zweijährigen" dort steht, während der Rest erst unterhalb des Bildes folgt.

Auf Wiederlesen
Detlef

[Beat]

MfG _Siro.

Hy Siro

Eine Überschrift gleichzeitig als Link auszuzeichnen ist ein
informeller Widerspruch in sich selbst

ansonsten recht leserlich auch ohne css und java script
sprich ohne Spielereien. (naja unproporzional viel Links zum Inhalt, wird sich ev. noch ändern)

Ich würde eventuell die Kommentare zu den Links nicht im Anker Tag mit auszeichnen.

Auch dürftest du dir eine Sysiphosarbeit aufbürden wenn du auf allen Seiten auf alle Seiten
verweisen willst. (Jedesmal jede Seite nachführen uploaden)

mfg Beat

[siro]

Hallo.

Eine Überschrift gleichzeitig als Link auszuzeichnen ist ein
informeller Widerspruch in sich selbst

Werd ich nochmal mit meinen Mitstreitern ausdiskutieren.

ansonsten recht leserlich auch ohne css und java script
sprich ohne Spielereien. (naja unproporzional viel Links zum Inhalt, wird sich ev. noch ändern)

Das wurde uns vom Jugendzentrum so vorgegeben. Wir haben schon diskutiert, damit nicht noch mehr Links ins Menü kommen.

Ich würde eventuell die Kommentare zu den Links nicht im Anker Tag mit auszeichnen.

Ist IMHO leider nicht anders möglich, wenn ich sie dynamisch mit CSS einblenden will.

MfG _Siro.

[Beat]

Ist IMHO leider nicht anders möglich, wenn ich sie dynamisch mit CSS einblenden will.

Ja das denke ich, lässt sich durchaus machen...
schlies.lich kann man ja auch verschachtelte Tags mit css formatieren

mfg Beat

[wahsaga]

hi,

Ist IMHO leider nicht anders möglich, wenn ich sie dynamisch mit CSS einblenden will.

Ja das denke ich, lässt sich durchaus machen...
schlies.lich kann man ja auch verschachtelte Tags mit css formatieren

ha-llo ...!

du hast doch gerade eben vorher kritisiert, dass die link-beschreibungen mit in die <a>-tags verschachtelt sind -

Ich würde eventuell die Kommentare zu den Links nicht im Anker Tag mit auszeichnen.

• und jetzt bringst du eben das als "alternativ"-vorschlag ...?

gruß,
wahsaga

[Beat]

Es ist nicht notwendig dass er den Linkkommentar im Ankertag mitnotiert.
Schliesslich hat er noch das Listentag, mit dem er Ankertag und Kommentar gemeinsam zusätzlich kontrollieren kann.

Kein Widerspruch.

[wahsaga]

hi,

Es ist nicht notwendig dass er den Linkkommentar im Ankertag mitnotiert.
Schliesslich hat er noch das Listentag, mit dem er Ankertag und Kommentar gemeinsam zusätzlich kontrollieren kann.

das mag in verständigen browsern ja durchaus zutreffen - aber in einem IE, der sich immer noch verweigert, wenn es darum geht, :hover für andere elemente als für <a>-links zu akzeptieren, _muss_ er bei dieser verschachtelung bleiben, wenn er es mit reinem CSS _und_ IE-tauglich machen will.

Kein Widerspruch.

sollte man nur fordern, wenn man sich _sehr_ sicher ist, wo von man redet. sorry, hier m.E. nicht gegeben :-P

gruß,
wahsaga

[herrlarsen]

Hallo!

Eine Überschrift gleichzeitig als Link auszuzeichnen ist ein
informeller Widerspruch in sich selbst

Werd ich nochmal mit meinen Mitstreitern ausdiskutieren.

Na, dann mal los:
Ich denke diese Vorgehensweise kann gerade bei <h1> durchaus Sinn machen, nämlich wenn - wie bei der zur Diskussion gestellten Seite - diese oberste aller Überschriften als "Logo-Ersatz" benutzt wird (mach ich übrigens auch gerne). In meinen Augen ist das erst mal sinnvolles semantisches Markup, wenn ich als erstes Element der Seite an der dafür üblichen Stelle (links oben) eine "große" (im Sinne von "übergeordnete") Überschrift plaziere, die den Besucher erst mal darüber informiert wo und auf wessen Seite er gelandet ist. Wie so eine Art Buchtitel (der in englischen Büchern ja auch meist auf jeder Seite/Doppelseite links oben zu finden ist). Dort plazieren die meisten Seiten halt ihr Logo, das ja im Grunde die selbe Funktion hat. Nun ist es auch üblich, ja empfehlenswert, da der gemeine Surfer sich daran gewöhnt hat, dass dieses Logo mit der Startseite des Angebots verlinkt ist, dementsprechend gilt in meinen Augen das gleiche für die oberste Überschrift, wenn diese das Logo ersetzt.
Ich finde es daher sogar sinnvoll ein Bild, das als Logo links in der Ecke prankt (oder sonstwo auf der Seite wenn es auf jeder Seite als Logo an dieser Stelle zu finden ist), als Überschrift <h1> auszuzeichnen (und zu verlinken):

<h1><a href="index.html" title="zur Startseite"><img src="logo.jpg" alt="Firma soundso, eingetragener Verein hastenichgesehn o.ä." /></a></h1>

Es ist also eine Mischung aus semantischem Markup, das die Seite strukturierter erscheinen lässt (im Quelltext jedenfalls...) und Benutzerfreundlichkeit (wusste grad nicht wie man die tollere Bezeichnung schreibt - Accässsssi...;-)), indem den Gewohnheiten der meisten Benutzer entsprochen wird, die auf Grund ihrer Erfahrung hinter dem Firmen- oder Vereinsnamen etc. links oben den Link zur Startseite vermuten.

Also, irgendjemand was dagegen einzuwenden? ;-)

Lars

[Beat]

Hy Lars

Du kannst ja ein Logo machen, das quasi immer in die Home Seite verlinkt.
Aber ich würde dieses Bild dann nicht mit H1 auszeichen, weil das effektiv ein Widerspruch ist.

Als Überschrift einer Seite möchte ich (z.B. als Blinder) erst einmal vorgelesen bekommen, was der Hauptinhalt dieser Seite ist.
Ich will nicht angeschrien werden, dass ich da express wieder an den Start gehen kann.

Vor zwei Jahren hätte ich noch ähnlich gedacht.

mfg Beat

[herrlarsen]

Du kannst ja ein Logo machen, das quasi immer in die Home Seite verlinkt.
Aber ich würde dieses Bild dann nicht mit H1 auszeichen, weil das effektiv ein Widerspruch ist.
Als Überschrift einer Seite möchte ich (z.B. als Blinder) erst einmal vorgelesen bekommen, was der Hauptinhalt dieser Seite ist.

Wenn auf der Seite zu allererst mal der Firmenname steht, dann ist das eine Überschrift, egal ob sie als Klartext ausgeschrieben ist, oder ob sie graphisch umgesetzt und als Bild eingefügt wurde, es bleibt eine Überschrift. Und über diese bekommst Du auch gesagt, um was es auf dieser Seite geht, so wie Du es von einer Überschrift forderst - nämlich um die Firma soundso, den Verein blablabla, usw. Daher ist ein als h1 ausgezeichnetes Bild, so es eben die graphische Umsetzung einer Überschrift ist, in meinem Augen "effektiv kein Widerspruch". Und zwar sowohl für den Sehenden, der sieht dass das Bild die Seite mit dem Firmennamen _überschreibt_, als auch für den Blinden, der die gleiche Information über das alt-Attribut des Bildes bekommt.

Ich will nicht angeschrien werden, dass ich da express wieder an den Start gehen kann.

Ich habe zwar keinen, aber ich denke nicht das ein Screenreader lauter wird, wenn eine Überschrift verlinkt wird.

Vor zwei Jahren hätte ich noch ähnlich gedacht.

Vielleicht hättest Du da ja gar nicht so falsch gedacht und solltest noch mal drauf zurückkommen... ;-)

mfg Lars

[Beat]

Ich denke nicht, dass ich damals besser dachte

Ein Link nach DA
und ein Titel von HIER

sind nun mal Dinge, die nur der Drang nach Selbstreferenz vereint.

Beispiel
Sie sind hier im

<a href="http://www.INTER.NET/"><h1>Internet</h1></a>

und kommen nie mehr raus

mfg Beat

[herrlarsen]

Ich denke nicht, dass ich damals besser dachte

Ein Link nach DA
und ein Titel von HIER

sind nun mal Dinge, die nur der Drang nach Selbstreferenz vereint.

Das ist in meinen Augen eine Frage des Drangs nach Usability:
Da auf der vorliegenden Seite der "Titel von HIER" den Platz (und die Funktion) einnimmt an dem der unbedarfte Surfer gewohnheitsmäßig das Logo der Seite inklusive "Link nach DA", nämlich zur Startseite erwartet, sollte man dem Rechnung tragen indem man tatsächlich diesen Link dort einbaut. Sonst passiert folgendes:
_Du_ schaust in den Quelltext der Seite, siehst dass die Textpassage als Überschrift ausgezeichnet ist und denkst: "Das ist also wohl kaum ein Link, klickst nicht drauf und bist glücklich."
_"Durchschnittssurfer"_ kommt auf die Seite, sieht links oben das "Klartextlogo" der Seite und denkt: "Meiner Erfahrung nach komme ich über dieses Logo zu Startseite - gehn wer doch mal hin!", geht mit der Maus drauf und stellt fest dass sich der Mauszeiger nicht ändert, er also den Link zur Startseite von neuem suchen muss => unnötige, gewohnheitswidrige Suche => weniger Usability.
Oder er klickt sogar ohne die fehlende Veränderung des Mauszeigers zu bemerken erst mal drauf, dann kommt noch Verwirrung hinzu weil nix passiert.

Beispiel
Sie sind hier im

<a href="http://www.INTER.NET/"><h1>Internet</h1></a>

und kommen nie mehr raus

Das Beispiel ist erstens nicht valide, da <a> keine Blockelemente enthalten kann (z.B. <p>, <h1>...) und zweitens ein Vergleich der hinkt, da hier eher ein sogenannter Breadcrumb gezeigt wird ("Sie sind hier..."), der der Standortbestimmung innerhalb der Webpräsenz dient und nicht die oberste aller Überschriften _einer_ Seite, die dem Surfer in Form des Firmen-/Vereinsnamens (Klartext oder Graphik) sagt: Du bist auf einer Seite der Kirchengemeinde soundso.

mfg Lars

P.S.: Hab morgen Frühdienst => geh jetzt schlafen => bis morgen.

[Sven Rautenberg]

Moin!

Als Überschrift einer Seite möchte ich (z.B. als Blinder) erst einmal vorgelesen bekommen, was der Hauptinhalt dieser Seite ist.
Ich will nicht angeschrien werden, dass ich da express wieder an den Start gehen kann.

Ich denke, dass alle Aussagen von Sehenden darüber, wie sie als Blinder was vorgelesen bekommen möchten, unbrauchbar sind.

Sich als Blinder per Sprachausgabe eine Seite ausgeben zu lassen ist so dermaßen anders, dass man es sich sowieso nicht vorstellen kann. Und wenn man es mal ausprobiert, ist es so schrecklich unergonomisch und langwierig (natürlich verglichen mit der sehenden Maussteuerung), dass man nicht glauben kann, dass das überhaupt jemand machen würde.

Vorlesen lassen ist extrem seriell. Schade, dass Audio-CSS von den mir bekannten Vorlese-Plugins noch nicht unterstützt wird. Andererseits: Wer soll das Audio-CSS schreiben? Wer weiß, auf was es dabei ankommt?

- Sven Rautenberg

[Beat]

Hy Sven

Richtig. Wie Blinde mit HTML umgehen ist nicht voraussagbar.

Allerdings sollte man unter Blinde alles verstehen, das nicht mit menschlichen Augen sieht.
Zum Beispiel die google index machine

Darum halte ich Rücksicht auf die semantische "Originalfunktion" eines Tags durchaus für angebracht.

mfg Beat

[Sven Rautenberg]

Moin!

Richtig. Wie Blinde mit HTML umgehen ist nicht voraussagbar.

Voraussagbar - sicherlich schon. Nur weiß das von uns keiner.

Allerdings sollte man unter Blinde alles verstehen, das nicht mit menschlichen Augen sieht.
Zum Beispiel die google index machine

Nein, es gibt einen substantiellen Unterschied zwischen Maschinen und Menschen. :)

Darum halte ich Rücksicht auf die semantische "Originalfunktion" eines Tags durchaus für angebracht.

Man kann durchaus unterschiedlicher Ansicht darüber sein, ob ein Logo oder Firmenname auf jeder Seite eine H1-Überschrift sein soll. Ich würde es aber nicht kategorisch ausschließen.

Du liegst jedenfalls falsch darin, dass Vorlesesoftware die Überschrift "schreiend" vorliest oder sie auch nur irgendwie lauter artikuliert. Würdest du doch auch nicht so vorlesen, oder? :)

- Sven Rautenberg

[siro]

Hallo.

Ich habe auch irgendwie versucht an Sprachausgabe zu denken.
Allerdings ist es wirklich kaum möglich sich da reinzuversetzen.

Einerseits habe ich mir gedacht, dass es wohl besser wäre die Beschreibungstext der Links mit CSS zu entfernen, damit der Hörer nicht auf jeder Seite da durch muss.
Andererseits sind diese ja gerade für Blinde nützlich, da die wahrscheinlich meist genutzte Taktik an Informationen zu kommen, also einfach drauf los zu klicken ihm nicht weiterhilft, und er mit den Beschreibungen wahrscheinlich schneller am Ziel ist.
Außerdem bin ich mir nicht ganz sicher ob das Menü besser oben oder unten in der Datei aufgehoben ist. Für Blinde ist unten wahrscheinlich besser und für andere oben.

MfG _Siro.

PS: Vielleicht könnte man ja mal eine Umfrage unter Blinden machen.

[Sven Rautenberg]

Moin!

Außerdem bin ich mir nicht ganz sicher ob das Menü besser oben oder unten in der Datei aufgehoben ist. Für Blinde ist unten wahrscheinlich besser und für andere oben.

Für einen Blinden ist es (nach dessen eigener Aussage - zu hören in irgendeiner "Chaosradio"-Sendung des IIRC letzten Jahres) angeblich besser, wenn man Framesets verwendet.

Das ist auch sofort vollkommen einleuchtend: Ein Frameset strukturiert die auf der Webseite enthaltenen Informationen fest in diverse Fenster: Navigation, Content, Logo,...

Die relevanten Dinge sind Navigation und Content. Beim Betreten des Navigationsframes stört kein nerviger Content die Sprachausgabe, und beim Betreten des Contents stört keine dumme Navigation.

Ich habe für meine eigene Website mal die Entscheidung getroffen, dass das Menü im HTML-Text unten stehen soll. Dies weniger aufgrund der Vorleseeigenschaften, als vielmehr wegen der besseren Lesbarkeit in Lynx. Wobei diese ja durchaus auch vorleserelevant sein könnte. Ich fand es einfach besser, wenn ich zu Beginn der Seite Überschrift und Content habe, und erst dann, wenn ich den Content komplett (vor-)gelesen (bekommen) habe, auf die Auswahl stoße, wohin es weiter gehen soll.

Wenn ich gleich zu Beginn des Dokuments schon merke, dass ich falsch bin: Es ist ein Tastendruck "zurück", und schon bin ich wieder im dortigen Menü, um eine bessere Wahl zu treffen.

PS: Vielleicht könnte man ja mal eine Umfrage unter Blinden machen.

Das ist mit Sicherheit keine schlechte Idee. Ich frage mich überhaupt, ob Blinde sich in dieses Forum verirren, oder ob die nicht mehr oder weniger in den ganzen Links nur "herumirren" wie blöde. Insbesondere wenn die Threads lang und ausgeklappt sind, muß man doch wahnsinnig werden, immer den gleichen Text zu hören.

- Sven Rautenberg

[Detlef G.]

Hallo Siro

Außerdem bin ich mir nicht ganz sicher ob das Menü besser oben oder unten in der Datei aufgehoben ist. Für Blinde ist unten wahrscheinlich besser und für andere oben.

Jeena verwendet auf seinen Seiten (http://jeenaparadies.de/) dazu einen Link zum Inhalt, der dann im screen.css aus dem Bildschirm geschoben wird.

Auf Wiederlesen
Detlef

[siro]

Hallo Detlef.

Die Idee ist gut. Das hilft nicht nur bei Sprachausgabe sondern auch bei Handys. Da man dort tlw. nur wenige Zeichen sieht und das 'Browsen' zum (Daumen-)Krampf wird.

MfG _Siro.

[Andreas-Lindig]

Hallo siro,

hübscher Fisch!
wo hast Du ihn geklaut?

Gruß, Andreas

[siro]

Hallo.

Das ist das Logo vom Cafe Hinterhof. Wenn du genau hinsehst erkennst du ein CH. Gezeichnet wurde es von einem Freund.
Also nichts mit geklaut sondern ordentlich lizenziert. ;-)

MfG _Siro.