Benötige Design- und Codekritik

[ezzemm]

Hallo zusammen!

Ich bastle gerade für einen Bekannten eine Homepage zusammen. Die Startseite habe ich soweit fertig (mit ein paar Textplatzhaltern).
Könntet ihr mal reinschauen, ob ich im Design oder im Code irgendwelche No-Go´s drin habe. Man wird ja wenn man selber dran werkelt etwas betriebsblind ;)

Hier die URL: http://www.fliesenwolle.de/test/index.html
Dankeschön, ezzemm

[Misda]

Bei mir unter Opera ist die Seite eeeeewig lang, da solltest mal checken warum das so ist. Ansonsten find ich das Design sehr ansprechend.

[stav0815]

Das Design ist cool und vorallendingen auch passend. Übersichtlich ist es auch noch! :uup:

Bei mir gibts keine Probleme, weder mit IE7 noch FireFox. Nicely.

[Sk4tz]

fein gemacht - hab nichts zu bemängeln :)

[rotalever]

Sehr schön. Wirklich.

Als kleine Verbesserungen:
Rechts im Submenu (Zertifikate,..) könnte man die Trennstriche etwas dezenter gestalten.
Der Hintergrundverlauf ist etwas abgestuft. Vermutlich liegt das an der Kompression. Ich würde hier eine höhere Qualität, also eine PNG Grafik verwenden.
Diese kleine Galerie mit diesem Flow sieht ganz nett aus. Ich bin mir nur nicht sicher ob der "normale" Internetuser das zu bedienen weiß. Ich würde da eher so etwas vorschlagen: http://www.phatfusion.net/imagemenu/ aber das ist wohl auch Geschmackssache.
Die runden Ecken sind nicht Kantengeglättet. Würdest du das noch machen, so wirkt es noch etwas professioneller.

[darph]

Beim Coverflow passiert nyx, wenn ich drauf klicke. Gehört das so?

Edith, die Sau sagt: This Page Is Valid HTML 4.01 Strict!
Die erste in diesem Forum vorgestellte Seite! (y)

[DanMan]

Grundsätzlich gut.

- Die Links im rechten Untermenü heben sich mir nicht genug vom BG ab.
- Die Bilder oben würde ich mit einem 1px breiten Strich klar voneinander trennen, und nicht ineinanderlaufen lassen. (Sieht dann eher wie eine Rolle mit Bildern drauf aus).
- Der grüne Hintergrund beim Inhalt gefällt mir nicht so. Würde weiß bevorzugen (und dann evtl. den body-BG auf was grünliches auslaufen lassen).
- Den obersten Verlauf im Grünen würd ich auch weglassen (den untersten dann vllt. auch), damit die Bilder eher so aussehen, als würden sie sich kreisförmig vom flachen BG erheben).
- Seite ist bei mir im Opera auch ewig lang.
- wozu position:static explizit angeben? Warum nicht "* {margin: 0px; padding: 0px;}"? Die hast du nämlich oft doppelt.

[/nörgel]

[KinGGoliAth]

macht einen guten eindruck.

- kannst du die seite bzw den text horizontal skalieren? ich bin in 1600x1200 unterwegs und bei der seite habe ich links und rechts endlos ungenutzten platz.
- ausserdem würde ich die kleine slideshow so machen, dass man nicht klicken oder nach so einem knopf greifen muss sondern die liste automatisch scrollt sobald man den mauszeiger an den linken oder rechten rand bzw in deren nähe bewegt.
€: und das menü an der seite sollte noch etwas weiter vom text abgegrenzt werden.

[ezzemm]

Hallo zusammen! Vielen Dank für eure hilfreichen Tipps.

Das Imagemenu- ist wirklich deutlich besser als das Imageflow-Script. Sieht besser aus, macht weniger Stress mit der Positionierung in der Seite und nutzt eh die gleiche Codebasis wie das Accordion rechts. Und mit ein bischen brüten über Javascript-Tutorials habe ich sogar herausgefunden, wie man anstelle eines Alerts einen Link bei Klick einbaut ;) Die Ladeprobs mit Opera sind nun hoffentlich auch weg.

Die Trennstriche vom Accordeon sind nun ein bischen heller und mit Verlauf, ich hoffe das kommt besser. Den Hintergrundverlauf hab ich als PNG ausprobiert was aber nichts bringt (Kann es sein daß der IE6 die Farben von PNGs falsch darstellt? Die Hintergrundfarbe passt da nicht mehr zum Ende des Verlaufs, mit GIFs schon) wegen der Abstufung; ich schätze eher daß manche TFTs mit den Farben nicht klar kommen. Da muß ich mal noch rumprobieren.

Wie glätte ich eigentlich am geschicktesten die Kanten? Dadurch daß ich ja nur nach innen "malen" kann sieht es, wenn ich den Verlauf in den Ecken sanfter verlaufen lasse, zu dick aus :confused:

Ein bischen mehr Innenabstand habe ich noch verwendet. Das Hellgrün als Seitenhintergrund lasse ich aber drin; ich habe Grau und Weiß probiert, das sieht aber auch nicht so prall aus. Mit dem Verlauf im Header bin ich auch nicht zufrieden, aber der Wolle wollte das so ;)
Eine dynamische Anpassung der Seitenbreite hebe ich mir aber für ein anderes Projekt auf; das ist doch eher Hardcore, insbesondere wenn man nur wenig Content hat das man präsentieren will/kann. Aber das zu lösen mit einer Stylesheet-Generierung via PHP, das ist sicher ne nette Herausforderung ;)

Hier der aktuelle Status des Projekts: http://www.fliesenwolle.de/test2/index.php

Viele Grüße, ezzemm

[rotalever]

Den Hintergrundverlauf hab ich als PNG ausprobiert was aber nichts bringt (Kann es sein daß der IE6 die Farben von PNGs falsch darstellt? Die Hintergrundfarbe passt da nicht mehr zum Ende des Verlaufs, mit GIFs schon) wegen der Abstufung; ich schätze eher daß manche TFTs mit den Farben nicht klar kommen. Da muß ich mal noch rumprobieren.

Wie glätte ich eigentlich am geschicktesten die Kanten? Dadurch daß ich ja nur nach innen "malen" kann sieht es, wenn ich den Verlauf in den Ecken sanfter verlaufen lasse, zu dick aus :confused:

Ich hoffe du hast den Verlauf nochmal neu generiert, einfach nur als PNG speichern bringt nichts ;)

Das mit den Ecken ist in der Tat schon was Tricky, da da ja noch der Verlauf drin ist. Möglicherweise hilft dir der hier: http://mierendo.com/software/rounded_css_boxes/ mit E2F2E2 als Vordergrundfarbe und 020306 (oben) und C2C2C2 (unten) als Hintergrundfarbe sowie 444444 als Linienfarbe.

[clerfayt]

[...]
(Kann es sein daß der IE6 die Farben von PNGs falsch darstellt? Die Hintergrundfarbe passt da nicht mehr zum Ende des Verlaufs, mit GIFs schon) wegen der Abstufung; ich schätze eher daß manche TFTs mit den Farben nicht klar kommen. Da muß ich mal noch rumprobieren.
[...]


Der IE verbaselt da was mit einem gAMA-Wert im PNG und stellt es deshalb dunkler dar. Weitere Infos und Lösungsmöglichkeiten hier:
3953-fixing-png-color-problem-ie.html (http://forums.biorust.com/tutorial-submission/3953-fixing-png-color-problem-ie.html)

Grüezi,
C.

[ezzemm]

Vielen Dank für eure Hilfe. Dem Wolle gefällt sie sehr gut :)

http://www.fliesenwolle.de/

[RealHotzenplotZ]

Vielen Dank für eure Hilfe. Dem Wolle gefällt sie sehr gut :)

http://www.fliesenwolle.de/

schaut gut aus, nur hätte ich den Backround auf Fixed eingestellt! Das nervt wenn der mitscrollt! =)

[DanMan]

Vielen Dank für eure Hilfe. Dem Wolle gefällt sie sehr gut :)

http://www.fliesenwolle.de/
Joa, haste fein gemacht. :comfort:

[LordZed]

Vielen Dank für eure Hilfe. Dem Wolle gefällt sie sehr gut :)

http://www.fliesenwolle.de/
Ist gut :) Aber Background wirklich fixed. Schau dir dafür einfach mal in irgendwelchen CSS-Referenzen (selfHTML oder so) den background-parameter an, da kannst du's einstellen. Oder ist das Projekt durch!?
Ich mein ist natürlich auch die Frage, wie's dem Kunden besser gefällt! ;)

[Gast]

Beim Coverflow passiert nyx, wenn ich drauf klicke. Gehört das so?

Edith, die Sau sagt:
Die erste in diesem Forum vorgestellte Seite! (y)

Stimmt so nicht, hier wurde sogar mal eine xhtml 1.1 valid vorgetstellt.

[greg]

Gefällt mir auch gut, bis auf die Tatsache das ein völlig veralteter HTML Standard verwendet wurde aber dieser immerhin konform :)

[DanMan]

Gefällt mir auch gut, bis auf die Tatsache das ein völlig veralteter HTML Standard verwendet wurde aber dieser immerhin konform :)
Was heißt hier veraltet? Wichtig ist, dass der Code fehlerfrei ist. HTML 4 ist nach wie vor aktuell. Was soll er mit XHTML (ich nehm' mal an, dass du darauf abgezielt hast)?

[rotalever]

Hauptsache es sieht in jedem Browser gut aus. Der Rest ist doch vollkommen egal. Niemand interessiert es, ob deine page xhtml-konform ist. Ok fast niemand...

[Coda]

Gefällt mir auch gut, bis auf die Tatsache das ein völlig veralteter HTML Standard verwendet wurde aber dieser immerhin konform :)
HTML 4.0 strict ist NICHT veraltet. Da geht mir echt die Hutschnur hoch.

Es gibt keinen Browser der XHTML korrekt verarbeitet, es ist schädlich heutzutage XHTML als Doctype auszugeben, vor allem wenn man es dann noch als text/html sendet. Die Browser von heute interpretieren XHTML dann alle einfach als normales HTML.

Und das wird wohl auch so bleiben, weil XHTML ist eigentlich nur korrekt zu verarbeiten, wenn die komplette Seite geladen wurde und dann überprüft wird ob es wirklich valides XML ist. Das wird nicht mehr passieren, weil es im Netz schon zig Mio. Seiten gibt die sich eben als XHTML ausgeben aber keines sind.

Was veraltet wäre sind missbilligte Elemente wie <b>, <i>, <br> usw. oder Tabellen-Layouts. Und das sehe ich auf der Seite nicht. Insofern an den Thread-Starter: Genau richtig gemacht, bravo.

Mehr Infos: http://hixie.ch/advocacy/xhtml, http://codinginparadise.org/weblog/2005/08/xhtml-considered-harmful.html

Ich hoffe dass der Blödsinn mit HTML 5.0 endlich wieder aufhört.

[MadMan2k]

Mehr Infos: http://hixie.ch/advocacy/xhtml, http://codinginparadise.org/weblog/2005/08/xhtml-considered-harmful.html
sämtliche punkte auf der seite sind schwachsinn. man kann konformes xhtml schneller rendern als html und die browser sind mittlerweile auch so weit.
das mit dem MIME typ, kann man über ein browserweiche umschiffen und der ie8 sollte es auch so können.

HTML4 ist damit nicht automatisch veraltet, aber die interoperabilität mit svg und mathml ist nunmal hast du nur mit XHTML.

[mbee]

sämtliche punkte auf der seite sind schwachsinn. man kann konformes xhtml schneller rendern als html und die browser sind mittlerweile auch so weit.
das mit dem MIME typ, kann man über ein browserweiche umschiffen und der ie8 sollte es auch so können.

HTML4 ist damit nicht automatisch veraltet, aber die interoperabilität mit svg und mathml ist nunmal hast du nur mit XHTML.
Vollste Zustimmung, das wirkt zumindest auf der zweiten verlinkten Seite teilweise sehr stark übertrieben und wie ein Rant eines "Ewiggestrigen":
Da wird sich z.B. über document.write und fehlende iFrames ausgelassen (die in Transitional aber erlaubt sind, etc.)...
Natürlich kann semantisches HTML immer noch sinnvoll sein und Strict bei XHTML zu verwenden, ist momentan wirklich Schwachsinn. Die dort erwähnten Nachteile, waren allerdings größtenteils auf den alten IE zurückzuführen und mittlerweile kann man mit Transitional eigentlich sehr gut arbeiten.
Natürlich sollte man auch validieren, indem die Seiten wirklich als application/xhtml+xml ausgeliefert werden und nur für die entsprechenden Browser den Mime-Type anpassen. Bei komplexerem CSS wie z.B. rein CSS-basierten Klappmenüs, etc. kommt man heutzutage sowieso immer noch nicht um eine Browserweiche oder zumindest conditional comments herum.

[DanMan]

Wer hätte gedacht, dass ich das mal schreibe, aber ich gebe Coda hier recht. XHTML ist quasi schon tot, es haben bloß noch nicht alle gemerkt.

Was bringt mir "die interoperabilität mit svg und mathml"? Wenn ich MathML auf meiner Seite brauche, ok. Aber bei nicht völlig banalen SVGs macht es mehr Sinn sie nach wie vor außzulagern, damit sie vom Browser gecached werden können.

Ich habs hier schon oft gepostet (auch den ersten Link von Coda): XHTML Strict ohne application-MIME Typ ist komplett am Thema vorbei. Letztendlich macht der immernoch wichtige IE6 die Verwendung von XHTML zu aufwändig, wenn nicht praktisch unmöglich.