Dressurreiten | Site Check

[sevY]

Hi zusammen,

wir haben gestern eine Website veröffentlicht und uns interessiert wie immer die Meinung des fachkundigen Publikums
Diesmal nicht wie gewohnt in Flash, sondern valides XHTML 1.0 und CSS.
Getestet ist die Website mit Auflösung ab 1024 unter Mac OS X mit den Browsern Internetexplorer 5, Firefox 1, Safari 1.2.4 und unter Windows mit den Browsern Internetexplorer 5,6 Firefox 0.8, 1.
Da 98% der User Windows Internetexplorer 6 verwenden haben wir die 1024er Auflösung dort als Referenz genommen. Unter Mac OS X muss man daher wegen der Titelleiste und des eventuell unten positionierten Docks, welches ein paar Pixel beansprucht, minimal scrollen… ich hoffe ihr MacUser seht es mir nach


Liebe Grüße

Yves

 

[trekkman]

Sehr schöne optik. Die vielen Pferde-Icons vor den Thumbs in der Galerie penetrieren etwas. Trotzdem: abstruse Sportform.

 

[Ina]

Guten Morgen!

Navigation: Das einzige, was mir negativ auffällt, ist ein stark verzögertes 'Springen' der Pop Ups in der Rubrik "Galerie".

Browser: Safari 1.2.3 / Mac OS 10.3.5


Optisch gefällt die Seite. Schlicht, übersichtliche Navigation, kein 'klicki bunti' ...

Inhaltlich – auch wenn das hier wohl nicht das Thema ist, aber da ich selbst aus einer 'Pferdefamilie' stamme, muss ich das sagen – würden mich Informationen zu den Gäulen interessieren.

 

[sevY]

abstruse Sportform.

Das habe ich im Anfang auch gedacht… aber nachdem ich mich etwas mit der Materie befasst habe sind sehr viele interessante Details bei dieser Sportart. Die Art und Weise wie ästethische Bewegungen, (Kür-)musik und Einheit von Mensch und Tier harmonieren, finde ich bemerkenswert.

 

[sevY]

Guten Morgen!

Guten Morgen, Ina

Navigation: Das einzige, was mir negativ auffällt, ist ein stark verzögertes 'Springen' der Pop Ups in der Rubrik "Galerie".

Browser: Safari 1.2.3 / Mac OS 10.3.5

Das ist technisch nicht anders zu realisieren, da ein Klick auf ein Bild in der Galerie zunächst ein 10px*10px großes Fenster öffnet, in dem dann PHP Die Maße des Bildes berechnet. Diese Werte werden dann an ein Javascript übergeben, welches das Fenster genau an die Größe des Bildes anpasst und absolut auf dem Bildschirm zentriert.

Optisch gefällt die Seite. Schlicht, übersichtliche Navigation, kein 'klicki bunti' ...

Vorgabe war, die Website edel, schlicht und anmutig mit einem Touch „Lässigkeit“ zu gestalten

Inhaltlich – auch wenn das hier wohl nicht das Thema ist, aber da ich selbst aus einer 'Pferdefamilie' stamme, muss ich das sagen – würden mich Informationen zu den Gäulen interessieren.

Das ist wie immer eine Frage des Projektumfangs und des Budgets. Wahrscheinlich wird aber ein Folgeauftrag entstehen, der dann eine neue „Presserubrik“ einführt, unter der man zahlreiche Zeitungsartikel und Hintergrundinformationen als PDF downloaden kann.
Nicola wird sich sicher freuen, wenn du über das Kontaktformular mit ihr in Verbindung trittst und ein paar Informationen einholst.

Liebe Grüße

Yves

 

[Ina]

Nicola wird sich sicher freuen, wenn du über das Kontaktformular mit ihr in Verbindung trittst und ein paar Informationen einholst.

Cool. Dann kann ich ja vielleicht ein Autogramm für meine Schwester abstauben, was?

Noch was: Habe die Seite jetzt noch mal mit Camino und IE getestet.
Dabei fällt mir auf, dass die Ladezeiten (mit DSL) bei beiden Browsern ganz schön happig sind.
Bildaufbau dauert (für DSL Verhältnisse) ewig.

Lieben Gruß!
Ina.

 

[Katrin]

Optisch sehr schön und dem Thema angemessen. Wenn ich aber den Quelltext richtig deute, hast du zahllose DIVs "missbraucht", um eine tabellenähnliche Struktur mit lauter Blindgifs zu schaffen – mit logischem Markup hat das m. E. wenig zu tun. Warum nicht so:

<div class="gesamtrahmen">
   <div class="links">
      <div class="bio"></div>
      <div class="galerie"></div>
      <div class="kontakt"></div>
   </div>
   <div class="content-rechts">
      <div class="person">texte</div>
      <div class="erfolge">texte</div>
   </div>
</div>

Und font-Tags brauchst du ja nun wirklich nicht mehr, oder?

 

[Mitraix]

Schlicht und edel sie Seite, ein bisschen mehr Informationen könnte sie vertragen aber das könnte ja noch kommen. Einziger Kritikpunkt sind die springenden Bilder in der Gallery, das gefällt mir persönlich nicht wirklich. Das Endergebnis schon aber der Weg dort hin...

Schönen Gruß
Meikl

 

[Pauermäck]

Cool. Dann kann ich ja vielleicht ein Autogramm für meine Schwester abstauben, was?

Noch was: Habe die Seite jetzt noch mal mit Camino und IE getestet.
Dabei fällt mir auf, dass die Ladezeiten (mit DSL) bei beiden Browsern ganz schön happig sind.
Bildaufbau dauert (für DSL Verhältnisse) ewig.

Lieben Gruß!
Ina.

jau.. einziger negative punkt der mir auffiel... die ladezeiten (selbst mit high-speed dsl happig).
wurde denn alles in slices zerstückelt?
kann man die bildqualität der einzelnen gifs oder jpgs nicht noch etwas runtersrauben, zugunsten der ladezeit?

ansonsten ist alles schon sauber und edel...mein kompliment!

 

[sevY]

Cool. Dann kann ich ja vielleicht ein Autogramm für meine Schwester abstauben, was?

Ja klar, kannst du

Noch was: Habe die Seite jetzt noch mal mit Camino und IE getestet.
Dabei fällt mir auf, dass die Ladezeiten (mit DSL) bei beiden Browsern ganz schön happig sind.
Bildaufbau dauert (für DSL Verhältnisse) ewig.

Ja, das stimmt. Das liegt daran, das das Layout sliced wurde und die Seite somit aus vielen, kleinen Grafiken besteht. Jedoch ist das im Zeitalter von DSL und in Anbetracht der Tatsache, das das keine News/Blog/Service Seite ist, absolut ok.

 

[sevY]

Optisch sehr schön und dem Thema angemessen. Wenn ich aber den Quelltext richtig deute, hast du zahllose DIVs "missbraucht", um eine tabellenähnliche Struktur mit lauter Blindgifs zu schaffen – mit logischem Markup hat das m. E. wenig zu tun.

Ich denke, du hast den Quelltext fehlgedeutet.
Es werden keine blind.gifs zur Positionierung benutzt, sondern teilweise wie zb. bei biografie.html als Inhalt der <div>, da einige Browser keine leeren <div> akzeptieren. Natürlich hätte man anstatt der im CSS für die „leeren“ <div> notierten Hintergrundbilder auch diese direkt mittels Image-tag einbinden können, nur dann wäre das Problem mit dem Darübersetzen von Content entstanden, welches wiederum nur mit Ebenen (z-index) möglich gewesen wäre.

Die Anreihung der <div> musst du dir wie ein großes Raster vorstellen, welches mittels CSS (Positioning) in Bezug auf Ausmaße und Positionierung angeordnet wird.

Warum nicht so:

<div class="gesamtrahmen">
   <div class="links">
      <div class="bio"></div>
      <div class="galerie"></div>
      <div class="kontakt"></div>
   </div>
   <div class="content-rechts">
      <div class="person">texte</div>
      <div class="erfolge">texte</div>
   </div>
</div>

Weil wir mehrere kleine Grafiken verwenden wollten, anstatt 4-5 Große. Kleinere Grafiken werden einfach kooperativ schneller geladen, da die Bandbreite besser ausgenutzt wird, als bei wenigen, Großen.

Und font-Tags brauchst du ja nun wirklich nicht mehr, oder?

Nein, brauchen wirklich nicht unbedingt. Es reicht auch, global für den body in CSS die Schrift zu definieren, oder eben in der jeweiligen Class für das <div>. Jedoch habe ich es mir angewöhnt, den Haupttext in Font Tags zu setzen, und diesen als Klasse zu formatieren. So kann man später weitere Subklassen definieren und einfacher zuweisen. Aber das ist Geschmackssache.

Liebe Grüße

Yves

 

[sevY]

Einziger Kritikpunkt sind die springenden Bilder in der Gallery, das gefällt mir persönlich nicht wirklich.

Hast du technisch eine Alternative dazu?

Viele Grüße

Yves

 

[newyorkcity]

1. Warum springt die Seite von der Startseite direkt zur Biografie. Ich sehe da nicht die Logik. Eine Personal-Page ohne ein persönliches Wort an den Leser, Fan, Werber, Mitbewerber und all die Jungs ist denke ganz sinnig

2. Das Typo-Illu-Logo finde ich schön. Im Detail sehr gut sogar. Aber: Da sind zu viele Elemnte drin. Illu im Hintergrund, teils Bild von ihr, dann Typologo und das Gaul. Ich würde das Gaul rausschmeißen

3. Die Galerie hält was sie verspricht. Schade nur, dass die Fotos im Popup an die jeweiligen Ränder grenzen. Dein Backpattern hättest du dort einbauen können, mittig das Bild und evtl. adaptiert aus der Illu einen schwungvollen verzierten leichten ... Rahmen. Desweiteren finde ich die Bilder klein. Mag aber auch an meinr Auflösung liegen. Größer wären sie trotzdem doller.

4. Die Grauwerte des Content sind mir etwas zu schwummrig im Vergleich zur Backpattern-Farbe. Sorry ich meine die jeweiligen Headlines. Ich würde evtl. die Typo von der Illu aufgreifen und das in weiß machen.

Ansonsten: sehr schön.

 

[sevY]

Hoi,

jau.. einziger negative punkt der mir auffiel... die ladezeiten (selbst mit high-speed dsl happig).
wurde denn alles in slices zerstückelt?

Exakt. Da viele filigrane Elemente im Layout waren, bot sich diese Möglichkeit einfach an. Festgestellt habe ich, das es größentechnisch egal ist, ob ich ein 200px*50px unifarbiges GIF (4kb groß) verwenden, oder dasselbige als 1px * 1px und dann strecke.
Wir haben dann uns für die 1px*1px Variante entschieden und in Slices, in denen nur diese Farbe vorkommt, immer das gleiche (fill.gif) verwendet. Somit erspart man das mehrmalige Laden von verschiedenen Dateien, die praktisch das selbe anzeigen und daher auch auf ein universelles Element reduziert werden können. Alternativ dazu hätte man auch einfach die entsprechenden <div> mit background-color in CSS färben können. So wäre dann jedoch eine leere <div> entstanden, die wieder mit einem 1pxblank Gif hätte gefüllt werden müssen. Und eben dieses 1px-Gif ist genauso groß wie das einfarbige GIF. Die Verwendung von erzwungenen Leerzeichen, unter Berücksichtigung der effektiven Einsparung der Datenmenge (ca.30kb) fand ich zu unsauber.

kann man die bildqualität der einzelnen gifs oder jpgs nicht noch etwas runtersrauben, zugunsten der ladezeit?

Da habe ich mich für farbindizierte GIF Dateien entschieden und diese auf die maximal benötigen Anzahl von Farben reduziert. Leider sind diese dann summiert immer noch relativ groß.
Die recht großen Fotomontage, welche tragende Elemente des Layouts darstellen, sind hier die Verantwortlichen.

ansonsten ist alles schon sauber und edel...mein kompliment!

Vielen Dank. Ich reiche das mal weiter.

Liebe Grüße
Yves

 

[Difool]

hi yves,

soll die Adresszeile (via IE z.B.) bei den Photo-pop-ups sein?
Würd ich wegnehmen.

Schöne Site. Und verdammt schnell.

 

[Katrin]

Ich denke, du hast den Quelltext fehlgedeutet.
Es werden keine blind.gifs zur Positionierung benutzt, sondern teilweise wie zb. bei biografie.html als Inhalt der <div>, da einige Browser keine leeren <div> akzeptieren. Natürlich hätte man anstatt der im CSS für die „leeren“ <div> notierten Hintergrundbilder auch diese direkt mittels Image-tag einbinden können ...

Ich denke, ich hab den Quelltext schon richtig verstanden, und es ist auch lobenswert, dass du valides XHTML und CSS anstrebst, doch diese Art des Sclicings ist nicht im Sinne der Trennung von Inhalt und Layout, wie es CSS anbietet, da hättest du auch bei Tabellen bleiben können, die DIVs (sind ja auch Ebenen, und warum nicht den z-index verwenden, wird von allen modernen Browsern verstanden) sind einfach nicht inhaltlich logisch angeordnet, sondern entsprechen letztendlich auch nur Tabellenzellen. Du kannst ja die recht großen Hintergrundbilder ebenfalls in deinem CSS definieren, dann werden sie gleich beim Öffnen der ersten Seite und damit erstmaligem Aufruf des CSS geladen und sind dann gleich da

Die Anreihung der <div> musst du dir wie ein großes Raster vorstellen, welches mittels CSS (Positioning) in Bezug auf Ausmaße und Positionierung angeordnet wird.

Sag ich ja, wie bei ner Tabelle.

Jedoch habe ich es mir angewöhnt, den Haupttext in Font Tags zu setzen, und diesen als Klasse zu formatieren. So kann man später weitere Subklassen definieren und einfacher zuweisen. Aber das ist Geschmackssache.

Das könntest du wie gesagt auch mit Subklassen der bisher angelegten CSS-Formate. Außerdem gilt das FONT-Element als DEPRECATED, stammt also noch aus der Urzeit von HTML und wird demnächst aus dem Standard entfernt.

LG Katrin

 

[sevY]

Hi,

1. Warum springt die Seite von der Startseite direkt zur Biografie. Ich sehe da nicht die Logik.

die Erfahrung zeigt, das der 0815 User mit moderater Interneterfahrung sich schwer tut, den Eingang zu einer Seite zu finden, wenn nicht explizit ein ENTER Button auf der Startseite platziert ist. Eine automatische Weiterleitung von 10Sekunden entspricht somit meist der Zeit, die ein versierter Nutzer für die Betrachtung des Bildes sowie für das Auffinden und Benutzen des Enterbuttons benötigt. Der „hilflose“ User wird somit unter dem Gesichtspunkt „Usability“ an die Hand genommen und zur Hauptseite geführt, welche dort wieder eine gewohnte Navigation bietet.

Eine Personal-Page ohne ein persönliches Wort an den Leser, Fan, Werber, Mitbewerber und all die Jungs ist denke ganz sinnig

Das sehe ich auch so. In einem eventuelen Folgeauftrag ist daher als 1. Seite eine dynamische „News“ Seite mit einem kleinen Prolog von uns angeboten worden.

2. Das Typo-Illu-Logo finde ich schön. Im Detail sehr gut sogar. Aber: Da sind zu viele Elemnte drin. Illu im Hintergrund, teils Bild von ihr, dann Typologo und das Gaul. Ich würde das Gaul rausschmeißen

Schön das es dir gefällt. Der Aufbau des Typo-Illu-Logo erfolgte nach einer Vorgabe, die das Element des Pferdes in dieser Form berücksichtigen sollte.
Wichtige Punkte waren hierbei: „Privatperson-Reiterin-Pferd“.

3. Die Galerie hält was sie verspricht. Schade nur, dass die Fotos im Popup an die jeweiligen Ränder grenzen. Dein Backpattern hättest du dort einbauen können, mittig das Bild und evtl. adaptiert aus der Illu einen schwungvollen verzierten leichten ... Rahmen.

Das Backpattern ist eingebaut, jedoch unsichtbar, da wie du sagtest, die Rändern des Fensters angrenzen.
Wir hatten zuvor das ganze mit Rahmen, dann mit weissem/farbigen Hintergrund und mit schlichtem Zierrahmen probiert.
Im direkten Vergleich sah diese „minimale“ Anzeige für uns besser aus und passte eher in das Konzept.

Desweiteren finde ich die Bilder klein. Mag aber auch an meinr Auflösung liegen. Größer wären sie trotzdem doller.

Ja, einige Bilder hätten durchaus größer sein können. Das hätte dann jedoch einen hochauflösenderen Scan erfordert, welcher eine Nachbearbeitung der Bilder in Hinsicht auf Staub/Kratzer/Farbkorrektur erfodert hätte. Das war jedoch nicht im Budget eingeplant.
Wenn die „Presseecke“*in Auftrag gegeben wird, werden dort 2-3 hochauflösende, bearbeitete TIF Dateien zu finden sein. Vielleicht als kleines Trostpflaster.

4. Die Grauwerte des Content sind mir etwas zu schwummrig im Vergleich zur Backpattern-Farbe. Sorry ich meine die jeweiligen Headlines. Ich würde evtl. die Typo von der Illu aufgreifen und das in weiß machen.

Ich geb das mal weiter. Änderungen sind wenn dann beim Folgeauftrag möglich, da das Projekt so schon abgenommen und abgeschlossen ist.

Ansonsten: sehr schön.

Dankeschön

 

[sevY]

hi yves,
soll die Adresszeile (via IE z.B.) bei den Photo-pop-ups sein?
Würd ich wegnehmen.
.

Eigentlich nicht. Ist aber im Javascript doch auch so definiert=?!

 

[Edgar Birzer]

Eine von der Anmutung her sehr schöne Site.

Zur Startseite: Sie ist mir "grafisch" etwas überladen. Insbesondere das rechte untere Eck ist mir zu wirr.
Kippt sie auf dem kleineren Reiterbild vom Gaul? Auf den kleineren Pferden sitzt ja niemand mehr.
Was stellt das helle Gebilde hinter dem "nicola giesen" dar?

Zu den Folgeseiten: Auch hier hab ich Probleme mit dem Hintergrund hinter "nicola giesen"

Zur Galerie: Es wäre schön, wenn es zu den Bilder auch textliche Informationen gabe. Wieder mal sagen Bilder nicht mehr als 1.000 … Und wenn es nur in der Fensteroberzeile der aufspringenden Fenster eine andere Information gäbe als immer "Nicola Giesen"; das wissen wir doch schon.

Zur Biografie: Ich würde die Auflistung der Erfolge umgekehrt vornehmen. D.h. die neueren nach oben. Was ist eigentlich mit den Erfolgen 2003 und 2004?

Nochmals, damit's nicht zur Kritelei verkommt: Eine schöne Site.

 

[Difool]

Eigentlich nicht. Ist aber im Javascript doch auch so definiert=?!

Jau, seltsam!

function show(x)
    {
    var object="show.php?image="+x;
    window.open(object,"Image","width=10,height=10,location=0,scrollbars=no,resizable=0,status=no");