Stellt eure Homepage vor!

[lowpixel]

http://www.malenakoseidis.ch/

Forbidden

You don't have permission to access / on this server.

 

[aliyanage]

hmm... muss ich gleich mal gucken sobald ich zuhause bin... danke!

 

[C64]

Hallo zusammen,

Hier noch ein paar die ich mal gemacht habe mit hilfe von bbedit

http://www.banjoparadise.ch/
http://www.rochat-jp.ch/
http://www.malenakoseidis.ch/

Nr. 1: Wo ist das Design?!? Frames?!? Warum Frames?!? WAHHH! Bei Gallery Bass Guitar gibts auch nen internal error... Also... Mehr Kommentare bedarf es nicht
Die links rechts sind falsch verlinkt. ALso klicke ich auf das kleine Symbol zum w3c bekomme ich folgende URL: http://www.banjoparadise.ch/www.w3.org/
Und wenn man angibt, es sei valide nach w3c, dann sollte es auch so sein

Nr.2: Design ist auch eher.... und valide ist auch das nicht. Was haben die Grafiken rechts mit dem Inhalt zu tun? Überhaupt etwas? Mir fehlt ein schöner Aufbau, die Präsentation des Inhaltes. zB Mal 2- oder 3-Spalten-Layout. Im Text etwas farbiges. Dafür das drumherum nicht so einfarbig rot.

Nr.3: Nix zu sagen

 

[C64]

So, jetzt brauche ich auch noch mal ein paar Ideen und Kritiken:
http://www.creativecat.de/testdesigns/benumusic/

Der Bereich news, artists und die Suchseite sind noch nicht optimal designed.
Aber die Startseite steht soweit ziemlich. (lediglich ein Hover mit Infos zu den dynamisch eingebundenen Bands wird noch in den Slider unten eingesetzt).

Das System basiert auf websitebaker. Ich muss sagen, ein kleines, aber seeehr feines CMS inzwischen!
Was würdet ihr anders machen, was geht gar nicht, was sollte noch optimiert werden (abgesehen auch von der IE-Optimierung - da graust es mir jetzt schon wieder )

Würde mich über Kritik von eurer Seite freuen

 

[hokage]

Tut mir leid das sagen zu müssen, aber vom Code her ist die Seite das absolute grauen. Dass die Seite im Firefox und anderen Browsern richtig angezeigt wird, verdankst du nur der großen Tolleranzgrenze dieser Browser und deren Fähigkeit Code selber zu interpretieren. An eine Optimierung im IW bei diesem Code brauchst du gar nicht zu denken.

Hast du schonmal etwas von Semantik gehört? Ich denke da sollte ich dich mal aufklären.
HTML ist eine Auszeichnungssprache, d.h. man zeichnet seinen Inhalt logisch aus. Dafür gibt es Tags in HTML. JEder Tag hat eine semantische Bedeutung. So nutzt man <p> für Textabsätze, <table> für Tabellen, <h1-6> für Überschriften, <ul> für ungeordnete Listen (z.B. eine Navigation), <div> zum gruppieren von Elementen, und so weiter.

Das Problem zur Zeit ist, dass alle denken Layout mit Tabellen ist veraltet, so dass dieses nun via <div> gelöst wird. Besser wird dadurch allerdings nicht.
Denn HTML zeichnet nur den Inhalt aus (gibt diesem eine Bedeutung) und macht nichts anderes. Die Ausgabe im Browser hat damit nichts zu tun.
Design wird ausschließlich über CSS geregelt und somit ist CSS auch dafür verantwortlich, wie der Browser den Inhalt anzeigt.
HTML und Design sind also 2 unterschiedliche paar Schuhe, die man von einanderer trennen muss.

Hier jetzt abschließend noch ein Beispiel von einem semantisch richtigen Aufbau einer Seite:

<h1 id="header">Überschrift ersten Grades (am wichtigsten)</h1>

<ul id="navigation>
<li><a ...>Link</a></li>
...
...
</ul>

<div id="content">
<h2>Überschrift 2ten Grades</h2>
<p>Ein Textabsatz.</p>
</div>

Abschließend noch 2 wesentliche Informationen:

Man kann jeden Tag in HTML mit CSS formatieren. Nicht nur das <div> Element. An stelle von <div id="header">Überschrift</div>, solltest du <h1 id="header">Überschrift</h1> schreiben.

id's wendet man übrigens nur dann an, wenn die id nur 1 mal auf der Seite vorkommt.
da id="header" einmalig ist, ist eine id hier korrekt.
Wenn du aber jeden Link in einer Navigation gleich formatieren willst. Dann gibst du jedem Link eine Klasse (class="").
Diese Klasse kann auch mehrmals in einem HTML Dokument vorkommen.

Ich hoffe du hast jetzt verstanden, worum es in HTML geht. DU solltest jetzt also diene Website komplett durchschecken und auf Semantik prüfen. Überflüssige divs entfernen und bei Bedarf durch entsprechende, semantisch korrekte Tags ersetzen.

Die Namen der id's und klassen sollten übrigens besser gewählt werden. Das vereinfacht später die Wartung deiner Website.

Grüße hokage

 

[lowpixel]

So, jetzt brauche ich auch noch mal ein paar Ideen und Kritiken:
http://www.creativecat.de/testdesigns/benumusic/

- Ich würde in der Navigation nicht nur den "Textlink" verlinken sondern den ganzen Button.
- Das Hintergrundbild rechts auslaufen und nicht so abgehackt dastehen lassen.
- das Mikrofon richtig zentrieren und den restlichen Teil entsprechend in der Breite verändern "das Label für junge..."
- aktive Links hervorheben
- rechts bei " Veranstaltungen am 21. Januar 2010 " das blau will mir überhaupt nicht gefallen, vllt. einen kleinen Verlauf einbauen?
- Der Footer sieht wesentlich frischer aus, evtl die Blautöne entsprechend anpassen?

Gruß

 

[C64]

@lowpixel: Danke für die Kritik. Werde mir deine Punkte noch mal genau ansehen und die kommenden Tage bearbeiten. Insbesondere das mit dem Hintergrundbild... das sollte eigentlich auslaufen
Bei den Veranstaltungen habe ich ja bereits geschrieben. Dies Seite ist noch nicht fertig.

@hokage: War das auf mich bezogen?!? Also erst mal danke für die Kritik, aber ich finde mich in deiner Kritik nicht wieder.
Wo habe ich bitte IDs zweimal verwendet? Wo weiße ich fehlendes Wissen über Semantik auf? Und dass ich auch in p ein a ein h1-6 und alles über Klassen und IDs gestalten kann ist mir auch klar. Das tue ich ja regelmäßig auf der Seite.
Es mag sein, dass der Code nicht so schön ist, wie wenn ich ihn komplett selbst tippe, aber selbst der vom CMS generierte (WYSIWYG) ist in meinen Augen nicht so schlecht, dass er sich in deiner Kritik wieder finden würde. So etwas wie dein zitiertes "<div id="header">Überschrift</div>" habe und würde ich nie verwenden.
Vielleicht hast du dir zufällig auch nur den Code von "news" oder "artists" angesehen. Dort habe ich zwei Module verwendet, deren Code ich noch nicht angepasst habe. Die spucken vielleicht etwas aus, was dir sauer aufstößt... Aber ich sehe da auch nur weniges, was in deine Kritik passen würde.
Also den Code als "absolute grauen" zu bezeichnen, kann ich nicht nachvollziehen.

Ich gebe auch zu, dass ich divs für deutlich flexibler und daher angebrachter in modernem Webdesign halte als Tabellen (wobei Tabellen weiterhin ihren berechtigten Platz haben!). Aber diese Diskussion möchte ich jetzt gar nicht vom Zaun brechen.

Danke also für die Aufklärung, aber das habe ich bereits alles gewusst, denn ich habe bereits sehr viel von Semantik gehört.
Bitte poste mir doch mal Beispiele (und bitte nicht artists und news nehmen, da habe ich wirklich noch zu wenig dran rumgeschraubt) in denen deiner Meinung nach der Code grauenhaft ist.

Edit: Jetzt hab ich deinen Post noch ein paar mal überflogen. Also wenn du meinst, dass ich die erste Überschrift vor der Navigation und dann erst mal ne Überschrift 2. Ebene bringen MUSS, dann ist das absoluter... Dann sähen ja alle Seiten gleich aus. Und alles mit absolute dann wieder an die richtige Stelle schieben... eyeyey... aber vielleicht habe ich dich da ja nun wirklich missverstanden.

 

[C.Schwab]

C64:

- Ich würde den Hintergrund mitwandern lassen. Je nach Auflösung hängt der Content dann zu weit rechts. (Ist das nicht der Leopard Hintergrund?)
- Die Social Icons finde ich viel zu groß. Das sieht irgendwie klobig aus, vor allem die extremen Schatten darunter.
- Schrift bei News ist schwer leserlich
- Der "Unser Musikverlag"-Kasten ist in der Höhe zu lang.
- allg. der Footer ist für dessen schmächtigen Inhalt etwas zu groß. Da würde ich mich grafisch noch etwas austoben.

Deine Handschrift ist jedenfalls zu erkennen .

 

[bennibrother1]

C46:
Eine Sache muss ich auch noch hinzufügen.
Wenn man das Fenster in der Breite verkleinert, bewegt sich irgendwann nur noch das Micro, sodass man
das Logo nichtmehr lesen kann. Evtl mal begrenzen.

 

[hokage]

Also...

dann werde ich mal etwas konkreter und beziehe mich auf deinen Code direkt.
Wenn ich mir deinen Code anschaue, dann sehe ich da nicht nur einmal fehlerhafte Anwendungen von dem div Element.
Dass du von Semantik Ahnung hast und weisst, wie es richtig geht, ist lobenswert, aber dann solltest du es auch richtig umsetzen. Ich weiss sehrwohl was ein CMS (Content Management System) ist. Des Weiteren weiss ich, wie man damit umzugehen hat. Wenn man sich ein CMS selber schreibt, dann ist das Ergebnis meistens auch gut, wenn man Ahnung von der Materie hat. Ob du dir eins gedownloadet hast, oder ob du es selber gecodet weiss ich nicht.

Ich gebe dir also ein paar Beispiele...

<div class="search_box">
            <form name="search" action="http://www.creativecat.de/testdesigns/benumusic/search/index.php" method="get"><input type="hidden" name="wb_7546_session_id" value="957aeb764b7e9a7d1e6b84bff9e724f2" />
                <input type="hidden" name="referrer" value="2" />
                <input type="text" value="Suchen..." onfocus="this.value=''" onblur="this.value='Suchen...'" name="string" class="search_string" />
                <input type="submit" name="wb_search" id="wb_search" value="Go!" class="search_submit" />
            </form>    
</div>

Warum gist du die Klasse einem div? Dem form Element kann man auch Klassen zuweisen...
Des weiteren fehlen deinem Formular 2 wichtige Elemente. Fieldset und Label. For allem der Label Tag ist wichtig. Google wird dich darueber aufklaeren.

Ausserdem misbrauchst du das hr Element fuer designerische Zwecke. Eine Trennlinie, die dem Design dient, macht man mit border-bottom in CSS.

Du verwendest bei dem img Element falsche Attribute:

<img width="50" height="50" align="left" alt="" src="[URL="http://www.apfeltalk.de/forum/view-source:http://www.creativecat.de/testdesigns/benumusic/media/Reel1.png"]http://www.creativecat.de/testdesigns/benumusic/media/Reel1.png[/URL]" />

Align="left" ist ein designerisches Attribut aus den Zeiten ohne CSS. Heutzutage macht man sowas mit CSS.
Das aeusserst wichtige alt Attribut laesst du leer. In dieses traegst du einen alternativen Text an, fuer den Fall, dass jemand ohne Bilder browst. Wenn das Bild keine Bedeutung fuer den Inhalt hat und mehr dem Design dient, dann wird das Bild auch nicht in HTML, sondern in CSS eingebunden. Sollte es einen inhalt haben, dann solltest du den Bildinhalt in deinem Alt Text beschreiben.

Weiter gehts...

<div class="sliderband"><img src="[URL="http://www.apfeltalk.de/forum/view-source:http://www.creativecat.de/testdesigns/benumusic/media/members/Bildschirmfoto%202010-01-11%20um%2000.17.50.png"]http://www.creativecat.de/testdesigns/benumusic/media/members/Bildschirmfoto 2010-01-11 um 00.17.50.png[/URL]" alt="test" /></div>

Warum umgibst du das Bild mit einem div? Gib die Klasse direkt dem img. Ausserdem hast du in letzterem die height und width Attribute vergessen, die im Browser Platz fuer das Bild vorreservieren.

du willst noch mehr? ok...

<h1>Herzlich willkommen<br />
bei <strong>benu</strong>music.<strong>group</strong></h1>
<h1>No flash player!</h1>

Auf einer Seite nutzt du 2 mal h1??? Ich weiss nicht, ob dir die bedeutung des h Elementes klar ist. Mit dem h Element (h1 -h6) taggst du deine Ueberschriften nach wichtigkeit. Die Hauuptueberschrift auf deiner Seite (vll. der Titel der Seite), ist h1. Dementsprechend nutzt du dann h2 fuer Ueberschriften 2ten Grades und soweiter. Das Aussehen und die Groesse der einzelnen Ueberschriften kannst du mit CSS festlegen.
Es ist einfach semantisch unmoeglich, dass du 2 mal eine h1 Ueberschrift auf einer Seite hast. Und ganz ehrlich...
No flash player! ist fuer mich keine Uberschrift. Nutze den Strong tag um die Wichtigkeit dieser Feststellung auszudruecken.

Da du fuer gut alles und jedes das Div Element nutzt und deshalb dein Code auch eine einzige Div Suppe ist, blicke ich da nicht so schnell durch. Ich bin mir sicher, dass ein Grossteil dieser ganzen divs unnoetig sind. Auf Grund von Zeitmangel belasse ich es aber mal dabei.

Ich hoffe ich bin jetzt zu deiner Zufriedenheit auf deinen Code iengegangen. Ich bin17 Jahre, gehe noch zur Schule, habe kleine Seminare besucht und behaupte trotzdem, dass ich mehr Ahnung in HTML und CSS habe, als viele Andere. Ob du meine Kritik annimmst, ist deine Sache und dass du behauptest, Seminare besucht zu haben, sagt fuer mich gar nichts aus. Ich habe erlebt, wie Informatik an meiner Schule unerrichtet wird und das war das reinste Grauen.

Ich vertaeufle uebrigens weder das Div Element, als auch das table Element. Wenn du tabellarische Daten hast, dann nutzt du table. Wenn du mehrere Elemente gruppieren willst, dann nutzt du div. Beides nutzt man aber nicht, um ein gewisses Design zu erzielen. Dafuer ist ausschliesslich CSS fuer zustaendig.

Aber ich denke das weisst du ja alles schon.

gruesse hokage

 

[Member 82452]

Hallo zusammen...

diese beiden Seiten habe ich mit Rapidweaver erstellt.

http://www.tidm.de

http://www.mx5-info.de

 

[C64]

Um die Diskussion, die ich persönlich als PN sinnvoller fand nicht in die Länge zu ziehen:
Das CMS ist wie bereits erwähnt websitebaker. Warum soll ich mir die Arbeit machen und ein komplett eigenes CMS coden, wenn ich auf ein recht gutes OpenSource-Projekt zurückgreifen kann?
Das Suchformular wird beispielsweise vom CMS generiert und ich glaube nicht, dass sich irgendein Browser an dem Div stören dürfte und auch die Semantik dürfte damit nicht gestört sein. Auch das align="left" wird vom CMS generiert. Ich habe mir für diese Zwecke Klassen definiert (alignleft, alignright) und nutze die auch, wo immer ich kann. Die teilweise noch leeren Alternativtexte rühren daher, dass es sich teilweise noch um Beispielgrafiken handelt.

<div class="sliderband">

wird noch benötigt, weil in genau diesem Div noch ein weiterer platziert wird, der mit jQuery dann beim Hover eingeblendet wird.

<h1>No flash player!</h1>

ist ebenfalls ein freies Skript, das ich aktuell nur eingesetzt habe, aber noch nicht näher bearbeitet. Hier kann ich dir Recht geben, dass hier gar kein h-Tag benötigt wird.
Es ist ja lobenswert, dass du dir dein eigenes CMS zusammenschreibst. Ich persönlich habe keine Zeit dafür.

Ich akzeptiere deine Meinung zu meinem Code, gebe dir in kleinen Teilen recht, widerspreche dir aber in anderen Punkten vehement.

 

[hokage]

Gut, dnan bin ich hier wohl fertig und gebe an dieser Stelle auf. Ein CMS ist NICHT gut, wenn es veralteten Code generiert, der keiner Semantik entspricht. Und deine Argumentation ist einfach falsch. Dass der Browser deinen Code richtig darstellt, hast du nnur den toleranten Browsern zuverdanken.
Meine Meinung habe ic jetzt zum Ausdruck gebracht und wenn du diese nicht akzeptierst/einsiehst, dann ist das deine Ignoranz und nicht mein Problem.
Gestallte deine Website, wie du moechtest. Richtiger wird es dadurch trotzdem nicht.

Ich gebe dir mal einen link: http://html.de

Melde dich dort an und poste deine Website dort unter Websitecheck und schau was die Experten sagen.
Vll. glaubst du denen mehr als mir und laesst dich ueberzeugen, dass ich recht habe.

Das ist deine Entscheidung und mir ist es recht egal. Ich poste und helfe hier freiwillig, in der Hoffnung etwas zu bewirken. Kommt das nicht an, kann ich da nichts dran aendern.

So long

hokage

 

[jonimke]

So dann möchte ich auch einmal die Gelegenheit nutzen und eine Seite vorstellen, die ich zusammen mit einem Freund für unseren Abiturjahrgang erstellt habe.

Es handelt sich dabei um ein Abiparty Portal für die beiden Gymnasien bei uns in der Stadt.

http://www.abi-party2010.de

 

[bennibrother1]

Mhh, die Seite sieht ansich gut aus. Die Frage ist, ob das Design zu einer Abi-Party passt, aber naja.

Zum Quellcode. Der ist relativ unübersichtlich, weniger Absätze und Einrückungen wären besser.
Was mir irgendwie komisch vorkommt, sind die vielen ineinander verschachtelten Divs. Das macht das ganze noch unübersichtlicher.
Die Divs kann man auch so anordnen:

<div id="blabla>
Text
</div>

<div id="bloblo">
Text
</div>



Ansonsten scheint mir der Code auch wie von einer billigen Templatesite, sorry wenns nicht so ist.

 

[nickdesignz]

Ansonsten scheint mir der Code auch wie von einer billigen Templatesite, sorry wenns nicht so ist.

hmmm

(c) 2009 abi-party2010.de. Design by nodeThirtyThree + Free CSS Templates

 

[Mac4FirstTime]

Habe auch ein paar HPs... Schönste Bilder sind auf der Foto HP zu sehen http://www.trinity.dogsports.at

 

[Stefo]

Vlt mag sich jemand bei Zeit mal meine Seite anschauen, bis auf das Gästebuch (muss ich noch coden) bin ich recht zufrieden damit.
Benutztes JS-Framework ist Mootools, gibts da etwas einzuwenden? (Ich meine würd sichs lohnen, sich in JQuery einzuarbeiten?)
Die Seite:
stefan.fochler.de

mfG
Stefan

 

[C.Schwab]

Das fällt mir nur ein: Rollover-Grafiken vorladen...

 

[C64]

@stefo: Der Validator haut ein paar Fehler raus.
Die Hovergrafiken in der Navigation müssen beim ersten Hover erst mal geladen werden. Das ist ungünstig, weil dann überall erst mal ne Sekunde gar nix da ist. Du kannst im Grunde alle Navigationspunkt in eine einzige Grafik schmeißen und nur die background-position ändern. Das ist oft sinnvoller
Ansonsten ist mootools oder jQuery sicherlich auch eine Geschmacksfrage. Ich persönlich stehe deutlich mehr auf jQuery. Schönes sauberes JS
Warum verlinkst du unter "works" deine Arbeiten nicht?