[editor]little-coder.de Code und Design Check

Hi @ all,
vorab möchte ich mich bei euch allen bedanken. Ohne euch hätte ich es nicht geschafft.

Nun zum eigentlichem Thema:

Ich wäre sehr dankbar wenn ihr meine Seite little-coder.de sowohl auf Design und Code checken könntet. Immoment ist die Seite noch sehr leer, aber ich habe ein Beispiel Tutorial erstellt.

In Zukunft werde ich viele Tutorials erstellen die besonders leicht zu verstehen sind.

Ich bin über jegliche konstruktive Kritik erfreut.

Mit freundlichen Grüßen

xXxPeterPanxXx

Hi.

Das Thema der Seite finde ich super. Wenn die tutorials dann auch noch gut und verständlich sind, hat deine Seite bestimmt erfolg.

Also der validator hat schon mal auf allen seiten nur 5 Fehler entdeckt.
Aber diese wirst du bestimmt noch los. :grin:

Es betrifft die seiten:

PHP | little-coder.de
[Invalid] Markup Validation of http://little-coder.de/kategorie.php?name=php - W3C Markup Validator

CSS | little-coder.de
[Invalid] Markup Validation of http://little-coder.de/kategorie.php?name=css - W3C Markup Validator

Erweiterte Suche | little-coder.de
[Invalid] Markup Validation of http://little-coder.de/erweitertesuche.php - W3C Markup Validator

Offizieller Test - Htmltutorial | little-coder.de
[Invalid] Markup Validation of http://little-coder.de/tutorial.php?nameurl=offizieller-test - W3C Markup Validator

Zum Design:

Also die Aufteilung ist ganz schön. Sehr übersichtlich.
Von den Farben her spricht es mich nicht so an. Aber das ist ja eh geschmackssache. Aber ich denke trotzdem, das man designmäßig noch mehr aus der Seite holen kann.

Liebe Grüße :grin:
sunoghlin

EDIT: Im Kontakt, Impressum und Datenschutz sind laut Validator noch ein paar fehler.

Hi sunoghlin,
Danke für den Hinweis mit dem fehlerhaftem Code.

Die beiden Fehlerlösen sich von alleine wenn ich ein Tutorial für die Kategorie geschrieben habe.

Diesen Fehler verstehe ich einfach nicht Könnte mir den jemand erläutern?

Dieser Fehler kommt weil in xhtml strict 1.0 kein target=„_blank“ erlaubt ist. Ich habe es jetzt doch mit JavaScript gemacht.

Schön das dir die Idee gefällt.

Mit freundlichen Grüßen
xXxPeterPanxXx

Hallo,
ich würde mich freuen wenn ich noch mehr Meinungen höre.

Vielleicht gefällt euch ja das Design.

Ihr müsst auch keine Romane schreiben.

Mit freundlichen Grüßen

xXxPeterPanxXx

Hi,

also ich finde das Design jetzt nicht so überragend.
Es ist nicht schlecht, sieht aber irgendwie altmodisch aus.
So sahen Webseiten früher aus.

Hab jetzt grad keine konkreten Verbesserungsvorschläge (ist noch zu früh am Tag),
aber versuch mal den Header en bissle mehr aus dem Header rauszuholen.

Gruß KY

Also Erst einmal zum allgemeinen Design:
Es ist wie mein Vorgänger schon sagte ok aber wirkt so als wäre die Seite vor 5-6 erstellt worden. Es fehlen ein paar grafische Elemente auf der Seite die den Augen etwas Reiz geben. Es sollen ja nicht zwingend viele oder gar große Grafiken sein. Denn selbst wenn ich mit einem 56k Modem noch unterwegs sein sollte, werden mich 5 Sekunden Ladezeit (Wenn diese einmalig is. Und Außerdem was sind 5 Sekunden bei einem 56k Modem :P) nicht von einer Seite fern halten. Probier die Seite einfach ein bisschen aufzupeppen. :slight_smile:

Zur Farbwahl:
Ist ok. Muss man vielelicht der Typ für sein :smiley: Du belastet natürlich nicht mit Farben, jedoch könntest du verschiedene Orange-Töne nehmen. Denn die 3 Farben lassen dein Layout doch recht alt wirken :slight_smile:

Zur Lesbarkeit und zur Navigation:
Ich hatte keine Problem mich auf deiner Seite zurecht zu finden. Die Navigation ist klar erkennbar und verwirrt nicht. Der Text ist wie ich finde in einer sehr schönen größe gewählt worden.

Thema:
ein schön gewähltes Thema, wenn es denn gut und konsequent durchgeführt wird.

Zusatz:
Ich finde das Syntax-Highlighting bei dem Code eine sehr schöne Sache. Wenn man den Code noch ein bisschen mehr abgrenzt: zum Beispiel durch einen Rahmen, könnte man den Code eventuell noch besser vom Inhalt unterscheiden.
Außerdem finde ich deine interne Suchfunktion sehr schön (wird noch implementiert oder? :D)

Also grundsätzlich bin ich immer ein Fan von simplen und schlichten Layouts.
Aber diese beiden dicken orangenen Sidebars gefallen mir farblich nicht so.

Würde den Hintergrund da auch dunkel machen und nur den Hovereffekt Orange machen.

Wünsche Dir noch viel Erfolg bei deinem Projekt.

Danke für die vielen hilfreichen antworten.

Ich habe jetzt eine neue Headergrafik erstellt. Die ist so ähnlich wie der Vorgänger hat aber noch einen kleinen Affen im Bild.

Das Problem ist mein können mit Gimp, Photoshop und Co. ist sehr eingeschränkt.

Für die beiden orangen Balken habe ich gedacht, dass ich Grafiken mit Farbverläufen erstelle. Das dürfte dann etwas moderner Wirken.

Das werde ich vermutlich erst morgen machen.:oops:

Für konkrete Ideen bin trotzdem Dankbar!

Zur Suchfunktion: Eigentlich funktioniert so schon, aber immoment bin ich auf Fehlersuche.

MfG xXxPeterPanxXx

Die Headergrafik bzw. der Affe sieht gut aus.
Sieht lustig aus und hat einen Wiedererkennungswert.

Frage:
Nutzt du die rechte orangene Sidebar überhaupt?
Ansonsten würde ich sie komplett wegnehmen. Hast du mehr Platz für den Contentbereich.
Die linke Sidebar würde ich so gestalten:

Dunkler Hintergrund…

[ Menü] ← Oranger Balken

  • html
  • php <— farbliche Menüpunkte oder Icons mit einem kleinen Hovereffekt.
  • css

[Sonstiges]

  • bla
  • blaaa
  • blaablaa

Ich hoffe ich konnte es einigermaßen beschreiben. :smiley: Ansonsten poste ich heute Abend nochmal eine kleine Skizze.
Bin leider noch nicht zu Haus.

Mfg

Würde vllt. eine kleinere Schriftgröße zumindest in der Navi wählen, ich finde kleinere Schriftgrößen sehen manchmal professioneller aus.

Ansonsten wären ein paar mehr Grafiken ganz gut.

Sonst ganz ansprechend.

Ich hoffe ich konnte es einigermaßen beschreiben. :grin: Ansonsten poste ich heute Abend nochmal eine kleine Skizze.
Bin leider noch nicht zu Haus.

Hab mal kurz 5 min. rumgespielt:

http://www.imghoster.net/bild.php/807,testkopieJ9VU8.jpg

Ist jetzt alles bisschen unsauber und nicht so qualitativ aber ich hoffe du weiß ca. wie ich mein Vorschlag gemeint habe. :wink:

Viel Erfolg noch.

Boah Danke,
dass du dir so viel Mühe machst.:shock:

Ich bin noch ziemlich unentschlossen wie ich deine Idee halten soll. Ich finde die graue Navi nicht so schön.:oops:

Aber wie gesagt ich werde morgen der Navi_Spalte und der Sidebar eine paar Farbverläufe verpassen. Dann soll der orange Ton sich in einen schon fast gelben Ton verwandeln.

Viel mehr als Farbverläufe schaffe ich auch einfach nicht mit Gimp und Photoshop.

Ich werde morgen noch einmal posten und die Änderungen vorstellen.

MfG xXxPeterPanxXx

Kannst den „Kasten“ ja noch gestalten

Z.b http://www.imghoster.net/bild.php/808,testkopieFTMLE.jpg

Naja du machst das schon. :wink: Bis morgen!

Vielleicht solltest Du die schwarzen Rahmen entfernen. Ich denke das bewirkt stark den altmodischen Effekt. Farbverläufe kann ich mir dann gut vorstellen.

Den Affen, ganz ehrlich … entfernen! ;-). Ich finde für ein Portal mit Tutorials passt das überhaupt nicht. Ich würde, wenn der Header so bleibt keine solcher Grafiken einfügen.

Zu der Schriftgröße, schließe ich mich dem Vorschlag der Nummer kleiner an.

Vll. könntest Du im Kopf der Rubriken (HTML, PHP etc…) noch was machen. Das sieht so „dahingeschrieben“ aus. Linie, Balken, Bild …einfach mal probieren.

Den Affen, ganz ehrlich … entfernen! :wink:. Ich finde für ein Portal mit Tutorials passt das überhaupt nicht. Ich würde, wenn der Header so bleibt keine solcher Grafiken einfügen.

Aber auf der anderen Seite: Wenn ich nun ein Banner o.ä. mit dem Affen irgendwo wiedersehen würde, würde ich sofort an little-coder.de denken.
Bei einen GFX Logo oder so, eher weniger.

Ein gutes Beispiel ist doch auch Linux und der Pinguin. :wink:

So jetzt habe ich ein paar ganz kleine Änderungen vorgenommen. Die Sidebar ist jetzt weiß und die Navi hat nun einen Farbverlauf von Orange zu Hellorange.

Was haltet ihr davon?

MfG xXxPeterPanxXx

Sieht viel besser aus.
Nun kannst du die Navi auch so lassen und mein Vorschlag ignorieren. :smiley: Gefällt mir gut so.

Aber ich stelle die Frage nochmal:
Wozu brauchst du die rechte Sidebar? Werbung`?

Aus der Sicht gebe ich Dir Recht. Der Affe sieht meiner Meinung nach zu
verspielt und für eine Tutorialseite zu sehr nach Amateur aus. Das kann aber auch die Kombi mit dem grau-braun und dem Orange sein.

Ich persönlich würde keine Profi Tutorials hinter der Seite sehen. Verstehst Du was ich meine?

Das mit der Navi finde ich schön. Finden das denn alle?

Zur rechten Sidebar: Ja ich habe sie für Werbung vorgesehen, aber keine Angst die Werbung soll nicht stören und es wird keine Pop-ups oder Layer geben.

Bis Werbung geben wird wird es noch ein bisschen dauern.

Mfg xXxPeterPanxXx

zu dem neuen Upload:

Ich finde immer noch die scharzen Striche/ Rahmen unpassend.
Vll. versuch mal den Verlauf kpl ins weiß auslaufen zu lassen.
Das ist irgendwie alles zu kantig.

Rechts fehlt jetzt was ;-). Vll. dauerhaft an die rechte Seite die Vorschau/ Links der neuesten und beliebtesten Tuts.