Was haltet ihr von der Seite...
roadrunner
- barrierefreiheit
0 Thomas Luethi0 Britt0 Piet0 roadrunner
0 Götz0 molily0 roadrunner0 Götz
0 at0 roadrunner0 at
Hi @all,
Was haltet ihr von der Seite www.roadrunner-pk.de in Punkto Barrierefreiheit und Web Usability?
cu
roadrunner
Hallo,
Was haltet ihr von der Seite http://www.roadrunner-pk.de/ in Punkto Barrierefreiheit und Web Usability?
Zuerst mal: Ich finde es gut, dass Du auch bei einer Seite,
auf der es um Motorraeder u.s.w. geht, auf Accessibility achtest
und nicht einfach sagst: "Wer keine guten Augen hat, gehoert
nicht zu unserem Zielpublikum" oder so...
Erster Eindruck: Recht gut. Schrift auf Anhieb anstaendig gross.
Du verwendest ja als Groessenangaben die Woerter (medium, small u.s.w.),
also ist die Schrift auch im MS IE skalierbar.
font:bold medium/14px helvetica, georgia, verdana, arial, sans-serif;
Ob 14px bei "medium" wirklich eine geeignete Zeilenhoehe ist,
wage ich zu bezweifeln...
Ich wuerde auf die Angabe der line-height eher verzichten.
Habe es nur rasch in Mozilla 1.5 (Linux) angeschaut
und kaum in den Quelltext geguckt.
http://www.roadrunner-pk.de/html/sonder.html
Das <h4>Technische Daten</h4> ist in hellblau, normale
Schriftgroesse (wohl 1em oder so) und nicht einmal fett.
Dadurch etwas schlecht lesbar - zuwenig Kontrast.
Noch schlimmer ist es mit der Fusszeile:
"© Peter Klein's Road Runner 2004" - klein, wenig Kontrast.
Ueberschriften, Fusszeile und Links haben die gleiche Farbe,
eben das bereits kritisierte Hellblau.
Und die Links sind nichtmal unterstrichen.
=> Sehr verwirrlich und schlecht, weil man mit der Maus
ueber den Text gehen muss, um zu sehen, was ein Link ist.
Unbedingt aendern!
Ich faende es hilfreich, wenn man anhand der Linkfarben
unterscheiden koennte, was man schon gesehen hat.
Du hast ja kaum Farben, also waere es IMHO kein
Problem, das umzusetzen.
Der jeweils aktive Menuepunkt, also die Seite, auf der
man sich gerade befindet, sollte _kein_ Link sein.
Und er sollte (z.B. farblich) hervorgehoben sein.
Fuer Tastatur-Bedienung, also das sogenannte Tabbing
(Springen von einem Link zum andern mit der Tab-Taste)
solltest Du auch noch den Linkzustand a:focus definieren.
a:hover und a:focus wuerde ich etwas auffaelliger machen
als bloss mit der Unterstreichung. Mindestens eine
andere Hintergrundfarbe, ggf. auch Invertierung
(helle Schrift auf dunklem Hintergrund).
Dass die Navigation links mit position:fixed (und den entsprechenden
schmutzigen Hacks fuer den MS IE) festgenagelt ist, finde ich
persoenlich sehr schlecht. Wenn man die Schriftgroesse etwas
erhoeht, ist nicht mehr alles sichtbar, und man kann den
Navigations-Bereich auch nicht scrollen. Also bleiben
einige Seiten (inklusive das Impressum) unerreichbar fuer
Leute, die grosse Schrift brauchen und/oder einen kleinen
Anzeigebereich haben.
Ich koennte mir vorstellen, dass z.B. Sehbehinderte
eher niedrige Aufloesungen eingestellt haben,
z.B. 800x600 auf einem 19"-CRT, damit ein Pixel
moeglichst gross ist. Wenn sie dann noch die
Schriftgroesse etwas skalieren, ist Dein Menue
nicht mehr vollstaendig sichtbar und benutzbar.
http://www.roadrunner-pk.de/html/sitemap.html
Ich persoenlich hasse Kursivschrift ist auf dem Bildschirm.
Und ich denke, ich bin nicht der einzige.
Ich wuerde noch ein extra Druck-Stylesheet machen,
das die Navigation und den Kruemelpfad ausblendet.
Diese Dinge braucht man auf dem Papier IMHO nicht.
Die Uebersichtskarte in niedriger Auflösung ist IMHO
voellig ueberfluessig. Die Qualitaet ist eh zu schlecht.
Eine Version reicht - "don't make me think!"
Ich hoffe fuer Dich, dass Du die Sache mit den
Urheberrechten geklaert hast, siehe
http://www.heise.de/tp/deutsch/inhalt/on/16851/1.html
Der kleine Motorradfahrer ist zwar nett, aber ein Logo,
das auch den Firmennamen als Text enthaelt, waere dort
oben links IMHO sinnvoller.
Das Logo sollte auf jeden Fall ein Link zur Homepage sein.
Das ist ueblich so, die Leute erwarten das.
Das Hintergrundbild unten rechts (Schriftzug-Umriss)
ist IMHO schlecht lesbar und unnuetz, weil man
nicht darauf klicken kann (bzw. weil nichts passiert,
wenn man darauf klickt).
Zur Barrierefreiheit gehoert IMHO auch, dass man
es den Benutzern so leicht wie moeglich macht,
CSS abzuschalten.
Fuer Mozilla braucht es dazu ein TITLE-Attribut
im LINK-Element, mit dem man das Stylesheet
einbindet, bzw. im STYLE-Element. Versuch mal:
<style type="text/css" media="screen" title="Road-Runner Style">
<!-- @import "./../layout.css"; -->
</style>
Ein Kontaktformular waere schon sehr nuetzlich und wuerde
die Usability massiv steigern fuer all die Leute, die gerade
nicht an ihrem eigenen Rechner sind.
Achja, zu guter Letzt: Valider Quellcode waere auch ein
IMHO wesentlicher Bestandteil der Usability, Accessibility
und Zukunftssicherheit... http://validator.w3.org/
Gerade die Anfahrt-Seite ist eine mittlere Katastrophe. ;-)
Freundliche Gruesse,
Thomas
Hi
und als erstes mal ein fettes Dankeschön für diese ausführlich Antwort.
und nicht einfach sagst: "Wer keine guten Augen hat, gehoert
nicht zu unserem Zielpublikum" oder so...
Soche Seiten hasse ich einfach und wollte versuchen es besser zu machen.
Ob 14px bei "medium" wirklich eine geeignete Zeilenhoehe ist,
wage ich zu bezweifeln...
Ich auch. Das war auch eher ne Notlösung um die Überschrift des Content bei allen Browsern und unterschiedlichen Einstellungen halwegs auf dieselbe Höhe wie den Home Button zu bringen. In 14 Tagen hab ich mehr Zeit, dann werde ich noch ein wenig rumtüfteln.
Ich wuerde auf die Angabe der line-height eher verzichten.
Werd ich mal ausprobieren.
http://www.roadrunner-pk.de/html/sonder.html
Das <h4>Technische Daten</h4> ist in hellblau, normale
Schriftgroesse (wohl 1em oder so) und nicht einmal fett.
Dadurch etwas schlecht lesbar - zuwenig Kontrast.
Noch schlimmer ist es mit der Fusszeile:
"© Peter Klein's Road Runner 2004" - klein, wenig Kontrast.
Doch die Überschriften sind fett, allerdings ist ab <h4> die font-weight nur noch 400, weil es mir sonst zu fett erschien.
Ueberschriften, Fusszeile und Links haben die gleiche Farbe,
eben das bereits kritisierte Hellblau.
Ich wollte die Seite einheitlich und nicht zu bunt machen. Werd wohl noch ein wenig mehr Farbe reinbringen. Dank css geht das ja recht leicht.
Und die Links sind nichtmal unterstrichen.
=> Sehr verwirrlich und schlecht, weil man mit der Maus
ueber den Text gehen muss, um zu sehen, was ein Link ist.
Unbedingt aendern!
Da hab ich mir auch schon den Kopf drüber zerbrochen und mich dagegen entschieden, weil ich es meiner Meinung nach nicht zum Layout passte, wenn das Navigationsmenü unterstrichene Links hatte. Ich könnte jetzt für die Links im Text das ganze in jedem Dokument andern oder aber für die Links im Menü. Allerdings würde ich ja dann die Vorteile einer einzigen Konfigurationsdatei verlieren, falls die Seite irgendwann mal schnell geändert werden soll. Bin noch nicht allzu fit in css um es anders zu verwirklichen, da es mein erstes ccs Layout ist.
Ich faende es hilfreich, wenn man anhand der Linkfarben
unterscheiden koennte, was man schon gesehen hat.
Das ist natürlich ganz klar ein Argument für unterschiedliche Farben, jedoch ist man bei den paar Seiten schnell durch und dann haben sie wieder alle nur eine Farbe :)
Der jeweils aktive Menuepunkt, also die Seite, auf der
man sich gerade befindet, sollte _kein_ Link sein.
Yep, das muss ich noch ändern. Liegt vermutlich an mangelnden css Kenntnissen. Wenn ich es nicht als Link formatiere, dann passt es nicht mehr zum Rest der Navigation oder ich müsste wieder jede Datei einzeln bearbeiten. Ich hatte testweise mal das Unterstreichen des Links der aktuellen Seite deaktiviert, fand es aber verwirrend aufgrund der gleichen Farbe.
Und er sollte (z.B. farblich) hervorgehoben sein.
Hmm, ich dachte, dass ich durch die Breadcrumbs klar darstelle wo ich mich befinde. Das wäre ja doppelt oder besser noch tripple gemoppelt, da ich ja auch jedesmal noch eine entsprechende Überschrift habe.
Fuer Tastatur-Bedienung, also das sogenannte Tabbing
(Springen von einem Link zum andern mit der Tab-Taste)
solltest Du auch noch den Linkzustand a:focus definieren.
Hab ich gerade gemacht (ich verlieb mich immer mehr in css), ist aber noch nicht online. Bin operaverwöhnt. Dort werden die Links auch ohne a:focus schön markiert mit der Markierhintergrundfarbe der Systemmenüs (unter Linux). Bei den anderen Browsern nur leicht umrahmt, das stimmt. Die hatte ich auf Tabbrowsing nicht getestet.
a:hover und a:focus wuerde ich etwas auffaelliger machen
noch auffälliger? ;-)
als bloss mit der Unterstreichung. Mindestens eine
andere Hintergrundfarbe,
Ich finde das sieht nicht so toll aus mit der Hintergrundfarbe (zumindest nicht bei dem schlichten Layout) und durch das Unterstreichen assoziert man noch die "normalen" Standardlinks im Web. Deswegen hatte ich es dabei belassen. Ich wollte sie nur nicht dauerunterstrichen haben, wegen dem Menü.
Dass die Navigation links mit position:fixed (und den entsprechenden
schmutzigen Hacks fuer den MS IE) festgenagelt ist, finde ich
persoenlich sehr schlecht.
Und ich war so froh, dass ich das hinbekommen hab. Im IE scrollt sie aufgrund der Hacks mit (aber wem erzähl ich das), weil der sie sonst komplett verrissen hat.
»»Wenn man die Schriftgroesse etwas
erhoeht, ist nicht mehr alles sichtbar, und man kann den
Navigations-Bereich auch nicht scrollen. Also bleiben
einige Seiten (inklusive das Impressum) unerreichbar fuer
Leute, die grosse Schrift brauchen und/oder einen kleinen
Anzeigebereich haben.
Stimmt, daran hab ich gar nicht gedacht. Habs gerade mal ausprobiert unter Opera braucht man ja nur auf die Plustaste drücken. Bei einem Fenster von 800x400 kann ich bis 140% alles sehen und danach verschwindet das Impressum.
Die Idee mit dem fixed kam mir auch erst ganz zum Schluss. Bis dahin war alles scrollbar. Dann fiel mir auf, dass unter dem Navigationsmenü toter Raum ist, den ich eh nicht nutze. Also warum das Menü nicht fest positionieren, damit man bei niedrigen Auflösungen nicht immer scrollen muss. Das ergibt dann sogar einen minimalen Sinn für die Anklickbarkeit der aktuellen Seite.
Ich koennte mir vorstellen, dass z.B. Sehbehinderte
eher niedrige Aufloesungen eingestellt haben,
z.B. 800x600 auf einem 19"-CRT, damit ein Pixel
moeglichst gross ist. Wenn sie dann noch die
Schriftgroesse etwas skalieren, ist Dein Menue
nicht mehr vollstaendig sichtbar und benutzbar.
Also 800x600 funktioniert prächtig und dann kann man die Schrift auf 140% vergrößern (zumindest bei mir unter Opera), je nach Schriftart und Browser denke ich mal, das bei 800x600 120% immer drin sind. Ich werde mal ein paar schlechtsehende Leute aus der Verwandtschaft vor die Seite setzen und die Schrift solange vergrößern bis sie sagen sie könnten sie gut lesen. Mal schauen ab wann das der Fall ist. Bei einer höheren Auflösung von z.B. 1280x1024 kann ich locker bis auf 300% erhöhen. Werd es aber mit 800x600 testen.
Aufgrund der Zielgruppe, die ja doch eher die normal sehende Bevölkerung ist, müssen dabei aber schon gravierende Erkenntnisse herauskommen, damit ich die fixe Navigation entferne, zumal sie für den Großteil der Nutzer unter IE nicht fixed ist und meiner Meinung nach eher Vorteile bringt. Wenn natürlich bei 800x600 und 140% für die Testpersonen noch immer nichts lesbar ist, dann werde ich es natürlich ändern.
Ich hatte ehrlich gesagt auch eher daran gedacht, dass sehr schlecht sehende Menschen (also fast Blinde) sich die Seiten "vorlesen" lassen und das dafür der reine html Code entscheident ist. An das extreme Vergrößern hab ich nicht gedacht. Nur an so ein bis zwei Schritte.
http://www.roadrunner-pk.de/html/sitemap.html
Ich persoenlich hasse Kursivschrift ist auf dem Bildschirm.
Und ich denke, ich bin nicht der einzige.
Ich finde sie eigentlich auch nicht so toll und hatte zuerst normale Schrift, aber irgendwie sah es komisch aus mit der normalen Schrift direkt unter den vielen Links. So hebt es sich besser voneinander ab und soll nur als kurze Erklärung für die einzelnen Punkte dienen. Kommt ja auch sonst nirgends vor. Ich denk man kann damit leben.
Ich wuerde noch ein extra Druck-Stylesheet machen,
das die Navigation und den Kruemelpfad ausblendet.
Diese Dinge braucht man auf dem Papier IMHO nicht.
Wie funktioniert das mit dem Ausblenden per Stylesheet? Ich hätte es so gemacht, dass ich für jede Seite ein neues html Dokument anlege ohne die Navigation und dem Breadcrumbs. Dann bräuchte ich allerdings wieder einen Druck Button, den ich störend empfinde, weil er bei vielen Seiten eh nicht so funktioniert wie er sollte, auch wenn es als Druckversion bezeichnet wird. Ich klicke solche Buttons gar nicht mehr an, sondern auf die Druckvorschau von Opera. Wenn die gut ist, dann kann man auch drucken. Die meisten Seiten, die eine Druckversion anbieten haben diese trotzdem nicht optimiert. Das ist echt ein Leid.
Den Krümelpfad finde ich nicht so schlimm auf dem Papier und die Navigation erscheint ganz unten nach dem Inhalt was allerdings manchmal für eine unnötige Seite sorgt. Die könnte durchaus weg.
Die Uebersichtskarte in niedriger Auflösung ist IMHO
voellig ueberfluessig. Die Qualitaet ist eh zu schlecht.
Eine Version reicht - "don't make me think!"
Ich dachte an die armen Modemnutzer, die es noch haufenweise gibt und hatte zuerst sogar eine mittlere Version.
Die Karten werde ich auf jeden Fall noch mal überarbeiten, schon aus dem Grund der schlechten Quali der kleineren. Vielleicht lass ich sie auch ganz weg.
Der kleine Motorradfahrer ist zwar nett, aber ein Logo,
das auch den Firmennamen als Text enthaelt, waere dort
oben links IMHO sinnvoller.
Tja, das ist nunmal das Firmenlogo und es kommt bei dem Cienten erstaunlich gut an . hätte ich nicht gedacht. Und der Firmenname steht fett daneben. Wenn es mal mehr Inhalt gibt und ich den Platz brauch, dann entfällt das fette Road Runner und ich änder es ab.
Das Logo sollte auf jeden Fall ein Link zur Homepage sein.
Das ist ueblich so, die Leute erwarten das.
Hatte ich mir auch schon überlegt und werde es noch machen (in 14 Tagen aber erst). Fand es nicht ganz so tragisch, da direkt darunter der Home Link ist. Aber stimmt, die Leute wollen auf das Bild klicken.
Das Hintergrundbild unten rechts (Schriftzug-Umriss)
ist IMHO schlecht lesbar und unnuetz, weil man
nicht darauf klicken kann (bzw. weil nichts passiert,
wenn man darauf klickt).
Soll auch nur ein Backgroundimage sein, das die Seite gerade bei hohen Auflösungen etwas auflockert und nicht so leer erscheinen lässt.
Zur Barrierefreiheit gehoert IMHO auch, dass man
es den Benutzern so leicht wie moeglich macht,
CSS abzuschalten.
Yep, hier unterlag ich wieder meiner Operagewohnheit. Ein Klick...
Fuer Mozilla braucht es dazu ein TITLE-Attribut
im LINK-Element, mit dem man das Stylesheet
einbindet, bzw. im STYLE-Element. Versuch mal:<style type="text/css" media="screen" title="Road-Runner Style">
<!-- @import "./../layout.css"; -->
</style>
Jo werds versuchen.
Ein Kontaktformular waere schon sehr nuetzlich und wuerde
die Usability massiv steigern fuer all die Leute, die gerade
nicht an ihrem eigenen Rechner sind.
Yep, kommt noch, wenn ich wieder mehr Zeit habe.
Gerade die Anfahrt-Seite ist eine mittlere Katastrophe. ;-)
Yep, weil dort der Tabellencode vom web.de Routenplaner mit drin ist und ich den von der vorherigen Seite übernommen habe. Den werde ich mir auch noch vornehmen :)
Vielen Dank für Deine ausführlichen und sehr hilfreichen Antworten. Ich werde mir davon mit Sicherheit einiges zu Gemüte führen.
ciao
Robert
Hallo Robert,
Doch die Überschriften sind fett, allerdings ist ab <h4> die font-weight nur noch 400, weil es mir sonst zu fett erschien.
Also, hier (unter Win2k) in Opera 5.12, Mozilla 1.6 und MS IE 5.0
sind diese <h4> Ueberschriften kleiner und feiner als die
darauffolgenden Listenpunkte. Ich sehe nichts von wegen "fett".
Ueberschriften sollten IMHO "staerker" sein als Fliesstext.
Also groesser (und evtl. fett) oder wenigstens gleich gross,
dann aber fett.
Bei Dir wirken die H4-Ueberschriften wie "Kleingedrucktes".
Ueberschriften, Fusszeile und Links haben die gleiche Farbe [...]
Und die Links sind nichtmal unterstrichen.
=> Sehr verwirrlich und schlecht, weil man mit der Maus
ueber den Text gehen muss, um zu sehen, was ein Link ist.Da hab ich mir auch schon den Kopf drüber zerbrochen und mich dagegen entschieden, weil ich es meiner Meinung nach nicht zum Layout passte, wenn das Navigationsmenü unterstrichene Links hatte.
_Dort_ muessen die Links ja IMHO auch nicht unterstrichen sein,
weil dort eben klar ist, dass es die Navigation ist.
Im Content-Bereich solltest Du aber die Links auf jeden
Fall hervorheben.
Optimal waeren andere Farben _und_ Unterstreichung.
Wenn Du unbedingt die gleichen Farben fuer Ueberschriften
und Link haben willst, dann unterstreiche wenigstens die
Links im Content-Bereich.
Es muessen ja nicht alle Links gleich aussehen.
Fuer die Links im Navigations-Bereich findest Du
sicher einen geeigneten Selektor, siehe:
http://www.netandmore.de/faq/fom-serve/cache/1271.html
Ich wuerde es z.B. so machen:
#navAlpha a:link, #navAlpha a:visited { text-decoration:none; }
.content a:link, .content a:visited { text-decoration:underline; }
Der jeweils aktive Menuepunkt, also die Seite, auf der
man sich gerade befindet, sollte _kein_ Link sein.Yep, das muss ich noch ändern. Liegt vermutlich an mangelnden css Kenntnissen. Wenn ich es nicht als Link formatiere, dann passt es nicht mehr zum Rest der Navigation oder ich müsste wieder jede Datei einzeln bearbeiten.
Ja, das musst Du.
Ob ein Text ein Link ist, oder nur Text, steht im HTML-Code,
das hat nichts mit CSS zu tun.
Und er sollte (z.B. farblich) hervorgehoben sein.
Hmm, ich dachte, dass ich durch die Breadcrumbs klar darstelle wo ich mich befinde. Das wäre ja doppelt oder besser noch tripple gemoppelt, da ich ja auch jedesmal noch eine entsprechende Überschrift habe.
Ob der Kruemelpfad bei Dir notwendig ist, musst Du selbst entscheiden. Wenn er nicht gerade die einzige Navigations-
Moeglichkeit ist, gehoert es zu seiner Natur, dass er
redundante Information liefert.
Der aktuelle Punkt in der Navigation sollte auf jeden Fall
hervorgehoben sein, und eben kein Link. Alles andere ist
verwirrlich.
Siehe auch Punkt 10 in der Liste von Jakob Nielsen:
http://www.useit.com/alertbox/20031222.html
Also 800x600 funktioniert prächtig und dann kann man die Schrift auf 140% vergrößern
Dann ist ja (fast) gut! ;-)
Hast Du wirklich die Aufloesung auf 800x600 gestellt, oder
bloss das Browserfenster verkleinert? Es kommt naemlich
nicht ganz aufs gleiche heraus.
Wie auch immer, Du musst selbst wissen, ob Du dieses
position:fixed drin laesst.
Ich persoenlich finde es einfach ueberfluessig und
schlecht (sogar schlechter als Frames), und ich werde
nicht muede, auf seine Nachteile hinzuweisen.
Ich wuerde noch ein extra Druck-Stylesheet machen,
das die Navigation und den Kruemelpfad ausblendet.
Diese Dinge braucht man auf dem Papier IMHO nicht.Wie funktioniert das mit dem Ausblenden per Stylesheet? Ich hätte es so gemacht, dass ich für jede Seite ein neues html Dokument anlege ohne die Navigation und dem Breadcrumbs.
Nicht notwendig.
Jedenfalls nicht fuer (halbwegs) aktuelle Browser wie z.B.
MS IE ab 4.0, Netscape ab 6, Mozilla, Opera ab 5 (mindestens).
All diese Browser koennen zwischen verschiedenen Medien
unterscheiden und nehmen ein Stylesheet, das mit media="print"
eingebunden wird, wenn es ums Drucken geht.
Dort kann man fuer die "unerwuenschten" Dinge einfach
selektor { display:none; }
angeben. Siehe:
http://aktuell.de.selfhtml.org/tippstricks/css/drucklayout/index.htm
Den Krümelpfad finde ich nicht so schlimm auf dem Papier und die Navigation erscheint ganz unten nach dem Inhalt was allerdings manchmal für eine unnötige Seite sorgt. Die könnte durchaus weg.
Klar, der Kruemelpfad braucht nur eine Zeile,
und dass die Navigation unten kommt (und nicht
links viel Platz frisst), ist schonmal gut.
Aber eben, auf dem Papier ist beides IMHO
voellig nutzlos und kann somit ausgeblendet werden.
Die Uebersichtskarte in niedriger Auflösung ist IMHO
voellig ueberfluessig. Die Qualitaet ist eh zu schlecht.
Ich dachte an die armen Modemnutzer, die es noch haufenweise gibt und hatte zuerst sogar eine mittlere Version.
Wenn sie zuerst die schlechte Version laden muessen,
um dann festzustellen, dass diese unbrauchbar ist,
und dann noch die bessere Version laden, hast Du
ihnen einen Baerendienst getan.
Zudem: 80 kB sind jetzt wirklich nicht die Welt...
[Bild: Kleiner Motorradfahrer] Tja, das ist nunmal das Firmenlogo [...] Und der Firmenname steht fett daneben.
Als Ueberschrift in Text-Form.
Das ist vielleicht aus Usability-Sicht ganz gut.
Aber es ist eben kein Logo, kein "Corporate Design".
Deine Entscheidung, bzw. die Deines Auftraggebers...
[CSS abschalten leichter machen]
Yep, hier unterlag ich wieder meiner Operagewohnheit. Ein Klick...
... oder Ctrl-G, ich weiss... ;-)
In Mozilla warte ich schon lange darauf, dass das so einfach geht...
Mit der Prefbar http://prefbar.mozdev.org/ kann man zwar
Fonts und Farben abschalten, aber eben nicht CSS ganz allgemein.
Vielleicht weiss ja jemand ein besseres Add-On, mit dem das
jetzt auch moeglich ist (fuer Mozilla 1.5ff, Linux).
Freundliche Gruesse,
Thomas
Hi,
und nochmals danke für die Antwort. Ich werde mich noch um einige deiner Vorschläge kümmern, habe allerdings erst in 14 Tagen wieder rihtig Zeit dazu.
Also groesser (und evtl. fett) oder wenigstens gleich gross,
dann aber fett.
Bei Dir wirken die H4-Ueberschriften wie "Kleingedrucktes".
Werde ich mir nochmal vornehmen.
Es muessen ja nicht alle Links gleich aussehen.
Fuer die Links im Navigations-Bereich findest Du
sicher einen geeigneten Selektor, siehe:
http://www.netandmore.de/faq/fom-serve/cache/1271.html
Hab ich mir direkt gebookmarkt :)
Ob ein Text ein Link ist, oder nur Text, steht im HTML-Code,
das hat nichts mit CSS zu tun.
Ja, das ist schon klar. Allerdings müsste ich diesen Text dann extra formatieren, damit er so wie der Rest der Navigation aussieht was auch kein Problem wäre. Nur wenn ich dann irgendwann mal das Layout ändern möchte, wäre ja der Vorteil von css in diesem Punkt hinfällig, da ich jedes Dokument bearbeiten muss. So hatte ich das gemeint. Ich werd mich auf jeden Fall noch intensiver damit beschäftigen, da ich die Möglichkeiten von css genial finde.
Hast Du wirklich die Aufloesung auf 800x600 gestellt, oder
bloss das Browserfenster verkleinert? Es kommt naemlich
nicht ganz aufs gleiche heraus.
Hab ich, geht unter Linux ja per Tastendruck ;-) Und wenn ich das Fenster nur verkleinere, dann auf 800x400. Ich denke 200 Pixel für Menü des Browsers und für die Startleiste kommt ungefähr hin.
Ich persoenlich finde es einfach ueberfluessig und
schlecht (sogar schlechter als Frames), und ich werde
nicht muede, auf seine Nachteile hinzuweisen.
;-)
http://aktuell.de.selfhtml.org/tippstricks/css/drucklayout/index.htm
Werd ich mir mal anschauen und ausprobieren.
Wenn sie zuerst die schlechte Version laden muessen,
um dann festzustellen, dass diese unbrauchbar ist,
und dann noch die bessere Version laden, hast Du
ihnen einen Baerendienst getan.
Da hast Du natürlich recht.
In Mozilla warte ich schon lange darauf, dass das so einfach geht...
Mit der Prefbar http://prefbar.mozdev.org/ kann man zwar
Fonts und Farben abschalten, aber eben nicht CSS ganz allgemein.
Vielleicht weiss ja jemand ein besseres Add-On, mit dem das
jetzt auch moeglich ist (fuer Mozilla 1.5ff, Linux).
Wenn Du Javascript aktiviert hast, kannst Du es mal mit folgendem Link versuchen. Das funktioniert bei mir mit Mozilla 1.6-3 unter Linux. http://css.fractatulum.net/bookmarklets.htm
Danke und schönen Gruß
Robert
ps: ein paar kleine Änderungen werde ich vermutlich noch heute abend machen. Die Dinge in die ich mich tiefer reinarbeiten muss oder die zu zeitaufwendig sind, kann ich erst in 14 Tagen behandeln.
Hallo Robert,
Ob ein Text ein Link ist, oder nur Text, steht im HTML-Code,
das hat nichts mit CSS zu tun.Ja, das ist schon klar. Allerdings müsste ich diesen Text dann extra formatieren, damit er so wie der Rest der Navigation aussieht was auch kein Problem wäre.
Ich nehme gerne ein <span>, damit ich auch
fuer diesen Menue-Punkt einen Selektor
basteln kann, der gleichwertig ist mit <a>:
HTML:
<ul class="navigation">
<li><a href="index.html">Startseite</a></li>
<li><span>Seite 2</span></li>
<li><a href="seite3.html">Seite3</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
CSS:
ul.navigation a { /* ... */ }
ul.navigation a:link { /* ... */ }
ul.navigation a:visited { /* ... */ }
/* u.s.w. */
ul.navigation span { /* ... */ }
So kann ich z.B. sowohl den Links als auch
dem aktuellen Punkt ein display:block oder
einen Rahmen zuweisen.
Aenderungen muessen spaeter wirklich nur
noch im CSS gemacht werden, wenn das
HTML so "vorbereitet ist".
Vielleicht weiss ja jemand ein besseres Add-On, mit dem das
[CSS abschalten] moeglich ist (fuer Mozilla 1.5ff, Linux).Wenn Du Javascript aktiviert hast, kannst Du es mal mit folgendem Link versuchen. Das funktioniert bei mir mit Mozilla 1.6-3 unter Linux. http://css.fractatulum.net/bookmarklets.htm
Herzlichen Dank! Du hast gerade meinen Tag gemacht! (*) ;-)
Hier in Mozilla 1.6, Win 2000, klappt es wunderbarstens!
Und ich bin zuversichtlich, dass es auch unter Linux funzelt...
Liebe Gruesse
Thomas
(*) "You just made my day!"
Hallo Thomas,
na das freut mich doch, dass ich Dir auch 'ne Freude machen konnte :-) Hab fast alle Deiner Tipps in die Tat umgesetzt bis auf 2-3 Kleinigkeiten. Hab mal wieder viel zu lange dran rumgedoktort und sogar noch 'ne print.css angelegt, da ich eh an jede Datei ran musste wegen der <p class="navigation">. Das war ein super Tipp, genau wie die print.css. Dort hab ich dann auch direkt Schriften mit Serifen gewählt, weil die auf dem Papier besser aussehen. CSS ist einfach geil.
An das Tabellenchaos vom web.de Routenplaner mach ich mich erst in 14 Tagen ran. Einen Usabilityfehler hat die Seite noch: Auf der Startseite musste ich das Logo anklickbar machen, weil sonst das Navigationsmenü hüpfte beim Wechsel auf eine andere Seite, auch wenn ich das Logo in <span><img src...></span> eingebunden hatte. Es hüpfte zwar nicht in allen Browsern, aber in vielen. Da werde ich mich auch in 14 Tagen nochmal mit beschäftigen.
Danke nochmals für die ausführliche Hilfe und die klasse Tipps. Bekommt man nicht überall.
ciao
Robert
Hallo,
na das freut mich doch, dass ich Dir auch 'ne Freude machen konnte :-)
Das Bookmarklet tut seinen Dienst auch in Mozilla 1.5 unter SuSE Linux.
Ich bin also total happy! ;-)
Hab fast alle Deiner Tipps in die Tat umgesetzt bis auf 2-3 Kleinigkeiten.
Schoen. So gefallen mir die Seiten deutlich besser.
Ich weiss, das klingt jetzt eingebildet. Soll es aber nicht sein. ;-)
Dass die aktuelle Seite im Menue kein Link mehr ist, dafuer farblich
hervorgehoben, ist IMHO eine massive Verbesserung.
Und dass die Links im Content-Bereich dank der Unterstreichung auf Anhieb
erkennbar sind, und dass Du dort auch unterschiedliche Farben fuer
besuchte und unbesuchte Links hast, finde ich sehr benutzerfreundlich.
Auch die neuen Farben (Menue, Ueberschriften) mit mehr Kontrast
gefallen mir besser.
Jetzt habe ich nochmal die Inhalte etwas genauer angeschaut.
Zuerst mal ein Lob: Schoene Fotos von schoenen Maschinen! ;-)
Unter "Spektrum" steht das, was ich unter dem Begriff "Angebote"
suchen wuerde, naemlich eine Uebersicht der Fahrzeuge, die man
bei Euch kaufen bzw. herstellen lassen kann.
Das Wort "Spektrum" ist fuer mich sehr abstrakt und ungewohnt.
Natuerlich werden die Leute, die das Menue von oben nach unten
durchklicken, auch auf diese Seite stossen, aber ich wuerde sie
im Menue eher "Angebote" nennen. Oder halt "Produkte".
Unter "Angebote" hat es nur gerade ein aktuelles Sonderangebot
(Roller-Inspektion, "... bis Ende April" => Jahr auch angeben!)
sowie einen Link zu den eBay-Angeboten.
Diese Seite wuerde ich im Menue eher "Aktuelles" nennen, vielleicht
faellt Euch noch ein besserer Begriff ein.
Und statt der umstaendlichen Erklaerung/Rechtfertigung, warum Ihr auf
eBay verkauft, wuerde ich eher einen knackigen Spruch machen, der
die Leute anmacht, auch die eBay-Auktionen anzuschauen. Z.B. sowas:
"Ab und zu versteigern wir auch ein Schnäppchen auf eBay.
Selbstverständlich können Sie die von uns angebotenen Artikel
vorher besichtigen und probefahren.
_Zu_unseren_eBay_Auktionen!_"
Am besten wäre es natürlich, diesen Text und den Link nur dann
anzuzeigen, wenn es tatsaechlich etwas zu ersteigern gibt.
Im Moment klickt man auf den Link "Unsere eBay-Auktionen",
dann erscheint Eure "bunte", vollgepackte eBay-Seite, und
dort muss man dann noch die relevante Information suchen:
"Dieser Verkäufer bietet derzeit keine Artikel zum Verkauf an."
und sogar noch 'ne print.css angelegt [...] Dort hab ich dann auch direkt Schriften mit Serifen gewählt, weil die auf dem Papier besser aussehen. CSS ist einfach geil.
Genau.
Ich habe seinerzeit viel zu lange gewartet, bis ich es endlich einsetzte.
Und heute koennte ich nicht mehr sein ohne. ;-)
Danke nochmals für die ausführliche Hilfe und die klasse Tipps. Bekommt man nicht überall.
Gerngeschehen.
Mit so "lernfaehigen" Leuten wie Dir macht es auch doppelt Spass,
zu helfen!
Freundliche Gruesse
Gruesse,
Thomas
P.S. Von mir aus EOT - End of Thread ;-)
Schoen. So gefallen mir die Seiten deutlich besser.
Ich weiss, das klingt jetzt eingebildet. Soll es aber nicht sein. ;-)
Keineswegs, Du hattest ja recht.
Zuerst mal ein Lob: Schoene Fotos von schoenen Maschinen! ;-)
Danke.
Unter "Spektrum" steht das, was ich unter dem Begriff "Angebote"
suchen wuerde, naemlich eine Uebersicht der Fahrzeuge, die man
bei Euch kaufen bzw. herstellen lassen kann.
Das Wort "Spektrum" ist fuer mich sehr abstrakt und ungewohnt.
Natuerlich werden die Leute, die das Menue von oben nach unten
durchklicken, auch auf diese Seite stossen, aber ich wuerde sie
im Menue eher "Angebote" nennen. Oder halt "Produkte".
Für das Wort Spektrum hab ich auch schon verzweifelt nach etwas anderem gesucht. Hier in Deutschland ist der Begriff gar nicht soo ungebräuchlich. Man findet ihn öfters. Allerdings fiel auch keinem meiner Freunde etwas kurzes ein. Produkte klingt ganz gut. Bei Angebote würde ich auch Preise erwarten, was wiederum schlecht realisierbar ist, da diese sich ständig ändern, weil es sich teilweise um Importe handelt. Aber Produkte....
Unter "Angebote" hat es nur gerade ein aktuelles Sonderangebot
(Roller-Inspektion, "... bis Ende April" => Jahr auch angeben!)
sowie einen Link zu den eBay-Angeboten.
Diese Seite wuerde ich im Menue eher "Aktuelles" nennen, vielleicht
Hmm, aktuelles sollte eigentlich immer auf der Startseite erscheinen, damit diese nicht allzustatisch ist und die User mitbekommen, dass sich hin und wieder etwas tut. Da kommen dann z.B. so Sachen wie Tag der offenen Tür und ähnliches hin, aber auch die Sonderaktionen. Sonderaktionen wäre eigentlich der richtige Begriff für "Angebote", ist aber zu lang. Vielleicht änder ich es in "Aktionen" um.
"Ab und zu versteigern wir auch ein Schnäppchen auf eBay.
Selbstverständlich können Sie die von uns angebotenen Artikel
vorher besichtigen und probefahren.
_Zu_unseren_eBay_Auktionen!_"
Hört sich gut an ;-)
P.S. Von mir aus EOT - End of Thread ;-)
Yep, von mir aus dito und ein fettes DANKE!
Robert
Ich glaube kaum das ein Blinder sich ein Motorrad sich kaufen oder leihen will und von daher hätte es nicht unbedingt Barrierefrei sein müssen...
Ich glaube kaum das ein Blinder sich ein Motorrad sich kaufen oder leihen will und von daher hätte es nicht unbedingt Barrierefrei sein müssen...
Barrierefreiheit ist möglicherweise vorwiegend mit Blick auf Blinde "erfunden" worden, ist aber weiter gedacht. Barrieren gibt es im Internet auch für Alte, sehr junge, Legastehniker etc. etc. Es gibt keine Gründe eine Website nicht Barrierefrei zu machen. OK, in der realen Welt möglicherweise die Kombination von zu wenig Übung und ein zu geringes Budget, z. B. für die barrierefreie Aufbereitung von Video- oder Audiostreams.
Auch Dir ein Dankeschön.
cu
roadrunner
Ich glaube kaum das ein Blinder sich ein Motorrad sich kaufen oder leihen will und von daher hätte es nicht unbedingt Barrierefrei sein müssen...
Deswegen auch der Zusatz Web Usability ;-) Allerdings verstehe ich unter Barrierefreiheit nicht nur Seiten für Blinde, sondern auch Seiten, die unter allen Browsern und Betriebssytemen mit allen Auflösungen betrachtbar und dementsprechend skalierbar sein sollten. Wobei ich ab 800x600 getestet habe und nicht darunterliegende, da diese immer weniger werden. Wenn ich mehr Zeit habe, werde ich eine Version für geringe Auflösungen erstellen in Hinblick auf die immer weitere Verbreitung von PDAs. Man kann sie sich zwar schon erstaunlich gut anschauen, aber optimal ist das noch nicht.
Danke für die Antwort
cu
roadrunner
Hallo roadrunner!
http://www.roadrunner-pk.de [...] Barrierefreiheit und Web Usability?
Also, was mir spontan auffiel:
Eine link-Navigation im Head wäre vielleicht noch ganz nett.
Ansonsten schau Dir mal an, was Bobby noch so bemängelt: http://bobby.watchfire.com/bobby/bobbyServlet?URL=http%3A%2F%2Fwww.roadrunner-pk.de%2F&output=Submit&gl=wcag1-aaa&test=.
Ansonsten sollte eine "barrierefreie" Seite natürlich auch valid sein (sowas steht imho auch in den WCAG irgendwo drin).
Ich finde die Alt-Texte der Navigationslinks im Lynx ein wenig "verwirrend", zumal das space.png völlig überflüssig ist.
Aber im großen und ganzen scheint die Seite auch ohne CSS problemlos nutzbar zu sein.
MfG
Götz
Hallo,
Ich finde die Alt-Texte der Navigationslinks im Lynx ein wenig "verwirrend", zumal das space.png völlig überflüssig ist.
Das soll wohl Suchmaschinenfutter sein. Google ignoriert diese alt-Texte aber sowieso, insofern bringt es nichts.
Mathias
Auch Dir danke.
Das soll wohl Suchmaschinenfutter sein. Google ignoriert diese alt-Texte aber sowieso, insofern bringt es nichts.
Yep, zum Teil soll es Suchmaschinenfutter sein. Es gibt auch noch andere Suchmaschinen außer Google ;-)
cu
roadrunner
Hi,
und erstmal danke für die Antwort.
Ich finde die Alt-Texte der Navigationslinks im Lynx ein wenig "verwirrend", zumal das space.png völlig überflüssig ist.
Die Alt-Texte dienen teilweise als Suchmaschinenfutter. Wahrscheinlich hab ich es damit ein wenig übertrieben. Ist mir auch aufgefallen, wobei ich es unter lynx und w3m nicht ganz so verwirrend fand, da die Links ja anders dargestellt werden.
Das mit dem space.png versteh ich nicht wirklich. Wieso ist es überflüssig? Anders hab ich es nicht hinbekommen, dass die Schrift ziemlich genau bündig unter dem Hinterrad des Logos anfängt - egal bei welcher Auflösung. Alles andere sah irgendwie immer komisch aus.
cu
roadrunner
Hallo roadrunner!
Die Alt-Texte dienen teilweise als Suchmaschinenfutter. [...]
Suchmaschinenfutter hat auf einer "guten" Seite imho nichts zu suchen, da Suchmaschinenfutter für Textbrowsernutzer usw. auch nicht unbedingt sehr benutzerfreundlich ist.
Das mit dem space.png versteh ich nicht wirklich. Wieso ist es überflüssig? [...]
Mit CSS kannst Du die Elemente auch komplett ohne Grafiken präzise positionieren.
(mir sind btw vorher, beim nochmal in den Code schauen, noch 2-3 weitere überflüssige Spacer aufgefallen)
MfG
Götz
Mit CSS kannst Du die Elemente auch komplett ohne Grafiken präzise positionieren.
Das hatte ich versucht, aber es funktionierte nicht mit allen Browsern. Den meißten Ärger machten die 5er IE Versionen und auch der 6er. Ich bin allerdings auch noch recht neu in Sachen css. Werde es nochmal probieren sobald ich wieder mehr Zeit dazu habe.
Danke
roadrunner
Hallo.
Was haltet ihr von der Seite www.roadrunner-pk.de in Punkto Barrierefreiheit und Web Usability?
Ich denke, deine Frage ist hier hinreichend beantwortet worden. Was mich aber besonders freut, ist dass du tatsächlich zu Recht nur nach "Barrierefreiheit und Web Usability" gefragt hattest. Denn außerhalb dieses Bereiches sind die Seiten meines Erachtens nahezu perfekt -- wenngleich sie natürlich nicht den Gipfel der Kreativität darstellen. Jedenfalls bleiben mir nur noch die Krümel:
Hi
und auch Dir ein Dankeschön für die Antwort.
Ich denke, deine Frage ist hier hinreichend beantwortet worden. Was mich aber besonders freut, ist dass du tatsächlich zu Recht nur nach "Barrierefreiheit und Web Usability" gefragt hattest. Denn außerhalb dieses Bereiches sind die Seiten meines Erachtens nahezu perfekt -- wenngleich sie natürlich nicht den Gipfel der Kreativität darstellen.
Naja, perfekt sind sie noch lange nicht, aber trotzdem danke für das Lob. Was die Kreativität angeht hatte ich mir "back to the roots" zum Motto gemacht und als Ziel Web Usability und Barrierefreiheit gesetzt. Mag sein, dass die Kreativität darunter etwas gelitten hat ;-)
- Die Seiten könnten insgesamt oben mehr "Luft" vertragen, also etwa 1 em mehr Abstand von oben.
Hatten sie ursprünglich auch. Ist durch meine letzten Änderungen (u.a. Entfernen von festen Zeilenhöhen) verlorengegangen. Habs gerade geändert (ist aber noch nicht online).
- Der gekippte Schriftzug auf der rechten Seite stört und passt so gar nicht zu diesem ge-ni-alen Moped-Fahrer.
Hmm, der sollte eigentlich nicht gekippt sein. Welchen Browser unter welchem OS nutzt Du? Die im CSS definierten Schriften sind:
helvetica, georgia, verdana, arial, sans-serif;
Davon sollte mind. eine unter den halbwegs aktuellen Betriebssystemen standardmäßig installiert sein. Vielleicht hast Du deinen Browser auch so eingestellt, dass er ein eigenes CSS benutzt.
- Der "Start"-Button des Routenplaners ist noch hässlicher als der Rest dieses Mini-Formulars.
Der gefällt mir noch am besten ;) Aber Du hast recht was dieses Formular angeht. Das wird auch noch komplett überarbeitet sobald ich mehr Zeit habe. Allein der Quellcode ist grauenhaft. Das Formular hab ich von der alten Seite übernommen. Zum Teil ist es von Web.de so vorgegeben und der anpassbare Teil wurde an das alte Seitenlayout angepasst.
- Die Liste zur Handhabung des Routenplaners sollte eine <ol> sein, da ja die Reihenfolge nicht beliebig ist.
Stimmt. Darauf habe ich noch nie geachtet. Wiedermal was dazugelernt. Habs geändert, aber noch nicht online.
- Die Öffnungszeiten würde ich nicht im Impressum suchen, sondern unter "Anfahrt" oder "Service".
Das stammt daher, dass ich zuerst eine Rubrik Impressum und Kontakt hatte, die ich dann zu einer zusammengefasst habe, weil vieles doppelt war. Diese musste aufgrund der Gesetzlage dann Impressum heißen. Bei Services kannst Du ganz unten auf Kontakt klicken und Anfahrt werde ich eh nochmal überarbeiten (in ca zwei Wochen).
- Die Angabe des Gewerbeparks im Impressum sollte vor der Ortsangabe erfolgen.
erledigt :)
- In den Seitentiteln sollte die Adresse mittels eines Komma strukturiert werden.
Ich wollte Zeichen sparen, weil manche Suchmaschinen diese nur bis zu einer bestimmten Zeichenlänge auslesen.
- Im ansonsten sehr gut verständlichen Text wechselt im ersten Absatz die Perspektive. Du solltest dich zwischen der grammatischen ersten und dritten Person entscheiden.
Bin jetzt vermutlich zu müde und auch nicht der Deutschcrack um die Stelle zu finden (für die paar Texte hab ich glaube fast genauso lange gebraucht wie fürs Coden - und die Texte sind immer noch nicht perfekt). Ich nehme an Du meinst unter Service den ersten Absatz?
Nochmals Danke. Die Änderungen lade ich morgen im Laufe des Tages hoch.
cu
roadrunner
Hallo.
- Der gekippte Schriftzug auf der rechten Seite stört und passt so gar nicht zu diesem ge-ni-alen Moped-Fahrer.
Hmm, der sollte eigentlich nicht gekippt sein.
Doch, ganz bestimmt. Ich meine den grafischen, feststehenden Pseudo-3D-Schriftzug rechts unten auf jeder Seite.
Bin jetzt vermutlich zu müde und auch nicht der Deutschcrack um die Stelle zu finden (für die paar Texte hab ich glaube fast genauso lange gebraucht wie fürs Coden - und die Texte sind immer noch nicht perfekt). Ich nehme an Du meinst unter Service den ersten Absatz?
Yep. Aber der Zeitaufwand hat bei dir wenigstens Früchte getragen :-)
Nochmals Danke. Die Änderungen lade ich morgen im Laufe des Tages hoch.
Keine Ursache, es waren ja wirklich nur Details.
MfG, at
Doch, ganz bestimmt. Ich meine den grafischen, feststehenden Pseudo-3D-Schriftzug rechts unten auf jeder Seite.
Ach der. Ich war bei dem neben dem Logo, weil Du vorher vom Logo gesprochen hattest. Der rechts unten kam ganz zum Schluss hinzu, um die Seite etwas aufzulockern und bei hohen Auflösungen ab 1280x1024 nicht ganz so leer aussehen zu lassen, wenn die Leute trotz der hohen Auflösung mit maximierten Fenstern arbeiten.
Tja, ich denke der wird bleiben. Bis jetzt waren die Meinung zu dem Schriftzug eher positiv als negativ, auch wenn einige sagen der gefällt mir nicht oder der passt nicht. Andere finden ihn wieder klasse und sagen er gebe der Seite etwas festes.
Ich hatte es zuerst mit Farbverläufen versucht, was aber nicht zum Rest der Seite passte, dann mit anderen Grafiken, die aber nicht zu breit sein durften, weil sie sonst vom Content überlagert wurden und dann kam halt der Schriftzug angelehnt an technische Zeichnungen (von rechts lesbar direkt auf der Linie/dem Rand) und sehr unüblich/selten im Web. Aufgrund dieser eher seltenen Darstellungsweise wird er entweder gar nicht beachtet oder er bleibt im Gedächtnis hängen (meißtens eher positiv als negativ).
Die anderen von Dir gemachten Vorschläge habe ich inzwischen in die Tat umgesetzt und hochgeladen.
Besten Dank
roadrunner