• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Private Website (EDITOR)

A

assmaje

Neues Mitglied
>> 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...
 
Werbung:
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
 
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
 
Werbung:
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. :)
 
assmaje schrieb:
Naja, ich bin der Meinung, dass schmalere Texte besser zu lesen sind, aber das ist Ansichtssache.
Zum Vergrößern anklicken....

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
 
Werbung:
Wie die anderen bereits sagten, ist das Design sehr schlicht. So klein... irgendwie süß in der Mitte des 24"er's :D

Code ist ganz in Ordnung, nur für meinen Geschmack noch zu viele div's...
 
Timmer schrieb:
Ja, wie wärs mit 2 Spalten oder so? Und Bilder eingebaut usw.?
Zum Vergrößern anklicken....
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.
Zum Vergrößern anklicken....
Erledigt. :)

DerMitSkill schrieb:
So klein... irgendwie süß in der Mitte des 24"er's
icon_biggrin.gif
Zum Vergrößern anklicken....
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...
Zum Vergrößern anklicken....
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.
 
Werbung:
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.
 
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.
Zum Vergrößern anklicken....
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
 
Zuletzt bearbeitet:
Werbung:
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.
Zum Vergrößern anklicken....

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
Zum Vergrößern anklicken....

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...
 

Anhänge

  • jens_assmann.jpg
    jens_assmann.jpg
    8 KB · Aufrufe: 11
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...
Zum Vergrößern anklicken....

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...
Zum Vergrößern anklicken....
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)... :)
 
assmaje schrieb:
(...)es passt nicht zum Rest der Seite.
Zum Vergrößern anklicken....

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)... :)
Zum Vergrößern anklicken....

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
 
Werbung:
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.
 
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.
Zum Vergrößern anklicken....

Danke! - Wieder was gelernt!

Grüße
Bernhard
 
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.
Zum Vergrößern anklicken....
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! =)
 
Werbung:
assmaje schrieb:
Ich freu mich auf eure Antworten...
Zum Vergrößern anklicken....
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.
Zum Vergrößern anklicken....
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.
 
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! :-)
Zum Vergrößern anklicken....
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.
Zum Vergrößern anklicken....
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.
Zum Vergrößern anklicken....
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.
Zum Vergrößern anklicken....
Ja, daran arbeite ich schon seit langem, aber meine Versuche sind bis jetzt gescheitert... Bin nicht so kreativ. :)

--> http://jens-assmann.bplaced.net/
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben