nicht angemeldet Sebastian Goertz
Patrick Andrieu
Patrick Andrieu
at
Patrick Andrieu
at
Sebastian Goertz
Sebastian Goertz
Beat
Beat
Sebastian Goertz
Beat
Hallo zusammen,
nachdem man in diesem Forum immer wieder von Barrierefreiheit, korrekter Nutzung von HTML und CSS sowie den Unsinn von Tabellenlayouts und Frames liest, habe ich selbst angefangen, mir Gedanken darum zu machen. In diesem Fall tat ich das recht praxisnah, indem ich es selbst ausprobierte und schnell zur Erkenntnis kam, dass es tatsächlich eine Menge Vorteile bringt, sich an diese "Regeln" zu halten.
Dabei kam eine Seite raus, deren Inhalt vielleicht nicht der Kategorie "wichtig" oder "wissenswert" entspricht, aber darum soll es auch nicht gehen. Weil ich weiß, dass hier einige Experten unterwegs sind und beim ersten Versuch noch einige Fehler zu erwarten sind, bin ich für jeden Hinweis auf solche dankbar. Am liebsten natürlich gleich mit konstruktiven Verbesserungsvorschlägen.
Also was sollte ich anders/besser machen, was fehlt zu meinem Ziel, was habe ich vergessen?
http://www.soul996.de
Gruß und vorab Dank für die Mühe,
Sebastian
Hallo Sebastian!
nachdem man in diesem Forum immer wieder von Barrierefreiheit, korrekter Nutzung von HTML und CSS sowie den Unsinn von Tabellenlayouts und Frames liest, habe ich selbst angefangen, mir Gedanken darum zu machen. In diesem Fall tat ich das recht praxisnah, indem ich es selbst ausprobierte und schnell zur Erkenntnis kam, dass es tatsächlich eine Menge Vorteile bringt, sich an diese "Regeln" zu halten.
Sehr lobenswert, doch leider:
Dabei kam eine Seite raus,
die für mich IE6-User nicht zu gebrauchen ist...
Sorry und
Viele Grüße aus Frankfurt/Main,
Patrick
Dabei kam eine Seite raus,
die für mich IE6-User nicht zu gebrauchen ist...
Sorry und
Viele Grüße aus Frankfurt/Main,
Patrick
wow, das war eine informative Antwort! *staun*
Du postest hier doch öfter und bist nicht zum ersten Mal in einem Forum unterwegs. Dann solltest du eigentlich wissen, dass so ein komplett inhaltsloser Post komplett fürn A**** ist...
Gudn!
wow, das war eine informative Antwort! *staun*
ist sie in der tat. möglicherweise hat der op nicht im ie6 getestet und ist dankbar für den hinweis
Du postest hier doch öfter und bist nicht zum ersten Mal in einem Forum unterwegs.
du scheinbar nicht. sonst wüsstest du wer patrick ist und was er alles mit diesem forum und anderen projekten zu tun hat.
Dann solltest du eigentlich wissen, dass so ein komplett inhaltsloser Post komplett fürn A**** ist...
richtig, dein inhaltsloser post ist... den rest mögest du dir selbst zusammenreimen...
*kopfschüttel*
Gruß aus Fürth in Mittelfranken,
Samoht
Hallo Samoht!
sonst wüsstest du wer patrick ist und was er alles mit diesem forum und anderen projekten zu tun hat.
Das sollte niemand davon abhalten, zu sagen, was er an meinen Postings [1]nicht gut findet ;)
Abgesehen davon komme ich letzter Zeit nicht so richtig in die Pötte...
Aber danke für die spontane Schützenhilfe ;)
[1] oder die jedes anderen Devs/Mods/alten Hasen/was auch immers ;)
Viele Grüße aus Frankfurt/Main,
Patrick
Hallo Peter!
wow, das war eine informative Antwort! *staun*
Ja, denn wer so eine Antwort enthält, den müsstes es jucken, den IE6 zu starten, und sich die Chose anzuschauen. Wenn kein IE6 (mehr) vorhanden ist, kann immer noch nachgefragt werden.
Dann solltest du eigentlich wissen, dass so ein komplett inhaltsloser Post komplett fürn A**** ist...
Inhaltslos ist das Posting nicht, es enthält genau zwei Informationen.
Viele Grüße aus Frankfurt/Main,
Patrick
Hallo.
Inhaltslos ist das Posting nicht, es enthält genau zwei Informationen.
Aber du wirst zugeben müssen, dass das für dich eher unterdurchschnittlich ist.
MfG, at
Hallo at!
Aber du wirst zugeben müssen, dass das für dich eher unterdurchschnittlich ist.
Du willst mir nur mitteilen, dass ich sonst zu viel schreibe ;)
Viele Grüße aus Frankfurt/Main,
Patrick
Hallo.
Aber du wirst zugeben müssen, dass das für dich eher unterdurchschnittlich ist.
Du willst mir nur mitteilen, dass ich sonst zu viel schreibe ;)
Ich will dir nur mitteilen, dass ich sonst zu viel lese.
MfG, at
In meinem IE6 ist die Seite durchaus zu "gebrauchen"...
Vielleicht erläuterst du mal was nicht zu "gebrauchen" ist...
Gruß Jan
Hallo Jan!
Vielleicht erläuterst du mal was nicht zu "gebrauchen" ist...
Das fällt Dir sicher auf, wenn Du die Größe Deines Viewports minimierst.
Viele Grüße aus Frankfurt/Main,
Patrick
Hi,
die für mich IE6-User nicht zu gebrauchen ist...
Ich weiß leider nicht, was beim IE6 nicht stimmt, habe aber mal genauer beim IE7 nachgeschaut und musste feststellen, dass zwar gescrollt wird, aber nicht weit genug. Vermute, dass es beim IE6 genauso ist, werde aber mal dran arbeiten, den alten Schinken auf einem anderen PC zu installieren.
Leider stehe ich aber gerade auch gedanklich vor einem großen Wald. Hat jemand einen Rat, woran dieser Fehler liegen kann? Bzw. wie er ggf. zu beheben ist?
---
btw: ich finde nicht, dass dein posting für den Allerwertesten ist. Ich habe kein Problem damit, selbst zu schauen und zu suchen. Da ich ja sowieso schon sehr froh bin, dass es überhaupt die Möglichkeit gibt, sich hier Tipps, Hilfen und gelegentlich einen Stoß in die richtige Richtung abzuholen, sollte man doch dankbar sein, dass ihr euch die Seite anschaut und nicht noch verlangen, dass ihr gleich am Anfang von dem Gewohnheitsbrowser abweicht.
Gruß und Dank,
Sebastian
Hallo Sebastian!
und musste feststellen, dass zwar gescrollt wird, aber nicht weit genug. Vermute, dass es beim IE6 genauso ist,
Ich habe hier einen 19-Zoll-Monitor, öffne die Browserfenster aber mit 1024 Pixel mal 768, einer Größe also, die der gewöhnlichen Auflösung eines 17-Zöllers entspricht. Bei diesen Maßen ist, wenn ich Deine Soulmobil-Seite im IE 6 öffne, gar kein Scrollbalken zu sehen, der untere Teil des Contents bleibt unerreichbar: »Ebenso wie sämtliche Diskussionen über den außerordentlich guten« ist die letzte Zeile Text, die ich lesen kann.
Die Zeile Text ganz oben, die zwischen den zwei »Blues Brothers« und dem Kästchen »Startseite« stehen soll, findet ihren Anfang über dem Bild der Blues Brothers und endet rechts unter dem Kasten, so dass ich sie nicht zu Ende lesen kann (abgeschnitten bei: »Dann wähl doch aus, wie du es ges«).
Wenn ich das Fenster maximiere, ist dagegen alles sicht- und lesbar.
Viele Grüße aus Frankfurt/Main,
Patrick
Hallo!
nachdem man in diesem Forum immer wieder von Barrierefreiheit, korrekter Nutzung von HTML und CSS sowie den Unsinn von Tabellenlayouts und Frames liest, habe ich selbst angefangen, mir Gedanken darum zu machen. In diesem Fall tat ich das recht praxisnah, indem ich es selbst ausprobierte und schnell zur Erkenntnis kam, dass es tatsächlich eine Menge Vorteile bringt, sich an diese "Regeln" zu halten.
Sehr löblich.
Also was sollte ich anders/besser machen, was fehlt zu meinem Ziel, was habe ich vergessen?
Ich hab die Seite mit FF 3.0 geöffnet.
Was mir sofort aufgefallen ist, sind Links ohne Hover-Effekt bzw. wenn vorhanden ohne dass man diesen klar und deutlich wahrnimmt.
Bei kleiner Viewport-Breite schieben sich die oberen Elemente ineinander, anstatt zu floaten.
Dem Soulmobil-Bild fehlt eine Beschreibung.
Externe, interne und Mailto-Links werden nicht unterschieden.
Die Zugangstasten der Browser sind nicht belegt.
Etwas kleinkariert:
An ein paar Stellen hast du kleine Div-Süppchen*.
Du zeichnest inhaltsleere Elemente nicht aus.
Logische Beziehungen der HTML-Dateien untereinander existieren nicht.
Da ich im Büro bin, kann ich dir auf Anhieb keine weiteren Dinge auflisten... (Browserverträglichkeit)
Viele Grüße
Thorsten
* sowas wie:
<div id="Headline">
<h1>Das Soulmobil</h1>
</div>
Hi,
Was mir sofort aufgefallen ist, sind Links ohne Hover-Effekt bzw. wenn vorhanden ohne dass man diesen klar und deutlich wahrnimmt.
Sind Hover-Effekte allgemein gewünscht? Ich meine, ich habe die auch drin und das Problem, dass die je nach Bildschirm entweder kaum sichtbar oder zu aufdringlich wirken. Habe mich dann für ein Mittelding entschieden, vielleicht doch zu wenig?
Bei kleiner Viewport-Breite schieben sich die oberen Elemente ineinander, anstatt zu floaten.
Richtig, öhm, ToDo...
Dem Soulmobil-Bild fehlt eine Beschreibung.
Welches?
Externe, interne und Mailto-Links werden nicht unterschieden.
Was meinst du mit "unterscheiden"? Optisch?
An ein paar Stellen hast du kleine Div-Süppchen*.
Nicht korrekt? Klar ist ein Div mit nur einem Unterelement etwas fragwürdig, aber ich habe gerade eine Regel im Kopf, dass man Text nicht einfach so in den Body schreibt, sondern innerhalb von Divs oder Absätzen oder so. Hmm, oder zählt H1 auch dazu? Bin grad verwirrt und werde mich wohl klug lesen müssen, was das betrifft.
Logische Beziehungen der HTML-Dateien untereinander existieren nicht.
Wäre dir für eine nähere Erläuterung dankbar. Vielleicht geht es um etwas, was ich nicht kenne!? Ich habe im Kopf Startseite und Impressum angegeben, weil ich dies für sinnvoll hielt. Wie würdest du denn die Links denn auszeichnen, dass es sinn ergibt? First/Last/Next/... ergibt bei der Seite ja wenig Sinn...
Gruß und vielen Dank,
Seb
Hallo,
An ein paar Stellen hast du kleine Div-Süppchen*.
Nicht korrekt? Klar ist ein Div mit nur einem Unterelement etwas fragwürdig, aber ich habe gerade eine Regel im Kopf, dass man Text nicht einfach so in den Body schreibt, sondern innerhalb von Divs oder Absätzen oder so. Hmm, oder zählt H1 auch dazu? Bin grad verwirrt und werde mich wohl klug lesen müssen, was das betrifft.
Bei den Strict-Varianten (HTML 4.01 Strict, XHTML 1.0 Strict)
darf kein Text einfach so direkt unter BODY stehen,
sondern er muss in ein Block-Level-Element eingepackt sein.
http://www.w3.org/TR/html401/struct/global.html#h-7.5.1
<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body -->
Das bedeutet: BODY darf als direkte Kinder nur Block-Level-Elemente
oder SCRIPT enthalten. Und was Block-Level-Elemente sind,
erfährt man, wenn man auf obiger Seite auf das Wort "block" klickt:
http://www.w3.org/TR/html401/sgml/dtd.html#block
<!ENTITY % block
"P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">
wobei %heading die Überschriften H1, H2, H3, H4, H5, H6 meint
und %list die Listen UL und OL und %preformatted% das PRE-Element.
Ein Block-Level-Elemente wie H1 als direktes Kind von BODY ist
aber etwas vom saubersten, das es gibt! Von dem her ist Dein
DIV wirklich überflüssig.
DIV ist zwar ein Block-Level-Element, aber es hat keine
semantische Bedeutung (im Gegensatz z.B. zu H1, das die
Bedeutung "Überschrift 1. Ordnung" hat).
Der häufigste Einsatzzweck von DIV ist ja wohl, dass man
mehrere zusammengehörige Elemente irgendwie gruppieren kann,
um sie gemeinsam mit CSS optisch zu gestalten.
Konstrukte wie dein
<div><h1>Ueberschrift</h1></div> sind zwar in gewissen
Ausnahmefällen notwendig, um irgendwelche Browser-Fehler
mit CSS zu umschiffen. Aber aus HTML-Sicht sind sie
überflüssiger Ballast.
Logische Beziehungen der HTML-Dateien untereinander existieren nicht.
[...] Vielleicht geht es um etwas, was ich nicht kenne!?
Ich vermute: Er meint er das LINK-Element. Lektüre + Links dazu:
http://www.subotnik.net/html/link
http://matthias.gutfeldt.ch/translation/LINK/
Freundliche Grüsse
Thomas
Hi,
Ein Block-Level-Elemente wie H1 als direktes Kind von BODY ist
aber etwas vom saubersten, das es gibt! Von dem her ist Dein
DIV wirklich überflüssig.
Dann hatte ich das noch falsch im Kopf (s.o.) und mich von mir selbst verwirren lassen. So ist das natürlich alles richtig und das Div gehört weggemüllt ;)
Ich vermute: Er meint er das LINK-Element. Lektüre + Links dazu:
Dachte ich auch, aber die verwendete ich ja, sofern als sinnvoll erkannt. Also Startseite, Impressum in meinem Fall. Die Website ist ja nicht so komplex, dass es Ketten von Seiten gibt, welche ein Vor-/Zurück bzw. Erste/Letzte Seite fordern oder ermöglichen würde.
Aber auch da lasse ich mich gern belehren, wenn ich mich irre...
Gruß,
seb
Hallo!
Sind Hover-Effekte allgemein gewünscht? Ich meine, ich habe die auch drin und das Problem, dass die je nach Bildschirm entweder kaum sichtbar oder zu aufdringlich wirken. Habe mich dann für ein Mittelding entschieden, vielleicht doch zu wenig?
Mir persönlich sind die schon wichtig. Im Zuge der Barrierefreiheit ist meine Toleranz was auffällige Links angeht auch entsprechend groß.
Dem Soulmobil-Bild fehlt eine Beschreibung.
Welches?
Da gibt's doch nur eins, oder?
Externe, interne und Mailto-Links werden nicht unterschieden.
Was meinst du mit "unterscheiden"? Optisch?
Ja, wäre eine weitere Maßnahme im Sinne einer freundlichen Dialoggestaltung. Man kann dies mit kleinen Icons und ersatzweiße mit Text lösen.
Nicht korrekt? Klar ist ein Div mit nur einem Unterelement etwas fragwürdig, aber ich habe gerade eine Regel im Kopf, dass man Text nicht einfach so in den Body schreibt, sondern innerhalb von Divs oder Absätzen oder so. Hmm, oder zählt H1 auch dazu? Bin grad verwirrt und werde mich wohl klug lesen müssen, was das betrifft.
Das hat Thomas bereits beschrieben...
Logische Beziehungen der HTML-Dateien untereinander existieren nicht.
Wäre dir für eine nähere Erläuterung dankbar. Vielleicht geht es um etwas, was ich nicht kenne!? Ich habe im Kopf Startseite und Impressum angegeben, weil ich dies für sinnvoll hielt. Wie würdest du denn die Links denn auszeichnen, dass es sinn ergibt? First/Last/Next/... ergibt bei der Seite ja wenig Sinn...
Ja, wie ebenfalls Thomas bereits geschrieben hat, meinte ich das Link-Element. Du hast aber recht, wenn du sagst, dass es hier nicht unbedingt notwendig ist, wäre aber ein netter Bonus. (Ich als Opera-Nutzer freue mich immer sehr darüber, wenn mir dadurch die Navigation erleichtert wird.)
Viele Grüße
Thorsten
Hallo zusammen,
Hallo Sebastian
Einfach mal wild drauf los:
meta Zeichensatz.
Fenster
Schriftgrösse
Code
suit
<div id="Logo"><a href="blues.htm"><img .... ></a></div>
und
<h1 id=logo><a ... ><span class=hide>Soulmobil</span></a></h1>
mit CSS:
#logo a:before{ background-image:url(); width:...; height; }
#logo .hide {display:none;}
Struktur:
Ich sehe die Headline und die Navigation als etwas zusammengehöriges
also:
<div>
<h2 class=hide>headline</h2>
<p>Du hast das Soulmobil gesehen? ...</p>
<ul id=Navigation>
...
</ul>
</div>
PS: wurde mit FF2 betrachtet
mfg Beat
Hallo Beat,
meta Zeichensatz.
- würde ich als erste Angabe immer nach dem öffnenden html Tag setzen.
da würde ich wenigstens noch das Öffnen des <head>-Tag abwarten. *scnr*
Gruß aus Berlin!
eddi
meta Zeichensatz.
- würde ich als erste Angabe immer nach dem öffnenden html Tag setzen.
da würde ich wenigstens noch das Öffnen des<head>-Tag abwarten. *scnr*
Ja, absolut.
Ein Gruss dem, der mitliest
Beat
Hi,
vielen Dank, das hat mir einige neue Anstöße gegeben, woran ich arbeiten muss.
meta Zeichensatz.
- würde ich als erste Angabe immer nach dem öffnenden html Tag setzen.
einleuchtend ;)
Code
- Ok soweit.
aber überleg die folgendes: (...)
Ähm, geht es darum, Grafiken nur dann mit HTML einzubinden, wenn diese auch inhaltlich relevant sind?
Aber ich denk darüber nach.
Struktur:
Ich sehe die Headline und die Navigation als etwas zusammengehöriges (...)
Simmt soweit :)
Gruß,
seb
aber überleg die folgendes: (...)
Ähm, geht es darum, Grafiken nur dann mit HTML einzubinden, wenn diese auch inhaltlich relevant sind?
Nein es geht eher darum, dass deine Webseite auch ohne CSS einen sinnlich wahrnehmbaren Titel hat.
Wir hatten hier vor nicht langer Zeit jemand mit Braille Zeile, welche kein CSS interpretierte.
mfg Beat
Nein es geht eher darum, dass deine Webseite auch ohne CSS einen sinnlich wahrnehmbaren Titel hat.
Wir hatten hier vor nicht langer Zeit jemand mit Braille Zeile, welche kein CSS interpretierte.
Das Logo solle kein "Titel" in dem Sinne sein und falls doch so aufgefasst, wäre es das ja auch noch ohne CSS, weil ich es direkt in html eingefügt habe. Die Grafik ist eher eine Art "Leitmotiv" und als solches eigentlich auch dann gewünscht, wenn ein Besucher kein CSS unterstützt.
Dennoch falsch?
Gruß, ich
Das Logo solle kein "Titel" in dem Sinne sein und falls doch so aufgefasst, wäre es das ja auch noch ohne CSS, weil ich es direkt in html eingefügt habe. Die Grafik ist eher eine Art "Leitmotiv" und als solches eigentlich auch dann gewünscht, wenn ein Besucher kein CSS unterstützt.
aber mit der grafik kann ein blinder mensch oder eine suchmaschine nichts anfangen
ich sehe auf diesem "leitmotiv" ganz klat die überschrift "soulmobil", dieses leitmotiv ist ein reines gestaltungselement und hat somit in einem img-element nichts verloren sondern ist als hintergrundbild einer überschrift einzubinden
aber mit der grafik kann ein blinder mensch oder eine suchmaschine nichts anfangen
ich sehe auf diesem "leitmotiv" ganz klat die überschrift "soulmobil", dieses leitmotiv ist ein reines gestaltungselement und hat somit in einem img-element nichts verloren sondern ist als hintergrundbild einer überschrift einzubinden
So gesehen ist aber jede Grafik ein reines Gestaltungselement, oder irre ich da? Mir fällt zumindest gerade keine Anwendung mit einem Bild ein, wo das Bild nicht irgendwie durch ein Text ersetzt werden oder wegfallen könnte...
So gesehen ist aber jede Grafik ein reines Gestaltungselement, oder irre ich da?
Wahrscheinlich ja
a) Früher hatten wir transparente Pixelgrafiken. Das waren Gestaltungskrücken.
b) Dann haben wir immer noch reine Design-Grafiken, die das ersetzen oder ergänzen sollen, was CSS alleine noch nicht kann.
c) Wir haben Grafiken, die eine bestimmte Idee darstellen: Logos, Labels.
d) Wir haben Grafiken die als Shorthand dienen, aber eine Verbal auszudrückende Funktion innehaben: Link-Icons
e) Wir haben Schliesslich Grafiken, die einen Inhalt in ihrem eigenen Recht vertreten, und die nur mit viel Text annähernd beschrieben werden können.
a) ist obsolet.
b) soll möglichst so eingebaut werden, dass es kein Markup braucht.
c) Wir können/sollen ein verbales Äquivalent in das Markup aufnehmen
d) Wir sollen Links verbal ausdrücken und die Ersetzung via CSS vornehmen.
e) Wir sollten die Möglichkeiten alternativer Beschreibungen (title) nutzen.
mfg Beat
Hallo.
e) Wir sollten die Möglichkeiten alternativer Beschreibungen (title) nutzen.
Ja, beide.
MfG, at