Moinsen,

habe lange Zeit nichts mehr mit HTML und Css gemacht, und wollte für meinen Vater eine eigene Private Page basteln.

Problem ist aktuell nur, ich weiß nicht mehr weiter und suche hier auf diesem Wege nach Verbesserungsvorschlägen.

Die Seite ist folgende : Link

- Die Farbe gefällt mir aktuell noch gar nicht... Suche daher nach alternativen
- Was sagt ihr, eher die Seite so vom Style her belassen, oder das Design als "Elastic" machen?
- Wie zum Henker bekomme ich die Navigation am besten für Mobile dargestellt.. Das will mir bisher noch nicht gelingen

- Evtl Textfarbe und Schriftarten Vorschläge?

Also Farben finde ich okay! einigermaßen responsive ist die Seite ja auch schon. Zur Navi: Im grunde kannst du das so lassen. du musst den float nur rausnehmen. also im CSS:

wie du siehst, ist es recht simpel!!

__________________
Meine Projekte:
Dashcam Test | Babyphone Test | Türspionkameras | Multiroomlautsprecher

Ich persönlich würde beim Media Query nicht 320px nehmen, sondern etwas mehr. Vielleicht 480px oder sogar 768px. Ansonsten wird die Navigation nämlich zu schmal. (mein Geschmack)

Außerdem würde ich die Links im Footer nicht unbedingt orange machen, weil so der Kontrast zum roten Hintergrund viel zu gering ist.

Und noch etwas:

Bei der Unternavigation würde ich den text-shadow entfernen. Braucht man bei weißem Hintergrund nicht und dadurch sieht die Schrift nur verschwommen aus.

Danke Euch, habe das mit dem Media Queries probiert, allerdings passiert nicht dass was mir vorschwebt. Und zwar soll die Seite am Handy dann folgend beginnen

Navi (Unter einander) wie auf vielen Seiten
dann dadrunter der content ...

Farben passe ich später nochmals an

Was muss ich eigtl beachten dass der Header auch responsive ist? Der content verkleinert sich zwar, aber das Bild an sich wird abgehackt..

Edit: Habe am Handy geschaut, wenn ich auf 480px bei den Mediaqueries setze, dann passt das mit der Navi auch schon sosweit, allerdings wird generell nicht das ganze Handy-Display ausgenutzt?
Was mir noch aufgefallen ist: Die Navibar ist auf 100% gesetzt, allerdings geht es über die Bildschirmgröße quasi, so dass eine Scrollleiste geht.. Wtf?

deine menu-items sind 122% breit.

Und wieso keine Liste für das Menü?

Hallo

Die Farben werden von dir schlicht überbewertet. Der Kontrast Schrift zu Hintergrund ist viel zu gering. Ein Großteil der Seite, speziell viel Text, sollte schlicht schwarz auf weiß (oder einem sehr sehr hellem - nicht grellem - Hintergrund) sein. Ein großteil der Besucher hat nicht solche Adleraugen wie du.

Farben sollten eher punktuell gesetzt werden.

Aktuell sollten Seiten eher responsive sein. Zumal du selbst die Seiten vernünftig auf Smartphones darstellen möchtest.

Auch auf Desktops mit Mousebedienung ist die Navigation schlicht Schrott. Wenn zum Beispiel "Fotos" geöffnet ist und mit dem Mauszeiger auf "1945" gewandert wird schließt sich "Fotos" und "1945" rutscht nach oben und muss mit dem Mauszeiger erneut gesucht werden. Sowas geht eigentlich gar nicht.

Von daher solltest du die Navigation generell überdenken. Zunächst verdeckte Links sind grundsätzlich benutzerunfreundlich. Leider meinen viele Webseitenersteller ihr Können an beweglichen Menüs zeigen zu müssen.

Eine vernünftige Navigation kann eigentlich erst erstellt werden, wenn der Inhalt der Seiten bekannt ist.

Es gibt besser lesbare Schriftarten als die vorgegebenen. Textfarbe, am besten schwarz auf weiß, auf jedem Fall hohe Kontraste. Auf Spielereien wie Textshadow sollte grundsätzlich bei Fließtext verzichtet werden. Überschriften oder kurze Slogans (sofern vorhanden) können maßvoll gestaltet werden.

Ein typisches Anfängerproblem, leider mit am schwierigsten zu korrigieren. Machst du die Seite für dich? Oder doch eher für die Webseitenbesucher deines Vaters?

Ein typischer Einsatz für Responsive Design mit Flexbox. Wobei die Navigation wie schon geschrieben grundsätzlich überdacht werden sollte.

Text als Grafik darzustellen ist schlecht und sollte vermeiden werden. Text ist Text und bleibt Text - eine ganz einfache Regel, die auch im Fall des headers zutrifft. Die zudem Traffic der Besucher spart.

Das flächendeckende Hintergrundbild (das Notebook) sollte ersatzlos gestrichen werden. Es ist an keiner Stelle zu sehen, bestraft die Besucher aber mit Ladezeit und Volumennutzer mit Kosten.

Sachlich falsch ist es XHTML mit HTML5-Elementen wie header zu verwenden. Die Browser zeigen das zwar in der Regel an, da sie sehr fehlertolerant sind, müssen dies aber nicht. Bei neuen oder überarbeiteten Seiten sollte grundsätzlich HTML5 verwendet werden.

Elemente wie blockqoute, em, strong und so weiter sollten nicht nach ihrer Darstellung im Browser, sondern nach ihrer Bedeutung, der Semantik, verwendet werden.

Wenn neue Elemente wie header, nav, footer mit HTML5 verwendet werden, dann durchgehend. In diesem Fall statt div-id=content also main oder article. Nach den Richtlinien von HTML5 dürfen div nur verwendet werden, wenn es keine anderen geeigneten Container gibt.

Auf unnötige Container wie div-id=content-wrap oder div-id=wrapper sollte komplett verzichtet werden.

Abstände mit geschützten Leerzeichen zu erstellen ist schlechter Stil und stört zusätzlich beim responsive Design.

Senkrechte Trennstriche gehören nicht in den HTML-Quelltext sondern werden bei Bedarf per CSS erzeugt.

Copyright-Zeichen auf deutschsprachigen Seiten zu verwenden ist schlicht albern und wichtigtuerisch. Sie haben rechtlich keinerlei Bedeutung. Unrechtmäßige Copyrightangaben - wie auf deiner Seite - können hingegen sogar strafbar sein. Abmahnanwälte reiben sich die Finger und werden reicher.

Gruss

MrMurphy

Murphy danke für deine Antwort.

Denke du hast mir da echt enorm geholfen.

Das Ding mit der Navi ist auch so eine Sache für sich...
Habe mich schon immer mit dem Thema Navigation gestritten, nur damals war es besser lösbar, da ich nur Clanseiten gebastelt habe, und da noch nicht wirklich viel mit HTML5 ect und responsive an Wert lag. Zu dem noch dabei gesagt, die Links keine Untermenüs hatten.

In dem Fall nun hier, ist die Navi für mich jeden Falls echt das größe Problem, da ich nicht weiß wie ich am besten eine Navi hinsetze, mit Links... Und dann das ganze noch ein schickes unter Menü hat.. Evtl. da jemand paar Ideen?

Was meint ihr.. Sollte ich die Seite evtl. nochmal komplett überarbeitet in Richtung komplett "Elastic" ? War ja vor paar Jahren so das man die Seiten Mittig gemeißelt hat so wie ich es jetzt gemacht habe.. 960px Breit und mittag angeordnet.


Edit: Bin am weiter rumprobieren ^^

Suche nach CSS3 dropdown menu, dann solltest du mehr als genügend Vorlagen für dein Menü finden.
Und ja, wie du schon richtig bemerkst: Früher war alles anders, in 5 Jahren ist es das vielleicht auch wieder. Aber heutzutage ist es nicht mehr standard, eine Seite in die mitte der Seite zu pflastern. Oder bist du nie mit dem handy/tablet online? Bzw. die Leute, die du kennst, sind die viel mit solchen Geräten online? Wenn ja (und du die auch zu deinen Besuchern zählst), dann wäre es doch fein, wenn sie deine Seite auch betrachten können? Außer diese Leute sind dir egal als Besucher, dann mach weiterhin eine starre Seite. Ist schließlich deine Entscheidung.