Guten Tag Allerseits,


Da ich hier immer die besten Kritiken und Verbesserungsvorschläge bekomme, würde ich Euch gerne mein neuestes Projekt vorstellen: Tonschmiede - Das Blechprojekt

Es handelt sich dabei um ein (absichtlich!) sehr schlicht gehaltenes Design mit sehr kurzen, informativen Texten (für Texte und Inhalt bin ich nicht verantwortlich).

Ich habe versucht das Design auf 2-3 Hauptfarben zu begrenzen und es für ein Zielpublikum von jung bis alt zu gestalten.

Ich wäre sehr froh wenn Ihr hauptsächlich den Code ein wenig zerpflücken könntet und vielleicht ein paar Tipps hättet was noch verbesserungs- und ausbaufähig wäre. Ich lerne immer gerne neues! Ich habe den Code extra dokumentiert, sollte also kein Problem sein diesen zu lesen

EDIT: Es wird noch ein sehr vereinfachtes CMS eingebaut (Pulse CMS). Da dieses CMS (leider!) keine Klassenwahl besitzt, habe ich schlicht und einfach die h1/2-Tags dazu misbraucht als Style zu funktionieren. Werde die Tage allerdings bald mal auf ein anderes CMS, mit mehr Optionen, umsteigen.

Ich danke Denen die Sich die Mühe machen schon mal herzlichst im Vorraus und ich freue mich auf Eure Kritiken, Comments und Anregungen.


Freundliche Grüsse,

Phil

__________________
 = ♥ .: MacBook Pro Unibody, 2.8 GHz Intel Core 2 Duo, 4 GB 1067 MHz DDR3, NVIDIA GeForce 9400M/9600M GT :.

Servus!

An sich ein nettes, schlichtes Design, ansprechend.
Texte sind mir etwas zu lang, aber vor allem zu breit.
Etwas mehr Schriftgrösse/Zeilenabstand und grössere Bilder würde denke ich gut tun.

Die Textblöcke etwas mehr Padding (Weissraum) so frei nach dem Motto meines Musiklehrers: "Man muss auch die Pausen spielen"...

Was sind denn CV´s? Wenn ich es nicht weiß, werden dass dann die Besucher wissen?

Die Bedienungspfeile in der galerie (unter den Bildern wenn aufgezoomt) könnten auch deutlicher sein. Wass hier auf jeden Fall fehlt sind Bildunterschriften ...

Das hier ist bloß das Design, technische Kritik überlasse ich den Kapazundern hier.
Was allerdings auffällt ist, das Du dich gerne verfrickelst mit all den spans und Divs.
Wrapper sollte alles umschliessen, dann ist es einfacher in der Mitte zu halten.
Logo kann/soll mit H1 und Image replace gelöst werden, Navi braucht auch kein div, Du kannst das ul direkt stylen.

h2 wird hier für einen Vorlauf "missbraucht" und die sehr ernsthafte Erkrankung divitis kommt im Content Bereich voll zum Ausbruch.
Hier wäre wohl ein bissi was zu tun...

Lieben gruß
Thomas

Hallo

Vermute, das war ein Gag?
Die kleine Schrift und dann solche geballten "Textmonster". Glaub nicht, dass da was hängenbleibt beim Besucher (schreckt eher ab).

Technisch:
wie Thomas schon sagte... zig spans, divs (leere!), <br />.
<b>,<i> ist out --> font-weight: bold, font-style: italic
andernfalls ist das <strong> (wichtig) und <em> (betont)

mehrere h1? Eigentlich nur 1x pro Seite.
font-size in px?
IE 6 +7 --> Layout zerlegt!

Manfred

Hi pkipper

Hier meine Ansichten zu der Seite.

Das Design ist schon fast etwas Fade, kein einziges farbiges Highlight.

Ansonsten eine einfache schlichte Seite mit guter Aufteilung. Zu den zu langen Texten vielleicht ein Tipp: Nimm einfach einen kurzen persönlichen Text und packe die fixen Daten in eine "kleine" Tabelle darunter.

Der Hovereffekt in der Navigation ist mir zu gering. Beim Kontakt-Formular musst du noch mal nachbessern (siehe W3C-Validator).

Den Hovereffekt in der Bildgalerie finde gut!
Jedoch bekommt man ohne JavaScript das Bild nur in einem Fenster ohne Back-Link und der Möglichkeit innerhalb der Galerie zu blättern. Vielleicht könntest du da noch nachbessern.

Als letztes fällt mir noch auf, dass das Zitat in der Grafik ganz unten nicht als alt-Text angegeben ist. Das ist schade für Besucher die zwar hören, aber nicht sehen können.

EDIT: Was mir noch aufgefallen ist, die Distanzierung von Links im Impressum sind Blödsinn!


Gruß
Webcoder

Worfür ist der Button "Felder zurücksetzen" im Kontaktformular gut? Imho ist das einzige was der bringt, deine Besucher zu verärgern. Wenn man ein Formular so aufgefüllt hat und dann den ersten Button drückt den man findet, dann war es der Falsche und alle Angaben sind wieder weg. Ich würde das Formular dann nicht noch einmal aufüllen, somit hättest du mindestens einen Kunden verloren.

Mal so nebenbei. Wenn jemand das fertig geschriebene Formular dann noch nicht absenden will, dann verlässt er einfach die Seite. Beim nächsten Aufruf sind dann alle Felder wieder leer

Achso: @para: CV ist die Abkürzung für Curriculum Vitæ, was auf Deutsch Lebenslauf bedeutet.
@pkipper: Ich würde es dennoch in Deutsch ausschreiben ^^

__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!

@paracelsus:

Herzlichen Dank für dein Input bezüglich der grafischen Aspekte!

Was die Texte und vor allem Textlänge anbelangt so habe ich leider kein Mitspracherecht Mit dem Padding und Zeilenabstand hast du sicherlich recht, ich werde mir das nochmals überdenken (leider bleibt mir nicht mehr allzu viel Zeit an dem Projekt zu arbeiten ).

Was genau meinst du mit:
Die Grafiken sind nämlich Teil der Shadowbox und wurden von mir unverändert eingebaut... (Vielleicht ein Bug?)

Ich danke dir für den Hinweis mit dem Div was die Navi-ul umschliesst, werde das noch ändern.

Was die übermässige Nutzung der h1/h2 Tags anbelangt so habe ich vergessen zu erwähnen dass ich ein sehr vereinfachtes CMS verwende (besser gesagt verwenden werde). Das CMS Tool beinhaltet leider keine Klassenauswahl und da es im CMS allerdings die Möglichkeit gibt h-tags auszuwählen habe ich diese kurzerhand missbraucht. Ergo ist h1 der jeweilige Titel, h2 der Intro Paragraph und p der normale Text. Vielleicht nicht sehr schön, aber für den User im Endeffekt sehr sehr einfach umzusetzen.

Was die Divitis anbelangt so ist jeder Block in drei Teile unterteilt. Die erste Div Box ist jeweils für die obere Hintergrundgrafik, der mittlere Teil für den Text mit x-repeat als Hintergrundgrafik und das unterste Div ist dann wieder für die abschliessende Grafik. (Sicherlich gibt's da eine einfachere Lösung, aber funktionieren tuts doch )


@manfred:

Denke um die Schriftgrösse/Zeilenabstände anzupassen sollte es reichen wenn ich von px auf em wechsle oder?

Zu den leeren Divs habe ich diese, wie bereits oben erwähnt, um den jeweiligen Anfang und das Ende der Textbox zu kreieren. (Eine klügere Idee hatte ich zu dem Zeitpunkt einfach nicht...)

Was die ganzen b's und i's anbelangt so sollte ich mich wirklich endlich an em und strong gewöhnen... Irgendwie ist mir b und i aus meiner Anfangszeit einfach geblieben :/


@webcoder:

Auch ich fand man sollte irgendwo noch wenigstens ein Element einbauen was ein wenig peppig wirkt, allerdings waren die Musiker halt einfach anderer Meinung... Wenn's gefällt, gefällts

Bitte erkläre mir doch ein wenig genauer was du mit folgendem Zitat meinst:
Ich Würde deine Idee gerne hören, habe es allerdings nicht so ganz verstanden

Danke auch für den W3C Test, aus irgend einem Grund wollte er mir die Seite einfach nicht laden... Die andern Seiten habe ich alle durchlaufen lassen und entsprechend angepasst

Dazu fehlt mir dann leider doch die Zeit. Eine feine Idee und ich werde diese sicherlich gerne bei meiner nächsten Site einbauen (Bisher habe ich einfach geschaut dass die Links auf "target: _blank" gesetzt sind sodass sie wenigstens in einem neuen Fenster aufgehen )

Die Idee mit dem Alt Text finde ich super! Werde ich nachholen, keine Ahnung wieso ich da nicht gleich drauf gekommen bin

Hehe also doch jemand der das Impressum liest Da ich kein Rechtsexperte bin habe ich mich mit diesem Text einer offiziellen Impressumsvorlage bedient.


@Praktikant:

Hmmm wofür ist der Button Felder zurücksetzten... Vermutlich weil ich mich mal wieder von was dummem hab inspirieren lassen Du hast aber recht, werde den "Nuke-it" Button löschen

CV ist wieder mal so eine Text-Sache des Kunden... Werde das allerdings für Ihn übernehmen und es ausschreiben


@ALLE die sich die Mühe gemacht haben:

Herzlichen Dank Euch allen dass Ihr euch die Mühe gemacht habt die Site zu checken und mir doch den einen oder anderen Genialen Tipp mit auf den Weg gegeben habt! Wenn nicht für diese Seite dann sicherlich für die nächste, es ist und bleibt ein Lernprozess

Freundliche (und glückliche) Grüsse,

Phil

__________________
 = ♥ .: MacBook Pro Unibody, 2.8 GHz Intel Core 2 Duo, 4 GB 1067 MHz DDR3, NVIDIA GeForce 9400M/9600M GT :.

Das ist Unsinn? Gib dem Kunden doch einfach nur Zugriff auf h2/h3 --> fertig.
Die h1 bleibt für die Seite reserviert (Semantik gewahrt).
Was mich wundert... du nimmst im body 12px font-size, line-height: 17px. 12px ist keine Größe... sondern eine Seuche
Also bei mir sieht das immer so aus:
ganz oben font-size: 100%, dann drunter in em. (Textvergrößerung in IE möglich)
line-height z.B 1.4 (ohne Masseinheit)
Eigentlich Basiswissen in css...?
Z.B. mit einem Script? Kurzer Text, dann Button... Beispiel:
Toggle Tutorial - jQuery CSS Toggle Effect Development Blog by Soh Tanaka
Nachtrag: google mal show-hide oder toggle

Manfred

Noch ein Nachtrag: wegen CMS. Sehe jetzt erst deinen EDIT wg. Pulse.
Was soll der Kunde denn ändern können?
Hab dir zur Rad Seite schon geschrieben, dass man Pulse bzw. den CKEditor sehr gut (unkaputtbar) konfigurieren kann.
Kommt nun halt darauf an, was der Kunde machen will.

Manfred

Hi Manfred62,

Wie immer eine grosse Hilfe!

h2/h3 soll es sein mit h1 verpack ich dann das Logo mit dem Home-Link (wenn ich das richtig verstanden habe? )

Da ich ein kleiner Control-Freak bin mag ich es gerne wenn die Website schlussendlich auch meiner Photoshop-Vorlage entspricht, daher arbeite ich ständig mit px-Angaben. Ich sehe allerdings ein dass dies nur sehr sum-optimal ist und werde meine Angaben selbstverständlich noch abändern

Das Toggle script kenne ich als Accordion und es funzt genau gleich wie dein Link, ebenfalls basierend auf dem jQuery Script Danke allerdings für den Link werde diese gerne vergleichen und sehen was einfacher zu gebrauchen ist.

Liebe Grüsse,

Phil

__________________
 = ♥ .: MacBook Pro Unibody, 2.8 GHz Intel Core 2 Duo, 4 GB 1067 MHz DDR3, NVIDIA GeForce 9400M/9600M GT :.

Eigentlich meinte ich es ganz einfach ohne JavaScript oder so. Jeder Musiker schreibt 2 Sätze zu seiner Person die ihm besonders wichtig erscheinen und bringt dadurch eine persönliche Note ein. Alle weiteren Informationen werden standardisiert in eine normale Tabelle gepackt.
Punkte in der Tabelle könnten sein:
-----
Geboren:
-----
Werdegang:
-----
Auszeichnungen
und Preise:
-----

Dadurch fällt das Beiwerk (Fülltext) weg und die Informationen sind kompakter und einfacher aufzunehmen. Erfolg die Absätze werden kürzer.


Dann hattest du halt nur die falsche Vorlage.

Schreibe einfach, dass es bei Linksetzung keine rechtswidrigen und persönlich verletzende Inhalte gab. UND wenn bekannt wird, dass solche Inhalte nachträglich hinzugefügt wurden, der Link umgehend entfernt wird. Somit sind deine Links (oder auch Verweise), das was sie darstellen, nämliche eine Empfehlung zu verwandten oder weiteren Inhalten.