roadrunner: Was haltet ihr von der Seite...

Beitrag lesen

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