Stellt eure Homepage vor!

[drp]

Okay, ich stelle dann auch mal wieder etwas vor^^. Diesmal geht es wieder um die Startseite meiner Homepage.
Ich hab nochmal von ganz vorne angefangen, und hoffe dass es diesmal wieder besser geworden. Die Seite ist in Arbeit, aber das gröbste (Intro, und Seitenaufbau) wäre schon fertig. Am Anfang habe ich ein kleines Bild eingebaut, dass ich mit Autodesk 3DS Max gerendert habe. Über Verbesserungsvorschläge wäre ich sehr dankbar

P.S. ( Diesmal mit Text-align: left; für die Haupseite! )
http://drp-seiten.de/beta2/
Edit: und worauf ich ganz besonders stolz bin: Es funktioniert sogar im IE!

 

[Gokoana]

Bin ich der einzige, der keinen Link sehen kann?

 

[hokage]

@Gokoana: Nein

 

[vitus37]

Diesmal geht es wieder um die Startseite meiner Homepage.

Homepage ist in der Signatur verlinkt.

 

[Gokoana]

Homepage ist in der Signatur verlinkt.

Signaturen sind in Tapatalk nicht existent, wie es aussieht.

 

[drp]

Oh, ich habe tatsächlich den Link vergessen Okay steht jetzt drin...

 

[Gokoana]

Oh, ich habe tatsächlich den Link vergessen Okay steht jetzt drin...

"Kurzes" Lorem Ipsum - Klasse! :-D

Du solltest eine Möglichkeit schaffen, dieses "Intro" überspringen zu können. Die ersten Sekunden entscheiden darüber, ob ein Besucher bleibt. 90% der Intros bewirken ein sofortiges Wegklicken.

 

[drp]

Homepage ist in der Signatur verlinkt.

Stimmt auch, allerdings habe ich es noch nicht in das Hauptverzeichnis gepackt, da es noch nicht fertig ist. Also die neue Seite ist nicht die Seite unter http://drp-seiten.de/ sondern unter http://drp-seiten.de/beta2

 

[drp]

Stimmt. Geht mir bei manchen anderen Seiten genauso - nur wenn es die eigene Seite ist, kommt man irgendwie nicht drauf
Ich habe auf jeden Fall jetzt einen Link eingefügt, mit dem man das Intro sofort überspringen kann.

 

[hokage]

@drp:

1. Dieses grau als Hintergrundfarbe lässt die Seite trist und düster wirken. Versuche es doch einmal mit einem schlichten weiß als Hintergrund und setzte Farbakzente durch Bilder, Schriftfarben, evtl. Textboxen mit einer leicht vom weiß abweichenden Hintergrundfarbe.

2. Als Schriftfarbe würde ich auf weißem, oder generell hellen Hintergrund ein dunkles grau - schwarz empfehlen. text-align:justify an Stelle von left bringt den Text in Blocksatz und wirkt professioneller. Gib dem Text zusätzlich noch ein line-height von ca. 1.5em um den Zeilenabstand zu erhöhen. Liest sich angenehmer.

3. Arbeite mit margin und padding um Abstände zu erzeugen und der Seite mehr Struktur zu geben. Der Text klebt mir zu sehr am Viewportrand.

Designerisch kann ich mehr dazu nicht sagen, weil die Seite einfach keinen Inhalt hat, aber ansprechen tut sie mich auf Grund grad genannter Kritik noch nicht.

Zum Code:

1. Du verwendest 2 mal den <h1> Tag, was nicht weiter verwerflich wäre, wenn der Inhalt identisch ist. Eine Seite kann nämlich nur eine Hauptüberschrift haben. In deinem Fall wäre das wohl "DRP-Seiten". Der "Herzlich Willkommen" Text müsste entweder ein <h2> bekommen (für den Fall, dass es eine Überschrift ist, oder ein <p> in Kombination mit <em> oder <strong>, wenn es ein wichtiger Fließtext ist.

2. <div id="menu"> ist überflüssig. Gib die id direkt dem <ul> Tag. Also, <ul id="menu">.
<div id="image" style="display: none;"> ist ebenfalls überflüssig. Gib die id dem <img> Tag direkt und die Style-Angaben werden ins Stylesheet ausgelagert. Trennung von Inhalt und Design ist das Stichwort.
Gleiches gilt für <div id="nointro" style="display: none;">...

3. Auch wenn html5 diese Altlasten weiter beibehällt halte ich nichts vom <i> und vom <b> Tag, da diese bereits eine Designänderung implizieren. Ich würde für leichte Betonungen zum <em> Tag und bei starken Betungen zum<strong> Tag raten, da diese semantisch einwandfrei definiert sind. Formatieren kannst du dann nach belieben in CSS. Kursiver Text wird durch font-style:italic; ermöglicht und "dicker" Text mit font-weight:bold;

Abschließend noch etwas zum Intro... In deinem Fall halte ich es für komplett überflüssig, da ich nur eine Grafik sehe, die in keiner Weise aussagekräftig ist. Meiner Meinung nach benötigt keine Website ein Intro, und wenn, dann kann man dieses in Form eines Videos auf die Startseite integrieren. Dann hat man aber trotzdem direkten Zugriff auf die Seite und muss nicht warten. Dieser "Intro überspringen"-Button ist auch völliger Kappes. Einfach das Intro weglassen, die Grafik z.B. als Headergrafik in die Seite einbauen und schon wirkt das Ganze nicht mehr so trocken/langweilig und der User muss nicht sinnlos warten.

 

[wdominik]

Da Du ohnehin HTML5 verwendest, würde ich an Deiner Stelle auch semantische Tags wie header, nav, footer, section, article, aside, … benutzen, dann musst Du nicht alles als div auszeichnen.

Die Skriptelemente würde ich auch klar vom Inhalt/HTML abtrennen, also das <body onload=…> z. B. mit einem DOMContentLoaded-Event ersetzen, analog ein click-Event für die onclick-Attribute der Menüeinträge.

Du hast vergessen, Dein float:left; wieder mit clear:left; abzuschließen, also fließt der Text um das Menü sobald dieser höher als 600 px ist. Ich würde dem Menü auch keine minimal Höhe von 600 px geben, sondern einfach die Höhe nutzen, welche es auch wirklich benötigt. Die Liniengrafik würde ich dann einfach dem darunterliegenden Element zuweisen. Sonst erscheint die Scrollleiste selbst dann, wenn unterhalb nur ein leerer Bereich mit Trennlinie kommt.

Auch würde ich an Deiner Stelle ein Farbschema durchgehend nutzen. Blau beim Intro, Grau auf der Hauptseite wirkt etwas zu sehr zusammengewürfelt.

Du nutzt eine Seitenbreite von 100 % – dass ist eigentlich gut, aber Du müsstest dann auch den gewonnenen Platz auf großen Monitoren besser nutzen. Zu lange Textzeilen empfindet man schnell als unangenehm. Auch ist ungenutzter Platz oft gar nicht mal verkehrt, da wirkt nicht alles so eingeengt und unübersichtlich.

 

[puschtie]

Hi, ich möchte wirklich nicht dass das wie Spam wirkt, aber ich hatte wirklich gehofft das ich mal ein wenig Feedback über unsere Seite http://www.tipstersworld.com bekomme ---> thread, http://www.apfeltalk.de/forum/stellt-eure-homepage-t117449-276.html

Ich hatte das Gefühl das ich gerade in eine mittelschwere Diskussion reingepostet habe und so etwas untergegangen bin.

Also ich wäre über negative/positive Kritik wirklich sehr dankbar. Wir arbeiten nun schon fast 3Jahre an der Sache und irgendwann ist man manchen Punkten einfach nicht mehr so objektiv gegenüber..

 

[Slashwalker]

Also, da ich selber kein Design Crack bin und man über Geschmack bekanntlich streiten kann, widme ich mich nur dem Quellcode.

Fangen wir mal ganz oben an:
Kein Doctype -> ganz schlechte Idee! Ohne Doctype springen viele Browser (wenn nicht sogar alle) in den Quirksmode.
<center> sollte man Zwecks Trennung von Struktur/Layout nicht mehr nutzen (ebenso wenig wie font)
JavaScript sollte extern ausgelagert werden. Wenn man trotzdem (tu ich manchmal auch) Funktionen direkt im HTML aufruft, dann bitte nach dem Body. Funktionsdeklarationen haben aber nie etwas im HTML zu suchen. Dein Menü ist die reinste DIV-Suppe.
Tabellen sollen tabellarische Daten darstellen und sollten nicht für's Layout vergewohltätigt werden

<div class="text">
                            
                            Tipstersworld ist die Community zum Thema Sportwetten. Registriert euch kostenlos auf unserer Plattform und legt euch ein persönliches Profil an. Nutzt die umfangreichen Möglichkeiten von Tipstersworld und profitiert vom Wissen unserer weltweiten Gemeinschaft. Tipstersworld ist das weltweit Erste Community System das speziell auf die Wünsche und Bedürfnisse von Sportwettern zugeschnitten ist. Wir freuen uns auf euren Besuch!
                            

                                </div>

Sollte mit einem p umschlossen werden. Gilt für alle Texte, die blank in einer Div rumlungern.
Generell zuviele Divs und zuviel inline JS.

Und damit gebe ich ab an hokage, der findet sicher noch mehr

 

[drp]

Also erstmal nochmals danke für die Verbesserungsvorschläge, hokage und wdominik. Ich wollte jetzt - da ich das Menü etwas langweilig fand - das Menü schräg anordnen, dann wäre das nicht so langweilig. Bis jetzt nur an webkit angepasst habe ich es auf der Seite schon versucht, aber es ist schon so schräg (um 25 Grad gedreht). Allerdings wollte ich, dass der Text rechts das Menü so umfließt, also dass das pro Zeile etwas weiter nach links geht - ich hoffe ihr wisst was ich meine - in etwa so wie auf der Homepage von Avicii: http://avicii.com/ . Ich weiß, ich weiß das ist mit Flash gemacht, aber mit HTML(5) sollte es doch eigentlich auch möglich sein, oder? Also float habe ich schon drin, aber der Text merkt irgendwie nicht, dass der Text gedreht wurde^^.. Jemand eine Idee?

 

[drp]

@puschtie, was mir bei deiner Seite so direkt aufgefallen ist, ist die outline bei dem Registrierungs-Formular. das ist nicht wirklich am Rand - ich weiß nicht ob es nur im Chrome ist oder auch in Safari & Co. aber so schön finde ich das nicht ^^ am besten für die inputs dort einfach per CSS

outline:none;

und dann bei input[type="text"]:focus einfach einen anderen Border machen - damit man erkennt in welchem Eingabefeld man gerade ist...

EDIT: Hier noch ein Screenshot: http://clip2net.com/s/1cDya

 

[Maulwurf1990]

@puschtie:
- Wozu brauchst du das Vollbild-Flash beim Aufruf der Hauptseite? Ich konnte auf den ersten Blick nichts erkennen, was erst nach dem Ausführen des Flashs nutzbar wurde.
- Im Header ist der Punkt „Über uns“ mit dem RSS-Feed verlinkt und nicht mit der Über uns-Seite
- apropos Header/Footer: Brauchst du wirklich beide, also Header und Footer? Denn viele Sachen überschneiden sich und so hoch ist die Seite auch nicht, dass man eine Ewigkeit scrollen müsste, um an die Menüpunkte zu kommen.

 

[hokage]

@puschtie:

Mich würde interessieren, was du gerne bewertet haben möchtest... Du schreibst, dass die Website von einer renommierten Webdesignfirma gecodet wurde. D.h., dass du dich mit HTML, CSS, PHP, Javascript, etc. zu 99% nicht auskennst (sonst hättest du wohl mit deinem Team die Seite selber gebaut). Daher wird es dir wohl auch nichts bringen, wenn ich Slashwalker zustimme und abkürze, dass der Code einfach nur grausam ist. Die Mühe einzelne Beispiele rauszusuchen mache ich mir in diesem Fall nicht. Allgemein sei nur gesagt, dass HTML bei deiner Seite missbraucht wurde und von Semantik bzw. einer logischen Auszeichnung des Inhalts) nichts zu sehen ist. Ansatzpunkte und Beispiele hat Slashwalker bereits genannt.

Wo du evtl. Kritik zu möchtest ist vll. das Design, da du auf dieses womöglich selber Einfluss genommen hast (weiß man allerdings auch nicht). Dazu sei nur gesagt, dass ich kein Freund von dunklen, in deinem Fall schwarzen, Seiten bin, die weiße Schrift nutzen. Umgekehrt sieht es meiner Meinung nach besser, freundlicher aus und für meine Augen ist es auch angenehmer. Die Schrift bei deinem Hintergrund finde ich zu unruhig. Lenkt von der eigentlichen Seite ab.
Ansonsten sieht das Design für mich nach 0 8 15 aus, was nicht schlecht sein muss, aber auch keiner weiteren Kritik bedarf. Es passt so, wie es ist. Farbgebung und Hintergrundwürde ich aber noch einmal überdenken.

Funktionalität, auf die du besonders stolz zu sein scheinst, werde ich nicht testen, weil mich keine Sportwetten reizen und ich schon genügend Accounts bei allen möglichen Seiten habe.

 

[puschtie]

So erst mal danke bezüglich eurer Aussagen, genau so etwas wollte ich ja wissen

Also bezüglich Code. Bevor die eigentliche Firma das ganze übernommen hat, hatten wir das ganze in die Händer eines Coders gegeben, der gemeint hatte, er könne das alles umsetzen. Wir haben ihn über 6Monate machen lassen, bevor uns wirklich klar geworden ist, was da wirklich passiert.
Leider steckt noch sehr viel von dem alten drin, wobei hier auch die neue Firma viele Sachen hätte ändern müssen. Ursachen dafür gibt es viele...

@ hokage
Könnte man hier eigentlich auch Stück für Stück ansetzen und den Code verbessern, denn das Ganze komplett umstricken zu lassen, dafür fehlt uns im Moment das Geld.
Oder dann lieber erst einmal so lassen und irgendwann komplett überarbeiten am stück?

@ Maulwurf1990
Also bezüglich vollbild flash stehe ich gerade auf dem Schlauch, verstehe nicht 100% was du meinst ?
Bezüglich der kleinen Fehler, bzw. Änderungen, Danke werde das gleich mal weiter geben.

@drp - Danke dir, gebe ich auch gleich weiter.

 

[Maulwurf1990]

Leider(?) kann ich das mit der Flash-Einblendung bei mir inzwischen auch nicht mehr nachvollziehen. Mir ist das gestern nur aufgefallen, weil ich einen Flash-Blocker aktiviert habe und da muss man eben jede Flasheinblendung auf einer Seite manuell einschalten. Aber wenn es jetzt nicht mehr so ist, dann ist ja auch nicht weiter schlimm.

 

[puschtie]

Also auf der reinen Startseite http://www.tipstersworld.com ist eigentlich nirgends flash.

Auf unserer (quasi) 2. Starsteite http://www.tipstersworld.com/default.aspx gibt es 2 Flashbanner, eventuell meinst du diesen.

Hoffe es meldet sich noch einmal jemand bezüglich meiner gestrigen Fragen, ansonsten schon einmal großen Dank für das feedback.