Spacelapse.net - Magical Milkyway Timelapse Videos [EDITOR]

[Passi077]

Hallo Leute,

ich habe soeben meine neue Website fertig gestellt, und möchte diese nun gerne von Euch unter die Lupe nehmen lassen.
Die Themen der Website sind Astronomie und Fotografie, sowie speziell Zeitraffervideos der Milchstraße.

Bitte bewertet hier den HTML, CSS und JS Code. Für Design, Layout und Inhalt möchte im Showcase Forum später einen eigenen Thread erstellen.

Bis auf den Einsatz von jQuery ist alles aus eigener Hand enstanden. Ich habe die Seite nun einmal recht gründlich durchgetestet, und mir sind keine Fehler mehr aufgefallen. Aber vielleicht findet Ihr ja noch welche ;)

Wenn Ihr mögt, könnt Ihr natürlich auch gerne gleich den ein oder anderen Kommentar hinterlassen, damit es dort nicht mehr so leer ist..

http://www.spacelapse.net

Ich freue mich auf Eure Anmerkungen, Kritik, Lob!

Viele Grüße
Pascal

 

[JensB]

Eine sehr faszinierende Seite! Die Zeitraffervideos sind der Hammer.

Ich würde die Seite ein bisschen aufhellen, die Konturen der Einzelelemente sind etwas schwach.

 

[Icy]

Erstmal: Finde vor allem die Videos auch sehr faszinierend. Interessante Seite und optisch zum Thema passend, wie ich finde.

Nun zum Code: Der ist valide; sogar strict, das ist schonmal gut. Von der Semantik habe ich auch schon Schlechteres gesehen, das sieht auch ganz gut aus. Allerdings solltest du aufpassen, dass du nicht in einen div-Wahnsinn verfällst und um alles nochmal einen Container packst. Oftmals brauch mal den nämlich nicht (:

MfG Icy

 

[mermshaus]

Zusätzliche Rahmenelemente erhöhen aber die Flexibilität bei etwaigen Änderungen des Darstellungs-Themes. So muss dann unter Umständen nichts mehr am HTML-Code verändert werden, sondern wirklich nur das CSS ausgetauscht werden, um eine völlig unterschiedliche Darstellung zu erreichen.

PS: Zur Seite übrigens auch Daumen hoch. Die ist richtig klasse.

 

[ingoS]

Kleine Anmerkung im Voraus: Ich bin mir nicht so ganz sicher, ob es sinnvoll ist, eine fertige Seite noch mal getrennt im Showcase vorzustellen. Die Erfahrung zeigt, dass User hier häufig die Wünsche zum Bewertungsrahmen nicht lesen oder sie ignorieren und in beiden Kategorien zu beidem kommentieren. Im Showcase sind Kommentare konkret zum vorliegenden Code nicht angebracht, hier im Websitecheck hingegen schwer zu vermeiden. Wenn du aber eine strikte Einhaltung wünschst, kannst du gerne darum bitten; die Unterstützung der Mods hättest du. :)


Zum Code der Seite:

Allgemein sehr schön schlank, strukturiert, valide und hauptsächlich semantisch nachvollziehbar. Sieht man zwar immer häufiger, aber immer noch zu häufig das Gegenteil. Deswegen erst mal ein Lob dafür.


Jetzt noch ein bisschen Kritik. Das wird nach mehr aussehen als es ist, weil ich eben gerne genau erläutere, was ich meine und warum:

Wie Icy schon anmerkte, läufst du schnell Gefahr, monströse div-Konstruktionen zu bauen, wo sie nicht unbedingt notwendig sind. Hier den Ausschnitt

<div id="headernavigation">
 <ul id="header_navigation">
  <li>[...]</li>
  <li>[...]</li>
 </ul>
</div>

kann ich z.B. kaum nach vollziehen. div ist ein Element, welches dazu dient, Elemente zu gruppieren, die zusammen gehören. Diese Aufgabe übernimmt hier aber schon ul. Eigentlich bläht das div hier deinen Code nur auf. Es scheint auch keine konkrete gestalterische Aufgabe zu übernehmen, die nicht ebenso gut ul bekommen könnte.
Ich bin jetzt nicht jeden einzelnen Fall durchgegangen, wo viele divs geschachtelt waren, aber du kannst bestimmt noch ein paar einsparen. ;)
@mermshaus: Da gebe ich dir prinzipiell Recht, aber <div><ul><li></li></ul></div> ist so ein Klassiker, bei dem man schon drei Sorten variabler grafischer Elemente über-/aneinander haben müsste, um ihn zu rechtfertigen. Vor allem, weil es hier ja auch noch die Hauptnavigation direkt unter dem Seitenkopf ist.

Etwas irritierend finde ich die Tatsache, dass der Header, welcher optisch ganz oben auf deiner Seite steht, im Code ziemlich weit unten kommt. Wo jetzt "Kontakt" und "Impressum" stehen, ist ja eigentlich egal (wahrscheinlich ist im Dokument unten dafür sogar sinnvoller), aber du bindest deine oberste Überschrift quasi zweimal ein: Zum Sehen auf der Seite (die Grafik) und für den, der in den Code guckt. Da erschließt sich mir der Sinn so gar nicht.
Ich rieche SEO, aber du kannst ja auch einfach eine Image-Replacement-Methode nutzen. Den Text der h1-Überschrift machst du ja anscheinend so oder so per CSS unsichtbar. Es würde wieder ein bisschen Code sparen (neben dem img auch noch ein div).

Ansonsten sorgt noch die Art und Weise, wie du deine Seite zentrierst, dafür, dass sie sich beim Verkleinern des Fensters über den linken Rand hinausschiebt, während der Scrollbalken aber ganz links "am Anschlag" bleibt. Das geht natürlich gar nicht. Netbooks und internetfähige mobile Endgeräte (sprich: Smartphones, PDAs) gibts schon eine Weile, inzwischen kann man sie aufgrund ihrer Verbreitung kaum noch ignorieren.
Deine Seite verschwindet schon z.B. bei 1024x768 (nach wie vor zu berücksichtigen!) und angezeigter Vista-Sidebar nach links. Jetzt noch links irgendeine Browser-Leiste aufklappen und man kann gar nichts mehr damit anfangen. Möglicherweise reicht auch schon die Sidebar, ich kanns jetzt nicht ausprobieren.

Das waren echt nur drei Punkte, sieht bloß so viel aus. :mrgreen:

 

[Passi077]

Hallo,

erst mal vielen Dank für Eure Kommentare!

Eine sehr faszinierende Seite! Die Zeitraffervideos sind der Hammer.
Ich würde die Seite ein bisschen aufhellen, die Konturen der Einzelelemente sind etwas schwach.

Vielen Dank!
Ja, die sehr dunkle Farbgebung ist einer der Punkte an denen ich noch kaue. Ich habe schon ein paar Entwürfe in Photoshop erstellt, in denen alles etwas heller ist. Aber so richtig anfreunden kann ich mich mit ihnen irgendwie nicht.
Das absolute Schwarz im Hintergrund ist jedenfalls sehr wichtig für die Kontraststeigerung bei den Videos und den Bildern, und wird daher auf jeden Fall erhalten bleiben.

Kleine Anmerkung im Voraus: Ich bin mir nicht so ganz sicher, ob es sinnvoll ist, eine fertige Seite noch mal getrennt im Showcase vorzustellen. Die Erfahrung zeigt, dass User hier häufig die Wünsche zum Bewertungsrahmen nicht lesen oder sie ignorieren und in beiden Kategorien zu beidem kommentieren. Im Showcase sind Kommentare konkret zum vorliegenden Code nicht angebracht, hier im Websitecheck hingegen schwer zu vermeiden. Wenn du aber eine strikte Einhaltung wünschst, kannst du gerne darum bitten; die Unterstützung der Mods hättest du. :)

Hallo Alexander,

alles klar, ich werde mal beobachten, wie sich der Thread entwickelt. Bisher gibt es ja kaum Anmerkungen zum Layout, so wie ich es mir eigentlich auch gewünscht habe ;)

Zum Code der Seite:

Allgemein sehr schön schlank, strukturiert, valide und hauptsächlich semantisch nachvollziehbar. Sieht man zwar immer häufiger, aber immer noch zu häufig das Gegenteil. Deswegen erst mal ein Lob dafür.

Danke, das höre ich gerne.

Wie Icy schon anmerkte, läufst du schnell Gefahr, monströse div-Konstruktionen zu bauen, wo sie nicht unbedingt notwendig sind. Hier den Ausschnitt

<div id="headernavigation">
 <ul id="header_navigation">
  <li>[...]</li>
  <li>[...]</li>
 </ul>
</div>

kann ich z.B. kaum nach vollziehen. div ist ein Element, welches dazu dient, Elemente zu gruppieren, die zusammen gehören. Diese Aufgabe übernimmt hier aber schon ul. Eigentlich bläht das div hier deinen Code nur auf. Es scheint auch keine konkrete gestalterische Aufgabe zu übernehmen, die nicht ebenso gut ul bekommen könnte.

Allgemein versuche ich natürlich, unnötige divs zu vermeiden. Das headernavigation-div ist tatsächlich völlig überflüssig, da habt Ihr natürlich vollkommen Recht. Das ist mir nicht aufgefallen. Ich werde den Code nochmal auf solche Stellen überprüfen, da ich selber schon bemüht bin, den Code so schlank zu halten wie möglich.

Etwas irritierend finde ich die Tatsache, dass der Header, welcher optisch ganz oben auf deiner Seite steht, im Code ziemlich weit unten kommt. Wo jetzt "Kontakt" und "Impressum" stehen, ist ja eigentlich egal (wahrscheinlich ist im Dokument unten dafür sogar sinnvoller), aber du bindest deine oberste Überschrift quasi zweimal ein: Zum Sehen auf der Seite (die Grafik) und für den, der in den Code guckt. Da erschließt sich mir der Sinn so gar nicht.
Ich rieche SEO, aber du kannst ja auch einfach eine Image-Replacement-Methode nutzen. Den Text der h1-Überschrift machst du ja anscheinend so oder so per CSS unsichtbar. Es würde wieder ein bisschen Code sparen (neben dem img auch noch ein div).

Ja, da riechst Du richtig. Ich habe auf verschiedenen SEO Seiten gelesen, dass es sinnvoll ist, den eigentlichen Content weiter oben im Code zu positionieren, und Navigationsleiten etc. lieber ans Ende/nach den Content zu packen. Und das habe ich hier umgesetzt, ich weiß natürlich nicht wie sinnvoll das nun tatsächlich ist, und ob das SEO technisch wirklich Vorteile bringt..
Die <h1> Überschriften mache ich eigentlich nicht unsichtbar, oder ich sehe gerade nicht, was Du genau meinst. Auch verstehe ich nicht genau, was Du mit dem doppelten Einbinden meinst. Das Logo-Bild hat an sich ja nur einen alt/title Tag mit der "Hauptüberschrift" ("Spacelapse.net - Magical Milkyway Timelapse Videos"). Eine weitere, identische Überschrift gibt es im Dokument nicht.. vielleicht kannst Du nochmal kurz erläutern, was Du genau meinst.

Ansonsten sorgt noch die Art und Weise, wie du deine Seite zentrierst, dafür, dass sie sich beim Verkleinern des Fensters über den linken Rand hinausschiebt, während der Scrollbalken aber ganz links "am Anschlag" bleibt. Das geht natürlich gar nicht. Netbooks und internetfähige mobile Endgeräte (sprich: Smartphones, PDAs) gibts schon eine Weile, inzwischen kann man sie aufgrund ihrer Verbreitung kaum noch ignorieren.
Deine Seite verschwindet schon z.B. bei 1024x768 (nach wie vor zu berücksichtigen!) und angezeigter Vista-Sidebar nach links. Jetzt noch links irgendeine Browser-Leiste aufklappen und man kann gar nichts mehr damit anfangen. Möglicherweise reicht auch schon die Sidebar, ich kanns jetzt nicht ausprobieren.

Da hast Du vollkommen Recht. Das ist mir gar nicht aufgefallen und das gefällt mir auch überhaupt nicht. Spontan fällt mir als Strategie nur ein alles-übergreifendes Div ein, welches eine min-width bekommt. Gibt es eine bessere Möglichkeit, dieses Problem zu beheben?

Ich Danke Euch allen für Eure Bemühung!

Viele Grüße
Pascal

 

[ingoS]

Ja, da riechst Du richtig. Ich habe auf verschiedenen SEO Seiten gelesen, dass es sinnvoll ist, den eigentlichen Content weiter oben im Code zu positionieren, und Navigationsleiten etc. lieber ans Ende/nach den Content zu packen. Und das habe ich hier umgesetzt, ich weiß natürlich nicht wie sinnvoll das nun tatsächlich ist, und ob das SEO technisch wirklich Vorteile bringt..

Das klingt echt extrem merkwürdig, weil ich es immer wahrscheinlich fand, dass Suchmaschinen versuchen, die Navigation als solche zu erkennen und diese natürlich nicht im Code hinter dem Rest vom Inhalt "vermuten".

Die <h1> Überschriften mache ich eigentlich nicht unsichtbar, oder ich sehe gerade nicht, was Du genau meinst.

Das war ein Irrtum meinerseits. Ich hatte nicht bemerkt, dass du beide Navigationen (Kontakt/Impressum und die Hauptnavigation) nach unten verlagerst. Daher hatte ich geglaubt, dass das h1 ganz am Anfang des bodys nicht zu sehen ist, weil es sonst vor der Navigation auftauchen müsste. Jetzt hab ichs gefunden. :mrgreen:
Dann muss ich allerdings sagen, dass diese graue Überschrift zwischen Inhalt und Navigation für mich eher h2 als h1 ist. h1 wäre hingegen eher das Logo (inhaltlich also der Alternativtext, der übrigens vorbildlich ist [viele schreiben da nicht mal was rein oder einfach nur "Logo"]). Das alles unter der Voraussetzung, dass du das Logo im Code wieder nach oben setzt.
Aus SEO-Sicht könnte dir der h2/h1-Wechsel auch entgegenkommen, weil Google ja angeblich h2 und h3 wichtiger sind als h1. Ob das immer noch so ist, weiß ich nicht.

Auch verstehe ich nicht genau, was Du mit dem doppelten Einbinden meinst. Das Logo-Bild hat an sich ja nur einen alt/title Tag mit der "Hauptüberschrift" ("Spacelapse.net - Magical Milkyway Timelapse Videos"). Eine weitere, identische Überschrift gibt es im Dokument nicht.. vielleicht kannst Du nochmal kurz erläutern, was Du genau meinst.

Damit meinte ich, dass dein Logo (aus meiner Sicht die eigentliche Hauptüberschrift) einen Alternativtext hat, der quasi Überschrift-Text sein sollte und deine h1 noch einen Text. So, wie es jetzt ist, hast du natürlich Recht, dass es keine identischen Überschriften gibt. Das hatte ich außerdem unter der beschriebenen Fehlannahme geschrieben, dass man deine h1 nicht sieht, aber die fände ich ja, wie schon geschrieben, als h2 besser.

Das ist mir gar nicht aufgefallen und das gefällt mir auch überhaupt nicht. Spontan fällt mir als Strategie nur ein alles-übergreifendes Div ein, welches eine min-width bekommt. Gibt es eine bessere Möglichkeit, dieses Problem zu beheben?

Du hättest das ganze Problem mit der verschwindenden linken Seite gar nicht, wenn du anders zentrieren würdest. Aaaber die Möglichkeit, margin: 0 auto; zu nutzen, hast du mit dem ganzen position: absolute; ja ausgehebelt... Diese Konstruktion:

left: 50%;
margin-left: -444px;
width: 888px;

wäre so:

margin: 0 auto;
width: 888px;

viel eleganter. Deine #contentbox ist immerhin schon ein alles umspannendes div. Vielleicht kannst du alles, was du gerade absolut positionierst, relativ positionieren, sofern es sich direkt in der contentbox befindet. Das stimmt jetzt z.B. für #navigation ul nicht, aber irgendwie sehe ich da auch nicht, warum es nicht genauso mit entsprechend eingesetztem margin und/oder padding gehen würde.

Ich Danke Euch allen für Eure Bemühung!l

Dafür bist du ja hier. ;)

Gruß

 

[mr.mordan]

die videos sind einfach klasse... sehr interessante seite. werd sie mir direkt mal abspeichern

 

[Passi077]

Hi Leute,

ich habe endlich wieder Zeit gefunden um an meiner Seite ein bisschen zu basteln.

die videos sind einfach klasse... sehr interessante seite. werd sie mir direkt mal abspeichern

Danke, freut mich sehr wenn sie Dir gefallen :)!

Ich habe nun noch ein paar Kleinigkeiten verändert:

• Auf mehrfache Anfrage hin gibt es jetzt einen Newsletter ;)
• Slideshow startet nicht mehr automatisch
• Bildinformationen können mit dem Info Knopf nun ein- und auch wieder ausgeblendet werden (vorher nur Einblenden möglich)
• Für User ohne JS und für SEO habe ich die "URL Navigation" verbessert: Man kann nun beispielsweise, wenn man sich auf der Seite Milchstrasse_Zeitraffer_Videos/Roque_de_los_Muchachos_La_Palma.html befindet, den hinteren Teil (*.html) löschen, und man landet dann auf der entsprechenden Übersichtsseite der Videos
• (Hoffentlich) alle unnötigen DIVs entfernt

Damit meinte ich, dass dein Logo (aus meiner Sicht die eigentliche Hauptüberschrift) einen Alternativtext hat, der quasi Überschrift-Text sein sollte und deine h1 noch einen Text. So, wie es jetzt ist, hast du natürlich Recht, dass es keine identischen Überschriften gibt. Das hatte ich außerdem unter der beschriebenen Fehlannahme geschrieben, dass man deine h1 nicht sieht, aber die fände ich ja, wie schon geschrieben, als h2 besser.

Hm. Ich überlege mir das mal, ob ich den Header im Quelltext nach oben ziehe und die Überschriftenhierarchie entsprechend anpasse. Ist das SEO technisch nicht schlecht, wenn alle meine Seiten die selbe <h1> Überschrift haben?

Du hättest das ganze Problem mit der verschwindenden linken Seite gar nicht, wenn du anders zentrieren würdest. Aaaber die Möglichkeit, margin: 0 auto; zu nutzen, hast du mit dem ganzen position: absolute; ja ausgehebelt...

Wieso, die margin:0 auto Methode ist doch super geeignet! Habe ich nun einfach auf mein alles umschließendes DIV angewendet, alle dort enthaltenen Elemente positionieren sich dann ja relativ zu diesem äußeren DIV. Und dabei ist es dann egal, ob das äußere DIV absolute oder relative positioniert ist :)
-> Problem scheint behoben, vielen Dank!

Nochmal vielen Dank für Eure Kommentare und Anregungen, wenn Euch noch etwas auffällt könnt Ihr mir das gerne mitteilen.

Eine Frage zur SEO hätte ich aber noch:
Gibt man momentan bei Google "spacelapse" ein, so findet Google meine Seite auf erster Position (kein Wunder), allerdings die englische Version. Obwohl ich "Seiten auf Deutsch" als Suchoption angewählt habe. Außerdem werden Unterseiten dann teilweise auf Deutsch angezeigt, also ein kompletter Mix aus der deutschen und englischen Version. Das gefällt mir natürlich gar nicht.
Wieso ist das so, wie kann ich das verbessern?

Viele Grüße
Pascal