Website Kontrolle/Tipps

[hokage555]

Hi Leute,

Seit langem gestallte und code ich mal wieder eine Website. Da das ganze Teil eines Wettbewerbes ist, kann man auch Geld gewinnen und letztes Jahr haben meine Gruppe und ich schon abgeräumt. Diesmal wird die Konkurenz allerdings größer Sein und somit möchte ich auch meine Seite professioneller gestallten.
Der Inhalt ist bisher noch nicht vorhanden, da der noch nicht vorliegt und die Texte erst noch geschrieben werden müssen. Somit ist der ganze Content Bereich auch noch nicht gecodet worden.

Ich würde euch bitten, die Seite erstmal nur nach Code (Validität, Semantik & Barrierefreiheit [letzteres ist allerdings nicht wirklich vorhanden. Weiß ich selber]) und Design, was bis dato nur aus einem Header und einem Menü besteht, zu bewerten.
Beim Footer mit den trennlinien bin ich mir etwas unsicher, da es ja eher Design und kein Inhalt ist. Wenn ich das mit border:right; über css mache, schaffe ich es aber nicht, das so zentriert darzustellenund der letzte Punkt hat dann auch ein border:right; was ich ja nicht möchte.

Der Code dürfte ansonsten eigentlich sauber sein, aber meine Grafikkünste sind dann doch eher bescheiden^^ Bei dem Menü habe ich etwas von Apple abgeguckt und für meine Headergrafik habe ich auch recht lange gebraucht -_-'

Vielleicht findet sich ja ein Grafikdesigner hier, der mir speziell zum Header ein paar Tipps geben könnte, denn wirklich überragend ist der nicht^^
Als Hauptfarben der Website wollteich Blau-Grau Töne nutzen und für den Kontrast Rot-Orange. Sieht man ja schon am Header.

Also danke euch schonmal für das bewerten und die Tipps ;-)

Seite:
Startseite

grüße hokage

PS: Ein frohes neues Jahr an alle ;-)

*edit: Farben im Header nochmal geändert. Habe diese jetzt in zwei Versionen vorliegen: Rot-Orange & Grün-Violett

Im Augenblick gefällt mir letztere besser...

 

[Loon3y]

Morgen.

fangen wir mit der HTML-Seite an.

<h1 id="header"> <img src="http://www.html.de/bild_dateien/header.jpg" width="1000px" height="150px" alt="Mut der Naturwissenschaft" /> </h1>

-> px-Angaben, bzw größenangaben kommen ins CSS. die elemente width="" und height="" sind HTML-Angaben, da kommen keine Einheiten hin. Diese sind Standardmäßig px und reservieren nur Platz für das Bild vor.

-> In deiner Hauptnavigation könntest du noch bei den <a> das "title"-Tag hinzufügen.

-> Ebenso beim Footer.

-> Bei deiner Suche fehlt das <label>-Tag.

-> Im footer sind so dinge wie <li> | </li> ganz unsauber. Wieso listest du pipes mit auf? Benutze die CSS-Eigenschaft border.

-> Ansonsten fällt mir noch auf, dass beim vergrößern der Schrift der Text aus den Boxen wandert (Navigation)

-> Du hast keine line-height definiert und wenn doch hab ichs übersehen und sie ist viel zu niedrig. Würde da mehr text stehen wäre das sehr unleserlich.


Also noch einiges an Arbeit. Leider kann man hier recht wenig bewerten, da der Inhalt fehlt. Allerdings ist für den wenigen Inhalt schon ewtas viele Fehler auffindbar.


Gruß
Loon3y

 

[hokage555]

Danke, dass du dr die Mühe gemacht hast ;-)
Auf deinen Post habe ich gehofft, da ich weiß, dass du dich äußerst gut auskennst.
Gut fangen wir mal an:

Morgen.

fangen wir mit der HTML-Seite an.

<h1 id="header"> <img src="http://www.html.de/bild_dateien/header.jpg" width="1000px" height="150px" alt="Mut der Naturwissenschaft" /> </h1>

-> px-Angaben, bzw größenangaben kommen ins CSS. die elemente width="" und height="" sind HTML-Angaben, da kommen keine Einheiten hin. Diese sind Standardmäßig px und reservieren nur Platz für das Bild vor.

Die Pixelangaben sind auch schon im CSS vorhanden. Du meinst also ich soll in die width und height Tags nur die Zahlen, also "1000" und "150" reinschreiben. Geht in Ordnung ;-)

-> In deiner Hauptnavigation könntest du noch bei den <a> das "title"-Tag hinzufügen.

-> Ebenso beim Footer.

Das höre ich um ehrlich zu sein zum ersten mal. Was soll in diesen Tag denn rein? Soweit ich weiß haben meine Menüpunkte keinen Titel, oder meinst du den Menüpunkt selber? Soll ich es also so machen? Wenn ja, welchen Effekt hat das ganze?

<a href="wissenschaft.php" title="Wissenschaft">Wissenschaft</a>

-> Bei deiner Suche fehlt das <label>-Tag.

Ich sehe drchaus den Sinn des Label Tags und verwende diesen auch in z.B. Kontaktformularen. In dieser Suche ist er meiner Meinung nach allerdings nicht zu gebrauchen. Dafür habe ich dem Textfeld ja den Wert "Suche" gegebn, da man so weiß, was es ist. Einen Extratext Suche, der dann im Label-Tag steht und links von dem Inputfeld steht passt erstens nicht zum Design und ist in meinen Augen unnötig (siehe oben).
Auch wenn das semantisch vieleicht nicht 100%ig ist, muss ich diesen Kompromiss eingehen. Denn Semantik ist das eine, aber Logik das andere, und durch den value="Suche" zeichne ich meiner Meinung nach das Suchfeld schon in gewissen Maßen aus.

-> Im footer sind so dinge wie <li> | </li> ganz unsauber. Wieso listest du pipes mit auf? Benutze die CSS-Eigenschaft border.

Dass das komplett falsch ist weiß ich ;-) Werde mir dann die Mühe machen, das ganze mit border:right; zu realisieren... Warum Mühe? Ganz einfach, der letzte li Tag darf keinen Border haben, d.h. ich muss mit ids arbeiten --> Mein CSS wird unübersichtlicher. Nehme ich aber wie gesagt in Kauf ;-)

-> Ansonsten fällt mir noch auf, dass beim vergrößern der Schrift der Text aus den Boxen wandert (Navigation)

Der Punkt ist, dass ich Hintergrundbilder bei meinen Button habe und diesen somit feste Größen gegeben habe, die natürlich nicht skalierbar sind. Das ganze mit Vektorgrafiken ginge natürlich, ich wüsste nur nicht wie.
Würde es denn helfen den Text in em an Stelle von Pixeln anzugeben? Auch nicht, oder?

-> Du hast keine line-height definiert und wenn doch hab ichs übersehen und sie ist viel zu niedrig. Würde da mehr text stehen wäre das sehr unleserlich.

#navi li{
    float:left;
    display:block;
    line-height:38px;
}

Keine Ahnung worauf du line-height beziehst. Im Menü habe ich es und den Content Bereich habe ich bisher weder mit Inhalt gefüllt, noch mit CSS formatiert. Denn wie soll man was formatieren, was noch nicht vorhanden ist?

Also noch einiges an Arbeit. Leider kann man hier recht wenig bewerten, da der Inhalt fehlt. Allerdings ist für den wenigen Inhalt schon ewtas viele Fehler auffindbar.

Naja das kann ich so nicht ganz nachvollziehen, aber gut ;-)
Dass ich noch viel Arbeit vor mit habe, ist mir bewusst xD
Dass noch kein Inhalt enthalten ist, ist mir auch bewusst^^

Dass da allerdings schon so viele vermeidbare und schwerwiegende Fehler drin sind, ist mir nicht bewusst ;-)

Und die Korrektur der Fehler, (title Attribut und border-right:XY; ist schnell gemacht. Bei den anderen Fehlern habe ich ja Nachfragen gestellt

Ich respektiere aber natürlich deine Meinung haha


grüße hokage

*Edit:

title-Attribut: - gefixt und Sinn erkannt haha
width & height Attribut: - gefixt
Trennlinien: - gefixt

Was bleibt sind:

label --> Bitte um Rücksprache
rausrutschende Schrift --> Bitte um Rücksprache
line-height --> verstehe ich nicht & Bitte um Rücksprache

 

[Loon3y]

Danke, dass du dr die Mühe gemacht hast ;-)
Auf deinen Post habe ich gehofft, da ich weiß, dass du dich äußerst gut auskennst.

Morgen und Dankeschön.

label --> Bitte um Rücksprache
rausrutschende Schrift --> Bitte um Rücksprache
line-height --> verstehe ich nicht & Bitte um Rücksprache

Bzgl. des <label> verweise ich dich mla auf diese Seite hier:
Webkrauts » Formularfelder richtig beschriften

Damit sollte alles erklärt sein. :-)

-> "rausrutschende Schrift": beim text-zoom wandert in der Navigation der Text aus der Box. Schalte mal Text-Zoom an oder nimm einen älteren IE, dann siehst du was ich meine. :-)

-> "line-height": Der Abstand von deiner Überschrift und den Textabsatz (Content-Bereich) ist recht geringt. Darauß resultierend hatte ich mir gedacht, dass du eine niedrige oder garkeine line-height definiert hast. Würde dort mehr Text stehen sähe das nicht gut aus und ist schlecht lesbar.


Gruß
Loon3y

 

[hokage555]

Bzgl. des <label> verweise ich dich mla auf diese Seite hier:
Webkrauts » Formularfelder richtig beschriften

Damit sollte alles erklärt sein. :-)

Naja das war mir ja schon bewusst und im Normalfall verwende ich bei all meinen Formularen den label-Tag. Hier passt das halt einfach nur überhaupt nicht in das Design^^ Ich weiß, dass das jetzt keine gute Ausrede ist, aber hättest du denn eine Idee, wo du das Design ja jetzt siehst, da den label-Tag gut einzubringen? So das das ganze immerhin noch etwas ansehnlich ist ;-)

-> "rausrutschende Schrift": beim text-zoom wandert in der Navigation der Text aus der Box. Schalte mal Text-Zoom an oder nimm einen älteren IE, dann siehst du was ich meine. :-)

Ok die Einstellung Text-Zoom finde ich in meinem Firefox 3.5 nicht^^ Und da ich an einem MacBook arbeite, habe ich auch auf die schnelle keinen IE5 parat^^
Wobei ich da ganz sarkastisch sagen muss "Wer den Browser noch benutzt hat auch nix anderes verdient :lol:"
Ich glaube dir aber, dass das Problem exestiert, nur kann ich es selber gerade nicht nachstellen...

Aber Spaß beiseite. Wie löse ich denn das Problem? Sehe ich das richtig, dass ich dafür die Breiten und höhen Angaben der umgebenen <a> und <li> in "em" angeben muss?
Kann ich denn dann noch Hintergrundgrafiken verwenden? Eigentlich ja nicht, da man diese ja nicht skalieren kann...
Wie funktioniert das denn, wenn ich Vektorgrafiken verwende? Diese zu erstellen ist mit Illustrator ja kein Problem. Welches Dateiformat wird benötigt und wie binde ich die ein?

-> "line-height": Der Abstand von deiner Überschrift und den Textabsatz (Content-Bereich) ist recht geringt. Darauß resultierend hatte ich mir gedacht, dass du eine niedrige oder garkeine line-height definiert hast. Würde dort mehr Text stehen sähe das nicht gut aus und ist schlecht lesbar.

Ich habe den bisherigen Inhalt <h2> und <p> noch gar nicht formatiert ;-) Auch nicht mit line-height ;-)
Das kommt halt alles noch, wenn auch wirklich Inhalt vorhanden ist.
Und dieser wird kommen, keine Sorge haha

grüße hokage

 

[Loon3y]

Naja das war mir ja schon bewusst und im Normalfall verwende ich bei all meinen Formularen den label-Tag. Hier passt das halt einfach nur überhaupt nicht in das Design^^ Ich weiß, dass das jetzt keine gute Ausrede ist, aber hättest du denn eine Idee, wo du das Design ja jetzt siehst, da den label-Tag gut einzubringen? So das das ganze immerhin noch etwas ansehnlich ist ;-)

Es gibt ja dann immernoch Möglichkeiten das Ganze "position:absolute" und "left:-999px;" zu setzen. Dann verschwindet es aus dem Sichtbereich des Fensters, ist aber dennoch für Nutzer mit Vorlesebrowser vorhanden.
Allerdings frage ich mich, wieso man nicht "suche:" oder so dafür schreiben sollte? Wäre das so schlimm?

Ok die Einstellung Text-Zoom finde ich in meinem Firefox 3.5 nicht^^ Und da ich an einem MacBook arbeite, habe ich auch auf die schnelle keinen IE5 parat^^

Im FF geht das folgendermaßen: ansicht -> zoom -> nur text zoomen

Es geht ja eigentlich nicht um den Text-Zoom an sich, bzw um die Funktion. Es geht darum wenn jemand z.B. seine Standardschriftgröße auf 18 oder größer stellt.

Es ist immer ratsam nicht mit festen px-Angaben zu arbeiten. "em" ist hier wohl das Optimalste.

Für den Hintergrund deiner Navigation, da könntest du die Grafik wiederholen. Oder du nimmst Grafiken als Buttons. Diese kannst du dann via "em" zum zoomen "zwingen". Alternativ ginge auch Vektorgrafiken. Aber da gibt es Browserübergreifende Probleme. (IE) Vektorgrafiken werden im XML-Format abgespeichert und via <object> eingebunden ins HTML.


Gruß
Loon3y

 

[hokage555]

Danke dir nocheinmal für deinen Beitrag

Normalerweise halte ich ja nichts von solchen Hacks, wie position:absolute; left:-999px; oder ähnlichem...
Aber ich werde mal drüber nachdenken und das ganze ausprobieren.
Im prinzip habe ich ja auch nichts gegen das Wort "Suche:", aber es passt halt einfach nicht mehr in den Button...
Kann man einem <li> denn auch das title Attribut geben? Wenn ja, dann könnte ich da ja auch Suche eintragen...
Oder ich ich füge es direkt in den <form> Tag mit ein.
Naja ich probiere das alles mal aus ;-)

Zur Menüleiste und den Grafiken...
Dann ist es im Grunde genau so, wie ich es erwartet habe...
Das Bild wiederholen möchte ich eher ungerne, da das dann beim zoomen auch scheiße aussieht. Den kompletten Button als Bild machen ginge natürlich, aber dann kann ja kein Nutzer, der Grafiken ausgeschaltet hat, meine Menüleiste sehen. Das wäre im Grunde ja genau so schlimm und ir ersätzen ein Problem durch ein anderes...
Vektorgrafiken wären halt perfekt, aber da macht mir die Browserkompatiblität einen Strich durch die Rechnung. Denn wenn mangels SVG-Unterstützung der IE dann auch keine Menüleiste anzeigt, wäre das nicht besonders toll.

Zusammenfassend sehe ich da also irgendwie nur die Lösung ganz auf Hintergrundgrafiken zu verzichten, oder wie siehst du das?

grüße hokage

 

[hokage555]

Vom Code jetzt einmal abgesehen...
Auch an alle anderen gerichtet ;-)

Was sagt ihr zu dem Design, Aufbau, Farbwahl, etc. der Seite?
Habt ihr Verbesserungen für die Headergrafik?
Wie findet ihr die Navigationsleiste?

Danke schonmal für ein Feedback

grüße

 

[Loon3y]

Moinsen :-)

Das Label fehlt immernoch und der Text wandert auch aus Box beim Text-Zoom (Navi).

Wenn du die Navigationspunkte als Grafiken nimsmt, hast du ja immernoch den "alt"-Text, welcher dir angezeigt wird bei abgeschalteten Bildern.

Ein kleiner Trick wäre da (davon ausgehend das 1em = 16px):

ul#nav li img { width:10em; height:10em; background: #fff url(deinbg.jpg) repeat-x; }

<ul id="nav">
  <li><a href="#" title=""><img src="button1.jpg" width="160" height="160" alt="Button 1" /></a></li>
 ...
</ul>

Der Effekt dabei ist. Du hast deinen Button der zoomt und bei abgeschalteten Grafiken hast du dann den jetzen BG + den alt-Text vom img.

Was mir auch noch aufgefallen ist, wieso haben deine Listenpunkte bei der Navigation Klassen? Arbeite doch über den Selektor

ul#nav li hat hier den gleichen Effekt wie ul#nav li.navlink.


Gruß
Loon3y

 

[hokage555]

Also mit label und dem Navi habe ich mich bis dato noch nicht beschäftigt ;-)
Hole ich aber nach, wahrscheinlich morgen.

Zu deinem letzten Hinweis:

Du hast im Grunde recht, da ich a nur durch .navilink tausche.
Eig. überflüssig, aber mich stört es soweit nicht.

Hast du noch Vorschläge/Verbesserungen zum Design?

grüße

 

[Wasserflasche]

Der Besucherzähler, zählt die ganze Zeit mit. Auch wenn ich einfach nur zwischen den einzelnen Links/Unterseiten herswitche. Soll das so?

 

[hokage555]

Nein das soll nicht so ;-)

Ich habe bloß noch nicht die Cookies gesetzt ;-)
Der php-code ist fertig, aber ohne das Setzen der Cookies läuft es halt nicht^^

Das ganze werden dann Session Cookies sein, so dass du immer wieder deinen browser neu starten musst, damit der Zähler einen Besuch hinzufügt.

Ansonsten wird halt noch ein Gästebuch, ein Kontaktfomular und eine Suchfunktion eingebaut.

Aber das ganze kommt ja noch

Was hälst du/haltet ihr von dem Design der Headergrafik und der Navigation?

grüße

 

[Silar]

An sich eine nette Site. Ein paar Tipps:

Headergrafik ohne Schrift designen, und die Schrift mit HTML seperat hinzufügen: "Mut der Wissenschaft": <h1> und <h2> für "Menschen verändern die Welt". <title> vielleicht ändern, sodass z.B steht: "Mut der Wissenschaft - Startseite" <- Sieht besser aus, und man kommt schneller zurecht, wenn man mehrere Tabs offen hat. Navigationsleiste gefällt mir. :) Vielleicht etwas schmaler, ist sonst schön anzusehen. Favicon wäre noch toll. :)