• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Design und Code bewerten (EDITOR)

_Thor_

Aktives Mitglied
So, dann will ich euch auch mal was vorsetzen.

Natürlich alles selbst geschrieben, beim Layout habe ich mich hiervon =| css + design |= Home inspirieren lassen, allerdings nur die Farbcodes übernommen. Die Grafiken sind nicht von mir.

Die Grundstruktur der Seite wird per PHP generiert, dafür gibt es eigene Klassen, die das übernehmen. (Natürlich auch selbst geschrieben)

Tobt euch aus. (Code, Layout, Usability...)

AmI-MoSES - Project overview

Qualidator - Testresultate für http://ami-moses.eu
 
Zuletzt bearbeitet:
Werbung:
Ich muss schon sagen, der qualidator spricht für sich. Eine echt klasse und vorallem barrierefreie Seite.

Da ich aber wenig Zeit momentan habe, bewerte ich nur mal kurz:

Vom html-part her habe ich auf der Startseite nun keine Fehler enddeckt, die Seite verzieht sich auch nicht zu sehr beim vergrößern des Browserfensters. Find ich klasse. Man kann auch, finde ich, alles gut und deutlich lesen, dennoch wirkt die Farbgebung etwas unspektakulär und fast schon eintönig...aber das ist wie gesagt, Ansichtssache.

Mich würde es schwer interessieren, wie du die über 90% geschafft hast?!

Das einzigste was ich vllt bemängeln könnte ist:

- Die Schriftfarbe ist für meinen Tick ein kleines bisschen zu hell, einen Farbton dunkler wäre es für mich schöner.
- Die Brotkrümelnavigation (rechts neben den Flaggen) zeigt nur max. 2 Ebenen, nicht mehr, nicht weniger und wirkt etwas versteckt, schade.

Ansonsten, 3 Daumen hoch, gefällt mir sehr und ein weiterer kleiner Meilenstein im Web.


Gruß
Loon3y


Edit: öööööh *gröhl* 800 ;D
 
Zuletzt bearbeitet:
Ich muss schon sagen, der qualidator spricht für sich. Eine echt klasse und vorallem barrierefreie Seite.

Das war auch so beabsichtigt.

Vom html-part her habe ich auf der Startseite nun keine Fehler enddeckt, die Seite verzieht sich auch nicht zu sehr beim vergrößern des Browserfensters. Find ich klasse. Man kann auch, finde ich, alles gut und deutlich lesen, dennoch wirkt die Farbgebung etwas unspektakulär und fast schon eintönig...aber das ist wie gesagt, Ansichtssache.

Ja, das ist Ansichtssache, es sollte halt nicht zu bunt werden. Trotzdem denke ich noch über eine andere Farbe für die Überschriften nach, bin mir nicht so sicher, ob das blau da so gut passt.

Mich würde es schwer interessieren, wie du die über 90% geschafft hast?!

Das war recht einfach, die Hinweise stehen ja alle da, wenn man die Seite testen lässt und dann muss man die eben nach und nach abarbeiten.
In die Top 100 zu kommen ist allerdings schwieriger, da ich für die letzten Hinweise die kostenpflichtige Premium Mitgliedschaft bräuchte.

Das einzigste was ich vllt bemängeln könnte ist:

- Die Schriftfarbe ist für meinen Tick ein kleines bisschen zu hell, einen Farbton dunkler wäre es für mich schöner.

Ja, das ist eine Überlegung wert.

- Die Brotkrümelnavigation (rechts neben den Flaggen) zeigt nur max. 2 Ebenen, nicht mehr, nicht weniger und wirkt etwas versteckt, schade.

Es gibt auf dieser Seite auch keine großartigen Unterseiten, die angezeigt werden könnten, allerdings ist die Klasse so geschrieben, dass sie dieses ohne Anpassung leisten würde, wenn es Unterseiten geben würde.
Die Position oder Reihenfolge lässt sich ja noch ändern.

Ansonsten, 3 Daumen hoch, gefällt mir sehr und ein weiterer kleiner Meilenstein im Web.

icon14.gif
icon14.gif
icon14.gif
 
Zuletzt bearbeitet:
Werbung:
dennoch wirkt die Farbgebung etwas unspektakulär und fast schon eintönig...aber das ist wie gesagt, Ansichtssache.
Finde die Farbgebung seht gut gelungen. Wirkt sehr seriös der Internetauftritt!
Mich würde es schwer interessieren, wie du die über 90% geschafft hast?!
Lass deine Seite überprüfen und guck dir die Tips an.
Ich habe absolut nichts zu verbessern bei bei dieser Seite. Die zwei Warnungen werden auch noch verschwinden ;)

Viele Grüße,
Marlin

€dit: Wieso wendet keine deiner Seiten auf ".html"? Habe mal gelesen, dass es fürs Google-Ranking besser ist?!
 
€dit: Wieso wendet keine deiner Seiten auf ".html"? Habe mal gelesen, dass es fürs Google-Ranking besser ist?!

Weil es .php Dateien sind ;) und ich die URL mit Mod_Rewrite verändert habe, sonst hätte ich z.B. auf der Startseite Parameter für die Sprache mit dran und das mag ich nicht sonderlich.

Wie Google das bewertet, kann ich nicht beurteilen.
 
Moinsen,

bzgl der Farbgebung ist es 100% ansichtssache...bei jedem wirken die Farben anders und zu meiner verteidigung muss ich sagen, dass ich Farbenblind bin ^^ also seh ich so oder so die Farben anders....

Ansonsten...weiter so ! Es muss mehr solche Websites im www geben...

Gruß
Loon3y


P.S.: Wie bekommt man die Meldung weg, dass die erste Seite wie eine "introseite" wirkt beim qualidator obwohl es keine ist? ^^
 
Werbung:
Wie bekommt man die Meldung weg, dass die erste Seite wie eine "introseite" wirkt beim qualidator obwohl es keine ist? ^^

Das kann ich dir leider nicht beantworten, weil ich nicht weiß, nach welchen Kriterien der Qualidator eine Seite als Introseite bewertet.

Vermutung meinerseits, ohne es getestet zu haben, wäre, wenn auf der Seite wenig Text und kein Menü vorhanden ist, vielleicht noch eine große Grafik und keine <h1>. Das fällt mir als erstes ein, wenn ich an eine Introseite denke.

Ich weiß ja nicht, wie deine Seite aussieht. Poste mal den Link oder schick ihn mir per PN, wenn du willst, dann schaue ich mir das mal an.
 
Das kann ich dir leider nicht beantworten, weil ich nicht weiß, nach welchen Kriterien der Qualidator eine Seite als Introseite bewertet.

Vermutung meinerseits, ohne es getestet zu haben, wäre, wenn auf der Seite wenig Text und kein Menü vorhanden ist, vielleicht noch eine große Grafik und keine <h1>. Das fällt mir als erstes ein, wenn ich an eine Introseite denke.

Alles vorhanden, <h1>, navi, content, semantik...hm..wüsste nicht was da das kriterium ist...

-> http://www.html.de/websitecheck/25363-burghof-nun-online.html
 
Das kann ich dir leider auch nicht sagen, hab gerade mal etwas getestet, aber der Qualidator behält die Seite wohl eine Zeit lang im Cache, so dass die Änderungen nicht erkannt werden.

Um das herauszufinden bleibt wohl nur, die Seite in einer Testumgebung langsam neu zu schreiben und jeden Schritt zu testen. Erstmal ohne Grafiken, nur Text. Dann muss es ja irgendwann dazu führen, dass die Seite als Introseite erkannt wird.
 
Werbung:
also zunächst ein riesen lob ;-)

wie es der qualidator schon zeit, hast du da echt eine super seite gezaubert.

allerdings habe ich 2 kritikpnkte.
der erste ist wohl eher ansichtssache :p

aber die farbwahl gefällt mir ganz und gar nicht. das design an sich finde ich nicht schlecht. schön schlicht gehalten, ohne viele grafiken etc. aber mir gefallen halt die farbtöne nicht^^
ich kann dir nicht sagen warum, aber es ist einfach so :D ich würde evtl. dieses etwas bräunliche in etwas gräulicheres umändern. natürlich auch hellgrau ;-)

das zweite wäre, dass ich die brotkrumennavigation anders positionieren würde. auf der home seite hast du rechts in dieser leiste ja schon die bunten fahnen der sprachenwahl. da wirkt diese navi nicht richtig. setze sie doch einfach an den rechten rand deiner leiste ;-)

fazit: super seite mit für meinen geschmack falscher farbenwahl :p

grüße hokage
 
also zunächst ein riesen lob ;-)
Vielen Dank.

allerdings habe ich 2 kritikpnkte.
Die wollte ich ja auch hören.

die farbwahl gefällt mir ganz und gar nicht. das design an sich finde ich nicht schlecht. schön schlicht gehalten, ohne viele grafiken etc. aber mir gefallen halt die farbtöne nicht^^
ich kann dir nicht sagen warum, aber es ist einfach so :D ich würde evtl. dieses etwas bräunliche in etwas gräulicheres umändern. natürlich auch hellgrau ;-)
Wie schon gesagt, bei den Farbtönen habe ich mich von einer anderen Seite inspirieren lassen, da ich nicht der große Designer bin. Aber ich werde das Grau mal testen.

das zweite wäre, dass ich die brotkrumennavigation anders positionieren würde. auf der home seite hast du rechts in dieser leiste ja schon die bunten fahnen der sprachenwahl. da wirkt diese navi nicht richtig. setze sie doch einfach an den rechten rand deiner leiste ;-)
Also die Flaggen nach rechts und davor die Navigation?
Ja, das wäre machbar, da jedoch nur die Startseite mehrsprachig ist und somit auf den anderen Seiten die Flaggen fehlen, würde die Navigation ihren Platz varändern, was man aus Gründen der Usability eigentlich vermeiden sollte.
 
Weil es .php Dateien sind ;) und ich die URL mit Mod_Rewrite verändert habe, sonst hätte ich z.B. auf der Startseite Parameter für die Sprache mit dran und das mag ich nicht sonderlich.

Wie Google das bewertet, kann ich nicht beurteilen.

Das es php Dateien sind war mir schon klar ;)

google bewertung html endung - Google-Suche

1. Treffer:
Es gibt SEO-Theorien, wonach Google Seiten mit .html Endung bevorzugt crawlt [...]
Ist wohl nur eine Theorie ;)

Viele Grüße,
marlin
 
Werbung:
Also die Flaggen nach rechts und davor die Navigation?
Ja, das wäre machbar, da jedoch nur die Startseite mehrsprachig ist und somit auf den anderen Seiten die Flaggen fehlen, würde die Navigation ihren Platz varändern, was man aus Gründen der Usability eigentlich vermeiden sollte.

ich weiß nicht, ob du mich richtig verstanden hast :p

die navi soll nicht vor die fahnen sie soll mit vll. float:left; an den linken rand der leiste. die fahnen können dann weiterhin evtl. mit float:right; am rechten rand der leiste bleiben ;-)
fänd ich besser, weil so die navi viel besser sichtbar ist, und die fahnen auf der homepage immernoch gut zur geltung kommen.

grüße hokage
 
Ich finde manche Hinweise und Tipps, bei denen man beim Qualidator eine höhere Prozentzahl erreicht, nicht sinnvoll. Deswegen ist für mich eine dort erreichte super hohe Wertung eher uninteressant.

Ansonsten:

- Barrierefreiheit und Übersicht gefällt mir.

- Die Farbwahl ist zwar etwas eintönig, ich finde sie jedoch trotzdem ansprechend und passend.


Zum Code:

- Die media-Bezeichnungen bei den Stylesheets gehören in das Stylesheet.

- Sieben Stylesheets sind sechs HTTP-Requests zu viel.

- Du wiederholst im keyword-Metatag lediglich den title und die description. Sinn? Nur um eine höhere Wertung beim Qualidator zu erreichen?

- Deine Dateien sind nicht gzipped. Du könntest die Dateiengröße damit um bis zu 70 % reduzieren.

- Mit smush.it könntest du die Größe deiner Bilder um mehr als 40 % verringern.

- Wieso benutzt du accesskeys? Die sind zwar gut gemeint, machen eine Seite aber nicht zwangsläufig barrierefreier (siehe Verabschiedung der Accesskeys « blog.dnaber.de).
 
Da kann man nicht viel sagen :-)

Mir ist noch aufgefallen, dass der Qualidator zwar sagt, Du würdest besuchte Links besonders kennzeichnen, davon seh ich im Menü aber nichts.

Ich ziehe meinen Hut vor Dir, der Du beim Qualidator AA bekommst.
 
Werbung:
Hi Thor,

ich will auch noch ein paar Hinweise abgeben.
Zu der Sache mit der Introseite:
Deine Eingangs URL ist ".../eu/index". Jede weitere Seite ist dann ohne den "Ländercode". Das könnte eine Möglichkeit sein, wieso der Qualidator denkt, dass es sich um ein Intro handelt.

Es wäre auch IMHO sinnvoller auf das EU zu verzichten und standardmäßig "/de/" zu verwenden, dann aber bei allen Seiten. Bei entsprechender Sprachwahl dann halt "/en/" oder "/es/".

Wo wir grad dabei sind. Die Spachauswahl würde ich nicht mit Flaggen kennzeichnen. Das kann zu Missverständnissen führen. Außerdem fehlt dort der "hover" und "focus" Effekt.

Die Links im Menü könnten noch einen deutlichere Fokuskennzeichnung bekommen, die wirkt bei mir sehr blass. Unterstrichener Text z.B.

In der rechten Spalte finde ich den Fokus gar nicht, da fehlt die Hervorhebung noch ganz.

Wenn du noch mehr Semantik rein bringen möchtest, setze dich mal mit wai-aria auseinander: 7 Gründe wai-aria Landmarks sofort einzusetzen

Ein Sikplink, der die Navi und die Infospalte überspringt und gleich zum Inhalt führt, könnte sicher auch nicht schaden.
 
Der Server unter www.7-gruende-wai-aria-landmarks-sofort-einzusetzen.com konnte nicht gefunden werden.
 
Werbung:
Die media-Bezeichnungen bei den Stylesheets gehören in das Stylesheet.
Laut W3C sind beide Methoden erlaubt Media types, aber wenn du dazu noch nähere Informationen hast, warum sie in das CSS sollten, immer her damit.

Sieben Stylesheets sind sechs HTTP-Requests zu viel.
Hab ich anfangs auch gedacht, aber so hat man eine bessere Kontrolle über die Styles. Mit der Zeit wirst du merken, dass es so sinnvoller ist.

Du wiederholst im keyword-Metatag lediglich den title und die description. Sinn? Nur um eine höhere Wertung beim Qualidator zu erreichen?
Momentan ja, die Metaangaben werden noch überarbeitet.

Deine Dateien sind nicht gzipped. Du könntest die Dateiengröße damit um bis zu 70 % reduzieren.
Die liegen alle im einstelligen KB Bereich, da ist das zippen wohl nicht unbedingt nötig, schaue ich mir aber gerne an.

Mit smush.it könntest du die Größe deiner Bilder um mehr als 40 % verringern.
Vermutlich auf Kosten der Qualität, oder?
Die Bilder wurden schon angepasst und liegen auch alle unter 10 KB.

Wieso benutzt du accesskeys? Die sind zwar gut gemeint, machen eine Seite aber nicht zwangsläufig barrierefreier (siehe Verabschiedung der Accesskeys « blog.dnaber.de).
Sie schaden aber auch nicht ;)

Da kann man nicht viel sagen :-)
Wie schade ;)

Mir ist noch aufgefallen, dass der Qualidator zwar sagt, Du würdest besuchte Links besonders kennzeichnen, davon seh ich im Menü aber nichts.
Momentan sind die auch noch gleich Formatiert, da ich mir noch nicht sicher bin, wie ich die besuchten Links kennzeichnen soll, dass es noch in das Layout passt.
Ideen?

Ich ziehe meinen Hut vor Dir, der Du beim Qualidator AA bekommst.
Fast wie ein Ritterschlag ;)

Zu der Sache mit der Introseite:
Deine Eingangs URL ist ".../eu/index". Jede weitere Seite ist dann ohne den "Ländercode". Das könnte eine Möglichkeit sein, wieso der Qualidator denkt, dass es sich um ein Intro handelt.
Da hast du was falsch verstanden, nicht meine Seite wird als Introseite erkannt, sondern die von Loon3y.

Es wäre auch IMHO sinnvoller auf das EU zu verzichten und standardmäßig "/de/" zu verwenden, dann aber bei allen Seiten. Bei entsprechender Sprachwahl dann halt "/en/" oder "/es/".
Du meinst die Top-Level-Domain? Da hab ich leider keinen Einfluss drauf.
Da (bis jetzt) nur die Startseite mehrsprachig ist, macht es meiner Meinung nach keinen Sinn, die anderen Seiten besonders zu kennzeichnen.

Wo wir grad dabei sind. Die Spachauswahl würde ich nicht mit Flaggen kennzeichnen. Das kann zu Missverständnissen führen.
Zu welchen denn?
Wenn jemand die Flagge seines Heimatlandes sieht, kann er davon ausgehen, den Text in seiner Muttersprache vorzufinden. Was für Missverständnisse meinst du? Wie würdest du es machen?

Außerdem fehlt dort der "hover" und "focus" Effekt.
Darüber kann man nachdenken.

Die Links im Menü könnten noch einen deutlichere Fokuskennzeichnung bekommen, die wirkt bei mir sehr blass. Unterstrichener Text z.B.
Sind jetzt erstmal kursiv, über weiteres denke ich noch nach.

In der rechten Spalte finde ich den Fokus gar nicht, da fehlt die Hervorhebung noch ganz.
Ist jetzt auch erstmal kursiv, wird aber noch deutlicher gemacht.

Wenn du noch mehr Semantik rein bringen möchtest, setze dich mal mit wai-aria auseinander: 7 Gründe wai-aria Landmarks sofort einzusetzen
Lese ich mir mal durch.

Ein Sikplink, der die Navi und die Infospalte überspringt und gleich zum Inhalt führt, könnte sicher auch nicht schaden.
Wird noch eingebaut.
 
Sie schaden aber auch nicht ;)
Accesskeys schaden sehr wohl, nämlich wenn sie Funktionen des Browsers überlagern. Bzw. bin ich mir grad nicht sicher, ob das überhaupt geht, oder ob die Browserfunktionen immer Deine Accesskeys überlagern. Beide Fälle sind Mist. Das eine schlimm, das andere ärgerlich und für den Nutzer unverständlich. Auch wenn sie der Qualidator haben will, bin ich auch davon abgekommen. In irgendeinem Browser ist immer irgendeiner Deiner Accesskeys schon belegt. So gesehen sind Accesskeys nämlich nicht unbedingt barrierefrei.
 
Zurück
Oben