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

Webdesign-Testgebiet

Status
Für weitere Antworten geschlossen.

fiedel

Mitglied
Hallo!
Ich hab meine Seite "WEB-DESIGN Testgebiet" vor einigen Wochen renoviert, und möchte gerne von euch wissen, was ihr davon haltet und was ich besser machen könnte/sollte.

Über... - Friedrich Schultheiß - WEB-DESIGN TESTGEBIET

Im Moment sind noch nicht alle Seiten fertig und die index ist noch nicht begehbar.

Danke!

EDIT: Möchte hier keiner ein Feedback abgeben? Sagt ruhig, was euch gefällt oder stört (bezüglich Design oder Quelltext...)!!
 
Zuletzt bearbeitet:
hi


Ja zum Design : Ganz okay aber der veränderte Cursor nervt. Bei der Navi gibts sicher auch noch Verbesserungspotenzial. Und ne Uhr braucht kein Mensch aber sonst finde ich gut dass du nicht eine gewöhnliche sondern eine sehr individuelle Seite gestaltest. Code find ich auch nicht schlecht.

Lg Moschdom
 
Danke für deine Meinung! ^^

Dass die Navi nicht grad das beste ist, ist mir bewusst (weiß allerdings auch nicht, wie ichs verbessern soll...), aber dass der veränderte Cursor, so nervig ist, wusste ich nicht... Ich dachte, das wär mal ne Abwechslung zum langweiligen "normalen" Cursor! Was meinen denn die anderen dazu, ist der wirklich so schlimm?
 
Was nützt das verdammte FlipOut(die Pfeile) in der Navi?
100% Spielerei...
 
Code:
ul.container {
...
position:fixed;
top:20%;
...
}
top: 20% sind zu viel.
Die Box mit den Formularen (Abstimmen und Suche) wird zu schnell abgeschnitten (position: fixed). Richte sie besser soweit oben wie möglich aus. Überstehende Inhalte werden durch position: fixed leicht unerreichbar.

Änderung:
Jetzt verstehe ich wozu die FlipOuts dienen.
Das muß aber auch ohne passen.
 
Zuletzt bearbeitet:
Hallo fiedel,

erstmal großen Respekt für die vielen, zum großen Teil gut umgesetzten Ideen. Hier einige besonders lobenswerte Punkte:

  • So weit ich das überblicken konnte, recht gute Trennung von Inhalt und Layout. Kleine Schönheitsfehler sind z.B. die Großschreibung von WEB-DESIGN TESTGEBIET im Quelltext oder b-Tags in den Sprüchen.
  • An einigen Stellen, z.B. bei der Info zu den Sprüchen, hast Du den wichtigsten Grundsatz beim Einsatz von Javascript vorbildlich befolgt: Ist es aktiviert, wird eine zusätzliche Funktionalität geboten. Ist es deaktiviert, bleibt die volle Nutzbarkeit erhalten. Steigerungsbedarf bestehen z.B. beim Menü links, wo die Pfeile bei deaktiviertem Javascript nicht anklickbar sind und evtl. bei Deiner Bildergalerie (Bietest Du eine Alternative, wenn Flash deaktiviert ist?). Außerdem solltest Du einen Workaround für das Menü im IE anbieten, der in einigen Versionen :hover nur für Links kennt. Sonst ist Dein Menü unbenutzbar. Bei der Gelegenheit kannst Du gleich noch die Bedienbarkeit mit der Tastatur verbessern, indem Du beim Markieren der entsprechenden Hauptmenüpunkte mittels Tastatur (Tab-Taste) die jeweiligen Untermenüs aufklappen lässt.
Die Seite ist sehr individuell, genau da liegen aber auch die meisten Probleme: Es gibt zu viele Spielereien, der Benutzer ist mit einer Menge Ungewohntem konfrontiert. Dazu kommt, dass einige Features diverse Fehler mit sich bringen, wodurch die Nutzbarkeit unterm Strich deutlich leidet.
Hier einige Beispiele:
  • Das automatische Scrollen ist ein nettes Feature, aber überflüssig: Benutzer mit einer Maus (die dies als einzige nutzen können) haben meistens ein Scrollrad und/oder mittlere Maustaste, die fast immer funktionieren und daher intuitiv bedient werden. Wenn man auf einen Link im oberen oder unteren Bereich des Viewports klicken will, bewegt der sich in die Mitte des Viewports, was Zeit kostet und evtl. Fehlklicks mit sich bringt.
  • Beim Verkleinern der Viewportbreite bleibt der Inhalt fest. Horizontales Scrollen als Resultat wäre nur eine große Hürde, aber durch das Fehlen der Scrollbalken wird Deine Seite unbenutzbar.
  • Probleme bei fixiertem Inhalt wurden bereits genannt.
  • Der geänderte Mauszeiger ebenso.
  • Dein Kontaktformular ist eine Pracht für die Augen, aber es dauert einige Zeit, bis man verstanden hat, wie es funktioniert. Einige Benutzer werden es sicher nie herausfinden. Vielleicht solltest Du wenigstens die Rahmen der Eingabefelder beim Browserstandard belassen.
Darüber hinaus noch einige Verbesserungsvorschläge:
  • Die URL ist eine der wichtigsten Stellen für das Platzieren von Keywords, anhand derer Deine Seite über Suchmaschinen gefunden werden kann. Nichts gegen Deinen Namen, aber danach wird wohl kaum ein Interessierter suchen. Ebenso ist Willkommen als Überschrift ersten Grades nicht das Optimum.
  • Beim Umfrageformular für die Browser sind IDs doppelt vergeben. Daraus resultieren invalides Markup sowie Nutzlosigkeit der label-Tags.
  • Die Einheit pt ist für Größenangaben bei der Ausgabe an digitalen Displays nicht geeignet, sondern nur für Drucklayouts gedacht. Belies Dich mal zu richtigen Einheiten für Schriftgrößen, em, ex und %. Da ex in den meisten Browsern nicht unterstützt wird, bleiben zwei.
  • Wenn Du Lust hast, belies Dich mal über mod_rewrite per .htaccess. So kannst Du unter anderem Links ohne Dateiendung anbieten und bei der Anfrage an den Server anhängen. Damit sind Deine URLs unabhängig von der verwendeten Technologie (php). Das ist langfristig wichtig, wenn Benutzer Seiten Deiner Webseite als Lesezeichen speichern oder auch für externe Links auf Deine Webseite.
Das sollte erstmal als Anregung reichen. Bin wirklich erwartungsvoll, was Du so alles auf die Beine stellen wirst, wenn Du so weitermachst.

Gruß
Junny
 
:shock: Wow!

Danke schön für das große Lob und die Kritik! ;-)
Ich bin leider noch nicht so erfahren, darum muss ich dich (bzw. auch andere) noch mit nem Haufen Fragen zum Geschriebenen bombadieren
  • So weit ich das überblicken konnte, recht gute Trennung von Inhalt und Layout. Kleine Schönheitsfehler sind z.B. die Großschreibung von WEB-DESIGN TESTGEBIET im Quelltext oder b-Tags in den Sprüchen.
  • An einigen Stellen, z.B. bei der Info zu den Sprüchen, hast Du den wichtigsten Grundsatz beim Einsatz von Javascript vorbildlich befolgt: Ist es aktiviert, wird eine zusätzliche Funktionalität geboten. Ist es deaktiviert, bleibt die volle Nutzbarkeit erhalten. Steigerungsbedarf bestehen z.B. beim Menü links, wo die Pfeile bei deaktiviertem Javascript nicht anklickbar sind und evtl. bei Deiner Bildergalerie (Bietest Du eine Alternative, wenn Flash deaktiviert ist?). Außerdem solltest Du einen Workaround für das Menü im IE anbieten, der in einigen Versionen :hover nur für Links kennt. Sonst ist Dein Menü unbenutzbar. Bei der Gelegenheit kannst Du gleich noch die Bedienbarkeit mit der Tastatur verbessern, indem Du beim Markieren der entsprechenden Hauptmenüpunkte mittels Tastatur (Tab-Taste) die jeweiligen Untermenüs aufklappen lässt.
  • Dass es als Schönheitsfehler gilt, wenn ich bspw. WEB-DESIGN TESTGEBIET im Quelltext groß schreibe, wusste ich nicht... ich nehme an, das soll ich dann per CSS umsetzen und die "b-Tags" durch "strong-Tags" ersetzen, oder?
  • Das mit den Pfeilen wird, denke ich, recht problematisch werden, denn wie kann ich den Inhalt ohne javascript ausblenden lassen? Ist das mit PHP möglich? Nach einem Workaround für den IE werde ich mal ausschauhalten (verflucht sei dieser ;-))! Für ein Script zur besseren Bedienbarkeit mit der Tastatur auch!
Zu den Fehlern:
  • Das automatische Scrollen ist ein nettes Feature, aber überflüssig: Benutzer mit einer Maus (die dies als einzige nutzen können) haben meistens ein Scrollrad und/oder mittlere Maustaste, die fast immer funktionieren und daher intuitiv bedient werden. Wenn man auf einen Link im oberen oder unteren Bereich des Viewports klicken will, bewegt der sich in die Mitte des Viewports, was Zeit kostet und evtl. Fehlklicks mit sich bringt.
  • Beim Verkleinern der Viewportbreite bleibt der Inhalt fest. Horizontales Scrollen als Resultat wäre nur eine große Hürde, aber durch das Fehlen der Scrollbalken wird Deine Seite unbenutzbar.
  • Probleme bei fixiertem Inhalt wurden bereits genannt.
  • Der geänderte Mauszeiger ebenso.
  • Dein Kontaktformular ist eine Pracht für die Augen, aber es dauert einige Zeit, bis man verstanden hat, wie es funktioniert. Einige Benutzer werden es sicher nie herausfinden. Vielleicht solltest Du wenigstens die Rahmen der Eingabefelder beim Browserstandard belassen.
  • Das Problem mit dem Auto-Scrolling ist mir auch schon aufgefallen und ich kämpfte auch mit mir selbst, ob ichs jetzt lassen oder rausschmeißen soll... Aber ich denke, da du der selben Meinung bist, deklarier ichs als unnütze Spielerei und bau es wieder aus!
  • Da hast du Recht, doch durch das horizontale Scrollen würde die Navigation den Inhalt verdecken, was auch nicht gerade optimal wäre...
  • ....ich weiß.... möchts aber eigentlich gern so lassen
  • :-( :-( :-(
  • Da könntest du Recht haben, ich kenn solche Kollegen (:grin:)!! Ich denke ich werde die bisherigen Linien noch etwas dunkler machen und mit einem helleren gestrichelten (dashed) Rahmen die restliche Umrahmung machen.
  • Die URL ist eine der wichtigsten Stellen für das Platzieren von Keywords, anhand derer Deine Seite über Suchmaschinen gefunden werden kann. Nichts gegen Deinen Namen, aber danach wird wohl kaum ein Interessierter suchen. Ebenso ist Willkommen als Überschrift ersten Grades nicht das Optimum.
  • Beim Umfrageformular für die Browser sind IDs doppelt vergeben. Daraus resultieren invalides Markup sowie Nutzlosigkeit der label-Tags.
  • Die Einheit pt ist für Größenangaben bei der Ausgabe an digitalen Displays nicht geeignet, sondern nur für Drucklayouts gedacht. Belies Dich mal zu richtigen Einheiten für Schriftgrößen, em, ex und %. Da ex in den meisten Browsern nicht unterstützt wird, bleiben zwei.
  • Wenn Du Lust hast, belies Dich mal über mod_rewrite per .htaccess. So kannst Du unter anderem Links ohne Dateiendung anbieten und bei der Anfrage an den Server anhängen. Damit sind Deine URLs unabhängig von der verwendeten Technologie (php). Das ist langfristig wichtig, wenn Benutzer Seiten Deiner Webseite als Lesezeichen speichern oder auch für externe Links auf Deine Webseite.

  • Das liegt daran, dass ich die Idee mit dem Web-Design Testgebiet erst später gekriegt habe. Vorher hatte ich schon allerlei Designs durchgemacht! Und ne neue Domain kostet ja auch wieder Geld! Aber trotzdem danke, ich werd deinen Vorschlag mal durchdenken!
  • Oh, das ist mir wirklich überhaupt nicht aufgefallen! Gut, dass du mich darauf ansprichst!
  • Das wird ne große Umgewöhnung werden, ich werds aber auf meine Liste setzen! ;)
  • Damit wäre ein Rätsel gelöst! Ich hab mich schon gefragt, wie das geht! (Habe ich bei Wikipedia.org entdeckt. Habs zuerst für Ordnerangaben gehalten, warens aber dann doch nicht)
Das sollte erstmal als Anregung reichen. Bin wirklich erwartungsvoll, was Du so alles auf die Beine stellen wirst, wenn Du so weitermachst.
Oh ja, jetzt hab ich wirklich eine Menge, woran ich knabbern kann! ;)

Gruß
Fiedel
 
Also mir gefällt das Design, bis auf die Navigation, die finde ich irgendwie unpassend und der " Mouse Effekt " finde ich auch überflüssig.

Aber ich hätte mal ne Frage.. Unter Photomontane benutzt du so ein " Script " damit die Bilder wechseln . Wie heißt das ? Das kenn ich garnicht 8-)
Finde ich sehr interessant nur leider fehlt da irgendwie nen " Pfeil " .
Bin nur durch Zufall daraufgekommen mal raufzuklicken ;ugl
 
Ja, dass ausklappbare passt irgendwie garnicht rein, außerdem sind da Fehler drinne. Ist wohl bisschen verrutscht :)
Ansonsten, wie gesagt, finde ich das Design sehr anpsrechend.

Ja, wäre nett wenn du mir das mal schicken könntest per PN, danke dir ! :wink:
 
Mensch, da hat sich ja einiges getan!

Zum Thema Fettschreiben: Das geht mit der CSS-Eigenschaft font-weight. Das html-Tag strong ist für sehr wichtige Textabschnitte, die beim Lesen stark betont werden würden. Standardmäßig stellen Browser das fett dar, aber man darf sich weder darauf verlassen noch sollte man es zum Fettschreiben verwenden, wenn der Inhalt nicht als sehr wichtig markiert werden soll.
Überlege also zuerst, warum Du etwas fett dargestellt haben möchtest und zeichne zuerst den Inhalt geeignet aus.

Elemente nur bei eingeschaltetem Javascript anzeigen zu lassen ist recht simpel: Man erzeugt das jeweilige Element mit Javascript. Dazu gibt zig Varianten, das hier sind zwei, die bei den meisten Browsern funktionieren und recht einfach zu handhaben sind:
Code:
document.getElementById("navi-main").innerHTML = "<a id=\"huhuLink\" href=\"javascript:alert('Huhu!');\">Huhu!</a>";
Code:
huhuLink = document.createNode("a");
huhuLink.setAttribute("id", "huhuLink");
huhuLink.href = "javascript:alert('Huhu!');"; //Wenns so nicht geht, dann auch setAttribute
huhuLink.innerHTML = "Huhu!";
document.getElementById("navi-main").appendChild(huhuLink);
Das ganze sollte nach dem Laden des Dokuments ausgeführt werden, also das ganze in die Funktion initGrussLink() packen und mit
Code:
document.onload = initGrussLink();
nach dem Start aufrufen lassen.

Manchmal muss man auch zunächst die Alternative für Browser ohne Javascript ausblenden, das geht dann analog durch überschreiben von innerHTML des Elternelements oder mit removeChild(). Selbstverständlich kann man auch einfach das href-Attribut eines existierenden Links überschreiben oder ein onclick-Event mit return definieren.
Code:
document.getElementById("huhuLink").href = "javascript:alert('Huhu!');";
Code:
document.getElementById("huhuLink").onclick = "alert('Huhu!');return true;";

Sollte erstmal genügend zum erneuten Probieren sein :-)
 
Jo, danke schön! Ich weiß sogar schon, wo ich die JavaScript Methode verwenden werde! :wink: Morgen hab ich ja viel Zeit dazu (Feiertag!!)!


Zum Thema Fettschreiben: Das geht mit der CSS-Eigenschaft font-weight. Das html-Tag strong ist für sehr wichtige Textabschnitte, die beim Lesen stark betont werden würden. Standardmäßig stellen Browser das fett dar, aber man darf sich weder darauf verlassen noch sollte man es zum Fettschreiben verwenden, wenn der Inhalt nicht als sehr wichtig markiert werden soll.
Überlege also zuerst, warum Du etwas fett dargestellt haben möchtest und zeichne zuerst den Inhalt geeignet aus.
Im Grunde habe ich das schon verstanden, aber trotzdem bin ich mir jedes mal unschlüssig, was ich jetzt verwenden soll...
Ist das folgende Beispiel jetzt ein Fall für CSS font-weight oder HTML strong (oder HTML b)? Denn eigtl. ist es ja nicht wichtig, weshalb die "strong-Methode" wegfallen würde, und andererseits möcht ichs auch nicht in ein span oder div Element stecken (viel zu schreiben), damit ichs per CSS formatieren kann.

Code:
Warum darf ein Herzkranker nicht Cola und Bier trinken? - Weil er sonst <b>colabiert</b>.
(das ist einer der Zufallswitze, die ich aus dem Array auslesen lasse)


Gruß
fiedel




EDIT:
Ich probiere jetzt schon die ganze Zeit an diesem JavaScript herum:
Code:
 <script type="text/javascript">
 <!--
 function test() {
 document.getElementById("huhu").innerHTML = "<a id=\"huhuLink\" href=\"javascript:alert('Huhu!');\">Huhu!<\/a>";
 }
 document.onload = test();
 // -->
 </script>
Doch die Funktion wird beim Start nie ausgeführt... nun habe ich das document.onload = test(); einfach mal weggelassen und bei body onload="test()" eingefügt -> funktioniert
Doch trotzdem würde ich gerne wissen, warum die vorherige Variante nicht geklappt hat... weiß da jemand woran das liegen könnte?
Hier könnt ihr's euch genauer ansehen: Browser-Umfrage - Friedrich Schultheiß - WEB-DESIGN TESTGEBIET
 
Zuletzt bearbeitet:
Im Grunde habe ich das schon verstanden, aber trotzdem bin ich mir jedes mal unschlüssig, was ich jetzt verwenden soll...
Ist das folgende Beispiel jetzt ein Fall für CSS font-weight oder HTML strong (oder HTML b)?
Das kommt ja auch immer auf den Einzelfall und auf die Intention des Autors an.
Niemals ist es <b>, weil das Tag das Aussehen macht und keine Semantik beschreibt und aus HTML entfernt wird.

Code:
Warum darf ein Herzkranker nicht Cola und Bier trinken? - Weil er sonst <b>colabiert</b>.
Es kommt drauf an, was Du damit ausdrücken würdest. Am leichtesten ist es IMHO immer, sich das laut vorzulesen und darauf zu achten, wie Du das betonst. Ich würde es auf keinen Fall mit <strong> auszeichnen, weil das mit Sicherheit nicht stark betont wird. Wenn dann überhaupt mit <em>, was nur eine Betonung bedeutet. Man kann den Satz aber auch gänzlich ohne besondere Betonung auf dem Wort "colabiert" vorlesen, dann wäre es ein Fall für CSS, weil das Wort ja keine besondere Bedeutung bekommen soll.

andererseits möcht ichs auch nicht in ein span oder div Element stecken (viel zu schreiben)
In ein span würde ich es stecken, wenn ich es fett (per CSS) machen wollte. In ein <div> macht kein Sinn, weil das ein Block-Element ist. Text ist aber Inline.
"viel zu schreiben" ist jedoch eine - entschuldige - saublöde Begründung für die Verwendung bestimmter Tags :-D

Gruß,
-Efchen
 
Okay dann nehm ich das Tag <em>!

"viel zu schreiben" ist jedoch eine - entschuldige - saublöde Begründung für die Verwendung bestimmter Tags :grin:
:mrgreen: ich meinte, weil ich dem Tag dann extra noch ne Klasse zuordnen muss und die Gänsefüßchen entschärfen(???) müsste (wegen Array)! Aber egal!
 
Ja, und so darfst Du nicht denken. Wenn Du eine Klasse brauchst, weil Du das Element irgendwie unterscheiden musst, dann schreibst Du halt eine Klasse hin. Und wenn Du den Code in PHP erzeugst, wo Du die Gänsefüßchen quoten musst, na und, dann machst Du das eben.
Man tut, was man tun muss.

Natürlich kann man auch anstelle einer Klasse über andere Selektoren ein Element identifizieren. Aber das kommt eben auf den Einzelfall an.

Wenn Du Deinen Spruch z.B. schon in einem p#spruch7 hast, dann kannst Du das span (oder em) darin auch per "p#spruch7 em" (oder span) ansprechen, ohne diesem eine eigene Klasse geben zu müssen.
 
Ich probiere jetzt schon die ganze Zeit an diesem JavaScript herum:
Code:
 <script type="text/javascript">
 <!--
 function test() {
 document.getElementById("huhu").innerHTML = "<a id=\"huhuLink\" href=\"javascript:alert('Huhu!');\">Huhu!<\/a>";
 }
 document.onload = test();
 // -->
 </script>
Doch die Funktion wird beim Start nie ausgeführt... nun habe ich das document.onload = test(); einfach mal weggelassen und bei body onload="test()" eingefügt -> funktioniert
Doch trotzdem würde ich gerne wissen, warum die vorherige Variante nicht geklappt hat... weiß da jemand woran das liegen könnte?
Hier könnt ihr's euch genauer ansehen: Browser-Umfrage - Friedrich Schultheiß - WEB-DESIGN TESTGEBIET

Hmm... da hab ich Dir tatsächlich einen ganz schönen Käse vorgesagt.
Es müsste
Code:
window.onload = test;
heißen. Das hat meines bescheidenen Wissens nach was damit zu tun, ob Du dem onload den Rückgabewert von der Funktion zuweisen willst (mit Klammern), oder ob Du bei onload die Funktion aufrufen willst (ohne Klammern). Habe das ganze mal ausprobiert, damit ich Dir nicht wieder sonen Blödsinn erzähle. Das Experiment hat mein Halbwissen bestätigt.
Code:
<script type="text/javascript">
<!--
function bereitschaft() {
    if(document.getElementById("huhu"))
        alert("bereit");
    else
        alert("nicht bereit");
}
function test() {
    bereitschaft();
    //return new Function("bereitschaft();"); // Probiere mit und ohne diese Zeile
}
window.onload = test; //Probiere mit und ohne Klammern
// -->
</script>
Gruß
Junny
 
Okay, hab mich nochmal an die Sache rangewagt und folgenden Code verwendet:
Code:
 <script type="text/javascript">
  <!--
   function bereitschaft() {
       if(document.getElementById("huhu"))
           alert("bereit");
       else
           alert("nicht bereit");
   }
   window.onload = bereitschaft(); //Probiere mit und ohne Klammern
   // -->
  </script>
Jetzt kam jedoch als Rückgabe "nicht bereit", was also bedeutet, dass das Script zwar ausgeführt, jedoch das Element mit der id "huhu" nicht gefunden wurde. Denn das JavaScript wurde ausgeführt, bevor das Element mit id "huhu" im Fenster geladen wurde.
Es klappt also nur, wenn ich das Script unter das Element setze, in dem es ausgeführt werden soll.


Gibt es da keine Möglichkeit, dass ich das Script in den Head setzen oder auslagern kann?

Gruß
fiedel
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben