Holli: Was haltet Ihr von dieser Seite [Bewertung erwünscht]

Hallo,
ich hab mal wieder was für einen Kunden gebastelt und bin gespannt auf eure Meinungen.

Die Seite ist noch nicht komplett fertig, Meta-Tags, Code-Optimierungen, Bilder, Texte, etc. fehlen noch.

Hier der Link:
http://www.assedo.de/kunden/klimach/1/index.html

Gruss
holli

  1. Hallo Holli,

    Die Seite ist noch nicht komplett fertig, Meta-Tags, Code-Optimierungen, Bilder, Texte, etc. fehlen noch.

    warum "quetschst" du den Content so? Auf meinem 19" sieht die Seite verloren aus.

    Das Grau für den Hintergrund ist mir persönlich zu stark.

    Die Schrift (ja, sie ist skalierbar), ist mir in der Grundeinstellung ein wenig zu klein geraten.

    Zeile 14 Zeichen 20 - Warnung: Tag <img>: Attribut "height" hat ungültigen Wert "52px"
    Zeile 14 Zeichen 20 - Warnung: Tag <img>: Attribut "width" hat ungültigen Wert "150px"
    Zeile 18 Zeichen 30 - Warnung: Tag <img>: Attribut "height" hat ungültigen Wert "90px"
    Zeile 18 Zeichen 30 - Warnung: Tag <img>: Attribut "width" hat ungültigen Wert "540px"
    Zeile 22 Zeichen 5 - Warnung: Tag <img>: Attribut "height" hat ungültigen Wert "408px"
    Zeile 22 Zeichen 5 - Warnung: Tag <img>: Attribut "width" hat ungültigen Wert "150px"
    Zeile 46 Zeichen 28 - Warnung: Tag <img>: Attribut "height" hat ungültigen Wert "120px"
    Zeile 46 Zeichen 28 - Warnung: Tag <img>: Attribut "width" hat ungültigen Wert "180px"

    0 Fehler / 8 Warnungen

    Mit freundlichen Grüßen,
    André

  2. Hallo

    ich hab mal wieder was für einen Kunden gebastelt und bin gespannt auf eure Meinungen.

    Hier der Link:
    http://www.assedo.de/kunden/klimach/1/index.html

    Ist die Schriftgröße dein Ernst? (http://www.auge8472.de/grafik/selfhtml_klimach_20060621.png)*

    * Bitte nicht von den Farben irritieren lassen, Farbtiefe verringert.

    Tschö, Auge

    --
    Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
    (Victor Hugo)
    Veranstaltungsdatenbank Vdb 0.1
    1. * Bitte nicht von den Farben irritieren lassen, Farbtiefe verringert.

      Welche Auflösung fährst du??
      Viele grüße TomIRL

      1. Hallo

        * Bitte nicht von den Farben irritieren lassen, Farbtiefe verringert.
        Welche Auflösung fährst du??

        1024px mal 768px bei 32 Bit Farbtiefe. Deshalb kann ich das Bild trotzdem mit wesentlich weniger Farben speichern (ja, wäre auch als JPG gegangen). Es ging mir nur um die Schriftgröße, so, wie sie mir angezeigt wurde. Da sind die Farben nachrangig.

        Der Frager sollte sich nur nicht ob der Kanten in den Bildern seiner Seite wundern.

        Tschö, Auge

        --
        Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
        (Victor Hugo)
        Veranstaltungsdatenbank Vdb 0.1
  3. Hi,

    Wenn du die Schrift Skalierbar machtst, sollte das auch für Blöcke gelten, sonst entstehen schnell überlappungen. Nimm für die Blöcke also lieber Größenangaben in em.

    Des weiteren stört mich der seperate schrollbreich, der bei der Schriftvergößerung entsteht.

    Einen schönen Mittwoch noch!

    --
    Enjoy the Web!
    Firefox 1.5
  4. Hallo holli,

    • ich schließe mich den anderen an ;-)
    • Du könntest bestimmt das eine oder andere Div Element weglassen
    • Die Navigation könntest Du als Liste definieren
    • Du könntest die eine oder andere Klasse im HTML weglassen, in dem Du z.B. über das Div-Element ansprichst: z.B. #footer p {...}
    • Zitate, Adresse in den dafür vorgesehen Tag packst
    • keine Inlinestyles benutzt
    • Dir sicher bist ob Du oder Dein Kunde auch die Bildrechte haben

    Das war es mal auf die Schnelle,

    Bernd

  5. Hallo,

    hmmm
      "If this does not look like a real outline, it is likely that the heading tags are not being used properly. (Headings should reflect the logical structure of the document; they should not be used simply to add emphasis, or to change the font size.)"

    btw skalieren tut da nüscht, soll heissen, ich kann weder die Schriftgrösse vernünftig verändern (weil sonst alles überlappt) und auch muss ich horizontal scrollen.

    in punkto Barrierearmut/-freiheit oder wie das Modewort gerade heisst, solltest du auch noch einmal im Archiv/Internet recherchieren.

    gruss

    --
    Swiss Army Chainsaw
    Terrorific!
    VI VI VI - the editor of the beast!
  6. Hallo,
    danke an alle für die Kommentare. Werde mir einige Dinge herausnehmen die ich verbessern werde.

    Warum ich die Seite auf den kleinen Bereich beschränke? Weil es mir und dem Kunden am besten so gefällt. Die Warnungen habe ich zur Kenntnis genommen.

    Bildrechte sind vorhanden!

    Gruss
    Holli

  7. Heißa, Holli,

    http://www.assedo.de/kunden/klimach/1/index.html

    Vom Design her einwandfrei, abgesehen von der Schriftgröße. Ich vermute mal, mit 0.6em willst du eine bestimmte Pixelgröße erreichen. Dann solltest du diese Größe auch in Pixeln angeben, mit folgender Begründung:

    • Du hast bestimmt gelesen, dass man em verwenden soll, weil sonst im Internet Explorer die Schriftgröße nicht verändert werden kann. Wenn du sie allerdings sowieso auf 0.6em drehst, ist sie im Internet Explorer bei der maximalen Einstellung „sehr groß“ so groß, wie die Einstellung „mittel“ es vorgibt, das heißt, jemand, der wirklich eine größere Schriftgröße haben will, erreicht diese nicht.
    • Die Voreinstellung beträgt in einigen Browsern aufgrund der Barrierefreiheit 16px. Nun stelle dir vor, jemand kann wirklich nur 16px lesen, dann müsste er die Schrift in seinem Browser auf 27px stellen, damit er auf deinen Seiten seine 16px erhält. Irgendwie pervers, nicht?

    Solltest du tatsächliche Barrierefreiheit bei der Schrift erhalten wollen, verwende für Fließtext genau 1em, und gib die Breite und Höhe von Elementen, die stark von der Schriftgröße abhängen (bei dir kann ich jetzt auf den ersten Blick keine erkennen, außer vielleicht die ganze Inhaltsbox selbst) in em an.

    Was mir an deinem HTML-Code auffällt, ist, dass er nicht ganz W3C-konform ist. Du bemühst dich zwar schon sehr, eine ordentliche Struktur zu erlangen, aber anhand der Startseite möchte ich dich einmal auf die Fehler aufmerksam machen:

    • Du verwendest XHTML, allerdings werden die ganzen Meta-Tags nicht geschlossen.
    • Generelles Problem: height- und width-Attribute im HTML-Code. Erstens muss dort das „px“ weg, zweitens gehören solche Angaben ins CSS, und zwar mit min-width und min-height, bzw. für den Internet Explorer mit width und height, da er diese genau so interpretiert.
    • Das Logo gehört in eine h1, nicht in einen ~~~html p[/html].
    • Dein [code lang=html]top_title
    - Der so genannte `menu_background`{:.language-html} ist ein Hintergrundbild, also ein Design-Element, deswegen solltest du diesen auch im CSS angeben, mit `background-position`{:.language-css} und `background-repeat`{:.language-css} kein Problem.  
    - Der Container um die `h2`{:.language-html} ist überflüssig, wenn du ganz ganz ehrgeizig bist, schreibe als Inhalt der `h2`{:.language-html} „Projektbetreuung“ auf, setze die eckigen Klammern mit `:before`{:.language-css} und `:after`{:.language-css} und transformiere den Text mit `text-transform`{:.language-css} im CSS zu Kleinbuchstaben. Ich weiß auch nicht, ob eine `h2`{:.language-html} hier überhaupt angebracht wäre, keine Ahnung, was man da besser verwendet, vielleicht einen `p`{:.language-html}.  
    - Das menu sollte eine `ul`{:.language-html} oder besser `ol`{:.language-html} sein, die einzelnen Punkte in lis.  
    - Da die `h1`{:.language-html} schon fürs Logo draufgeht, muss das im Inhalt nun eine `h2`{:.language-html} sein.  
    - `<p>&nbsp;</p>`{:.language-html} ist überflüssig, Abstände macht man mit `margin`{:.language-css} im CSS.  
    - Folgende Codezeile:  
    ~~~html
      
    <p class="zitat">Die Kunst des Ausruhens ist ein Teil der Kunst des Arbeitens.<br /><br />  
    <span class="zitat_autor">John Steinbeck (1902-68), amerik. Schriftsteller</span></p>  
    
    

    sollte so aussehen:

      
    <p><q>Die Kunst des Ausruhens ist ein Teil der Kunst des Arbeitens.</q></p>  
    <p><cite>John Steinbeck (1902&ndash;68), <abbr title="amerikanischer">amerik.</abbr> Schriftsteller</cite></p>  
    
    
    • Den Inhalt von #footer könnte man in eine ul packen, wenn man will.
    • Der Klassenname „white“ gibt etwas über das Aussehen an, sollte aber etwas über den Inhalt angeben.

    Übrigens hat die Seite selbst im Konqueror einen Scrollbalken. Dort, wo der Inhalt nun auch noch einen Scrollbalken bekommt, sind nun zwei Scrollbalken vorhanden, das ist sehr unschön.

    Das war jetzt ganz pingelig alles, was man besser machen könnte, aber wie gesagt, vom ersten Eindruck her ist die Seite recht gut.

    Gautera!
    Grüße aus Biberach Riss,
    Candid Dauth

    --
    Ein Fußball-Fan? Noch auf der Suche eine Schlafmöglichkeit im Großraum Stuttgart für die WM 2006? Wie wäre es mit Herrenberg, einer gemütlichen Kleinstadt am Rande des Schönbuchs – von der Lage her ideal, auch für andere Vorhaben im Urlaub. Ferienwohnungen-Herrenberg.com.
    http://cdauth.de/
    1. Gautera!

      Hallo Candid,
      Kannst du mir bitte erklären was Gautera bedeutet?
      Danke!

  8. Hallo.
    Da die visuellen, inhaltlichen und ergonomischen Eindrücke ja bisher etwas kurz gekommen sind, reich eich noch ein paar nach:

    • Die etwas planlos wirkende Kombination von Icons, typografischen Symbolen, grafischen Schriften und Fotos aus dem Katalog auf so kleinem Raum ergibt trotz der hohen grafischen Qualität ein Bild der Beliebigkeit.
    • Die Oberlängen des -- sehr gelungenen -- Signets sollten bündig mit der Oberkante der Kopfgrafiken abschließen.
    • Ein Umbruch zwischen "§ 27 a" und "Umsatzsteuergesetz" sollte vermieden werden, wenn er nicht gerade einem harmonischeren Gesamtbild dienlich ist.
    • Die meisten Abkürzungen sind unnötig und unschön, der Höhepunkt ist "dt. Topmanager belg. Herk.", aber auch "Jahnstr." sorgt nur für eine unausgewogen kurze Zeile.
    • Die Texte weisen viele Redundanzen auf, zum Beispiel "Die Firma Klimach Consulting ist ein junges Unternehmen" oder "Im gemeinsamen Dialog mit Ihnen".
    • Das Kontaktformular wirkt sehr neugierig und vermittelt gleichzeitig den Eindruck, sich gefälligst kurz fassen zu sollen.
    • "Löschen"-Schaltflächen sind immer wieder ein Ärgernis.
      MfG, at