Soziale Schülerwebsite verbessert?

Question

Hallo,Ich habe for einigen Tage schonmal nach Vorschlägen für die Website von unserem Schülerunternehmen gefragt und viele Gute Verbebesserungsvorschläge erhalten. Diese habe ich weitgehend umgesetzt. Ich habe viele Animationen entfernt und alle anderen weniger Stark gemacht. Ich hab einige Grafik Bugs behoben. Außerdem habe ich die Produktliste durch eine Platzhaltermeldung ersetzt. So kommt es zu keiner Verwirrung solange wir noch nichts wirklich verkaufen.Wie Ihr wisst handelt es sich um ein Projekt aus dem Politik Projektkurs 10te Klasse. Wir dürfen als Schüler ein eigenes Unternehmen gründen und echtes Geld verdienen. Wir haben uns dazu entschieden alle unsere Einahmen für soziale Zwecke zu spenden.Das ist die aktuelle Version unserer Website: SoCloth - Das Soziale Schülerunternehmen!Bitte sagt einmal kurs ob die Website besser geworten ist und ob man noch was verbessern kann.

regex9 · Accepted Answer

Die vorherige Version der Webseite habe ich nicht gesehen, daher kann ich keinen Vergleich aufstellen. Zu dem derzeitigen Zustand kann ich jedoch einiges schreiben.

Design

Aktuell besteht die Seite noch aus zu vielen Komponenten, die im Stil/Aussehen zu stark variieren. Mal verwendest du eine Umrahmung, dann wieder einen ausgefüllten Container. Mal verwendest du einen hellen Grünton, dann wieder ein Türkis.

Ich würde die Stimmung aus dem Footer übernehmen. Das heißt:

Die drei Hauptfarben sind #112211 (Hintergrund), #228B22 (Alternativhintergrund) und ein Weißton (Schriftfarbe). Letzteren könnte man evt. noch etwas abschwächen (z.B. in Richtung #FFFFEE). Für die Hover-Effekte auf den Buttons passt die #006400 schon gut, sie sollte aber auch für alle Buttons gelten (nimm am besten den Mithelfen-Button als Vorlage, der ist gut so, wie er ist).
Die volle Breite wird genutzt. Verzichte auf dicke, abgerundete Rahmen mit starken Zwischenkontrasten. Wenn, sollte eine Rahmen eher dünn sein und den Übergang farblich schwach unterstützen. In so einem Fall wie der Produktplatzhalterbox solltest du definitiv auf einen Rahmen verzichten. Sehr leicht abgerundete Ecken (max. 3px) kannst du für Bildelemente nutzen,

Teile deine Inhalte zudem in maximal drei Spalten auf. Dein Textcontainer direkt über dem Footer ist auf seiner Zeile zu überfüllt. Die Texte werden sichtbar gequetscht. Würde die vierte Spalte in eine neue Zeile rücken (dann zentriert), gäbe es mehr Luft. Zusätzlich würde ich die Texte und Überschriften dort nach links ausrichten und einen Spaltenabstand von mindestens 10px setzen. Danach wirkt der Inhalt deutlich besser geordnet.

Bei der Hauptnavigation sollten die Links im Verhältnis zur Seitenbreite tatsächlich zentriert werden. Im einfachsten Fall nimmst du dafür einfach das Logo aus dem Textfluss (position: absolute). Die Schriftgröße würde ich auf jeden Fall verringern (Richtung 20px oder kleiner) und die Navigationsleiste mit all ihren Elementen beim Scrollen nicht verändern/verkleinern. Auch das Pulsieren des Logos halte ich für zu unruhig (bei einem höheren Animationsintervall wird es allerdings ebenfalls nicht besser), daher würde ich diesen Effekt weglassen.

Bezüglich des Hintergrunds könnte man sogar überlegen, ob man nicht für den gesamten Header (Navigation + Stage) das Stagebild verwendet. Immerhin ist der Kontrast (Logo, Schrift - Bild) groß genug. Wenn der Nutzer herunterscrollt, müsste die Navigation die Hintergrundfarbe (#112211) setzen.

Bei der Stage würde ich außerdem die Schriftgrößen anpassen. Derzeit wirkt der Text zu wuchtig. Die Überschrift mit einer Schriftdicke von 700 und der Textabschnitt darunter mit einer Schriftgröße von ~25px verschafft mehr Luft.

Für die Ausrichtung der Inhalte auf mobilen Endgeräten (Portraitmodus) müsstest du noch einmal schauen. Das Dreispaltenlayout kann man auf ein Einspaltenlayout bringen. Selbst bei der Hauptnavigation reicht es sicherlich aus, die Menüpunkte einfach vertikal untereinander aufzulisten.

Inhalt

Die Seite benötigt definitiv eine Rechtschreibüberprüfung. Beispielhaft für die Startseite kann ich ja einmal ein paar Fälle aufzählen, die mir direkt ins Auge fallen:

Entdecken
Über uns
Hallo, wir (...)
(...) Zwecken spenden!
sponsern möchten (...)
(...) in unserer Welt (...)
0€ gespendet
0 Produkte verkauft

Bei dem Quiz ist die Antwort auf die Frage, was Klimaschutz ist, falsch (bzw. die Frage sollte anders formuliert werden). Unter Klimaschutz werden Maßnahmen verstanden, die zum einen der durch den Menschen verursachten globalen Erwärmung entgegenwirken sollen und zum anderen einer Verhinderung/Abmilderung der Folgen dienen. Die Senkung der Treibhausgase (z.B. durch Umstellung von Industrie und Landwirtschaft) ist also nur ein Aspekt. Ein anderer ist beispielsweise der Erhalt wichtiger Ökosysteme oder der Katastrophenschutz für Tiere (z.B. bei Waldbränden, Ölunfällen, u.ä.).

Ebenso würde ich bei der Frage, was Umweltschutz ist, ein Veto einlegen, denn es geht, wie es der Begriff schon sagt, um den Schutz der Umwelt (um gesundheitliche Schäden für den Menschen zu vermeiden). Die Natur ist im Verhältnis dazu nur ein Teil. Die Umwelt beinhaltet auch vom Menschen geschaffene Objekte (Gebäude, Gegenstände).

Ob es noch weitere Fehler gibt, habe ich nicht geprüft.

Eine wichtige Information, die mir auf der Seite fehlt, ist die genaue Benennung, wo Spenden/Einnahmen denn nun hineinfließen. Vielleicht an Tierschutzverbände, vielleicht an ein Kinderhilfswerk, vielleicht an Organisationen, die sich dafür einsetzen, Arbeitsbedingungen in Niedriglohnländern zu verbessern? Listet am besten die konkreten Organisationen auf.

Im Impressum wiederum habe ich mich etwas über diesen Abschnitt:

Verantwortlich für die Animationen:

gewundert, denn sie liefert für mich als Besucher der Webseite keinen Mehrwert. Oder sollte ich ausschließlich diese E-Mail-Adresse anschreiben, sollte ich Probleme mit den Animationen auf der Webseite haben? 😋

Ich würde den Namen einfach bei der Auflistung darüber als zweiten Stichpunkt ergänzen (XXX (Animationen)) und die E-Mail-Adresse weglassen, sofern die Person nicht als allgemein technischer Ansprechpartner kontaktiert werden kann.

Beachte außerdem, dass der Hinweis zu Cookies in deinem Impressum nicht ausreicht. Du bindest auf der Startseite ein Bild via Bing ein. Die Suchmaschine lädt in diesem Zuge einen Cookie, der nicht als essentiell zu werten ist. Für den Moment wäre es am einfachsten, das Bild direkt auf dem Webserver zu speichern (sofern du überhaupt die Bildrechte dafür hast, andernfalls muss es ganz raus). Für die Zukunft, wenn noch weitere Dienstleister (Discord, etc.) eingebunden werden, wirst du um einen Cookie-Banner o.ä. sicherlich nicht herumkommen.

Implementation

In der Implementation (HTML/CSS/JS) finde ich leider ziemlich viele Fehler sowie Lösungen, die nicht gerade schön sind. Ich liste folgend einmal all das auf, was mir aufgefallen ist. Tipps sind hierbei ebenso enthalten.

1) Wenn ihr auf der Seite Produkte anbietet, solltet ihr euch im Vorfeld auch Gedanken darüber machen, in welche Gebiete ihr liefert. Wenn ihr euch nur auf Deutschland beschränken wollt, wäre es auch passend, die Sprache der Seite (lang-Attribut) explizit auf de-DE zu setzen.

2) Die Angabe der Zeichenkodierung kann verkürzt werden.

<meta charset="utf-8">

Das entspricht auch dem HTML5-Style.

3) Auf die Angabe

shrink-to-fit=no

für den Viewport würde ich vorerst verzichten. Oder gibt es bei deiner Seite einen speziellen Grund dafür?

4) Diese meta-Angabe

<meta http-equiv="X-UA-Compatible" content="ie=edge">

ist eine Renderinganweisung für alte IE-Browser (< IE 11). Da diese Browser offiziell eh nicht mehr unterstützt werden, ist sie überflüssig.

5) Der style-Tag in deinem main-Element gehört in den head. Generell würde ich allerdings alle CSS-Regeln (Inline-Styles, Regeln in style-Tags) in eine CSS-Datei verlagern. Das erleichtert dir nicht zuletzt die Wartung.

Während du in deiner Entwicklungsumgebung zwischen verschiedenen CSS-Dateien (header, style, footer) unterscheidest, wäre es günstig, sie in der Produktivumgebung zu einer Datei (all.css) minified zu verbinden.

6) Du verwendest Tagnamen (monitor, headerPlaceholder, centered), die es gar nicht gibt. Ersetze sie gegen Elemente, die es tatsächlich gibt (section, article, div, nav, ...).

Bei dem oberen Teil der Seite (Hauptnavigation + Stage) könntest du dir ja überlegen, sie beide nicht in einem header-Element einzuordnen. Die Navigation sollte in ein nav-Element.

<header>
  <nav class="main-navigation">
    <div class="logo"><!-- ... --></div>
    <ul class="links">
      <li><a href="/explore">Entdecken</a>
      <li><a href="/products">Unsere Produkte</a>
      <li><a href="/about_us">Über uns</a>
    </ul>
  </nav>
  <div class="stage-container"><!-- ... --></div>
</header>

7) Der Wert des alt-Attributs deines Logos ist inhaltlich nicht richtig. Da der Link drumherum keinen Linktext hat, übernimmt das alt-Attribut des Bilds an dieser Stelle diese Funktion. Um die Linkfunktion nun eindeutig zu beschreiben, wäre ein Wert wie "Gehe zu Startseite" passend.

Würde das Logo nicht innerhalb eines Links stehen (das trifft somit auf das Logo im Footer zu), müsste der Wert des alt-Attribut leer bleiben.

<img alt height="30" loading="lazy" src="..." width="70">

Ein Logo ist dekorativer Natur, es beschreibt keinen aktiven Inhalt.

Zusätzlich würde ich empfehlen, Bildern stets ein height- und width-Attribut zu geben. Anhand deren Werte kann der Browser beim Laden der Webseite das Bildgrößenverhältnis berechnen und besser einkalkulieren, wie viel Platz er reservieren muss.

8) Für eine einfachere Entwicklung und Wartung würde ich empfehlen, einheitliche Namenskonventionen zu verfolgen. Derzeit hast du einen Mix (TextCentered, startInfoContainer, footer-content).

9) An verschiedenen Stellen habe ich dieses Element entdeckt:

<div style="width: 100%; height: 30px; "></div>

Offensichtlich missbrauchst du es als Abstandhalter. Besser wäre es, stattdessen mit margin-top/margin-bottom/padding-top/padding-bottom (CSS) zu arbeiten.

10) Deinen Bildern fehlt jeweils stets ein alt-Attribut. Wie schon oben erwähnt, gilt es anschließend zu bewerten, inwiefern sie für den Inhalt der Seite wichtig sind. Das heißt, ob sie Inhalt vermitteln, der textuell ersetzt werden müsste, sollten sie nicht geladen werden können. Wenn sie keinen Inhalt vermitteln, bleibt der Wert des Attributs leer.

11) Das script-Element gehört in den body.

12) Im Skript hast du zweimal einen Tippfehler eingebaut. Es fehlt jeweils das t für height.

document.querySelector("headerPlaceholder").heigh =

13) Auf der Unterseite explore hast du einen Endtag für einen Paragraph, dem kein Starttag zugeordnet werden kann. Du solltest dazu wissen, dass ein Paragraph automatisch geschlossen wird, sobald er beispielsweise auf ein ul-, ol- oder div-Element (grob: anderes Blockelement) stößt.

Das heißt, du müsstest deinen Textabschnitt etwas umformen. Die einzelnen Texte außerhalb der Listen könnte man ja ruhig dennoch in Paragraphen einordnen:

<div style="font-size: 16px;">
  <p>Herzlich willkommen (...)</p>
  <ul><!-- ... --></ul>
  <p>Ihre Unterstützung (...)</p>
  <ol><!-- ... --></ol>
  <p>Auf unserer (...)
    <em>Gemeinsam (...)</em>
  </p>
  <div class="product buttons"><!-- ... --></div>
</div>

Auf den Seiten für Impressum und Datenschutz findet man diesen Fehler nochmals.

14) Auf der Unterseite explore hast du eine leere Überschrift (.question_header). Wenn der Container nicht benötigt wird, würde ich ihn komplett entfernen oder zumindest auskommentieren.

15) In der Browserkonsole werden Fehlermeldungen aus der spa.js geloggt. Offensichtlich versucht sie Bilder als Links zu verwerten und kommt mit Links ohne href-Attribut nicht zurecht.

Bei Links mit onclick-Attribut würde ich grundsätzlich hinterfragen, ob ein Link an der Stelle die richtige Wahl ist. Wenn auf Inhalt (auf der Seite oder extern) referenziert wird, ja. Wenn lediglich eine Aktion getriggert werden soll, ist ein Button passender.

<button onclick="doSomething()" type="button">...</button>

Für Links ohne Zieladresse würde ich dennoch das href-Attribut nutzen:

<a href="javascript:doSomething();return false;">...</a>

So kann der Link auch wie gewohnt via Tastatur angesteuert werden, ohne dass man dafür das tabindex-Attribut setzen muss.

7) Der Wert des alt-Attributs deines Logos ist inhaltlich nicht richtig. Da der Link drumherum keinen Linktext hat, übernimmt das alt-Attribut des Bilds an dieser Stelle diese Funktion. Um die Linkfunktion nun eindeutig zu beschreiben, wäre ein Wert wie "Gehe zu Startseite" passend. Würde das Logo nicht innerhalb eines Links stehen (das trifft somit auf das Logo im Footer zu), müsste der Wert des alt-Attribut leer bleiben.

Ein Logo ist dekorativer Natur, es beschreibt keinen aktiven Inhalt. Zusätzlich würde ich empfehlen, Bildern stets ein height- und width-Attribut zu geben. Anhand deren Werte kann der Browser beim Laden der Webseite das Bildgrößenverhältnis berechnen und besser einkalkulieren, wie viel Platz er reservieren muss. 8) Für eine einfachere Entwicklung und Wartung würde ich empfehlen, einheitliche Namenskonventionen zu verfolgen. Derzeit hast du einen Mix (TextCentered, startInfoContainer, footer-content). 9) An verschiedenen Stellen habe ich dieses Element entdeckt:

Offensichtlich missbrauchst du es als Abstandhalter. Besser wäre es, stattdessen mit margin-top/margin-bottom/padding-top/padding-bottom (CSS) zu arbeiten. 10) Deinen Bildern fehlt jeweils stets ein alt-Attribut. Wie schon oben erwähnt, gilt es anschließend zu bewerten, inwiefern sie für den Inhalt der Seite wichtig sind. Das heißt, ob sie Inhalt vermitteln, der textuell ersetzt werden müsste, sollten sie nicht geladen werden können. Wenn sie keinen Inhalt vermitteln, bleibt der Wert des Attributs leer. 11) Das script-Element gehört in den body. 12) Im Skript hast du zweimal einen Tippfehler eingebaut. Es fehlt jeweils das t für height. document.querySelector("headerPlaceholder").heigh = 13) Auf der Unterseite explore hast du einen Endtag für einen Paragraph, dem kein Starttag zugeordnet werden kann. Du solltest dazu wissen, dass ein Paragraph automatisch geschlossen wird, sobald er beispielsweise auf ein ul-, ol- oder div-Element (grob: anderes Blockelement) stößt. Das heißt, du müsstest deinen Textabschnitt etwas umformen. Die einzelnen Texte außerhalb der Listen könnte man ja ruhig dennoch in Paragraphen einordnen:

Herzlich willkommen (...)

Ihre Unterstützung (...)

Auf unserer (...) Gemeinsam (...)

Auf den Seiten für Impressum und Datenschutz findet man diesen Fehler nochmals. 14) Auf der Unterseite explore hast du eine leere Überschrift (.question_header). Wenn der Container nicht benötigt wird, würde ich ihn komplett entfernen oder zumindest auskommentieren. 15) In der Browserkonsole werden Fehlermeldungen aus der spa.js geloggt. Offensichtlich versucht sie Bilder als Links zu verwerten und kommt mit Links ohne href-Attribut nicht zurecht. Bei Links mit onclick-Attribut würde ich grundsätzlich hinterfragen, ob ein Link an der Stelle die richtige Wahl ist. Wenn auf Inhalt (auf der Seite oder extern) referenziert wird, ja. Wenn lediglich eine Aktion getriggert werden soll, ist ein Button passender. Für Links ohne Zieladresse würde ich dennoch das href-Attribut nutzen: ... So kann der Link auch wie gewohnt via Tastatur angesteuert werden, ohne dass man dafür das tabindex-Attribut setzen muss.

MoonGirl915 · Answer

Ich fände es cool, wenn man im letzten Kasten, also der mit "Über unsere Philosophie", "Ethik in der Kleidung"... zuerst nur die Überschrift sieht und wenn man etwas über das Thema erfahren möchte darauf klicken kann, sodass sich dann der Text öffnet. So finde ich das auf den ersten Blick ziemlich viel Text und unschön formatiert. Sonst finde ich die Website ziemlich gelungen.
Ich hoffe ich habe mich halbwegs verständlich ausgedrückt!
LG Moon^^

Soziale Schülerwebsite verbessert?

2 Antworten