Redesign bewerten

[elektrowolf]

Hallo!

Ich habe meine Seite schon mal hier vorgestellt. Jetzt habe ich allerdings ein ganz neues Design entworfen und gecodet.

Also bitte das Design und den Code bewerten! Ihr könnt auch gerne das Kontaktformular testen ;)

Die Seite funktioniert natürlich auch ohne JS, für den vollen Funktionumfang möchte ich auch die, die sonst mit NoScript unterwegs sind, bitten, die Seite mal mit aktiviertem JS zu testen. Dann kommen nämlich die folgenden Funktionen dazu:

• Schriftersetzung mit Cufon
• automatische Anpassung der Schriftgröße ans Browserfenster auf der Startseite
• Verkleinerung des Inhalts bei Monitoren < 1280x1024 auf den Unterseiten
• Hinzufügen von Padding im gelben Content-Bereich wenn das Browserfenster höher als der Inhalt ist
• Validierung und Abschicken mit AJAX des Kontaktformulars
• Lightbox für Fotos
• Aufklapp-Animation bei den Projekten
• Scroll-Animation bei Projekten und Fotos

--> HIER DER LINK <--

Vielen Dank fürs Testen!

eWolf

 

[Loon3y]

Ach herrje :-)

ersteinmal zum Code:

-> Kein <h1>
-> <h2> als erstes

<div>
New design is online!
Tell me if you like it -->
</div>

-> Fehlerhafte Auszeichnung

<form id="contact" action="" method="post">
<div>
<h2>contact me</h2>
<table cellspacing="0">
<tr>
<td><label for="email">E-Mail:</label></td>
<td><input type="text" id="email" name="email" value="" /></td>
<td id="email-info">
</td>
....

-> eher wohl so:

<form id="contact" action="" method="post">
 <fieldset>
  <legend>contact me</legend>
   <label for="email">E-Mail:</label>
   <input type="text" id="email" name="email" value="" />

.....
 </fieldset>
</form>

Edit:

Validierung und Abschicken mit AJAX des Kontaktformulars

Ich mags mir garnicht anschauen, aber da du "Abschicken" schreibst, geht das Formular nur mit eingeschalteten JS? ;)



Ansonsten..recht verwirrend im ersten Moment bzgl der Navigation....gestalterisch zwar sehr "kreativ", aber irgendwie eher printlastiges design...sehr krävtige bissige Farben und wenig wenig wenig Content (hab ihn vllt nicht gefunden?)


Nachholbedarf!


Gruß
Loon3y

 

[elektrowolf]

Ach herrje :-)

ersteinmal zum Code:

-> Kein <h1>
-> <h2> als erstes

Doch, hier z.B. kommt ein h1 vor. Ich wollte das konsistent halten über die gesamte Seite. Aber das erübrigt sich ja, wenn ich legend verwende..

<div>
New design is online!
Tell me if you like it -->
</div>

-> Fehlerhafte Auszeichnung

Du meinst da müsste p hin?

<form id="contact" action="" method="post">
<div>
<h2>contact me</h2>
<table cellspacing="0">
<tr>
<td><label for="email">E-Mail:</label></td>
<td><input type="text" id="email" name="email" value="" /></td>
<td id="email-info">
</td>
....

-> eher wohl so:

<form id="contact" action="" method="post">
 <fieldset>
  <legend>contact me</legend>
   <label for="email">E-Mail:</label>
   <input type="text" id="email" name="email" value="" />

.....
 </fieldset>
</form>

Ich versuch gerade, das zu ändern, aber irgendwie funktioniert margin-left bei legend nicht? oO

Edit:


Ich mags mir garnicht anschauen, aber da du "Abschicken" schreibst, geht das Formular nur mit eingeschalteten JS? ;)

Na schaus dir doch an! Was denkst du wieso ich schreibe:
Die Seite funktioniert natürlich auch ohne JS[..]
Funktioniert natürlich auch ohne JS! Nur nicht so schick..

Ansonsten..recht verwirrend im ersten Moment bzgl der Navigation....gestalterisch zwar sehr "kreativ", aber irgendwie eher printlastiges design...sehr krävtige bissige Farben und wenig wenig wenig Content (hab ihn vllt nicht gefunden?)

Nein, ist nur wenig Content. Den hab ich deshalb auch recht groß geschrieben.. Bei der Navigation meinst du warscheinlich den "back to front page"-Link, oder? Auf der Startseite sollten die Navigationsmöglichkeiten ja recht klar sein.


Grüße,
Eric

 

[Loon3y]

Doch, hier z.B. kommt ein h1 vor.

auf der Seite war ich nicht, hab ich nicht gefunden ;) aber auf der Startseite war keins. :-)

Du meinst da müsste p hin?

Wenns ein Textabsatz ist, ja :-)

Ich versuch gerade, das zu ändern, aber irgendwie funktioniert margin-left bei legend nicht? oO

Sollte eigentlich gehen ;)

Nein, ist nur wenig Content. Den hab ich deshalb auch recht groß geschrieben.. Bei der Navigation meinst du warscheinlich den "back to front page"-Link, oder? Auf der Startseite sollten die Navigationsmöglichkeiten ja recht klar sein.

Wenn es eine Navigation ist, wieso ist dann da kein <ul>? :) Ich sehe nur unausgezeichnete anchors :-)


Gruß
Loon3y

 

[elektrowolf]

Wenns ein Textabsatz ist, ja :-)

OK, hab ich geändert.

Sollte eigentlich gehen ;)

Egal, ich hab jetzt einfach padding genommen ..

Wenn es eine Navigation ist, wieso ist dann da kein <ul>? :) Ich sehe nur unausgezeichnete anchors :-)

Du meinst auf der Startseite? Ein ul zeichnet doch eine Liste aus, nicht unbedingt eine Navigation. Außerdem suggeriert ein ul dass man beliebig Elemente dazufügen kann. Ich habe allerdings genau 2 Links die jeweils eine ID haben und den CSS-Code dazu. Es ist also nicht flexibel änderbar und wird auch nicht als Liste wahrgenommen, finde ich.

Grüße, eWolf

 

[Loon3y]

Du meinst auf der Startseite? Ein ul zeichnet doch eine Liste aus, nicht unbedingt eine Navigation. Außerdem suggeriert ein ul dass man beliebig Elemente dazufügen kann. Ich habe allerdings genau 2 Links die jeweils eine ID haben und den CSS-Code dazu. Es ist also nicht flexibel änderbar und wird auch nicht als Liste wahrgenommen, finde ich.

<ul> leitet eine ungeordnete Auflistung von Punkten hinzu. Besonderheit dabei ist, dass man jeden Punkt für sich sehen kann bzw (sich vor)lesen lassen kann ohne eine vorhergehenden Punkt gehört zu haben. D.h. eigentlich das sie unabhängig voneinandert sind.
Alles was mehr wie 1 Link ist, ist eigentlich schon eine Auflistung.

<a>nchors einfach so dastehen zu lassen ohne irgendeine Auszeichnung / Zuordnung, dass ist nicht so sinnvoll.

Wie würdest du sonst eine Navigation auszeichnen? Einfach ein paar Links hinklatschen und dann bist du fertig? :-)


Gruß
Loon3y

 

[burbot]

Der Aufbau der Seite ist eine gute Idee (falls sie von dir stammt :grin:) und gefällt mir!

Code:
Der Validator spuckt keine Fehler (mehr) aus, ansonsten wurde bereits genug dazu bemerkt.

Noch etwas:
Der Text, der immer neben dem Gesicht steht, sollte eine durchgehend konstante Größe haben, da ich zumindest einen Augenkrebs davon bekomme ;)

 

[Loon3y]

Code:
Der Validator spuckt keine Fehler (mehr) aus, ansonsten wurde bereits genug dazu bemerkt.

es wäre schön, wenn man so unqualifizierte Kommentare in zukunft nichtmehr so oft sehen würde.

Validatoren sind nur Maschinen die keine Ahnung von Semantik, Schematik und (x)HTML an sich haben. Sie prüfen nur auf Syntax der Vorgegeben wird.

Auch ein Tabellen- oder Div- und Div/Tabellen-Layout kann valide sein.

WAI-ARIA kann nicht valide sein, obwohls sehr zu Benutzbarkeit und Benutzerfreundlichkeit beiträgt.


valide != benutzerfreundlich != immer richtig



Gruß
Loon3y

 

[burbot]

es wäre schön, wenn man so unqualifizierte Kommentare in zukunft nichtmehr so oft sehen würde.

Okay, verstanden!:-(

 

[elektrowolf]

Wäre schön wenn noch jemand anders seine Meinung sagen würde!

Vielen Dank auf jeden Fall an loon3y und burbot!

 

[Efchen]

Okay, noch eine Meinung. Ich weiß nicht, ob es schon gesagt wurde, ich bin jetzt zu faul, nochmal alles durchzulesen:

Der Content ist viel zu groß! Wenn ich das mit meinem 1024x600-Netbook ansehe, sehe ich wahrscheinlich nichtmal Deinen gesamten Kopf. Und auf diese ganze Scrollerei kann ich verzichten. Wenn ich auf Deiner Site nicht vermuten würde, da irgendwas zu finden, was ich ganz unbedingt dringend brauche, wäre ich wahrscheinlich nach 0,5 bis 1s wieder weg und käme nie wieder.

 

[screengreen]

Die Seite hat so gut wie keinen Inhalt.
Der Text Deiner Skills liegt in einem Bild.
Wo ist da der Sinn für eine HTML Umsetzung?
Die Bildershow, sowie die genannten Animation in diesem Format sehen immer bescheiden aus. Für eine HTML Webseite allerdings sicher eine gute Lösung.

Das Design, welches immer Geschmackssache ist, finde ich nicht treffend und viel zu einfach. Hast Du Dir mal Webseiten von Photografen angesehen? Ohne die Arbeiten wirklich beurteilen zu wollen, würde ich Dich schon auf Grund der Webseite nicht buchen. Auch als "Programmer" ist die Webseite leider nicht aussagekräftig.

Meine Meinung, Thema verfehlt.

Da musst Du nochmal ordentlich dran abeiten.

Grüße

 

[elektrowolf]

@Efchen:
Verkleiner mal dein Browserfenster. Dank JS wird der Content bis auf eine Breite von 960px automatisch verkleinert (auf der Startseite die Schriftgröße, auf den Unterseiten erst der Abstand und dann der Inhalt).

@screengreen:
Wie sonst soll ich das denn deiner Meinung nach umsetzen? Und wieso findest du die Animationen schlecht? Sag mir doch mal ein Beispiel, dass du besser findest.

Ich bin übrigens kein professioneller Fotograf, wie in dem wenigen Inhalt auch geschrieben steht.
Auf deine Anregung habe ich mir mal ein paar Webseiten von professionellen Fotografen angesehen: Meist sind deren Seiten schwarz- bis grau-weiß gehalten, damit man die Fotos neutral beurteilen kann. Im allgemeinen finde ich das Design dort noch einfacher als bei mir. Oder meinst du etwas anderes? Dann poste doch mal einen Link.

 

[Efchen]

@Efchen:
Verkleiner mal dein Browserfenster.

Das kan ich gemacht. Daraufhin habe ich ja so geantwortet.

Dank JS wird der Content bis auf eine Breite von 960px automatisch verkleinert

1. OMG, wieso macht man das mit JavaScript statt mit CSS?
2. Wieso 960px? Warum nicht 970px? Oder 830px? Oder 280px?

Und wie schon gesagt, auf meinem 1024x600px-Netbook bringt mir das nicht viel, weil ich da grad mal nen halben Kopf sehe. Da fühlt man sich nicht willkommen ("Was hastn Du für nen kleinen Monitor?")

 

[elektrowolf]

Das kan ich gemacht. Daraufhin habe ich ja so geantwortet.

Welchen Browser und welche Version verwendest du? Ist JS aktiviert? Hast du so etwas wie eine Fehlerkonsole (in Firefox Strg+Umschalt+J) und erscheinen dort Fehler?

1. OMG, wieso macht man das mit JavaScript statt mit CSS?

OMG, wenn du mir sagen kannst, wie man CSS beibringt, dass erst ein Padding reduziert werden soll und dann ein Bild verkleinert wird, mach ichs natürlich lieber mit CSS.

2. Wieso 960px? Warum nicht 970px? Oder 830px? Oder 280px?

Und wie schon gesagt, auf meinem 1024x600px-Netbook bringt mir das nicht viel, weil ich da grad mal nen halben Kopf sehe. Da fühlt man sich nicht willkommen ("Was hastn Du für nen kleinen Monitor?")

Weil man das dann auf einem 1024px breiten Monitor noch (inklusive Scrollbars und so einen Kram) gut sehen kann. Kleinere Monitore sind zu schwer zu berücksichtigen, da bräuchte man ein komplett anderes Layout.

 

[Efchen]

Welchen Browser und welche Version verwendest du? Ist JS aktiviert?

Wieso ist das wichtig? Ich kann Firefox in Version 1-3 testen, IE8 mit und ohne Kompatibilitätsmodus, IE6, Safari, irgendwo hab ich sicherlich noch nen alten Opera, Konqueror, Lynx, Mosaic...und wozu JS? Wenn ich will, dass JS aktiviert ist, dann ist es das, wenn ich das nicht will, ist es nicht aktiviert.

Hast du so etwas wie eine Fehlerkonsole (in Firefox Strg+Umschalt+J) und erscheinen dort Fehler?

Wozu? Es gibt keine Fehler, nur weil mein Viewport zu klein für Dein Vorhaben ist.

OMG, wenn du mir sagen kannst, wie man CSS beibringt, dass erst ein Padding reduziert werden soll und dann ein Bild verkleinert wird, mach ichs natürlich lieber mit CSS.

Das Bild verkleinert sich? Davon hab ich noch nichts gesehen.

Weil man das dann auf einem 1024px breiten Monitor noch (inklusive Scrollbars und so einen Kram) gut sehen kann.

Quatsch. Was hat das mit der Größe des Monitors zu tun?
Und selbst wenn? Wenn ich einen Viewport von nur 800px Breite habe, was interessiert mich Deine Einstellung, dass man das auf einem 1024er noch sehen kann? Ich will es ja in MEINEM Browser anständig sehen.

Kleinere Monitore sind zu schwer zu berücksichtigen, da bräuchte man ein komplett anderes Layout.

Eben. So sagst Du aber zu denen mit kleinen Monitoren, dass sie minderwertig sind. Besonders PDA/Handy-Nutzer, die ja wohl modernere Geräte besitzen, als jemand, dessen Monitor nur 800px hergibt, werden sich denken "Was will der denn von uns?"

Und um Dich nicht ganz verzweifeln zu lassen :-)
Ich weiß, dass das alles schwierig ist, und es gibt nicht immer für alles eine Lösung. Manchmal ist es besser, Abstriche zu machen, und damit nicht etlichen Menschen vor den Kopf zu stoßen. Aber es ist klar, dass das eine Gratwanderung ist.
Deswegen kann es trotzdem sein, dass es Leute gibt, die genau so denken, wie ich das hier - provozierend - geschrieben habe.

Schönes Wochenende!

P.S.: Du wolltest eine Meinung ;-)

 

[elektrowolf]

Du verstehst mich irgendwie falsch Ich will wissen, welchen Browser du verwendest, damit ich den Fehler beheben kann! Bei mir verkleinert sich das nämlich bis zu einer Viewport-Breite von 960px.

Quatsch. Was hat das mit der Größe des Monitors zu tun?
Und selbst wenn? Wenn ich einen Viewport von nur 800px Breite habe, was interessiert mich Deine Einstellung, dass man das auf einem 1024er noch sehen kann? Ich will es ja in MEINEM Browser anständig sehen.

Jetzt nimms nicht übermäßig genau ;) Ich meine die Viewportgröße eines maximierten Browserfensters, und das weißt du auch

Eben. So sagst Du aber zu denen mit kleinen Monitoren, dass sie minderwertig sind. Besonders PDA/Handy-Nutzer, die ja wohl modernere Geräte besitzen, als jemand, dessen Monitor nur 800px hergibt, werden sich denken "Was will der denn von uns?"

Also auf meinem iPod touch sieht das ganze wunderbar aus :) Nur die Lightbox-Sache könnte man da noch etwas ändern. Wenn ich die Seite möglichst praktisch zugreifbar auch für alle mobilen Browser haben möchte, die nicht so schlau sind wie der MobileSafari und nicht eine Übersicht der Seite zeigen, in die man hineinzoomen kann, muss ich eine 2te Variante der Seite erstellen. Das ist bei so ziemlich jeder Seite so. Man kann da nicht einfach das gleiche Layout übernehmen. Und da ich nun wirklich nicht so viele Besucher habe, besonders nicht von mobilen Geräten mit blöden Browsern , lasse ich das einfach mal.. ;)

 

[Efchen]

Du verstehst mich irgendwie falsch Ich will wissen, welchen Browser du verwendest, damit ich den Fehler beheben kann! Bei mir verkleinert sich das nämlich bis zu einer Viewport-Breite von 960px.

Firefox.
Da verändert sich die Größe des Kopfes nicht.

Jetzt nimms nicht übermäßig genau

Dann google mal nach "Auflösungsweiche". Offensichtlich muss man es so übermäßig genu wissen, offensichtlich gibt es Leute, die die Zusammenhänge nicht verstehen, und ich bin sicher, es gibt Leute, die wirklich nicht wissen, dass man Fenster nicht maximieren muss. Und ich wäre nicht erstaunt, wenn hier einige der Sort mitlesen oder andere Ahnungslose, die in Zukunft sagen werden, "aber elektrowolf hat gesagt, dass die Auflösung sehr wohl eine Relevanz hat".

Ich meine die Viewportgröße eines maximierten Browserfensters, und das weißt du auch

Nein, das weiß ich nicht, und wenn Du das meinst, warum sagst Du das dann nicht?
Und bitte nicht damit begründen, dass die Menschen allgemein zu Falschaussagen und Wischiwaschigerede neigen.

muss ich eine 2te Variante der Seite erstellen. Das ist bei so ziemlich jeder Seite so. Man kann da nicht einfach das gleiche Layout übernehmen.

Klar, aber ein Stylesheet für media="handheld" würde vermutlich schon reichen.

Und da ich nun wirklich nicht so viele Besucher habe, besonders nicht von mobilen Geräten mit blöden Browsern , lasse ich das einfach mal.. ;)

Das kannst Du nie wissen.