Design, Code, Ideen (EDITOR)

[palzkillm]

Moin!

Seit einiger Zeit bastle ich an einer Seite zu/über Flughäfen. Neben der Befriedigung meiner persönlichen Obsession von Geocoding und Datenbanken hoffe ich damit - irgendwann mal - den Status eines Community-Projektes zu erreichen, wo Leute freiwillig und gerne Daten beitragen. Letzteres ist bisher aber noch gar nicht möglich, da die Seite gerade mal ins Beta-Stadium eintaucht.

Daher würde ich gerne mal einen Pulscheck machen - was sagen die Experten zum Code (HTML und Javascript), und wie findet ihr das eher minimalistische Design sowie den Aufbau der Seite und die Seitenlogik generell?
Und schlussendlich: Habt ihr noch irgendwelche Ideen welche Features der Seite noch gut täten - abgesehen von Mitmach-Funktionen? ;)

Marco

Link: Airport Directory - Main Page

 

[vanGoss]

den code hab ich mir jetzt ned so genau angeschau eher nur so die seite insgesamt
zum design
oben im menü beim hover noch iwas dass des ned die gleiche Farbe wie des aktuelle hat
wärn bissl doof iwie oder?
zumindest n kleiner (margin-left ind right: 2px;) abstand wär vllt gut imo
ich fänds anders schöner

und bei den blog einträgen noch was
en hoover effekt a la google news oder auch ne leichte hintergrund verdunkelung =)
ich finde das sieht gut aus

ach ja und dass s ned durchn validator kommt oder hab ich da was falsch gesehen^^

der submit button könnte noch deutlicher sein dass man ned suchen muss

ansonsten ist eig ganz gut so =)
nicht zu überladen^^
und schön schnell xD

 

[palzkillm]

Hi!

Erstmal vielen Dank für dein schnelles Feedback!

oben im menü beim hover noch iwas dass des ned die gleiche Farbe wie des aktuelle hat
wärn bissl doof iwie oder?
zumindest n kleiner (margin-left ind right: 2px;) abstand wär vllt gut imo
ich fänds anders schöner

Dahinter ist irgendein Underline, das ich nicht weggekriegt habe, und wenn die Blöcke nicht genau aneinanderstossen wird das sichtbar. Da muss ich wohl nochmal experimentieren. Eigentlich fand ich das so hübsch, aber jetzt wo du es sagst fällt es mir auch auf..

und bei den blog einträgen noch was
en hoover effekt a la google news oder auch ne leichte hintergrund verdunkelung =)
ich finde das sieht gut aus

Hover auf background-color:#eeeeee; installiert. Finde ich noch nicht ganz optimal, aber da lasse ich mir noch was einfallen.

ach ja und dass s ned durchn validator kommt oder hab ich da was falsch gesehen^^

Ja, das ist leider richtig: Die Menüs und die klickbaren Tabelleneinträge benutzen ein in einen a-nchor eingebettetes div, damit sie komplett anklickbar sind. Mit spans geht das irgendwie nicht. Ausser Javascript habe ich noch keinen Weg gefunden das "hübsch" zu lösen.

der submit button könnte noch deutlicher sein dass man ned suchen muss

Öhmmmokay. Dafür habe ich spontan keine schlaue Lösung parat, merke es mir aber für die nächste Runde.

ansonsten ist eig ganz gut so =)
nicht zu überladen^^
und schön schnell xD

Freut mich dass sie dir gefällt und bei dir auch schnell geladen hat. Ich habe befürchtet dass fast 50KB allein für css und js doch zu viel wären.

Nochmals danke für dein Feedback!

Marco

 

[vanGoss]

Hover auf background-color:#eeeeee; installiert. Finde ich noch nicht ganz optimal, aber da lasse ich mir noch was einfallen.

also erstml es is nich perfekt aber besser
wie wärs(ich mach das immer so weil mir weis nich ganz so gefällt ^^) dass du body background ned #000(bzw weglassen) sondern #f9f9f9 machst
ich glaube dann ist der hover nich so drastisch

Ja, das ist leider richtig: Die Menüs und die klickbaren Tabelleneinträge benutzen ein in einen a-nchor eingebettetes div, damit sie komplett anklickbar sind. Mit spans geht das irgendwie nicht. Ausser Javascript habe ich noch keinen Weg gefunden das "hübsch" zu lösen.

das schau ich mir mal noch an(kann aber dauern^^)

Öhmmmokay. Dafür habe ich spontan keine schlaue Lösung parat, merke es mir aber für die nächste Runde.

den kannst du auch mit css stylen, sogar rund kann man den machen(kommt zwar nicht mehr durch den css valid durch aber es gehört glaub zum css2 standard)
bsp:

button{
	font-family:verdana;
	font-size:12px;
	color:#000000;
	font-weight:bold;
	text-decoration:none;
	background-color:#ffa000;
	border-style:outset;
	border-color:#000000;
	border-width:1px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;}
.button:active{
	border-style:inset;}
.button:hover{
	background-color:#ee9000;}

isn bissl viel und auch überflüssig aber so gehts zB also es is alles machbar xD
musst dann natürlich dem button 'class="button"' geben

Freut mich dass sie dir gefällt und bei dir auch schnell geladen hat. Ich habe befürchtet dass fast 50KB allein für css und js doch zu viel wären.

naja das js is schon viel aber trotzdem geht das eig so
es würde eher das problem wenn du zuviele hover effekte einbaust die sich dann au noch überlagern oder so, des is mir passiert aber es sieht so schön aus ich möchts ned weg machen =)

np ich möcht ja vllt au mal tipps haben^^
gruß

 

[tarik02]

Hallo,


also erst einmal zum Code:

[Invalid] Markup Validation of http://airports.palzkill.de/ - W3C Markup Validator

Da sind noch einige Fehler drin.
Deine CSS-Datei ist aber fehlerfrei ;)

Die Semantik im Code ist aber nicht die beste z.B. ist dein Header als Div ausgezeichnet, ich würde da der Header als Überschrift fungiert den Tag <h1> empfehlen.
Oder deine Navigation ebenfalls als DIV diese würde ich jedoch als Liste auszeichnen.


Zum Design:
Tut mir Leid das ich das so drastisch ausdrücken muss aber das Blau tut mir extrem in den Augen weh und sieht überhaupt nicht gut aus...

Ich würde die Website auch ein wenig in die Mitte bringen und vielleicht über dem ganzen vielleicht ein Logo o.ä.?

Übrigens fiel mir gerade auf: Beim Menüpunkt Search wird zum Teil der Inhalt abgetrennt.

Naja viel Glück weiterhin und viel Spaß an der Sache ;)



T02

 

[Gimli]

Guten Abend!

Erstmal zum "Design": Naaaja, ist etwas zu minimalistisch!

So, und nun zum Code:
Der Doctype ist in ordnung, aber ich empfehle HTML5, da es einmal kürzer zu schreiben ist, und dann noch viele nützliche Elemente unterstüzt.
Die Semantik ist noch zu verbessern.
Um einen Text-Absatz gehört z.B. immer ein <p></p> Tag. (auf der Hauptseite)
Ist das wirklich alles von dir? Weil ich seh da sehr viel von Google Maps & Co.
Ansonsten will mir nicht ganz einleuchten wozun ich sowas brauche.

 

[palzkillm]

Hi zusammen,


Fixes:

- Fehlende Validierung: Behoben, jetzt alle HTML 4.01 Strict.

- Header als Div: Behoben, jetzt h1.

- Menü als Div: Behoben, jetzt li. Danke für den Tipp, wusste gar nicht, dass das so hübsch wird!

- Menü mit Spacer rechts/links: Behoben.

- Mittige Ausrichtung: Eingerichtet.

- Hintergrundfarbe weiss: Behoben. Jetzt f7f7f7 - das werde ich aber evtl. noch einmal ein wenig anpassen müssen.

- Suche-Button: Eingefärbt.


No fix:

- Farbe blau: Ist verstanden, das zu fixen wird aber etwas dauern, und ich habe auch noch keine so richtige Idee wie ich das alternativ lösen soll. Ich arbeite dran.

- Logo: Da ich kein Grafiker bin und keinen Grafiker an der Hand habe muss ich darauf vorerst verzichten, trage das aber hoffentlich irgendwann nach.

- HTML 5: Da das noch nicht offizieller Standard ist und den Neubau der ganzen Seite erfordern würde, erstmal nicht.

- <p>-Tag um Text: Okay, aber warum fragt dann der Validator nicht danach? Ähnlich gelagerte Probleme bei anderen Elementen mokiert er ja?

- Minimalistisches Design: Okay, verstanden. Da das nicht mal eben so zu beheben ist, spontan kein fix, aber ich werde dran arbeiten.


Nachfragen:

- Ist das wirklich alles von mir: Der Quellcode (HTML, css.css und js.js) ist von mir. Die Daten stammen aus verschiedenen Quellen (siehe Credits). Die Karten entspringen der Google Maps Javascript API (siehe Credits). Das gleiche gilt für die Google Earth Plugins. Insofern ist die Seite ein klassisches "Mashup".

- Wozu ist das gut: Die Seite richtet sich an Luftfahrt-Fans wie mich, sowie an Reisende, die Informationen über Flughäfen suchen. Derzeit ist der Luftfahrt-Fan-Teil noch deutlich stärker ausgeprägt, aber da kommt ja noch mehr.


Vielen Dank an alle Experten, die ihre Zeit dafür geopfert haben die Seite anzugucken und mir Feedback zugeben!

Marco

 

[tarik02]

- Menü als Div: Behoben, jetzt li. Danke für den Tipp, wusste gar nicht, dass das so hübsch wird!

Den Div um das Menü kannst du doch jetzt weg machen?

- Hintergrundfarbe weiss: Behoben. Jetzt f7f7f7 - das werde ich aber evtl. noch einmal ein wenig anpassen müssen.

Würde vielleicht noch ein wenig mehr ins Graue gehen ;)

- Farbe blau: Ist verstanden, das zu fixen wird aber etwas dauern, und ich habe auch noch keine so richtige Idee wie ich das alternativ lösen soll. Ich arbeite dran.

Für den Anfang vielleicht ein nicht ganz so beißendes Blau vielleicht ein Hellblau o.ä.

- <p>-Tag um Text: Okay, aber warum fragt dann der Validator nicht danach? Ähnlich gelagerte Probleme bei anderen Elementen mokiert er ja?

Beim Inhalt das Div wegnehmen und p dafür einsetzen wird vom W3c nicht erkannt weil es ein Semantik Fehler ist.


T02