Website "erwachsener" gestalten

**paraGTI** · 14. 06. 2011, 08:27

Zitat von hugoderhurenkon

Mach das Logo in einem Dunkleren Rot und die buttons auch SW und beim Hover Rot.
Gibt einen schönen SWR Kontrast und eine schöne atmophäre

In etwa so?

**hugoderhurenkon** · 14. 06. 2011, 14:18

Jo die Richtung stimmt.

Nur würde ich die Buttons noch ganz anders machen, du hast im BG nen schönen düsteren Comicstyle, dies solltest du auch bei den buttons anwenden damit es einheitlicher aussieht.
Dann die buttons schwarz weiss, und das Aktive Rot und die Hover rot.
Zudem solltest du noch ein Preaload einbauen wo die Hovergrafiken vorgeladen werden, da es ein wenig unproffesionell wirkt wenn das erst noch laden muss.

Zudem solltest du dein Logo nochmal überdenken, derzeit sieht es (egal ob rot oder grün) einfach so aus als hättest du das in Paint gemacht ^^

Ich hoffe ich konnte dir damit noch bisl helfen

**Tipo.** · 14. 06. 2011, 18:07

Ich gebe hier auch noch mal meine Senf ab.

Nach dem nun alles auf einen einheitlichen s/w Kontrast getrimmt wurde fehlt dem Auge ein Fokuspunkt. Zuvor wahren es die Navigation-Buttons, nun fehlen diese Punkte aber und das Auge weis nicht auf was es so schnell den Fokus legen soll.

Irgendwie muss man dem Besucher klar machen, hier das ist das wichtigste und das ohne störend zu wirken.

**hugoderhurenkon** · 14. 06. 2011, 18:19

Zitat von Tipo.

Ich gebe hier auch noch mal meine Senf ab.

Nach dem nun alles auf einen einheitlichen s/w Kontrast getrimmt wurde fehlt dem Auge ein Fokuspunkt. Zuvor wahren es die Navigation-Buttons, nun fehlen diese Punkte aber und das Auge weis nicht auf was es so schnell den Fokus legen soll.

Irgendwie muss man dem Besucher klar machen, hier das ist das wichtigste und das ohne störend zu wirken.

Genau das will ich ja mit meinem Rot bezwecken, sobald die Buttons von der aktiven Seite rot bleiben wird damit ein schöner Kontrast geschaffen und ein Fokus gegeben, in diesem Fall wäre das Hauptaugenmärk dann das Banner (welches besser gestaltet werden muss) und das HOME.

**P7BB** · 14. 06. 2011, 18:20

Zu viele Farben. Auch wenn es nur nach wenigen Farben aussieht, so ist der ständige Farbüberlauf zwischen Farben einfach ein wesentlicher Faktor dafür, dass es so kindlich wirkt.
Auch der Ingame-Screenshot bezeugt dies.

**paraGTI** · 15. 06. 2011, 07:20

Zitat von P7BB

Zu viele Farben. Auch wenn es nur nach wenigen Farben aussieht, so ist der ständige Farbüberlauf zwischen Farben einfach ein wesentlicher Faktor dafür, dass es so kindlich wirkt.
Auch der Ingame-Screenshot bezeugt dies.

Ingame kommt auch noch an die Reihe. Aber erst, wenn ich mit dem Außenbereich halbwegs zufrieden bin.

EDIT:

Button ist nun rot und die Bilder werden vorgeladen.

Ich muss sagen mir gefällt es jetzt ganz gut. Also aus Nicht-Profi-Sicht zumindest.
Ingame wird nochmal sehr viel Arbeit... Zum Glück hab ich alle Zeit der Welt

**paraGTI** · 17. 07. 2011, 00:34

Ich hab nochmal einen "Nebeleffekt" über das Logo gelegt. Das verbessert zwar das Logo an sich nicht, aber ich finde es jetzt trotzdem besser. Was sagen die Gulli-Boardler zum Design jetzt? Im Prinzip gefällt es mir nun (geht nur um das was man ohne Login sieht)

Grüße,
Robert

**paraGTI** · 06. 02. 2012, 19:27

Ich hab alles nochmal grundlegend überarbeitet. Konstruktive Kritik?

**Aidoo** · 06. 02. 2012, 23:34

Ich bin kein professioneller Webdesigner und beschäftige mich nur hobbymäßig damit, deswegen nur mein persönlicher Eindruck beim ersten Besuch deiner Seite:

Farbgebung gefällt mir, vor allem das Hintergrundbild (erinnert mich bisschen an Limbo )
Schön schlicht gehalten, nicht zu überladen.
Gut strukturiert Aufbau der Seite.

An sich also eine ansprechende Seite, aber irgendwie fand ich sie dann doch bisschen "klein". Vielleicht geht es da nur mir so, aber sowohl die Seite könnte meiner Meinung nach noch mindestens 50px in der Breite vertragen als auch die Schrift (1-2px). Wodurch die Leserlichkeit denk ich enorm erhöhen werden würde, vor allem unter "News" hätte ich mir das gewünscht. Aber das ist nur meine eigene Meinung.

Viel Glück weiterhin mit deinem Projekt!!

**toldyou** · 07. 02. 2012, 09:15

Wenn du es erwachsener (seriöser) gestalten willst, dann überarbeite die Seite komplett. Stelle erst einmal ein sauberes Grundgerüst mit semantisch sinnvollem HTML/CSS auf. Danach kannst du dich um folgende Punkte kümmern:

Erstelle keine Grafiknavigation
Verwende keine submit Buttons für deine Navigation
Verwende eine sinnvolle Schrift fürs Web (keine Serifschrift)
Erstelle keine pixeligen Grafiken
Entferne validierungsfehler von der Seite
Verwende nur dort Grafiken wo es notwendig ist und optimiere sie (Sprites, Größe, etc. )
Verwende sinnvolles CSS -> Position absolute ist bei deiner Seite zB nicht notwendig

Für mich sieht die Seite aus, als ob sie im Dreamweaver zusammengeklickt wurde. Also nicht im Ansatz irgendwie erwachsen bzw. profesionell.

**paraGTI** · 07. 02. 2012, 10:23

Zitat von toldyou

Für mich sieht die Seite aus, als ob sie im Dreamweaver zusammengeklickt wurde. Also nicht im Ansatz irgendwie erwachsen bzw. profesionell.

Ist alles mit Notepad++ von Hand geschrieben. Trotzdem danke für deine Kritik!

Welche Grafiken meinst du mit pixelig? Und wieso keine Submitbuttons als Navi? Das Ganze wird an eine PHP Datei übergeben.

Und wegen postion:absolute:

Die Seite wird immer mittig angezeigt, egal welche Auflösung man verwendet. Die absolute Positionierung erfolgt in Abhängigkeit der mittigen Ausrichtung! Warum findest du es schlimm hier absolute Positionierung einzusetzen? Somit kann zumindest kein Browser etwas verschieben. (ganz einig sind sich die Browser ja doch manchmal nicht)

Mit der serifenlosen Schrift habe ich schon experimentiert, leider sieht das dann mit Arial nicht mehr so schön aus wie vorher. Ich finde die Schrift macht es irgendwie "billiger". Welche serifenlose Standardschrift ist denn empfehlenswert?

P.S. um die Validierung kümmere ich mich, wenn ich zufrienden mit der Seite bin

**toldyou** · 07. 02. 2012, 13:57

Zitat von paraGTI

Ist alles mit Notepad++ von Hand geschrieben. Trotzdem danke für deine Kritik!

Auch all die position:absolute sind per Hand als inline Style eingetragen?
Es wirkt für mich eben wie von einem automatischen Programm erstellt, aber das ist ja nur eine subjektive Meinung.

Zitat von paraGTI

Welche Grafiken meinst du mit pixelig? Und wieso keine Submitbuttons als Navi? Das Ganze wird an eine PHP Datei übergeben.

Ich meine die Navigationsgrafiken. Hier sieht man sofort, dass es nur grafiken sind und dass keine Schrift verwendet wurde. Auch das große Hintergrundbild ist meiner Meinung nach verrauscht, das kann man auch schöner machen.

Warum keine Submitbuttons als Navi:
Zeige mir eine Seite, welche das so umgesetzt hat. Außerdem: Es ist eine Liste von Links, also gehört es auch in eine Liste, womit wir bei dem ersten von mir angesprochenen Punkt sind: Erstelle zuerst einmal eine semantisch sinnvolle Struktur (und nein, divs sind nicht semantisch) für deine Seite.
Auch der iframe in dem die Begrüßung steht, ist doch unsinnig.

Zitat von paraGTI

Und wegen postion:absolute:

Die Seite wird immer mittig angezeigt, egal welche Auflösung man verwendet. Die absolute Positionierung erfolgt in Abhängigkeit der mittigen Ausrichtung! Warum findest du es schlimm hier absolute Positionierung einzusetzen? Somit kann zumindest kein Browser etwas verschieben. (ganz einig sind sich die Browser ja doch manchmal nicht)

Ganz einfach, weil es unnötig ist. Zentriert wird heutzutage mit margin:0 auto, da sind sich alle Browser auch einig. Und relativ zu deinem zentrierten Inhalt wird der restliche Content ausgegeben. Du brauchst auf deiner gesmaten Seite kein position:absolut verwenden.
Außerdem macht position:absolute den Inhalt nicht wirklich skalierbar. Wenn ein paar Leuten deine Schrift zu klein ist, dann können sie diese nicht vergrößern.
Warum ich es noch schlimm finde, hier absolute positionierung zu verwenden: Es bläht den Quelltext unnötig auf.
Was mich zu der Frage führt, wieso das nicht im CSS gelöst wurde? Und was mich weiters zu der Annahme führt, dass du kaum Ahnung von HTML+CSS hast. Falls es anders sein sollte, warum zeigst du es dann nicht?

Zitat von paraGTI

Mit der serifenlosen Schrift habe ich schon experimentiert, leider sieht das dann mit Arial nicht mehr so schön aus wie vorher. Ich finde die Schrift macht es irgendwie "billiger". Welche serifenlose Standardschrift ist denn empfehlenswert?

Schlimmstenfalls nimm ein Webfont von google. Oder schau einmal nach, welche Schrift zB das Gulli Board verwendet. Oder google. Oder Facebook. Oder Nachrichtenseiten... Oder...

Zitat von paraGTI

P.S. um die Validierung kümmere ich mich, wenn ich zufrienden mit der Seite bin

Es ist auch sinnvoll, sich während der Umsetzung um eine valide Ausführung der Seite zu kümmern. Wieso sollte man etwas denn zweimal coden? Einmal nicht valide und dann valide... Ist doch schwachsinn

**paraGTI** · 07. 02. 2012, 14:15

Zitat von toldyou

Auch all die position:absolute sind per Hand als inline Style eingetragen?
Es wirkt für mich eben wie von einem automatischen Programm erstellt

Ja alles von Hand, arbeite Seit September 2009 an dem Projekt. (Der Außenbereich ist ja eigentlich nur ein kleiner Teil, InGame ist wegen den ganzen Berechnungen wesentlich komplexer).

Zitat von toldyou

Ich meine die Navigationsgrafiken. Hier sieht man sofort, dass es nur grafiken sind und dass keine Schrift verwendet wurde. Auch das große Hintergrundbild ist meiner Meinung nach verrauscht, das kann man auch schöner machen.

Das ist Absicht. Habe das Hintergrundbild auch noch ohne Blendeffekt/Unschärfe/Körnung vorliegen. Mit der Navi überlege ich noch, was ich da mache.

Zitat von toldyou

Auch der iframe in dem die Begrüßung steht, ist doch unsinnig.

Das IFRAME ist sehr wichtig, finde ich. ICh muss nicht mit MOD_REWRITE irgendwas rumbasteln um die Dateistruktur vor dem Nutzer zu verbergen. Es bleibt immer die URL stehen, und außerdem brauche ich das IFRAME für die Leiste ganz oben. Die soll immer sichtbar sein. Wenn ich sie nur auf dem Außenbereich einbinde, ist sie nach dem Login weg.

Zitat von toldyou

Außerdem macht position:absolute den Inhalt nicht wirklich skalierbar. Wenn ein paar Leuten deine Schrift zu klein ist, dann können sie diese nicht vergrößern.

Die Leute können gern STRG++ bzw. STRG+Mausrad verwenden.
Font habe ich auf serifenlos geändert, passt ganz gut jetzt.

P.S. wegen dem CSS der DIV Boxen: das wird noch vereinheitlich in der outside.css zusammengefasst werden!
Hast du mal einen guten Link zu dem semantischen Stil? Im Prinzip ist das doch aber heutzutage noch nicht wirklich so relevant, oder? Das Headerbild habe ich nochmal überarbeitet. Das alte war wirklich etwas unscharf.

**Brother-John** · 07. 02. 2012, 16:45

Was für mich auf den ersten Blick und laut »Laie!« schreit, ist der Ansatz mit dem festen Contentkästchen. Auf professionellen Seiten sieht man die aus gutem Grund nicht, denn sie haben massive Nachteile.

Meistens lassen die eine Seite winzig und zusammengequetscht wirken. Hier geht es insgesamt, weil auf den Unterseiten sehr wenig Inhalt drauf ist. Ausnahme: die Newsseite. Da entsteht genau dieser Effekt, dass das Browserfenster eigentlich bequem Platz bietet aber die News in ein relativ zum ganzen Fenster winziges Kästchen gepresst werden.
Die ganze Konstruktion ist auf eine feste Browserfenstergröße ausgelegt, was dem Wesen des Webs grundsätzlich widerspricht. Fenstergrößen sind nunmal unterschiedlich. Ein Layout muss sich zumindest in gewissem Rahmen daran anpassen können, was dein Kästchenlayout überhaupt nicht tut. Das heißt:
A) Browserfenster kleiner als das Contentkästchen erzeugen mindestens auf der News-Seite zwei vertikale Scrollbalken: damit ist das vertikale Scrollverhalten kaputt. Dazu kommt evtl. ein horizontaler Scrollbalken, und die sind praktisch immer Mist. Querscrollen ist einfach an sich nervig. Btw: In meinem Browserfenster sind die Scrollbalken da, obwohl das Contentkästchen vollständig ins Fenster passt.
B) Große Browserfenster, v.a. mit großer Höhe: Eigentlich würden die News auf eine Bildschirmseite passen, aber dank des Winzig-Kästchens muss ich trotzdem drei mal scrollen, um alles zu sehen.
Außerdem funktioniert die Skalierung durch den Benutzer nicht mehr sauber, genau wegen dem Mehrfach-Scrollbalkenproblem. Deswegen macht dein Hinweis auf die Broswer-Zoomfunktion keinen Sinn. Denn deine Seite funktioniert damit eben nicht brauchbar.

Im Endeffekt führt das dazu, dass die Seite halbherzig zusammengeschustert wirkt und kein Fluss in die Bedienung kommt, sondern es immer irgendwo mehr oder weniger stark holpert.

Auf dem zweiten Platz in Sachen unprofessionell kommt das Iframe. Ich fühle mich als Benutzer gegängelt. Denn ich will a) an der URL sehen, auf welcher Seite ich mich gerade befinde und b) beim Hovern über einem Link die URL sehen, zu der der führt. Beides ist bei dir nicht der Fall. Damit killst du Standardfunktionalität des Browsers, und das ist schlecht. Im Zusammenhang damit: versuch mal, eine Unterseite zu bookmarken oder jemandem einen direkten Link auf die Infos-Seite zu schicken. Geht nicht.

Aus Benutzersicht sind das imo die beiden großen Baustellen, wo du ran musst.

Zur technischen Seite hat toldyou schon genug gesagt. Wenn man’s pragmatisch sehen will: 100% technische Perfektion ist nicht so zentral wichtig, vom Code kriegt der Benutzer eh nichts mit. Aber: Sauberer, korrekter, semantischer Code erleichtert es unheimlich, eine browserübergreifend einwandfreie Seite ohne offensichtliche Layout-/Funktionsfehler zu bauen: und die Fehler kriegt der User mit.

**paraGTI** · 07. 02. 2012, 17:06

Zitat von Brother-John

Was für mich auf den ersten Blick und laut »Laie!« schreit, ist der Ansatz mit dem festen Contentkästchen.[...]

Hallo danke für deinen ausführlichen Post! Du hast recht als ich angefangen habe, habe ich mir nicht zugetraut dynamisch zu programmieren, darum auch die feste Größe.

Darf ich fragen mit welchem Browser du die Scrollbalken angezeigt bekommst?

Werde mir morgen deinen Post nochmal genauer vornehmen, und sehen was ich davon umsetzen kann. Das Gute an dem Privatprojekt ist, dass ich genug Zeit habe, und es nicht zu einem bestimmten Termin fertigwerden muss.

**Brother-John** · 07. 02. 2012, 17:15

Zitat von paraGTI

Darf ich fragen mit welchem Browser du die Scrollbalken angezeigt bekommst?

Alle.

Also jeweils aktueller Opera, Firefox, Chromium, IE. Alles unter Win 7. Wenn ich das Fenster größer ziehe, verschwinden sie irgendwann. Je kleiner das Fenster wird (aber immernoch groß genug!), destro krasser wirds. Dann tauchen sogar doppelte horizontale Balken auf.

**Kugelfisch23** · 07. 02. 2012, 17:18

Zitat von paraGTI

Das IFRAME ist sehr wichtig, finde ich. ICh muss nicht mit MOD_REWRITE irgendwas rumbasteln um die Dateistruktur vor dem Nutzer zu verbergen. Es bleibt immer die URL stehen,

Weshalb möchtest du das tun? Das ist doch aus den von Brother John genannten Gründen bloss kontraproduktiv. Abgesehen von der grundsätzlichen Problematik der durch Frames verborgenen URIs kommt in deinem Fall erschwerend hinzu, dass durch die Nutzung von POST (und von Formularen anstelle von normalen Links) nicht einmal für jede Seite ein eigener URI existiert, der verlinkt (oder von einer Suchmaschine indiziert) werden könnte. Sowohl hinsichtlich Zugänglichkeit wie auch hinsichtlich Suchmaschinenfreundlichkeit sollte jede Ressource (insbesondere jeder Seite) deiner Website unter genau einem URI zugänglich und über eine semantisch passende Link-Struktur verlinkt sein.

Übrigens widerspricht deine Nutzung von POST-Anfragen auch der Empfehlung des W3C unter http://www.w3.org/TR/html4/interact/...html#h-17.13.1, gemäss der POST-Anfragen nur dann genutzt werden sollten, wenn durch das Abschicken des Formulars Daten verändert werden. Deshalb zeigen verbreitete Browser auch eine Warnung an, wenn eine per POST angeforderte Seite neu geladen wird. Deine Seitenaufrufe verändern jedoch keine Daten.

Zitat von paraGTI

Darf ich fragen mit welchem Browser du die Scrollbalken angezeigt bekommst?

Ich kann das Problem in diversen modernen Browsern reproduzieren, in Firefox z.B. bei einer Viewport-Höhe < 830px.

Anmerkung: Überschneidung mit Brother Johns Beitrag.

**paraGTI** · 15. 03. 2012, 16:34

Hallo, ich hab einiges überarbeitet.

Die Button-Navigation habe ich abgeschafft und durch eine Link-Navigation ersetzt. Die Seite habe ich insgesamt um 150 Pixel in Länge und Höhe vergrößert.

Die News habe ich auf 5 im Außenbereich begrenzt.

Es gefällt mir ganz gut, aber irgendwie wirkt der wenige Text etwas deplaziert.

Sollte ich eventuell das Registrierungsformular schon auf der Infoseite mit unterbringen?

Bekannte/bestehende Probleme sind noch:

- das IFRAME
- Seite scrollt nicht komplett (kann ich nicht so leicht ändern weil der Hintergrund des Content DIVs einen Farbverlauf hat -> ich denke aber weiter drüber nach

Das Ingamedesign habe ich auch überarbeitet. Wers mal testen möchte:

Spielername: test
Passwort: testify

Würde mich über weitere Kritik freuen

**paraGTI** · 19. 03. 2012, 08:56

Passt hier zwar nicht wirklich rein, aber sonst müsste ich ja noch nen extra SEO bzw. Werbethread aufmachen:

Das weiteres Problem, dass ich habe, ist dass es zu wenig Spieler gibt. Twitter und Facebook Account habe ich schon, auch in diversen Toplisten ist das Spiel vertreten, aber so richtig anlaufen tut es trotzdem nicht...

Habt ihr Tipps wie ich das ändern kann?

**toldyou** · 19. 03. 2012, 13:20

Zuerst: Erstelle valides (X)HTML.
Achte auch auf semantisch sinnvolle Umsetzung deiner Seite (auch wenn ich mir sicher bin, dass das schon bemängelt wurde) Eine Navigation ist eine Liste und keine Ansammlung von (noch dazu absolut positionierten) divs wie bei dir.

Die Seite skaliert immer noch nicht, informiere dich über skalierbare Layouts.

Wieso verwendest du unterschiedliche Schriftarten? Text ist auch besser lesbar, wenn er linksbündig geschrieben ist. Das dunkelrot im Footer hat einen zu geringen Kontrast.
Beschäftige dich also auch mit Typografie im Web. (Zb. http://www.smashingmagazine.com/2009...nd-techniques/ )

Hover-Zustand für Links in der Navigation gibt es auch keine.
Wenn du schon hover-Effekte mittels Grafiken realisierst, dann verwende wenigstens Sprites. (Bei der Registrierung zum Beispiel)

Grafiken kann man auch optimieren (Ein 830px x 605px großes Bild für einen Verlauf?)

Auch wenn ich mir die ingame-Screenshots ansehe: Keinerlei Kontrast bei den Links im Footer, eine lieblos hingeklatschte Tabelle und wieder der zentrierte Text.

Meine Empfehlung: Bevor du weiter an dem HTML/CSS Code herumschraubst, entwirf lieber ein ordentliches Design. Bis jetzt ist es nicht wirklich zeitgemäßes Webdesign.