zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Site- und Layoutcheck
Seite neu laden Barriererarmes, skalierbares, 3Spaltiges Design (Designkontrolle)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.02.2008, 22:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.02.2008
Beiträge: 2
tliffcom befindet sich auf einem aufstrebenden Ast
Standard Barriererarmes, skalierbares, 3Spaltiges Design (Designkontrolle)

Nabend,
bin für unsere Schule schon seit einiger Zeit an einem Relaunch. Leider habe ich nie die große Zeit gehabt um mich komplett richtig drum zu kümmern. Und wenn dann richtig! Eine halbherzige Sache die nur online geht damit sie der BITV entspricht möchte ich nicht.

Nun geht es aber in eine Phase in der ich mich dem ganzen wieder zuwenden kann. Geplante Entwicklungszeit ist 1 Monat, da davon 2 Wochen Ferien sind und das Design zu großen Stücken schon erstellt ist.

Sollte hier jemanden das Design interessieren, bitte per PN melden - dann kann man sich da sicherlich einigen. Wer so eine Arbeit klauen möchte der muss schon einen miesen Charakter haben wenn er nichtmal nachfragt. Ist nicht frei! (Wie gesagt einfach melden wenn Bedarf)

Damit das aber genau dem entspricht wie es für alle gebrauchbar wird (ja, ich bin optimist! Das geht. Zu dem Layout wurde mir gesagt würde es so nicht gehen ohne den Trick XY, aber es geht auch so ), brauche ich eure Hilfe.

Ich weiß das es wohl noch einige Bug's von Browser zu Browser und je nach Betriebssystem gibt. Die sind aber soweit alle soweit ausgeschmerzt das es kein Problem ist diese zu beseitigen in den einzelnen Browsern

z.B. das die Suche-Leiste mitsamt Breadcumb-Anzeige im IE noch nicht korrekt angezeigt wird.

Mich interessiert aber auch vorallen Dingen wie sinnvoll ihr Linksbeschriftungen, hidden Anchors, aufbau des Layouts findet.

Sicherlich kann man sich über den News-Ticket streiten. Geplant ist dort eventuell keine kompletten Sätze sondern einfach nur die aktuellsten Meldungen verlinkt. Da kann man aber auch ohne Javascript nachwer was hinbekommen. Ist schon teilweise dafür optimiert.

Hier erstmal der Link: Design
(Dies ist lediglich eine Beispielseite, an der noch die ganze Zeit gearbeitet wird. Aber Kommentare passen immer, auchwenn sich da was geändert hat würde ich gerne eure Ideen hören).


geplant ist noch:

"Problem melden" --> Entfernen
"Druckversion" --> mit einigen Angaben die anders sind als wenn mans von der Homepage mit Print-CSS ausdruckt. Soll aber auch mit dem CSS gut funktionieren, bloß folgt z.B. meine älteren Bekannten/Familienmitglieder die Dewise "Die Seite druckt sich doch eh nicht so wie sie angezeigt wird". "Kein Drucklink? Schade... wie druck ich das?"

Für mich stellt sich aber noch die Frage wie ich die Breadcumb beschrifte:

1) Die Menübenennungen und auf die Hauptdokumente der Kategorieren verlinken?

2) Nicht verlinken ?
3) Anderen Platz ?



Bekannte Bugs:
  • Menübeschriftungen zu lang. Nicht kritisch!
  • "Overscroll Phenomen" (Scrollleistenlänge ergibt sich aus Addition der Div-Höhen.) Nicht kritisch!
  • IE: Suchbox geht zu weit nach Rechts Behebbar. Kritisch!
  • Menü überlänge, länger als Content möglich Sicherlich behebbar, bloß wie? Kritisch.


Leider ist der Thread hier ein wenig unübersichtlich geworden aber ich würde gerne einfach hören was ihr davon haltet. Subjektiv, bitte keine "Scheiße,Scheiße,dumm"-Bewertungen oder so.

Ich wende mich jetzt schon an euch da es während der Entwicklungsphase einfach leichter ist sowas zu ändern.


mfg,
tliffcom!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.02.2008, 23:26
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Willkommen erstmal

Meine ersten Eindrücke:
  1. Menüschriften sind zu groß, font-size von #menuebox auf 0.875em setzen hilft enorm.
  2. Menühierachie ist nicht richtig visuell ersichtlich. Auch das ist eine Barriere, sprich: "Fachgruppen, Sprachzertifikate" usw. sollten anders aussehen.
  3. Es sind zu viele Menüpunkte. Das ist unübersichtlich und wenig nutzerfreundlich. Mit vertikalen Ausklappmenüs innerhalb der Menüleiste könnte man so was entspannter gestalten - oder einfach die ganzen Unterpunkte auf Unterseiten auslagern.
  4. Die von Dir (ich duze einfach mal) als Listenpunktmarker verwendeten Zeichen >> oder => sind NICHT barrierefrei. Lass es Dir doch einmal vorlesen. Verzichte ganz darauf und nimm einfach farbliche Unterscheidungen. Ist auch visuell leichter erfassbar ( siehe 2). Im Übrigen ist das ein "Verstoß" gegen die Trennung von Inhalt (HTML) und Gestaltung (CSS).
  5. Es ist überhaupt zu viel auf der Seite, hat man den Eindruck. Alles drängt sich. Ein wenig Whitespace könnte nicht schaden. Dazu packe Absätze in das <p> Element. Dafür ist es nämlich semantisch vorgesehen. Gib p dann testweise margin: 1em und du wirst sehen was ich meine. Die Feinsteuerung kann später erfolgen.
  6. Brotkrümelnavi und Suchbox beißen sich. Der Platz reicht nie und nimmer für beide aus. Bei Brot 1, Brot 2... mag das ja noch gerade so angehen, aber der Platz ist jetzt schon eng. Lagere die Suchbox nach oben rechts über die Grafik (in den Header) aus, da ist Platz genug und da erwartet der Nutzer auch eine.
  7. Der Ticker nervt. Ticker nerven immer, finde ich, allenfalls für Börsenkurse tauglich.
  8. Verdana ist keine unbedingt sichere Webschrift mehr. Sie läuft auch sehr breit. Nimm eine der neuen Windowsschriften wie Calibri oder Corbel und setze als Fallback Arial ein, für Mac User Arial und Helvetica z.B.
    font-family: Calibri, Corbel, "Arial Narrow", Arial, Helvetica, Haettenschwiler, sans-serif;

Die drangvolle Enge auf der Seite ist nicht nur den vielen Inhalten, sondern auch dem Design geschuldet. Du versuchst Trennung über Rahmen und Farben zu erreichen. Das führt zum Einen zur Divitis ( viele Divs nur für die Gestaltung da, obwohl verpönt) zum anderen wirkt das Layout dadurch schwer und unübersichtlich. Ein paar wenige Pixel Whitespace haben größeren Effekt und sorgen gleichzeitig dafür, dass die Inhalte besser und schneller erfasst werden können und sogar mehr Platz haben.
Das fürs Erste
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.02.2008, 23:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.02.2008
Beiträge: 2
tliffcom befindet sich auf einem aufstrebenden Ast
Standard

Nabend,

Zitat:
[*]Menüschriften sind zu groß, font-size von #menuebox auf 0.875em setzen hilft enorm.
--> Gut, das ist eine Frage der Kalibrierung denke ich. Mir ist eben aufgefallen das im Internet Explorer 6.0 nur in der Standardschrift noch okay ist, ansonsten halt entweder viel zu klein oder viel zu groß (IE halt^^)

Zitat:
[*]Menühierachie ist nicht richtig visuell ersichtlich. Auch das ist eine Barriere, sprich: "Fachgruppen, Sprachzertifikate" usw. sollten anders aussehen.[*]Es sind zu viele Menüpunkte. Das ist unübersichtlich und wenig nutzerfreundlich. Mit vertikalen Ausklappmenüs innerhalb der Menüleiste könnte man so was entspannter gestalten - oder einfach die ganzen Unterpunkte auf Unterseiten auslagern. [*] Die von Dir (ich duze einfach mal) als Listenpunktmarker verwendeten Zeichen >> oder => sind NICHT barrierefrei. Lass es Dir doch einmal vorlesen. Verzichte ganz darauf und nimm einfach farbliche Unterscheidungen. Ist auch visuell leichter erfassbar ( siehe 2). Im Übrigen ist das ein "Verstoß" gegen die Trennung von Inhalt (HTML) und Gestaltung (CSS).
Stimmt, hier war auch mal geplant das Menü später mit dem eingesetztem CMS (WebEdition) generieren zu lassen - gut das du mich daran erinnerst - wo eine Navigation mit Ordnerstruktur wohl eh angebracht wäre.


Zitat:
[*]Brotkrümelnavi und Suchbox beißen sich. Der Platz reicht nie und nimmer für beide aus. Bei Brot 1, Brot 2... mag das ja noch gerade so angehen, aber der Platz ist jetzt schon eng. Lagere die Suchbox nach oben rechts über die Grafik (in den Header) aus, da ist Platz genug und da erwartet der Nutzer auch eine.
Werde ich ausprobieren!


Zitat:
[*]Es ist überhaupt zu viel auf der Seite, hat man den Eindruck. Alles drängt sich. Ein wenig Whitespace könnte nicht schaden. Dazu packe Absätze in das <p> Element. Dafür ist es nämlich semantisch vorgesehen. Gib p dann testweise margin: 1em und du wirst sehen was ich meine. Die Feinsteuerung kann später erfolgen.
Auch kalibrierungssache - folgt dann wenn das restliche Design steht.


Zitat:
[*]Der Ticker nervt. Ticker nerven immer, finde ich, allenfalls für Börsenkurse tauglich.
Dieser Ticket wird eventuell durch eine neue Neuigkeitenstruktur (Aufteilung in Artikelbereich mit langen Texten und "Kurznachrichten" ).

Hier könnte man schauen ob man hier platz lässt oder einen anderen Inhalt einfügt.


Zitat:
[*] Verdana ist keine unbedingt sichere Webschrift mehr. Sie läuft auch sehr breit. Nimm eine der neuen Windowsschriften wie Calibri oder Corbel und setze als Fallback Arial ein, für Mac User Arial und Helvetica z.B.
font-family: Calibri, Corbel, "Arial Narrow", Arial, Helvetica, Haettenschwiler, sans-serif;
Ebenfalls eine Feinabstimmung die nicht viel Aufwand macht, da schaue ich später mal welche Schriftarten ich persönlich am lesbarsten finde und welche ein breites Sprektrum an Endanwendern bietet, fall-Back natürlich eingebaut.

Aufjedenfall danke ich dir schonmal für deine Anmerkungen und probiere heute und morgen noch ein wenig weiter rum.

PS: Nicht wundern, habe einige Punkte bereits jetzt angepasst und geschaut.

mfg,
tliffcom

Geändert von tliffcom (01.03.2008 um 00:34 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 01.03.2008, 10:56
Benutzer
neuer user
 
Registriert seit: 17.05.2007
Ort: Regensburg
Beiträge: 65
planet4 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von tliffcom Beitrag anzeigen
z.B. das die Suche-Leiste mitsamt Breadcumb-Anzeige im IE noch nicht korrekt angezeigt wird.
Ja, im IE6 hängt sie irgendwo rechts außerhalb des Ganzen.

Was mir aber gerade aufgefallen ist:
man kann unnötig weit runterscrollen, ca. doppelt so weit wie die Seite eigentlich hoch ist. (Firefox 2.) Das liegt wohl an
#complete_content { height: 123em; }

planet4.
Mit Zitat antworten
  #5 (permalink)  
Alt 01.03.2008, 11:43
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Ich habe nur ganz flüchtig über den Thread geschaut, aber dennoch 2 wichtige Tipps:

Zitat:
Zitat von tliffcom Beitrag anzeigen
entweder viel zu klein oder viel zu groß (IE halt^^)
http://xhtmlforum.de/43469-height-od...tml#post318095

Außerdem sendest Du keine Zeichencodierung, das musst Du dringend ändern - siehe http://xhtmlforum.de/49712-sonderzei...tml#post365449
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Bester Kompromiss: Skalierbares Design, Background-Images und feine Non-CSS-Variante ohneworte Barrierefreiheit 12 24.09.2008 10:54


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:27 Uhr.