USALetsGo - meine Website ist endlich "fertig"

[usaletsgo]

Noch ein Tipp... https://www.webmart.de/web/harmonische-farben/

Kann man da denn z.B. zu einem beliebigen Rot-Ton auch einem passenden Blau-Ton finden?

Ich habe versucht die Nationalfarben der USA im Template abzubilden - wobei Weiß schwierig ist, wenn man einen hellen Hintergrund bevorzugt. Deshalb ist ein Teil der Navigation grau.

Gruß

Dirk

Edit: Ich glaube, ich habe es gefunden. Da muss ich mal ein wenig weiter probieren.

[McC]

Lesbarkeit im Web oder Druck ist das Wichtigste. Zum Beispiel orangefarbiger Text auf Grau ist Todsünde. Die Buttonfarben finde ich zu aufdringlich und passen nicht zueinander.

[exit]

Ich finde das Farbkonzept im Großen und Ganzen okay. Es passt zum Inhalt der Seite und IMO wird deutlich warum die entsprechenden Farben gewählt wurden.
Da habe ich schon viel schlimmeres von professionellen Designagenturen erlebt.

Ungünstig finde ich, dass das Bildmaterial im Inhaltsbereich teilweise in grau gehalten ist und somit wenig visuellen Reiz erzeugen (beim Headerbild ist es hingegen in Ordnung, da es nur ein Schmuckelement ist).
Wirklich ungut finde ich das Flyout Menü. Da würde ich dir raten statt Grau als Hintergrund lieber den Rotton zu nehmen (in dem du den Rahmen ja auch gemacht hast).
Zusätzlich sollten die Flyouts dann auch erst mit dem unteren roten Rand der Hauptnavigation beginnen.

Aus Usability-Sicht wäre es sinnvoll im Menü auf der linken Seite dem Benutzer auf Unterseiten zu zeigen, in welchem Menüpunkt er sich befindet (also das entsprechende Menü aufgeklappt ist).
Zudem wäre (außer auf der Startseite) eine Breadcrumb oberhalb der H1 sinnvoll.

Möchtest du in Sachen Ladezeit auch noch einiges verbessern und bist in Frontend Technologien fit, gäbe es da noch einiges an Potential soweit ich das bei einem Schnellflug über den Quellcode gesehen habe.
Semantisch und insgesamt (HTML-)handwerklich sind da schon noch einige Schnitzer drin.

Für eine private Seite aber alles Dinge, die auch vollkommen egal sein können.

[usaletsgo]

Hallo exit,

vielen Dank für deine differenzierten Bewertungen, die für mich (als Amateur) sehr hilfreich sind.

Ich mache einige Anmerkungen zu deinen Punkten:

Ungünstig finde ich, dass das Bildmaterial im Inhaltsbereich teilweise in grau gehalten ist und somit wenig visuellen Reiz erzeugen

Daran scheiden sich die Geister. Neben kritischen Kommentaren habe ich auch positive Rückmeldungen dazu erhalten. Da mir das Schwarz-Weiß selbst gefällt, möchte ich mich nicht davon trennen. Als Kompromiss habe ich gleich oben auf jeder Seite ein Icon gesetzt mit Direktlink zu der Farb-Gallery. Insgesamt befinden sich ja mehrere Tausend Farbbilder auf der Site. Vermutlich wird man da keine endgültige Lösung finden, da es einfach Geschmackssache ist.

Wirklich ungut finde ich das Flyout Menü. Da würde ich dir raten statt Grau als Hintergrund lieber den Rotton zu nehmen (in dem du den Rahmen ja auch gemacht hast).

Da stimme ich zu. Werde ich ändern.

Zusätzlich sollten die Flyouts dann auch erst mit dem unteren roten Rand der Hauptnavigation beginnen.

Wie meinst du das?  

Edit: Ich glaube, ich weiß jetzt, was du meinst. Kurzfassung: der aufklappende Bereich soll einfach etwas weiter runter, damit er nicht den roten Unterstrich des horizontalen Menüs verdeckt, richtig? Macht Sinn.

Aus Usability-Sicht wäre es sinnvoll im Menü auf der linken Seite dem Benutzer auf Unterseiten zu zeigen, in welchem Menüpunkt er sich befindet (also das entsprechende Menü aufgeklappt ist).
Zudem wäre (außer auf der Startseite) eine Breadcrumb oberhalb der H1 sinnvoll.

Völlig einverstanden. Werde ich, sobald ich Zeit dafür finde, implementieren. Sehr guter Tipp, wie ich finde!

Semantisch und insgesamt (HTML-)handwerklich sind da schon noch einige Schnitzer drin.

Der Code ist aber weitgehend valide. Ein paar Kleinigkeiten sind noch zu verbessern, die aber vor allem auf die Einbindung der Gallery zurückzuführen sind, die ein paar invalide Attribute hat. Allerdings gibt es bestimmt bei der Menge der Seiten einige kleinere weitere Sachen, die verbessert werden können. Im Großen und Ganzen ist der Code aber ok. Vielleicht wolltest du aber auf etwas Anderes hinaus?

Wäre schön, wenn du weiter einen kritischen Blick auf die Site wirfst und mich über Auffälligkeiten informierst.

Vielen Dank und beste Grüße

Dirk

[exit]

Zusätzlich sollten die Flyouts dann auch erst mit dem unteren roten Rand der Hauptnavigation beginnen.

Wie meinst du das?  

Edit: Ich glaube, ich weiß jetzt, was du meinst. Kurzfassung: der aufklappende Bereich soll einfach etwas weiter runter, damit er nicht den roten Unterstrich des horizontalen Menüs verdeckt, richtig? Macht Sinn.

Genau.

Semantisch und insgesamt (HTML-)handwerklich sind da schon noch einige Schnitzer drin.

Der Code ist aber weitgehend valide. Ein paar Kleinigkeiten sind noch zu verbessern, die aber vor allem auf die Einbindung der Gallery zurückzuführen sind, die ein paar invalide Attribute hat. Allerdings gibt es bestimmt bei der Menge der Seiten einige kleinere weitere Sachen, die verbessert werden können. Im Großen und Ganzen ist der Code aber ok. Vielleicht wolltest du aber auf etwas Anderes hinaus?

Valide != gut
Wenn man HTML5 verwendet, sollte man auch die semantischen Möglichkeiten, die es bietet, verwenden um die Elemente und Inhalte zu strukturieren.
Beispiel: head, nav, section, article, foot

Code: [Auswählen]

<input style="height:auto;" type="text" name="q" id="suchbegriff" value="Suchen" onfocus="this.value = (this.value == 'Suchen' ? '' : this.value)"/>Um den onfocus-Teil zu vermeiden kannst du auch einfach das placeholder-Attribut in HTML5 verwenden.
Das sieht dann so aus:

Code: [Auswählen]

<input type="text" name="q" id="suchbegriff" value="" placeholder="Suchen" />
Zusätzlich würde ich dir empfehlen, allen a- und img-Tags ein title-Attribut zu spendieren und dieses auch aussagekräftig zu füllen.
Bei img-Tags zusätzlich auch noch das alt-Attribut aussagekräftig setzen.
Außerdem nur eine CSS-Datei verwenden, Maps-API nur auf Seiten einbinden, auf denen du sich auch brauchst (kostet ziemlich viel Wartezeit, da du sie zudem im head-Bereich einbindest).
JavaScript-Dateien lädt man eigentlich auch nur wenn es unbedingt sein muss innerhalb des head-Tags.
Besser ist es stattdessen, das möglichst vor den schließenden body-Tag zu setzen, da der Benutzer so schon Inhalte angezeigt bekommt während im Hintergrund der JS-Kram geladen wird.

Die Verwendung von inline CSS macht man eigentlich gar nicht, außer es geht nicht anders.
Besser ist es, stattdessen Klassen zu verwenden.
Auch solltest du im CSS selbst Adressierungen a la "#cssmenu_blau ul ul li" (das ist nur ein Beispiel) so wenig wie möglich verwenden.
Lieber stattdessen Klassen verwenden und contextabhängig nur da wo es sich um Sonderfälle handelt. Konstrukte mit :last-child usw. sind z.B. solche Sonderfälle.

Dann kannst du dir auch den ein oder anderen Tag sparen.
z.B. hier:

Code: [Auswählen]

<li><a href='info_faq.php'><span>FAQ</span></a></li>Der span ist bei guter Adressierung dann komplett unnötig.

Das nur mal so auf die Schnelle.
Wenn's zu technisch war, sorry, aber du hast gefragt. 

[usaletsgo]

Wenn's zu technisch war, sorry, aber du hast gefragt.

Nee, alles gut. Habe ich, glaube ich, alles kapiert. 

Da werde ich nach der guten alten Salami-Taktik vorgehen und nach und nach die Dinge implementieren, die du ansprichst. In der Gesamtbetrachtung ist das allerdings ein langwieriges Unterfangen, das man langfristig angehen muss, denke ich.

Btw: Hast du eine Idee, wie man das Untermenü weiter runter bekommt? margin-top funktioniert zwar, aber dann kann man nicht mehr reinhovern.

(Habe den grauen Hintergrund ganz rausgenommen und auf ffffff gesetzt, was m.E. besser aussieht.)

Gruß

Dirk

[partybombe]

Schöne Seite!
Da steckt jede Menge Arbeit drin!
Glückwunsch

[exit]

Btw: Hast du eine Idee, wie man das Untermenü weiter runter bekommt? margin-top funktioniert zwar, aber dann kann man nicht mehr reinhovern.

Du musst eigentlich nur zwei Dinge im CSS tun.

1. #cssmenu li { padding:5px 55px 5px 5px; }
2. #cssmenu li ul { border-top:0; margin-top:5px; }


Das ist jetzt aber nur mal eben ohne Testing überlegt.
Sollte das nicht klappen, machst du einfach ein margin-top:4px und border-top:#CFCFCF solid 1px, dann überlappen sich li und ul mit einem Pixel und der :hover auf den li sollte greifen.

Zu überlegen wäre dann noch, ob du die oberen abgerundeten Ecken der Flyouts nicht lieber weg nimmst.
Zudem finde ich persönlich die opacity da nicht so gut.

[Nichek]

... Auf der Washington (State) Seite: da biste bei Hauptstadt und größter Stadt mit Montana durcheinander geraten...

LG Nichek

[usaletsgo]

... Auf der Washington (State) Seite: da biste bei Hauptstadt und größter Stadt mit Montana durcheinander geraten...

LG Nichek

Danke. Korrigiert.

Meine Site profitiert erheblich von euren Fehlermeldungen und Verbesserungsvorschlägen.

[usaletsgo]

Ich habe zwei technische Neuerungen implementiert, die mir hier empfohlen wurden:

(1) sog. bread-crumb-navigation
(2) Quick-Links im Menü links zu den einzelnen POI und Städten. Man kann jetzt z.B. mit einem einzigen Click zum Arches NP kommen, ohne dass man wissen muss, dass sich dieser im Südwesten der USA und dort im Staat Utah befindet.

Meint ihr, dass ich noch stärker auf die Galleries verweisen muss, die sich jeweils unten auf den Seiten befinden? Es gibt jeweils rechts oben ein Icon mit Direktlink dorthin und zusätzlich einen erläuternden Text auf jeder Seite.

Nachtrag: Ich habe mal eine Gallery mit thumbnails erstellt:

http://www.usaletsgo.de/poi_rhyolite.php

Ist das so besser oder lieber ohne thumbnails?

Vielen Dank für alle Hinweise!

[mrh400]

Ist das so besser oder lieber ohne thumbnails?

"mit" gefällt mir gut; auch sonst nochmals deutlich verbessert

Edit:
Was mir noch fehlt, ist ein eindeutiges Symbol, das sich im Reiter vom Broser einklinkt. Wenn man mehrere Fenster offen hat, erleichtert das die Rückkehr zur Seite; jetzt ist nur das Browser-Symbol zu sehen (Anhang zur Veranschaulichung). Ich muß allerdings zugeben, daß ich keine Ahnung habe, wie das technisch geht.

[usaletsgo]

Ist das so besser oder lieber ohne thumbnails?

Was mir noch fehlt, ist ein eindeutiges Symbol, das sich im Reiter vom Broser einklinkt. Wenn man mehrere Fenster offen hat, erleichtert das die Rückkehr zur Seite; jetzt ist nur das Browser-Symbol zu sehen (Anhang zur Veranschaulichung). Ich muß allerdings zugeben, daß ich keine Ahnung habe, wie das technisch geht.

Ah ja, richtig. Das favicon wollte ich ja noch machen. Danke für den Tipp - werde ich am Wochenende erledigen.

[usaletsgo]

Liebe USA-Freunde,

ich habe bei meiner Website eine Neuerung implementiert - wegen des beträchtlichen Aufwands allerdings erst auf einigen wenigen Seiten.

Z.B. hier könnt ihr sehen, worum es geht. Durch Klicken aufs jeweilige Bild wird die Ansicht getauscht. (geht auch schon bei diversen anderen Hawaii- und Florida-Seiten)

Die bisher auf jeder Seite befindlichen Farbbild-Galleries ganz unten bleiben natürlich bestehen.

Ich würde mich über Rückmeldungen freuen, ob das den damit verbundenen Aufwand lohnt.

Vielen Dank und beste Grüße

Dirk

[gecko1a]

Sieht gut aus