Kritik und Verbesserungsvorschläge erwünscht

[Maetzzen]

Hallo zusammen,

ich bin ein Laie, hatte (habe?) keine Ahnung von Websites und deren Aufbau. Mich hat das aber schon immer interessiert, sodass ich mich mal daran versucht habe eine Website ohne diesen Klickerei-Programmen zusammenzustellen.

Ich bin jetzt beinahe 2 Monate hier und habe nun meine erste Test Website hochgeladen.

Wer meine älteren Beiträge ausspäht stellt fest, dass es eine Vereinsseite werden soll, mit ein bisschen Werbung von kleinen Unternehmen aus dem Ort, sowie einem Fotoalbum - nichts großes...

Zum testen habe ich die Seite bei bplaced hochgeladen.

Ich habe meine index.php absichtlich in home.php umbenannt, damit ihr die Ordnerstruktur besser anschauen könnt.
edit: habe ich nicht, das wollte ich euch nicht antun

Wie gesagt, ich hatte/habe keine Ahnung. Ich habe diese Seite nur so geschrieben, dass es funktioniert, deshalb würde ich euch gerne fragen, ob es so wie es ist "in Ordnung" ist oder ob ich etwas richtig schlecht gemacht habe.

Also überwiegend geht es mir um Kritik / Vorschläge an den Quellcode und der Ordnerstruktur.

Freue mich schon mal auf eure Hilfe

Gruß Maetzzen

[Auge]

Hallo

Zum testen habe ich die Seite bei bplaced hochgeladen.

Wie gesagt, ich hatte/habe keine Ahnung. Ich habe diese Seite nur so geschrieben, dass es funktioniert, deshalb würde ich euch gerne fragen, ob es so wie es ist "in Ordnung" ist oder ob ich etwas richtig schlecht gemacht habe.

Also überwiegend geht es mir um Kritik / Vorschläge an den Quellcode und der Ordnerstruktur.

Ich hab' mir nicht alles angeschaut, folgendes ist mir aber sogleich aufgefallen.

1. Das Foto von der Motorradweihe 2015 brauchte auf meinem Desktoprechner etwa 8 Sekunden, bis es vollständig geladen war. Die 1.13 MByte sind mMn grenzwertig.
2. Gleiches gilt für die Hintergrundflammen (?) mit der interesanten Farbwahl. Das Bild ist 1.4 MByte groß.
3. Der Schriftzug des Links zum Impressum im Fuß der Seite ragt rechts aus dem Kasten heraus.
4. Dass der eben genannte Link der einzige auf der Seite ist, der als Overlay realisiert ist, finde ich ein wenig verwirrend. Gibt es dafür einen Grund?
5. Den Link zum Impressum an den Fuß der Seite zu binden, kann unnötig Ärger einbringen. Es gibt Nepper, Schlepper und Bauernfänger, die versuchen, einem eine Abmahnung unterzujubeln, weil der Link zur Anbieterkennung nicht schon beim Öffnen der Seite „erreichbar“ ist. Da wird gerne vorgebracht, dass er nicht mit „Impressum“ benannt ist oder unten nicht gefunden würde, weil man ja erst einmal dorthin scrollen müsste. Es gibt zwar Gerichtsurteile, die solche Ansinnen zurückweisen, aber auch Figuren, die diesen Knall partout nicht hören wollen. Du kannst dir den damit verbundenen Heckmeck von vornherein sparen, wenn du den Link zum Impressum weiter nach oben, also in die Hauptnavigation, rückst.

Tschö, Auge

[Maetzzen]

Ich hab' mir nicht alles angeschaut, folgendes ist mir aber sogleich aufgefallen.

Habe ich auch nicht erwartet, aber danke dass du etwas angeschaut hast :)

Das Foto von der Motorradweihe 2015 brauchte auf meinem Desktoprechner etwa 8 Sekunden, bis es vollständig geladen war. Die 1.13 MByte sind mMn grenzwertig.

Hab ich auch schon bemerkt, die muss ich unbedingt runter skalieren das geht so nicht, bplaced ist aber auch recht langsam, ist ja auch kostenlos.

Gleiches gilt für die Hintergrundflammen (?) mit der interesanten Farbwahl. Das Bild ist 1.4 MByte

Der Schriftzug des Links zum Impressum im Fuß der Seite ragt rechts aus dem Kasten heraus.

Das muss ich ebenfalls anpassen. Ich hab hauptsächlich nur auf meinem 1920 x 1080 Auflösung, Chrome als Browser, geachtet. Bin gerade zu Hause an nem älteren Rechner/Bildschirm, Firefox und seh dass einiges anders dargestellt wird.

Dass der eben genannte Link der einzige auf der Seite ist, der als Overlay realisiert ist, finde ich ein wenig verwirrend. Gibt es dafür einen Grund?

Eigentlich wollte ich das nur mal testen. Die Seite ist ja so zum rumspielen zur Zeit da, deshalb auch in den Fotoalbem ein paar "kleine" und paar "ganz große" Bilder.

Den Link zum Impressum an den Fuß der Seite zu binden, kann unnötig Ärger einbringen. Es gibt Nepper, Schlepper und Bauernfänger, die versuchen, einem eine Abmahnung unterzujubeln, weil der Link zur Anbieterkennung nicht schon beim Öffnen der Seite „erreichbar“ ist. Da wird gerne vorgebracht, dass er nicht mit „Impressum“ benannt ist oder unten nicht gefunden würde, weil man ja erst einmal dorthin scrollen müsste. Es gibt zwar Gerichtsurteile, die solche Ansinnen zurückweisen, aber auch Figuren, die diesen Knall partout nicht hören wollen. Du kannst dir den damit verbundenen Heckmeck von vornherein sparen, wenn du den Link zum Impressum weiter nach oben, also in die Hauptnavigation, rückst.

Danke dir, ich werden den Impressum link dann vermutlich in die Navigationsleiste aufnehmen. Hättest du mir evtl. einen Tipp noch? Bei manchem Browsern/Bildschirm kombinationen die ich jetzt ausprobiert habe kommt es vor, dass die ganze Seite beim verkleinern (strg -) verschoben wird (also float:left funktioniert nicht mehr, da die Bereiche wegen border zu groß sind/ die Bordergröße passt sich nicht an, sondern bleibt eben auf 1px.

[Camping_RIDER]

Aloha ;)

Wie gesagt, ich hatte/habe keine Ahnung. Ich habe diese Seite nur so geschrieben, dass es funktioniert, deshalb würde ich euch gerne fragen, ob es so wie es ist "in Ordnung" ist oder ob ich etwas richtig schlecht gemacht habe.

Also überwiegend geht es mir um Kritik / Vorschläge an den Quellcode und der Ordnerstruktur.

Zuerst: großes Kompliment - mir gefällt die Seite visuell sehr gut, und auch unter der Haube sieht das (mit Verbesserungspotential) schon mal nicht unbrauchbar aus. Auch lieferst du direkt das Online-Beispiel und nennst in deinem Opener alle wichtigen Fakten - da sehen wir hier oft auch anderes ;)

Ich habe mir jetzt mal den Quellcode deiner Startseite vorgenommen. Dabei sind mir folgende Fehler / Verbesserungswürdigkeiten / ungünstige Dinge aufgefallen:

• Deine Navigation steckt zwar semantisch korrekt in einem nav-Element, die Listenpunkte (li) sind aber leider in kein gültiges Listenelement verpackt - nav ersetzt nicht ul oder ol. Du müsstest hier, statt wie bisher <nav><li></li>...</nav> zu <nav><ul><li></li>...</nav> greifen. Dadurch könnten kleine Änderungen im CSS notwendig werden, aber sicher nichts wildes.
• Du verwendest ein Element <sides> und darin die Elemente <left> und <right> - diese drei Elemente gibt es in HTML(5) nicht. Ich würde dir dazu raten, stattdessen für den linken Bereich ein <aside> zu nutzen (das gibt es und das ist das, was du semantisch hier willst), und für den rechten Teil das <main>-Element - denn das ist dafür gedacht, den tatsächlichen Inhalt zu gruppieren, und der steht bei dir innerhalb <right>.
• Dein <main>-Element beinhaltet aktuell nur die Überschriften - die würde ich aber eher als Teil des <header> ansehen, und das <main>-Element um den eigentlichen Seiteninhalt legen (siehe oben)
• Die Dinge, die in deinem <footer> stehen, sind eher keine Überschriften (<h3>), hier wäre wahrscheinlich <p> günstig.
• Der Volltext der Navigation, den du (wahrscheinlich via CSS?) per Klick einblendest, könnte statt durch ein <div> (unsemantisch) durch ein <aside> oder ein <dialog> eingeschlossen sein
• ids sind teils willkürlich vergeben, hier ist es von Vorteil sprechende, auf den Inhalt und nicht auf die Darstellung bezogene ids zu vergeben
• Ob eine Tabelle im Impressum sein muss ist fraglich, sinnvoller wäre wahrscheinlich <dl> (Definitionsliste), das kann man im Zweifelsfall aber lassen (sind halt dann tabellarische Daten mit nur einem Eintrag), was nicht geht sind die <p> in der Tabelle, die ihrem Aussehen nach Überschriften sind - also entweder als entsprechende <th> umgesetzt werden sollten, oder, noch besser, als <h2> o.ä. außerhalb der Tabelle (also die Tabelle, oder ggf. die Definitionsliste, dafür unterbrechen).

Manche dieser Punkte nennt dir auch der Validator.

Zu dem, was @Auge sagte:

Beim Impressum sehe ich das nicht so wild - ich erwarte sein Auftauchen tatsächlich sogar eher am Seitenende, und etwaige Abmahnungen kommen damit zu fast 100% nicht durch; das sollte sicher sein, so wie du es umgesetzt hast. Wenn du dir unsicher bist, kannst du das Impressum in der Navigation zusätzlich verlinken.

Die Hintergrundbilder laden bei mir in angemessener Geschwindigkeit, es schadet aber nie, hier noch zu optimieren.

Grüße,

RIDER

[Maetzzen]

Zuerst: großes Kompliment - mir gefällt die Seite visuell sehr gut, und auch unter der Haube sieht das (mit Verbesserungspotential) schon mal nicht unbrauchbar aus. Auch lieferst du direkt das Online-Beispiel und nennst in deinem Opener alle wichtigen Fakten - da sehen wir hier oft auch anderes ;)

Danke sehr, ich bin auch richtig froh endlich mal meine Seite online präsentieren zu können und nicht nur am lokalen Rechner rumzuklicken. Da fallen einem die Ladehemmungen usw nämlich gar nicht auf und jetzt kann ich auch leichter auf verschiedene Rechner ansehen und vergleichen.

Ich habe mir jetzt mal den Quellcode deiner Startseite vorgenommen. Dabei sind mir folgende Fehler / Verbesserungswürdigkeiten / ungünstige Dinge aufgefallen:

uiuiui so viel :D Find ich super, habe hier erst vor kurzem über main /div usw gelesen, also wie man eine Seite unterteilen kann. <aside> kannte ich jedenfalls noch nicht. Meine Bezeichnungen habe ich willkürlich gewählt, da ich eben keine konkrete Anleitung für einen Aufbau gefunden habe, außer <html><head></head><body></body></html>. Und da es keine Fehler ausgespuckt hat, habe ich das mal so gelassen, auch wenn mir irgendwie klar war, dass das so nur unschön gelöst ist.

Manche dieser Punkte nennt dir auch der Validator.

Den muss ich mal ansehen

Beim Impressum sehe ich das nicht so wild

Hab mir da auch lange gedanken gemacht. Es heißt, es soll mit einem Klick erreichbar sein (ist es ja auch) und dass man maximal 4 Desktop-Seiten nach unten scrollen muss (macht ja mal gar keinen Sinn, weil bei meiner statischen Seite eh bei jedem Bildschirm anders aussieht).

Die Hintergrundbilder laden bei mir in angemessener Geschwindigkeit, es schadet aber nie, hier noch zu optimieren.

s.O. bisher lief alles nur Lokal, ohne Probleme. Das muss ich eben noch mal alles ausprobieren und ggf. ändern

Danke sehr für dein Feedback!

[Matthias Apsel]

Hallo Maetzzen,

Meine Bezeichnungen habe ich willkürlich gewählt, da ich eben keine konkrete Anleitung für einen Aufbau gefunden habe, außer <html><head></head><body></body></html>.

Guckst du: https://wiki.selfhtml.org/wiki/HTML/Tutorials, https://wiki.selfhtml.org/wiki/HTML

Bis demnächst
Matthias

[Auge]

Hallo

Beim Impressum sehe ich das nicht so wild Hab mir da auch lange gedanken gemacht. Es heißt, es soll mit einem Klick erreichbar sein (ist es ja auch) und dass man maximal 4 Desktop-Seiten nach unten scrollen muss (macht ja mal gar keinen Sinn, weil bei meiner statischen Seite eh bei jedem Bildschirm anders aussieht).

Nur der Klarstellung wegen. Es ging mir nicht darum, Panik zu verbreiten. Ich habe ja selbst auf Gerichtsurteile hingewiesen, die den Abmahnern widersprechen. Die Regeln, die du oben aufzählst sind teilweise gesetzlich vorgegeben, teilweise aber erst durch Rechtsprechung zur „gängigen Praxis“ geworden. Irgendein Gericht könnte die auch anders auslegen. Ich wollte dich nur darauf aufmerksam machen, dass es vermeidbar ist, bösartigen Menschen Angriffspunkte zu liefern. Es ging also nur um zukünftig vermeidbaren Aufwand.

Wo keine Angriffsfläche ist, kann dir keiner an den Karren pissen, was zur Folge hat, dass du nichts wegwischen musst.

Tschö, Auge

[Gunnar Bittersmann]

@@Maetzzen

ob es so wie es ist "in Ordnung" ist oder ob ich etwas richtig schlecht gemacht habe.

Die Schrift ist auf meinem Gerät unleserlich klein. Ich denke, dass deine Zielgruppe ähnliche Geräte benutzt und dasselbe Problem hat. Man kann zwar in die Seite reinzoomen, dann geht aber der Überblick verloren. Nein, das ist nicht in Ordnung.

Ethan Marcotte hat da einen interessanten Artikel für dich: Responsive Web Design (deutsche Übersetzung)

Dass das 2 MB große Hintergrundbild (von dem man sowieso kaum was sieht) nicht in Ordnung ist, wurde ja schon gesagt. Auch, was in dafür in Ordnung wäre? Etwa ein Hundertstel der Größe.

Mal in den Quelltext geschaut:

    <meta http-equiv="content-type" content="text/html; charset=utf-8"> <!-- UTF 8, um Umlaute nicht ausschreiben zu müssen -->
    <!-- <meta charset="utf-8"> Bei HTML 5 -->

Du verwendest HTML5, kannst also die Auskommentierung der zweiten Zeile entfernen und die erste restlos entsorgen. Der Kommentar in der ersten Zeile ist sowieso falsch.

Ah, Kommentare:

    <!-- HEADER -->
<header>

Sowas ist Unfug. Schreibe in Kommentare, was nicht aus dem Quelltext ersichtlich ist; nicht das, was sowieso schon dasteht.

LLAP 🖖

[Maetzzen]

Die Schrift ist auf meinem Gerät unleserlich klein.

Ethan Marcotte hat da einen interessanten Artikel für dich: Responsive Web Design (deutsche Übersetzung)

Werde ich mir ansehen, für mich war es aber einfacher erst ein mal eine statische zu bauen. Man bemerkt eben jetzt dass es nur bei mir gut aussieht :s Aber ist auf jedenfall geplant dass ich die dynamischer gestalte.

Dass das 2 MB große Hintergrundbild (von dem man sowieso kaum was sieht) nicht in Ordnung ist, wurde ja schon gesagt. Auch, was in dafür in Ordnung wäre? Etwa ein Hundertstel der Größe.

Wird geändert

Mal in den Quelltext geschaut:

    <meta http-equiv="content-type" content="text/html; charset=utf-8"> <!-- UTF 8, um Umlaute nicht ausschreiben zu müssen -->
    <!-- <meta charset="utf-8"> Bei HTML 5 -->

Du verwendest HTML5, kannst also die Auskommentierung der zweiten Zeile entfernen und die erste restlos entsorgen. Der Kommentar in der ersten Zeile ist sowieso falsch.

Ich hatte keine Ahnung was das bedeutet sondern habe dies nur damals auf ein Kommentar von dir übernommen, dass man Umlaute nicht verst&uuml,mmeln muss ;)

Ah, Kommentare:

    <!-- HEADER -->
<header>

Sowas ist Unfug. Schreibe in Kommentare, was nicht aus dem Quelltext ersichtlich ist; nicht das, was sowieso schon dasteht.

Das hab ich anfangs genutzt um besser in dem für mich riesigen haufen quellcode klarzukommen. Man sollte aber auf eine andere Art übersicht bewahren.. Kommt ebenfalls noch weg, braucht ja nur unnötig platz.

Ich danke auch dir!

[Gunnar Bittersmann]

@@Maetzzen

Man bemerkt eben jetzt dass es nur bei mir gut aussieht :s

Das ist schon mal eine wichtige Erkenntnis beim Erstellen von Webseiten: dass die bei jedem anders aussehen.

für mich war es aber einfacher erst ein mal eine statische zu bauen. […] Aber ist auf jedenfall geplant dass ich die dynamischer gestalte.

Die Begriffe „statisch“ und „dynamisch“ beziehen sich üblicherweise auf den Inhalt, nicht auf die Darstellung. Statische Inhalte sind bspw. Kontaktformular, Impressum usw., die sich über einen längeren Zeitraum kaum ändern. Dynamische Inhalte kommen oft aus einer Datenbank: aktuelle Nachrichten, aktuelle Angebote usw.

Ich hatte keine Ahnung was das bedeutet

Kannste nachlesen.

sondern habe dies nur damals auf ein Kommentar von dir übernommen, dass man Umlaute nicht verst&uuml,mmeln muss ;)

Das ist aber nicht nur bei Unicode/UTF-8 so, sondern galt auch schon bei Latin-1/ISO 8859-1. Also schon ewig.

LLAP 🖖