Private Website (EDITOR)

assmaje · 29 Mai 2009

>> Test <<

Hi Leute,

habe gerade meine private Website fertig gestellt. Der Aufbau ist sehr simpel, aber so soll er auch sein. ;) Der komplette Code & die Grafiken stammen von mir. Was zu bewerten ist: Code, Design, Aufbau, Navi... so ziemlich alles abgesehen vom nicht vorhandenen Inhalt (nur "Home" und "Über" bzw. "Impressum" funktionieren). Konstruktive Kritik & Verbesserungsvorschläge sind willkommen. =)

Ich freu mich auf eure Antworten...

Timmer · 29 Mai 2009

Hallo assmaje!

Also als erstes zum Design:
Ich finde das Design sehr schlicht und einfach, das macht die Seite aber modern und für jede Zielgruppe ansprechend. Auch die Navigation ist sehr gut gelungen. Alles Top.

Nun zum Code:
Du hast keine Tabellen benutzt, sondern hast die geliebten DIVs eingesetzt und mit CSS perfekt positioniert. Ach hier hast du alles schlicht gehalten, es ist übersichtlich und nur das Nötigste enthalten. Auch hier alles Top.

Was mich ein bisschen stört ist, dass deine Seite sehr hoch, aber nicht sehr breit ist, somit muss man bei der momentanen Menge an Text leider scrollen. Wäre die Seite breiter, müsste man nicht scrollen und könnte die komplette Seite auf einmal sehen. Ist zwar nicht so toll, stört aber nicht weiter.

Ich gebe deiner Seite, in diesem Zustand, 8 von 10 Punkten.

Viel Glück noch mit deiner Seite.

Timmer

fiedel · 29 Mai 2009

Hallo assmaje!

Design
Ich schließe mich meinem Vorredner an, die Design ist dir sehr gelungen, nur würde ich da trotzdem noch irgendeinen Farbklecks mitreinbringen, entweder im Hintergrund oder evtl. im Text.

Code
Auch da schließe ich mich Timmer an.
Eine Alternativ zur fixen Breite, wäre sie entweder in % oder em anzugeben.

Gruß,
fiedel

assmaje · 29 Mai 2009

Vielen Dank für eure positiven Bewertungen!! =)

@Timmer: Naja, ich bin der Meinung, dass schmalere Texte besser zu lesen sind, aber das ist Ansichtssache. ;) Zudem verwende ich aus diversen Gründen kein flexibles Design, und damit bei Nutzern mit kleinem Viewport keine horizontalen Scrollbalken entstehen, habe ich mich für eine nicht so große Breite entschieden. Mal sehen, ob ich da noch was ändere...

@Fiedel: Siehe oben. Gute Idee mit den Farbakzenten, werde ich dann noch einfügen. :)

Timmer · 29 Mai 2009

assmaje schrieb:
Naja, ich bin der Meinung, dass schmalere Texte besser zu lesen sind, aber das ist Ansichtssache.

Ja, wie wärs mit 2 Spalten oder so? Und Bilder eingebaut usw.?

Aber so geht es auch, kannst du ruhig so lassen. Ich mein, nicht, dass wir das jetzt von dir verlangen ;D

Aber fiedel hat schon recht mit der Farbe, muss aber nicht sein, wenn passende Bilder eingefügt werden oder so, geht das auch.

Timmer

Asterixus · 30 Mai 2009

Ich würde die Links im Footer (vorallem beim Hover) etwas hervorheben.

DerMitSkill · 30 Mai 2009

Wie die anderen bereits sagten, ist das Design sehr schlicht. So klein... irgendwie süß in der Mitte des 24"er's

Code ist ganz in Ordnung, nur für meinen Geschmack noch zu viele div's...

assmaje · 30 Mai 2009

Timmer schrieb:
Ja, wie wärs mit 2 Spalten oder so? Und Bilder eingebaut usw.?

Ja, passende Bilder zum Inhalt werden dann natürlich noch eingefügt.

Asterixus schrieb:
Ich würde die Links im Footer (vorallem beim Hover) etwas hervorheben.

Erledigt. :)

DerMitSkill schrieb:
So klein... irgendwie süß in der Mitte des 24"er's

Naja, ich hab auch nen 22"-Widescreen, sieht doch ganz nett aus. ;)

DerMitSkill schrieb:
Code ist ganz in Ordnung, nur für meinen Geschmack noch zu viele div's...

Naja, ich habe sie dort eingesetzt, wo ich sie benötigt habe. ^^ Falls du ein überflüssiges findest, kannst du mir das natürlich gerne sagen.

---

Ich frage mich auch, wo ich so was wie n Logo einbinden könnte. Hat vielleicht jemand eine Idee dazu? Und zur Sache mit den Farbakzenten... Bis jetzt habe ich nur die Links eingefärbt, bei den Überschriften wirkt es zu heftig.

DerMitSkill · 30 Mai 2009

assmaje schrieb:
Naja, ich habe sie dort eingesetzt, wo ich sie benötigt habe. ^^

Du solltest sie aber da einsetzten, wo sie sinnvoll sind, und nicht da, wo Du sie benötigst ;)

assmaje · 30 Mai 2009

DerMitSkill schrieb:
Du solltest sie aber da einsetzten, wo sie sinnvoll sind, und nicht da, wo Du sie benötigst ;)

Das habe ich damit im übertragenen Sinne gemeint. ;)

EDIT:
Sonst noch Kritik oder Verbesserungsvorschläge?

ohrflieger · 30 Mai 2009

Ich weiß, das Design sollte möglichst schlicht sein, aber mir fehlt eine Gesamtüberschrift für die Seite. Man weiß nicht, wo man sich befindet. Es sind nur Navigation und Text enthalten, und daran muss man nicht zwingend erkennen können, dass es sich um eine private Homepage handelt.
Sonst ein schön sauberes, kompaktes Design.
Ich glaube, den Navi-Div könnte man noch weglassen.

assmaje · 30 Mai 2009

Danke für deine Antwort. :) Aber was genau meinst du mit "Gesamtübersicht"? Ein Logo? Darüber habe ich auch schon nachgedacht, weiß aber noch nicht, wie ich es in das bestehende Design einbetten soll.

ohrflieger schrieb:
Ich glaube, den Navi-Div könnte man noch weglassen.

Ja, nach einigen Änderungen konnte ich es löschen. :)

EDIT:
Nach dem Hochladen ist mir nun doch ein Fehler aufgefallen. Der Abstand zwischen #content und #footer ist nicht weiß, sondern grau, obwohl ich beiden Elementen die entsprechende Hintergrundfarbe gegeben habe. Davor hatte ich #wrapper die Hintergrundfarbe gegeben. Woran liegt das? Übrigens habe ich diesen Abstand nicht definiert, er ist einfach so entstanden, obwohl folgendes in meiner CSS-Datei steht:

Code:

*
{
  margin:0px;
  padding:0px;
  border:none;
}

Der Code zum Problem:

Code:

    <div id="wrapper">

      <ul id="navi">
        ...
      </ul>

      <div id="clear"></div>

      <div id="content">

        <?php
        if (! isset($_GET["page"]))
        { $_GET["page"] = "start"; }

        switch ($_GET['page'])
        { 
        case "start":
          include "page/start.html";
          break;
        case "impressum":
          include "page/impressum.html";
          break;
        }
        ?>

      </div>

      <div id="footer">
        <a href="#wrapper" rel="nofollow">zum Seitenanfang</a> |
        <a href="index.php?page=impressum">Impressum</a> |
        &copy; 2009 by Jens Assmann
      </div>

    </div>

Hier noch mal der Link:
jens-assmann.bplaced.net | Startseite

Bernhard · 30 Mai 2009

Hallo Jens,

mir ist es fast zu schlicht. Kommt aber natürlich auch drauf an, was Du da noch
an Bildern reinbaust...

assmaje schrieb:
Danke für deine Antwort. :) Aber was genau meinst du mit "Gesamtübersicht"? Ein Logo? Darüber habe ich auch schon nachgedacht, weiß aber noch nicht, wie ich es in das bestehende Design einbetten soll.

Da kommt es auch drauf an, wie Dein Logo aussieht:

ich häng Dir mal einen Vorschlag an, wie ich es machen würde, wenn Dein
Logo eher schlicht ist...
alternativ könnte ich mir insbesondere bei einem farbigen Logo vorstellen,
es völlig frei oben drüber auf den grauen Hintergrund zu setzen...

assmaje schrieb:
EDIT:
Nach dem Hochladen ist mir nun doch ein Fehler aufgefallen. Der Abstand zwischen #content und #footer ist nicht weiß, sondern grau, obwohl ich beiden Elementen die entsprechende Hintergrundfarbe gegeben habe. Davor hatte ich #wrapper die Hintergrundfarbe gegeben. Woran liegt das?

jens-assmann.bplaced.net | Startseite

Da dachte ich, das sei Absicht - und finde es gar nicht schlecht...
Allerdings würde ich den Abstand der letzten Textzeile nach unten bzw. den
der Footer-Zeile nach oben noch etwas vergrößern...

In den Quelltext hab ich jetzt nicht geschaut, da das andere schon gemacht haben...

Grüße
Bernhard

P.S.: keine Ahnung, warum das Bild beim Hochladen von gif in jpg umgewandelt
wird und derart unsinnig verkleinert wird, aber vielleicht erkennst Du trotzdem,
was ich meine...

assmaje · 30 Mai 2009

Danke für die Kritik. :)

Bernhard schrieb:
Da kommt es auch drauf an, wie Dein Logo aussieht:

ich häng Dir mal einen Vorschlag an, wie ich es machen würde, wenn Dein
Logo eher schlicht ist...

alternativ könnte ich mir insbesondere bei einem farbigen Logo vorstellen,
es völlig frei oben drüber auf den grauen Hintergrund zu setzen...

Ich habe mal die 2. Variante versucht. Dein Konzept ist zwar gut, aber irgendwie zu klobig für mich. :) Das momentane "Logo" (nein, ich habe die Schrift nicht erstellt) ist mir aber auch zu "schwer"; es passt nicht zum Rest der Seite.

Bernhard schrieb:
Da dachte ich, das sei Absicht - und finde es gar nicht schlecht...
Allerdings würde ich den Abstand der letzten Textzeile nach unten bzw. den
der Footer-Zeile nach oben noch etwas vergrößern...

Mh, also das sollte schon zusammen sein. Wundert mich jetzt sehr, dass es dir gefällt. Könntest du mir eventuell trotzdem bei dem "Problem" helfen? Würde mich sehr freuen. Den Abstand habe ich nämlich nicht eingebaut (siehe oben für Details)... :)

Bernhard · 31 Mai 2009

assmaje schrieb:
(...)es passt nicht zum Rest der Seite.

Stimmt

assmaje schrieb:
Mh, also das sollte schon zusammen sein. Wundert mich jetzt sehr, dass es dir gefällt. Könntest du mir eventuell trotzdem bei dem "Problem" helfen? Würde mich sehr freuen. Den Abstand habe ich nämlich nicht eingebaut (siehe oben für Details)... :)

So, jetzt hab ich doch in den Quelltext geschaut:
Du musst nach dem letzten Absatz clearen, dann sollte der Abstand verschwinden...

Code:

#content:after {
   display:block;
   clear:both;
   content:".";
   height:0;
   visibility:hidden;
}

Grüße
Bernhard

neuroleptika · 31 Mai 2009

Bernhard,
Der Abstand verschwindet in deinem Beispiel nicht durch das clear:both;
sondern durch den css-Content nach dem margin von p.
Ein padding-bottom:1px oder border-bottom für #content würden den Abstand auch verschwinden lassen.
Das Verhalten wird collapsing margins genannt.

Bernhard · 31 Mai 2009

neuroleptika schrieb:
Bernhard,
Der Abstand verschwindet in deinem Beispiel nicht durch das clear:both;
sondern durch den css-Content nach dem margin von p.
Ein padding-bottom:1px oder border-bottom für #content würden den Abstand auch verschwinden lassen.
Das Verhalten wird collapsing margins genannt.

Danke! - Wieder was gelernt!

Grüße
Bernhard

assmaje · 31 Mai 2009

neuroleptika schrieb:
Bernhard,
Der Abstand verschwindet in deinem Beispiel nicht durch das clear:both;
sondern durch den css-Content nach dem margin von p.
Ein padding-bottom:1px oder border-bottom für #content würden den Abstand auch verschwinden lassen.
Das Verhalten wird collapsing margins genannt.

Danke!! :)

Ich habe jetzt auch mal den Footer geändert, gefällt mir eindeutig besser. Bezüglich des Logo-Problems habe ich nach unzähligen Versuchen immer noch keine vernünftige Lösung gefunden. Ich werde es wahrscheinlich später noch mal versuchen. Noch mal danke für euer Feedback bis jetzt! =)

Efchen · 3 Juni 2009

assmaje schrieb:
Ich freu mich auf eure Antworten...

Also ich find das Design zwar ziemlich schlicht, was ja noch in Ordnung ist, aber die Farben sind zu blass. Es fehlt ein wenig Kontrast. Man ist versucht, davor einzuschlafen! :-)

Sehr gut gefällt mir der Spiegeleffekt im Footer.

Timmer schrieb:
Du hast keine Tabellen benutzt, sondern hast die geliebten DIVs eingesetzt und mit CSS perfekt positioniert. Ach hier hast du alles schlicht gehalten, es ist übersichtlich und nur das Nötigste enthalten. Auch hier alles Top.

Nein, er hat nicht "geliebte dics" benutzt, sondern er hat seinen Inhalt mit HTML ausgezeichnet und Design und Layout mit CSS gemacht. Sowas wie "geliebte divs" gibt es nicht, die sind bei einem erfahrenen Webmaster genauso beliebt, wie Tabellen.

Ich würde davon Abstand nehmen, solche Unwahrheiten zu verbreiten, divs wären irgendwas besonderes, unverzichtbares. Man macht Layout weder mit Tabellen noch mit divs.

Und top ist es leider nicht, dem Footer fehlt noch eine Auszeichnung. Zwei Links, ein kurzer Text. Man könnte da auch eine Liste draus machen, oder einen Textabsatz, wobei ich in diesem Fall mehr zur Liste tendiere, denn ein richtiger Satz ist da ja nicht drin.

Mir fehlt auf der Site auch eine Überschrift. Es muss nicht gleich ein Logo sein, aber man weiß wirklich nicht, wo man ist.

assmaje · 3 Juni 2009

Efchen schrieb:
Also ich find das Design zwar ziemlich schlicht, was ja noch in Ordnung ist, aber die Farben sind zu blass. Es fehlt ein wenig Kontrast. Man ist versucht, davor einzuschlafen! :-)

Das sollte natürlich nicht passieren. :) Ich habe mal die Hintergrundfarbe von #CCC auf #666 geändert (& alle Grafiken entsprechend erneuert). So besser? :)

Efchen schrieb:
Sehr gut gefällt mir der Spiegeleffekt im Footer.

Bei dem momentanen Kontrast ist es nicht mehr so einfach, ihn gut hinzubekommen. Wenn ich die Deckkraft erhöhe, wirkt der Verlauf zu heftig. Naja...

Efchen schrieb:
Nein, er hat nicht "geliebte dics" benutzt, sondern er hat seinen Inhalt mit HTML ausgezeichnet und Design und Layout mit CSS gemacht. Sowas wie "geliebte divs" gibt es nicht, die sind bei einem erfahrenen Webmaster genauso beliebt, wie Tabellen.

Ich würde davon Abstand nehmen, solche Unwahrheiten zu verbreiten, divs wären irgendwas besonderes, unverzichtbares. Man macht Layout weder mit Tabellen noch mit divs.

Und top ist es leider nicht, dem Footer fehlt noch eine Auszeichnung. Zwei Links, ein kurzer Text. Man könnte da auch eine Liste draus machen, oder einen Textabsatz, wobei ich in diesem Fall mehr zur Liste tendiere, denn ein richtiger Satz ist da ja nicht drin.

Ich stimme dir in den oben genannten Punkten zu, aber... Liste? Das ist doch keine Liste und auch kein Menü/keine Navi. Wäre also genau so falsch.

Efchen schrieb:
Mir fehlt auf der Site auch eine Überschrift. Es muss nicht gleich ein Logo sein, aber man weiß wirklich nicht, wo man ist.

Ja, daran arbeite ich schon seit langem, aber meine Versuche sind bis jetzt gescheitert... Bin nicht so kreativ. :)

--> http://jens-assmann.bplaced.net/

Private Website (EDITOR)

Neues Mitglied

Mitglied

Mitglied

Neues Mitglied

Mitglied

Aktives Mitglied

DerMitSkill

Guest

Neues Mitglied

DerMitSkill

Guest

Neues Mitglied

ohrflieger

Guest

Neues Mitglied

Neues Mitglied

Anhänge

Neues Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Neues Mitglied

Efchen

Guest

Neues Mitglied