Design und Code bewerten (EDITOR)

[francesco]

Laut W3C sind beide Methoden erlaubt (...)

Es geht nicht darum, ob es erlaubt ist oder nicht. Die Überlegung ist ja folgende: Es geht um das Aussehen deiner Website in verschiedenen Ausgabemedien. Deswegen ist es m. M. n. logischer, diese Angabe im CSS zu definieren und nicht im HTML-Code (siehe auch 5 CSS Tips Every Web Developer Should Know).

Hab ich anfangs auch gedacht, aber so hat man eine bessere Kontrolle über die Styles. Mit der Zeit wirst du merken, dass es so sinnvoller ist.

Soll das ein Witz sein? Der Großteil deiner Stylesheets ist wenige Zeilen lang. Für Übersicht und Struktur kannst du doch Kommentare im CSS verwenden.

Momentan ja, die Metaangaben werden noch überarbeitet.

Dacht ich's mir doch.

Vermutlich auf Kosten der Qualität, oder?

Eben nicht, das ist ja das Gute daran. :-) Aber das hättest du auch herausfinden können, wenn du dem Link gefolgt wärst.

Sie schaden aber auch nicht ;)

Wenn du den Artikel gelesen hättest, den ich zusätzlich verlinkt habe, wärst du anderer Meinung.

 

[_Thor_]

Es geht nicht darum, ob es erlaubt ist oder nicht. Die Überlegung ist ja folgende: Es geht um das Aussehen deiner Website in verschiedenen Ausgabemedien. Deswegen ist es m. M. n. logischer, diese Angabe im CSS zu definieren und nicht im HTML-Code (siehe auch 5 CSS Tips Every Web Developer Should Know).

Lässt sich drüber nachdenken.

Soll das ein Witz sein? Der Großteil deiner Stylesheets ist wenige Zeilen lang. Für Übersicht und Struktur kannst du doch Kommentare im CSS verwenden.

Habe ich anfangs gemacht, bin dann aber dann dazu übergegangen, mehrere Stylesheets zu verwenden und werde auch dabei bleiben.

Eben nicht, das ist ja das Gute daran. :-) Aber das hättest du auch herausfinden können, wenn du dem Link gefolgt wärst.

Habs getestet, bringt bei dem größten Image gerade mal 3KB, dafür mache ich mir den Aufwand nicht.

Für sehr große Grafiken vielleicht sinnvoll, aber nicht für meine.

Ja, die Accesskeys fliegen wieder raus.

 

[Ishmael]

Zu den Flaggen: Was macht z.B. ein Österreicher? Oder ein Schweizer?
Oder ein US-Amerikaner, oder ein Schotte. Schreib lieber den Namen der Sprache in der Sprache hin, das ist dann eindeutig. Das ist aber alles nicht neu: Flaggen als Sprachsymbol – Dummheit oder Beleidigung? | Gregor Möllring


Bist du dir sicher, dass die Accesskeys nicht schaden können? Es gibt kaum sichere Tasten, die von keinem Programm vorbelegt sind als Shortcuts.

WATS.ca - web accessibility technical services | Using Accesskeys - Is it worth it?

Eine durchdachte Struktur, hier und da ein Skiplink macht IMHO jeden Accesskey überflüssig. Die Gefahr, dass er selber zur Barriere wird ist mir zu hoch, als dass es die "Vorteile" aufwiegt.

 

[francesco]

Habe ich anfangs gemacht, bin dann aber dann dazu übergegangen, mehrere Stylesheets zu verwenden und werde auch dabei bleiben.

Aus welchen Grund? Sechs zusätzliche HTTP-Requests, damit du's ein bisschen übersichtlicher hast, obwohl du die gleiche Übersicht mit Kommentaren im CSS auch erreichen könntest?

Habs getestet, bringt bei dem größten Image gerade mal 3KB

Es geht nicht darum, ob man 3 KB oder 300 KB einspart, sondern, dass du überhaupt etwas einsparst.

dafür mache ich mir den Aufwand nicht.

Der Aufwand besteht darin die "gesmushten" Bilder mit einem einzigen Klick herunterzuladen, das war's. Bei mehreren Bildern packt er dir sogar alle Dateien in eine ZIP-Datei. Einfacher geht's nicht.

Aber muss jeder selbst entscheiden, was er macht. Wollte nur Tipps/Anregungen geben.

 

[_Thor_]

Aus welchen Grund? Sechs zusätzliche HTTP-Requests, damit du's ein bisschen übersichtlicher hast, obwohl du die gleiche Übersicht mit Kommentaren im CSS auch erreichen könntest?

Ja!
Ausserdem kann ich so für jede Seite festlegen, welche CSS-Dateien geladen werden sollen und welche nicht. So kann ich auch das Aussehen jeder Seite verändern, indem ich z.B. nur eine andere menu.css einbinde, statt der globalen Datei.

Soll der Content mal anders aussehen, brauche ich nur eine andere content.css einbinden, wodurch die Redundanz verringert wird, denn bei deiner Methode, hättest du dann schon 3 große Dateien, in denen zu 90% das gleiche steht.

Es geht nicht darum, ob man 3 KB oder 300 KB einspart, sondern, dass du überhaupt etwas einsparst.

Der Aufwand besteht darin die "gesmushten" Bilder mit einem einzigen Klick herunterzuladen, das war's. Bei mehreren Bildern packt er dir sogar alle Dateien in eine ZIP-Datei. Einfacher geht's nicht.

Aber muss jeder selbst entscheiden, was er macht. Wollte nur Tipps/Anregungen geben.

Die habe ich auch aufgenommen, aber ich gehe nicht soweit, jedes überflüssige Byte zu suchen und zu vermeiden.

 

[Efchen]

Ausserdem kann ich so für jede Seite festlegen, welche CSS-Dateien geladen werden sollen und welche nicht. So kann ich auch das Aussehen jeder Seite verändern, indem ich z.B. nur eine andere menu.css einbinde, statt der globalen Datei.

Tatsache ist aber, dass das alles, auch das jetzt hier genannte, die Ladezeit erhöht. Wenn Du alles in einem Stylesheet hast, wird das Teil einmal geladen und dann gecached. Hast Du unterschiedliche Menü-Stylesheets für verschiedene Seiten, müssen all diese Dateien erstmal geladen werden. Befinden sie sich alle in einer Datei, werden alle Informationen nur einmal geladen.

Die habe ich auch aufgenommen, aber ich gehe nicht soweit, jedes überflüssige Byte zu suchen und zu vermeiden.

Das sehe ich auch so. Deswegen ist auch das mit den mehreren Stylesheets durchaus okay. Ich kann das voll verstehen, auch wenn ich es nicht so mache :-)

 

[francesco]

Ja!
Ausserdem kann ich so für jede Seite festlegen, welche CSS-Dateien geladen werden sollen und welche nicht. So kann ich auch das Aussehen jeder Seite verändern, indem ich z.B. nur eine andere menu.css einbinde, statt der globalen Datei.

Soll der Content mal anders aussehen, brauche ich nur eine andere content.css einbinden, wodurch die Redundanz verringert wird, denn bei deiner Methode, hättest du dann schon 3 große Dateien, in denen zu 90% das gleiche steht.

Deine CSS-Dateien sind alles andere als groß. Außerdem ist es in jedem Fall performanter, wenn deine Besucher sich eine etwas größere CSS-Datei herunterladen (die dann für die nachfolgenden Seiten sowieso gecached wird), als sieben einzelne, kleinere.

Wenige HTTP-Requests sind für die Performance ein grundlegender und entscheidender Faktor.

Außerdem ist es aus Sicht der Wartbarkeit, d. h. auch aus deiner, Sicht besser, nur eine einzige CSS-Datei verwalten zu müssen. So hast du alles an einem Platz und musst nicht, wenn du schnell mal etwas an dem Menü verändern willst, erst die enstprechende Datei suchen und öffnen.

Das sehe ich auch so. Deswegen ist auch das mit den mehreren Stylesheets durchaus okay.

Bei den Stylesheets handelt es sich aber nicht um einige überflüssige Bytes, sondern um sechs überflüssige HTTP-Requests. Kleiner Unterschied.

 

[_Thor_]

Tatsache ist aber, dass das alles, auch das jetzt hier genannte, die Ladezeit erhöht. Wenn Du alles in einem Stylesheet hast, wird das Teil einmal geladen und dann gecached. Hast Du unterschiedliche Menü-Stylesheets für verschiedene Seiten, müssen all diese Dateien erstmal geladen werden. Befinden sie sich alle in einer Datei, werden alle Informationen nur einmal geladen.

Ich denke, die paar Millisekunden hat der Besucher noch über :)

Das sehe ich auch so. Deswegen ist auch das mit den mehreren Stylesheets durchaus okay. Ich kann das voll verstehen, auch wenn ich es nicht so mache :-)

Momentan gefällt mir diese Methode eben besser.

Deine CSS-Dateien sind alles andere als groß. Außerdem ist es in jedem Fall performanter, wenn deine Besucher sich eine etwas größere CSS-Datei herunterladen (die dann für die nachfolgenden Seiten sowieso gecached wird), als sieben einzelne, kleinere.

Auch die 7 einzelnen werden gecached und für mich steht hier die Wartbarkeit im Vordergrund, welche für mich deutlich größer ist, wenn ich nicht erst hunderte von Zeilen durchsuchen muss, um die richtige Stelle zu finde.

Wenige HTTP-Requests sind für die Performance ein grundlegender und entscheidender Faktor.

Das ist richtig, aber ich denke nicht, dass es hier noch einen spürbaren Unterschied machen würde.

Außerdem ist es aus Sicht der Wartbarkeit, d. h. auch aus deiner, Sicht besser, nur eine einzige CSS-Datei verwalten zu müssen. So hast du alles an einem Platz und musst nicht, wenn du schnell mal etwas an dem Menü verändern willst, erst die enstprechende Datei suchen und öffnen.

Die Dateien liegen alle in einem Ordner, ich muss nur die öffnen, an der ich etwas ändern will. Habe ich eine große Datei, muss ich in dieser erst wieder die Stelle finden, an der es definiert worden ist. Ist für mich kein Vorteil.

Bei den Stylesheets handelt es sich aber nicht um einige überflüssige Bytes, sondern um sechs überflüssige HTTP-Requests. Kleiner Unterschied.

Richtig, einer dauert ca. 50ms. Das ist wohl vertretbar.

 

[francesco]

Ich denke, die paar Millisekunden hat der Besucher noch über.

Klar hat er die. Die Frage ist nur, ob du ihm diese unnötigen Millisekunden aufbürden willst.

Auch die 7 einzelnen werden gecached

Beim ersten Besuch muss sich der Besucher sieben CSS-Dateien herunterladen. Darum geht es.

wenn ich nicht erst hunderte von Zeilen durchsuchen muss

Wie gut, dass das bei dir nicht der Fall ist.

Habe ich eine große Datei, muss ich in dieser erst wieder die Stelle finden, an der es definiert worden ist. Ist für mich kein Vorteil.

Wenn das Dokument gut strukturiert und von dir erstellt worden ist, dürftest du dich doch (vor allen Dingen auch bei der Größe) in deinem CSS-Dokument soweit auskennen, dass du weist, wo was steht.

Wenn du dich mit der anderen Methode besser tust, ist das ja ok. Den einzigen Nachteil dadurch haben deine Besucher und letztendlich geht's ja um die.

Richtig, einer dauert ca. 50ms. Das ist wohl vertretbar.

Amazon hat mal im Zuge einer Performance- und Benutzererfahrungs-Studie ihre Website absichtlich um 100 Millisekunden langsamer gemacht. Daraufhin ging der Absatz um 4 % zurück.

 

[_Thor_]

Klar hat er die. Die Frage ist nur, ob du ihm diese unnötigen Millisekunden aufbürden willst.

Sobald sich jemand über zu lange Ladezeiten beschwert, werde ich drüber nachdenken.

Beim ersten Besuch muss sich der Besucher sieben CSS-Dateien herunterladen. Darum geht es.

Hättest du es gemerkt, wenn du dir den Quellcode nicht angesehen hättest? Ich denke nicht.

Wie gut, dass das bei dir nicht der Fall ist.

Ohne print.css kommt ich auf 516 Zeilen. Definitiv zu viel, um es in einer Datei zu haben.

Wenn das Dokument gut strukturiert und von dir erstellt worden ist, dürftest du dich doch (vor allen Dingen auch bei der Größe) in deinem CSS-Dokument soweit auskennen, dass du weist, wo was steht.

Ja, aber hier geht es nicht nur um mich, sondern auch um andere Mitarbeiter, die Änderungen vornehmen und die sind nicht alle so fit in CSS, dass sie in 500 Zeilen genau die richtige Stelle finden. Da sind einzelne Dateien deutlich besser.

Wenn du dich mit der anderen Methode besser tust, ist das ja ok. Den einzigen Nachteil dadurch haben deine Besucher und letztendlich geht's ja um die.

Nochmal die Frage, hättest du es, ohne in den Code zu gucken gemerkt, dass hier mehrere Dateien geladen werden?

Amazon hat mal im Zuge einer Performance- und Benutzererfahrungs-Studie ihre Website absichtlich um 100 Millisekunden langsamer gemacht. Daraufhin ging der Absatz um 4 % zurück.

Wenn ich die Besucherzahlen von Amazon hätte, würde ich mir darüber auch Gedanken machen, aber hier geht es um ein EU Projekt und die Besucher in einem Monat kann man wohl an 10 Fingern abzählen.

Vielleicht steigert sich der Absatz von Amazon ja auch, wenn sie ihre Seite mal valide und semantisch korrekt erstellen ;)

[Invalid] Markup Validation of http://www.amazon.de/ - W3C Markup Validator

 

[Efchen]

Sobald sich jemand über zu lange Ladezeiten beschwert, werde ich drüber nachdenken.

Nicht, dass ich Deiner Meinung widersprechen will, aber Du weißt sicher auch, dass sich die allerwenigsten Nutzer beschweren, wenn ihnen etwas nicht passt, sondern sie gehen einfach und kommen nie wieder... :-)

 

[_Thor_]

Nicht, dass ich Deiner Meinung widersprechen will, aber Du weißt sicher auch, dass sich die allerwenigsten Nutzer beschweren, wenn ihnen etwas nicht passt, sondern sie gehen einfach und kommen nie wieder... :-)

Ja, das ist natürlich bekannt.

Aber so, wie das aussieht, hat wohl keiner hier Probleme mit zu langen Ladezeiten. Ist vielleicht irgendjemand noch im Besitz eines 56K Modems, mit dem man das mal testen könnte?

Und mal nebenbei bemerkt werden laut Firebug auf der Startseite 85KB geladen in ca. 400ms. Amazon braucht bei mir fast 3 sec. Alles ohne Cache.

 

[francesco]

Wenn ich die Besucherzahlen von Amazon hätte, würde ich mir darüber auch Gedanken machen, aber hier geht es um ein EU Projekt und die Besucher in einem Monat kann man wohl an 10 Fingern abzählen.

Das hat ja weniger mit den Besucherzahlen zu tun. Der Vergleich sollte nur zeigen, dass man Leute schon mit zusätzlich 100 Millisekunden vergraulen kann.

Ja, aber hier geht es nicht nur um mich, sondern auch um andere Mitarbeiter, die Änderungen vornehmen und die sind nicht alle so fit in CSS, dass sie in 500 Zeilen genau die richtige Stelle finden. Da sind einzelne Dateien deutlich besser.

Das ist natürlich ein gutes Argument für die Aufteilung. :-)

Und mal nebenbei bemerkt werden laut Firebug auf der Startseite 85KB geladen in ca. 400ms. Amazon braucht bei mir fast 3 sec. Alles ohne Cache.

Es geht doch nicht darum, sich mit anderen Seiten zu vergleichen, sondern deinen Besuchern die schnellstmögliche Aufbauzeit der Website zu gewährleisten.

 

[_Thor_]

Das hat ja weniger mit den Besucherzahlen zu tun. Der Vergleich sollte nur zeigen, dass man Leute schon mit zusätzlich 100 Millisekunden vergraulen kann.

Wobei da noch zu Beweisen wäre, dass es auch wirklich an den 100ms gelegen hat und nicht einfach nur eine normale Schwankung war.

Das ist natürlich ein gutes Argument für die Aufteilung. :-)

Ein sehr gutes, finde ich :)

Es geht doch nicht darum, sich mit anderen Seiten zu vergleichen, sondern deinen Besuchern die schnellstmögliche Aufbauzeit der Website zu gewährleisten.

Ich weiß, und ich denke es würde keinem auffallen, wenn es 350ms und nicht 400ms wären.

 

[francesco]

Ich weiß, und ich denke es würde keinem auffallen, wenn es 350ms und nicht 400ms wären.

Das stimmt natürlich.

Aber wieso unterhalten wir uns dann überhaupt über Performance, wenn es eh total egal ist, ob's 350ms oder 400 ms oder 600 ms sind?

Mir geht es bei solchen Sachen um's Prinzip. Wenn etwas schneller gemacht werden kann und nicht mit anderen Dingen wie Wartbarkeit, etc. kollidiert, dann mach ich es aus. Der Großteil der Benutzer merkt es nicht. Aber der ein oder andere, der evtl. nicht die schnellste Internetverbindung hat, schon. Und ich habe am Ende die Gewissheit, meinen Besuchern das Beste geliefert zu haben.

 

[_Thor_]

Das stimmt natürlich.

Aber wieso unterhalten wir uns dann überhaupt über Performance, wenn es eh total egal ist, ob's 350ms oder 400 ms oder 600 ms sind?

Du hast mit der Performance angefangen ;) und dann hab ich dir nur versucht zu verdeutlichen, warum ich lieber die minimal längere Ladezeit in Kauf nehme und mein CSS in mehrere Dateien auslagere.

Mir geht es bei solchen Sachen um's Prinzip. Wenn etwas schneller gemacht werden kann und nicht mit anderen Dingen wie Wartbarkeit, etc. kollidiert, dann mach ich es aus. Der Großteil der Benutzer merkt es nicht. Aber der ein oder andere, der evtl. nicht die schnellste Internetverbindung hat, schon. Und ich habe am Ende die Gewissheit, meinen Besuchern das Beste geliefert zu haben.

Grundsätzlich sehe ich das genau so, nur bei den CSS-Dateien ist für mich die Wartbarkeit wichtiger und der minimale Zeitverlust zu vernachlässigen.