zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Site- und Layoutcheck
Seite neu laden Projekt: Privat Page first check

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.11.2015, 09:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2015
Beiträge: 3
darkpuridee befindet sich auf einem aufstrebenden Ast
Standard Projekt: Privat Page first check

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?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.11.2015, 17:15
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.02.2005
Beiträge: 137
nicmare befindet sich auf einem aufstrebenden Ast
Standard

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:

Zitat:
@media(max-width:320px){
nav { float:none; width:auto;}
#content-wrap { float:none; width:auto;}
}
wie du siehst, ist es recht simpel!!
__________________
Meine Projekte:
Dashcam Test | Babyphone Test | Türspionkameras | Multiroomlautsprecher
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.11.2015, 17:52
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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.

Geändert von dazzle89 (19.11.2015 um 17:54 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 20.11.2015, 00:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2015
Beiträge: 3
darkpuridee befindet sich auf einem aufstrebenden Ast
Standard

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?

Geändert von darkpuridee (20.11.2015 um 01:33 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 20.11.2015, 09:05
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

deine menu-items sind 122% breit.

Und wieso keine Liste für das Menü?
Mit Zitat antworten
  #6 (permalink)  
Alt 20.11.2015, 11:58
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Die Farbe gefällt mir aktuell noch gar nicht.
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.

Zitat:
Was sagt ihr, eher die Seite so vom Style her belassen, oder das Design als "Elastic" machen?
Aktuell sollten Seiten eher responsive sein. Zumal du selbst die Seiten vernünftig auf Smartphones darstellen möchtest.

Zitat:
Wie zum Henker bekomme ich die Navigation am besten für Mobile dargestellt.
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.

Zitat:
Evtl Textfarbe und Schriftarten Vorschläge?
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.

Zitat:
allerdings passiert nicht dass was mir vorschwebt
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?

Zitat:
allerdings passiert nicht dass was mir vorschwebt. Und zwar soll die Seite am Handy dann folgend beginnen

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

Zitat:
Was muss ich eigtl beachten dass der Header auch responsive ist? Der content verkleinert sich zwar, aber das Bild an sich wird abgehackt..
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.

Zitat:
Hintergrunbild
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.

Code:
XHTML
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.

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

Zitat:
header, nav, footer, div id="content-wrap", div id="content"
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.

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

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

Zitat:
Copyright
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
Mit Zitat antworten
  #7 (permalink)  
Alt 20.11.2015, 13:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2015
Beiträge: 3
darkpuridee befindet sich auf einem aufstrebenden Ast
Standard

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 ^^

Geändert von darkpuridee (20.11.2015 um 15:07 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 23.11.2015, 10:11
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Anpassen eines CSS Templates - JPEG als Hintergrundbild setzen soulknot CSS 1 08.05.2011 18:31
kleines projekt (myKAOZ) design + html/css code check der.zw3rg Site- und Layoutcheck 7 29.10.2006 18:32
XHTML und CSS Projekt: Layout und Code check Lloyd Larkin Site- und Layoutcheck 5 19.03.2006 15:20
3-spalten-layout --> boxen nebeneinander positionieren nevermind CSS 9 03.01.2006 13:08
sich selbst vergrößernde Spacer Runsky CSS 17 30.12.2005 19:58


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:17 Uhr.