Feedback zu erstem Projekt als Webentwickler für Musikschule?

Hallo,
Ich bin 16. Ich habe über die Ferien über einen bekannten einen kleinen Ferienjob gefunden. Ich sollte für eine Private Musikschule in Kaarst eine kleine Website entwerfen. Die Musikschule wird nur von einem sehr netten Ehepaar betrieben.
Ich wollte euch mal um euere Meinung zu dem Ergebnis meiner Arbeit bitten. Ich habe mich natürlich möglichst an die Vorgaben und Wünsche von den Auftraggebern gehalten.
Das ist die aktuelle Version: Musik An Der Sonnenuhr (Musikschule Kaarst) - Wir vermitteln Musikfreude!
Ich habe mir viel Mühe geben und echt Zeit über die Ferien in das Projekt gesteckt.
Habt Ihr vll noch Verbesserungsvorschläge?
Und noch eine Frage an die Experten. Wie viel ist meine Arbeit ungefähr Wert? Ich kann das Leider absolut nicht einschätzen, es ist mein erstes Projekt für jemand fremden.
Vielen Dank für alle Antworten!

Answer 1

[regex9]

Ich schau wieder wie bei deiner vorherigen Seite auf die drei Bereiche Design, Inhalt und Implementation. Die Kritikpunkte bzgl. des Inhalts sind der Grund für meine selektierte Option bei deiner Abstimmung.

Design

1) Genauso wie ich es schon zu deiner SoCloth-Seite schrieb, würde ich die Schriftgröße in der Navigation (sowie die Höhe der Navigation selbst) definitiv immer konstant halten. Das Auf- und Abskalieren bei Mouseover wirkt gar nicht schön.

2) War der Aufbau der Stage eine explizite Anforderung? Sie wirkt überladen. Ein Bild oder eine Bildcollage, die den kompletten Bereich abdeckt (z.B. von einem ihrer Liveauftritte), wäre besser. Frage die beiden doch einmal, sie haben ganz sicher Fotos.

Die Bildlinks (dass das Links sind, habe ich gerade nur durch Zufall entdeckt) und im besten Fall auch diese Animation würde ich herauswerfen. Letztere hat bei meinem erstem Test für 2-3 Sekunden ein klaffendes Loch in der Stage hinterlassen. Wenn die Angebote für Gitarre und Violine unbedingt besonders herausgestellt werden sollen, dann könnte man die Unterseite Unterricht gleich in die Startseite (unter die Stage) migrieren.

Die Buttons am unteren Ende der Stage sind des Weiteren redundant. Die Navigation verlinkt bereits auf dieselben Seiten.

3) Genauso wie auf deiner vorherigen Seite sind die Texte im untersten Textkasten gequetscht. Zentrierte Texte dienen in der Regel dazu, Weißraum optisch zu füllen. In diesem Fall hast du allerdings kaum Platz, daher passt die Kombination nicht gut. Eine Textausrichtung nach links (oder Blocksatz) sowie mehr Abstand zwischen Text und Überschrift (so wie bei den Boxen auf der Unterseite Unterricht) könnte das Problem lösen.

4) Zwischen Vorder- und Hintergrund besteht oft kein ausreichend hoher Kontrast. Texte wie im Footerbereich, im Impressum oder bei der sticky Navigation sind nur schwer lesbar. Die transparenten Buttons gehen gänzlich unter.

5) Die Boxen auf der Unterrichtsseite sind unterschiedlich hoch. Die komplette Sektion wird dadurch unruhig.

Inhalt

1) Vier Rechtschreibfehler sind mir aufgefallen:

• Anfrage stellen (auf mehreren Seiten)
• Engagieren Sie uns jetzt
• Wir freuen uns auf Ihre Nachricht (...)
• Für den Musikunterricht (...) bei uns anmelden

2) Einige Bilder sollten definitiv noch einmal ausgetauscht werden.

Da wären zum einen die Stockbilder, die noch mit Wasserzeichen versehen sind. Auf der Seriösitätsskala sinkt man an der Stelle gewaltig.

Auf der anderen Seite gibt es Bilder, die ziemlich ungünstig skaliert werden und somit erheblich an Qualität einbüßen. Da wäre beispielsweise das oberste Bild auf der Unterseite für Live-Auftritte. Schon in seiner Originalgröße von 674px weist es keine gute Qualität auf. Du skalierst es allerdings noch einmal um über 200px und verstärkst auf diese Weise das Pixelrauschen.

Ein anderes Beispiel ist das Hintergrundbild. In seiner Originalgröße ist es bei einer Bildschirmgröße von 1200px (also für normale Desktop-PCs) geschätzt nur halb so breit. Ungeachtet dessen streckst du es. Schau dir im Vergleich doch einmal an, wie es aussieht, wenn du die Properties background-size und background-repeat herausnimmst.

Da in den Texten davon die Rede ist, dass jedes Alter zur potenziellen Zielgruppe gehört, wäre es eine Überlegung wert, sich bei den Bildern nicht nur auf Fotos mit Kleinkindern zu beschränken.

3) Das Video auf der Unterseite Unterricht bietet keinerlei Mehrwert. Ich hätte an der Stelle ein Infovideo o.ä. erwartet. Wenn es da aber keinen sinnvollen Inhalt gibt, dann könnte man Überschrift und Text gleich zentriert über die volle Inhaltsbreite laufen lassen. Der Button kann raus, denn er bietet ebenfalls keinen tatsächlichen Mehrwert. Wieso du für dessen Funktionalität überhaupt JavaScript verwendest, statt einer einfachen Sprungmarke, verstehe ich nicht.

<a href="#ziel">Gehe zu Ziel</a>
<div id="ziel"><!-- ... --></div>

Eine Sprungmarke hat mehrere Vorteile: Der Browser gewährleistet die Funktionalität in jedem Fall, das Linkziel kann via URL abgebildet werden und der Nutzer kann sehen, wohin der Link zeigt.

4) Die Artikeldetailseiten bieten keinen wirklichen Mehrwert. Sie präsentieren Stockbilder, einen Einleitungstext und einen Boilerplatetext. Die einzigen relevanten Informationen sind die beiden Buttons (Anmelden und Anfrage stellen), die letzten Endes aber auf dasselbe Formular verweisen. Wichtige Informationen wie der Preis hingegen stehen auf der Übersichtsseite.

Es wäre besser, eine Neuanordnung der Inhalte vorzunehmen. Entweder man verkürzt den Text auf der Übersichtsseite drastisch und fügt auf den Detailseiten dann tatsächlich informativen Text ein (Preis, Lernweg, etc.) oder man entfernt die Detailseiten und ergänzt die Übersichtsseite um entsprechende Links zum Formular. Ich persönlich würde die erste Option bevorzugen, da man auf diesem Weg mehr informativen Inhalt für Suchmaschinen bereitstellen kann.

5) Der Datenschutztext passt nicht auf den Zustand der Seite und sollte daher überarbeitet werden.

Zudem an der Stelle noch ein wichtiger Rat: Übernimm nicht die Verantwortung für den Datenschutz auf Kundenwebseiten. Dafür ist allein der Webseiteninhaber, hier also die Musikschule verantwortlich. Ein Hinweis an den Kunden, dass er sich damit befassen muss, genügt. Wenn er eine Rechtsberatung benötigt, wären auf das Thema spezialisierte Fachleute die bevorzugte Wahl.

6) Wieso kann ich mit den Pfeiltasten oder A/D zwischen zwei Seiten hin- und herspringen?

Implementation

Soweit ich das sehe, hast du viele meiner angeführten Kritikpunkte zu deiner vorherigen Seite berücksichtigt. 👍 Sofern ist mir lediglich Folgendes aufgefallen:

1) Du verwendest noch immer Tags (monitor, headerContent, headerContentInner, headerPlaceholder, centered), die es gar nicht gibt. Wenn du eigene Elemente einführen möchtest, die der Standard nicht definiert, dann müsstest du diese via JavaScript explizit registrieren (s. customElements.define). Das macht allerdings nur Sinn, wenn diese Elemente tatsächlich neue Funktionen mitliefern, die du mit Standardelementen nicht abbilden kannst.

2) Öffne einmal deine Browserkonsole und klick dich ein wenig durch die Seiten. Dein Service Worker-Skript wirft ab und an Fehler. Es erhält auf bestimmte Anfragen offensichtlich nur einen Partial Response (erkennbar am Statuscode 206), der allerdings nicht gecached werden kann (ein voller Response wird benötigt). Achte darauf, dass im Request Header kein Content-Range-Header gesetzt ist.

3) Die CSS-Dateien könnten ruhig zu einer zusammengefasst und minifiziert werden. Eine Auslagerung deiner Skripte in eigene Dateien (bzw. auf dem Produktionssystem uglified in einer all.min.js), erleichtert zudem die spätere Wartung (HTML und JS sind klar getrennt). Der Browser würde Skriptdateien üblicherweise cachen, um sie nicht mehrmals neu vom Webserver herunterladen zu müssen.

4) Die Implementation rund um handleScroll ist aus verschiedenen Gründen nicht gut. Angefangen bei der Häufigkeit, mit der du die Funktion aufrufst:

document.addEventListener("load", function () {
  handleScroll();
});
handleScroll();
window.addEventListener("load", function() {
  handleScroll();
});
setInterval(function(){
  handleScroll();
}, 200);

Nur der erste Aufruf genügt, alle weiteren Aufrufe sind redundant. Im letzteren Fall würdest du die Funktion sogar alle 0.2 Sekunden aufrufen. Unabhängig davon, ob der Nutzer überhaupt etwas auf der Seite aktiv macht.

Aufgrund der Häufigkeit, die handleScroll nun während des Scrollvorgangs aufgerufen werden kann, wäre es des Weiteren besser, aufwendigere Operationen, wie die Suche im DOM zu reduzieren. Die Variable elements kann also global deklariert werden, gänzlich außerhalb des Event Handlers.

Eine generell performantere und einfachere Lösung wäre es, einen Observer einzusetzen:

function onIntersection(entries) {
  entries.forEach(entry => {
    const elementInViewport = entry.target;
    // do something ...
  });
}

// in document.onload:
const observer = new IntersectionObserver(onIntersection, {
  root: null,
  threshold: 0.5
});
document.querySelectorAll(".flyIn").forEach(element => observer.observe(element));

Der Observer wird einmal beim Laden der Seite kreiert und auf die Elemente mit der Klasse flyIn angesetzt. Sobald eines der Elemente (bspw. via Scrollvorgang) in den Viewport gerät, wird der Callback onIntersection aufgerufen, welcher alle betroffenen Elemente beinhaltet (im Prinzip also das jeweilige flyIn-Element). Das, was nun mit dem Element geschehen soll, kannst du an der Stelle meines Kommentars implementieren. Eigene Ist-im-Viewport-Prüfungen brauchst du nicht mehr.

5) Im Formular versuchst du für ein select-Element das value-Attribut zu setzen. Das ist aber nicht zulässig. Setze nur auf das entsprechende option-Element das selected-Attribut, mehr nicht.

6) Das Formular sollte entweder in das main-Element oder das main-Element sollte raus. Ein leeres main-Element ist prinzipiell zwar nicht invalid, aber rein logisch betrachtet kennzeichnet es den Teil des HTML-Dokuments, auf den das Hauptaugenmerk gerichtet werden soll.

7) Die E-Mail-Validation kannst du eigentlich völlig dem Browser überlassen. Für erforderliche E-Mail-Felder ist eine automatische Validation implementiert.

8) Neben dem Honeypot könnte man überlegen, ein Captcha-Feld zu ergänzen.

9) Bezüglich der Noten im Header würde ich mir überlegen, ob es nicht besser wäre, ein Bild (welches alle Noten zeigt) einzusetzen, statt mehrere Bilder aneinanderzureihen. Bei Bedarf könnte man ein Bild mit einem Notenabschnitt ebenso auf der x-Achse wiederholen (background-repeat: repeat-x).

Von der wohl geplanten Notenanimation würde ich (sofern sie noch im Raum steht) gänzlich absehen, da sie ein ablenkendes Element darstellt.

10) Beim Einsatz von Hintergrundbildern ist es ratsam, auch immer eine passende Hintergrundfarbe zusätzlich zu setzen. Die wird beim Laden der Seite so lange angezeigt, bis das Bild geladen werden konnte und sichert auf diese Weise ab, dass dennoch ein ausreichender Kontrast zur Schriftfarbe gegeben ist.

Wie viel ist meine Arbeit ungefähr Wert?

Ich würde nach Stundenlohnbasis eines Schülerjobs gehen. Der Verdienst für Schüler deines Alters liegt bei ungefähr 7-10 Euro. Mit dazu einkalkulieren solltest du die beschränkte Arbeitszeit: Pro Jahr darfst du maximal vier Wochen arbeiten und pro Woche dürfen nicht mehr als 40 Arbeitsstunden anfallen.

Answer 2

[evtldocha]

Wie immer ist so ein Webdesign Geschmackssache - was ich aber wirklich unschön und unruhig empfinde, sind die unterschiedlichen Größen der "Unterrichts"-Boxen für die einzelnen Musikinstrumente unter https://musikandersonnenuhr.de/unterricht

Answer 3

[NoArtFX]

Hi

Zuerst mal, ich finde gut, dass die Website responsive ist. So weit ich es gesehen habe, passt die Seite sich auf alle herkömmlichen Geräte an.

Ein paar Punkte die mir aufgefallen sind:

• Farbauswahl / Kontrast. Brauner Text auf braunem Hintergrund ist eher unleserlich, gerade auf Mobilgeräten, die sowieso eine kleinere Auflösung haben, ist das schlecht.
• Auf der Seite /unterricht sind die Kasten unterschiedlich gross, das ist Geschmacksache, ich mags mehr wenn Dinge symmetrisch sind. Es gibt auch Webseiten die asymmetrisch sind (hier einige Beispiele https://dribbble.com/tags/asymmetric), dafür muss aber die ganze Webseite so ausgelegt sein.
• Das Hintergrundbild wird je nach Auflösung verschwommen sein. Ich rate eher davon ab, Bilder im "cover" Modus für den Hintergrund zu nutzen. Lieber einen weissen Hintergrund und dann hier und da ein paar Bilder mit einfliessen lassen.
• Auf der Startseite etwas viel Text. Da lieber etwas weniger Text und dafür den "Mehr erfahren" Button nutzen. Nachdem ich den ganzen Text durchgelesen hab, weiss ich ja schon alles.

Mir ist bewusst, dass gewisse Dinge vom Kunden so gewünscht sind. Beachte hierbei: Kunden haben generell keinen Plan und du kämpfst etwas darum, deinen Berufsstolz nicht auf ein zu geringes Niveau herunterbrechen zu müssen.

Etwas böse ausgedrückt, ist aber in der Realität so. Daher immer beraten, aber nie dickköpfig durchsetzen. Ist ein Kunde beratungsresistent, dann einfach Dienst nach Vorschrift, nach dem Motto er wurde ja gewarnt.

Bezüglich Lohn:

Grundsätzlich gilt ein Stundenlohn (als Freiberufler/Freelancer) von ca. 30 - 40€.

Da du das ganze als Hobby machst, bzw. Sommerjob und damit auch nachträglich nicht gut Support leisten kannst, würde ich eher von 15 - 20€ ausgehen. Das halte ich für einen fairen Stundenlohn. Du weisst selbst wie lange du gebraucht hast und kannst dir demnach deinen Lohn für die ganze Website ausrechnen.

Du bist allerdings noch Anfänger und daher wirst du noch häufig Dinge nachschauen müssen, etc. Diese Zeit ist halt keine Arbeitszeit sondern Lernzeit und solltest in deine Berechnung mit einfließen lassen.

Woher ich das weiß: Studium / Ausbildung – Bachelor-Student in Informatik

Answer 4

[Narrativium]

Ist in Ordnung, da ist zuviel Text, womöglich kürzt du das und fügst Bilder ein, an denen mangelt es ebenfalls. Und die Kontaktinformationen unten sind schwer lesbar, entweder du rahmst sie ein mit weißem Hintergrund oder schreibst sie fett.