Du bist nicht angemeldet.

1

Mittwoch, 12. Mai 2004, 19:32

Design - Bewertung

Am Wochenende soll das neue Design meiner Page Online gehen.

Bei Menü und Header hat mir ein Bekannter geholfen, doch es gibt ja noch viele andere Seiten. Als Vorabinfo, meine Seite ist ne Info Seite rund ums geldverdienen und eine Info Seite zu einem Anbieter habe ich jetzt ins Netz gestellt.

Es geht darum von euch zu beurteilen, ob dieses Design dieser Seite zum Inhalt auch passt. Da dieses Design auf allen Seiten dieser Ebene (sind schon paar Anbieter!) übernommen wird, wäre eine Änderung sehr aufwendig da man sie dann auf jeder seite vollziehen müsste.

Also was ist eure Meinung?

http://www.paid4x.info/design2/

2

Mittwoch, 12. Mai 2004, 19:52

RE: Design - Bewertung

Hi,
viel kann man ohne Inhalt ja noch nicht dazu sagen. Wenn tatsächlich auf den Inmhaltsseiten nicht mehr Text kommt, mag die räumliche Beschränkung ja noch vertretbar sein, auch wenn sie mir persönlich überhaupt nicht zusagt.
Das Design an sich finde ich doch etwas sehr schlicht und wenig interessant. Es wirkt auf mich eher wie aus einer Homepagevorlage von Frontpage oder ähnlichem entnommen. Dazu kommt dann noch der unscharfe Werbebanner und der nicht so toll rüberkommende doppelte Schriftzug im Logo. Ein paar freundlich abgerundete Ecken machen die Seite auch nicht unbdingt sehenswerter.
Ich habe auch mal einen Blick in den quelltext geworfen und finde, daß zumindest das Grundgerüst stimmen sollte; zweimal html und das zweite mal der Doctype mitten im Code - da stimmt wohl die Einbindung nicht so ganz. Trotzdem Glück gehabt: die Seite wird nicht nur im IE wie gewünscht angezeigt.
Nach dem Negativen noch as Positives: die Seite ist zumindest aufgeräumt und übersichtlich und vor allem nichtso überladen, wie viele andere kommerzielle Seiten.
Gruß
Ingo

3

Mittwoch, 12. Mai 2004, 22:13

Hi Chris04...

In der Tat wirkt das Layout ein wenig wie eine Stil-Vorlage. An sich aber keine schlechte. Das Layout ist, wie Ingo bereits erwähnte, sehr aufgeräumt, die Farben passen gut zueinander und gerade dadurch, dass der Aufbau recht schlicht ist, wirkt das ganze etwas seriöser...

Aber:

- Der Quelltext ist in der Tat ein einziges Durcheinander. Es ist wirklich verwunderlich, dass die Seite richtig angezeigt wird... Du solltest den Quelltext aufräumen, nicht nur der Technik willen, denn ein aufgeräumter Quelltext vereinfacht auch spätere Bearbeitung enorm.

- Es ist ja gut, dass Du die Grafik im Header (oben links) der Datenmenge zuliebe stark komprimiert hast, aber vielleicht ein wenig zuviel, denn um den Claim "Nur das beste..." sieht man deutliche Kompressionsartefakte (so ein Gekrüssel um die Buchstaben), was das ganze sehr verwaschen aussehen lässt.

- Was mir am Layout grundlegend nicht so ganz gefällt, ist die kleine Fläche, die es einnimmt. Bei meiner Auflösung, 1.280 x 1.024 habe ich oben in der Mitte ein wenig Website und drumherum jede Menge Rand... ;)

[q=Chris04]...wäre eine Änderung sehr aufwendig da man sie dann auf jeder seite vollziehen müsste.[/q]
Hierzu ein kleiner Tipp. Das hat zwar nicht wirklich was mit der Seite zu tun, aber wenn Du Dir zukünftig eine Menge Arbeit sparen möchtest, verwende für das Layout CSS. CSS steht für CascadingStyleSheets (kaskadierende, d.h. sich wiederholende Format- oder Stil-Vorlagen).

Dahinter verbirgt sich eine Technik, mit der man das Aussehen von Internetseiten sehr gut beeinflussen kann. Hierzu legt man eine einzelne Datei an, in der alle Informationen wie Schriftgröße, Farbe usw. gespeichert sind. Da alle Deine Seiten auf dieses Dokument zurückgreifen, brauchst Du eine Farbe z.B. nur in einer Datei zu ändern, und auf allen Seiten wird sie sozusagen automatisch ausgetauscht.

Wenn Du mehr über CSS erfahren möchtest, schau Dich einfach hier im Forum um, oder Lese Dir den CSS-Teilim Nachschlagewerk Selfthtmlvon Stefan Münz durch...

Einen schönen Abend noch! ;)

LapisInfernalis
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.

Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)

4

Donnerstag, 13. Mai 2004, 14:50

danke für die zahlreichen hilfen... hmm, html bin ich noch nicht so der experte, hätte einer von euch lust, da bisschen mir zu helfen mit dem aufräumen? denn heute abend mach ich die details für die anderen seiten, und die fehler möchte man nur ungerne kopieren...

CSS wird eingebaut und das Komprimierungsproblem wird gerade versucht zu ändern ;)

5

Donnerstag, 13. Mai 2004, 15:43

Hi,

Zitat

Original von Chris04hätte einer von euch lust, da bisschen mir zu helfen mit dem aufräumen?

und was bietest Du im Gegenzug an? Das wird immerhin eine profitorientierte Seite...
Was natürlich nicht ausschließt, daß Dir bei konkreten Problemen hier (auf die Sprünge) geholfen wird.
Gruß
Ingo.

6

Donnerstag, 13. Mai 2004, 18:59

Hallo Chris04.

Kein Problem. Zumindest anhand Deiner verlinkten Beispielseite kann ich Dir ein paar Tipps für den Anfang geben.

Abschnitt für Abschnitt folgen nun ein paar Tipps für den Aufbau. Abschließend findest Du den ganzen Quellcode, in welchem meine Ratschläge berücksichtigt wurden.

Diese Tipps sind für den anfänglichen Einstieg gedacht und wahrscheinlich nicht zu 100% vollständig. Dies nur als Info zur Berücksichtigung…


Quellcode

1
2
<html>
<head>

Hier sollte eine sog. DoctypeDefinition, oder kurz DTD, stehen. Dabei handelt es sich um einen Dokumententyp-Definition, damit der Browser weiß, um welche Art von Dokument es sich handelt.

Beim WorldWideWeb-Consortium findest Du eine Liste von möglichen DTDs und nähere Informationen.

Aus Gründen der Aktualität empfehle ich die Verwendung eines XHTML 1.1 Doctypes. Näheres zu den Besonderheiten von XHTML findest Du bei Selfhtml von Stefan Münz.


Quellcode

1
2
<title>Paid4x - Geld verdienen im Internet leicht gemacht</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Der Titel und der Charaktersatz sind OK so.


Quellcode

1
2
<style type="text/css">
</style>

Warum einen leeren Style-Tag?


Quellcode

1
2
<link href="css/tablelinks.css" rel="stylesheet" type="text/css">
</head>

Soweit in Ordnung. Zwei Dinge musst Du jedoch noch beachten:

1. Verwendest Du XHTML, so muss der link-tag mit „/>“ beendet werden, weil es keinen schließenden Link im Stile von </link> gibt…
2. Du solltest noch angeben, für welches Medium das StyleSheet gedacht ist. Z.b. media=“screen“, media=“print“ usw.


Quellcode

1
<body topmargin="10" leftmargin="0" text="#000000" link="#FF0000" alink="#FF0000" vlink="#FF0000" marginheight="10" bgcolor="#CCCCCC">

Die Stil-Angaben solltest Du in den Style-tag im Head unterbringen oder (besser) in ein externs Stylesheet auslagern.


Quellcode

1
<table height="500" align="center" style="background-repeat:repeat-y;" background="images/hintergrund.jpg" cellspacing="0" cellpadding="0" width="770">

Hier gilt gleiches… Auch die übrigen Teile der Tabelle (die jetzt nicht näher aufgeführt werden) solltest Du in eine externe CSS-Datei oder den Headbereich packen.


Quellcode

1
<script type="text/javascript" src="http://www.adoptimizer.de/script.php?s=362"></script>

Hier solltest Du mit dem <noscript>-tag einen alternativen Inhalt erstellen, für alle die JS deaktiviert haben…


Quellcode

1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Sieh mal einer an. Hier ist ja die vermisste DTD… J


Quellcode

1
2
3
4
5
6
7
8
9
<html>
<head>
<title>Paid4x - Geld verdienen im Internet leicht gemacht</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
</style>
<link href="css/tablelinks.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor=FFFFCC>

Den ganzen Teil hatten wir ja schon am Anfang… Ist hier nicht nur fehl am Platze sondern zudem völlig unsinnig.


Quellcode

1
2
3
4
5
</body>
</html>    </td>
  </tr>
</table>
</body></html>

Durch den doppelten Headbereich sind jetzt natürlich auch die schließenden Tags des Dokumentes unnötigerweise doppelt vorhanden.

Berücksichtigst Du die obigen Hinweise, sollte das ganze (in Kurzform) etwa so aussehen:


Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Paid4x - Geld verdienen im Internet leicht gemacht</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
  margin : 10px;
  padding : 0px;
  color : #000000;
  background-color : #CCCCCC;}
a:link {color : #ff0000;}
a:visited {color : #ff0000;}
a:hover {usw...}
a:active {usw...}
.tabelle1 {
  height : 500px;
  width : 770px;
  text-align : center;
  background-image : URL(Pfad/bild.jpg);
  background-repeat : repeat-y;
  usw…}
</style>
<link href="css/tablelinks.css" rel="stylesheet" type="text/css" media=”screen” />
</head>
<body>
<table class=”tabelle1”>
Tabelleninhalte…
Tabelleninhalte…
Tabelleninhalte…
Tabelleninhalte…
Tabelleninhalte…
Tabelleninhalte…
<script type="text/javascript" src="http://www.adoptimizer.de/script.php?s=362"></script>
<noscript>Hier alternativen Inhalt für fehlendes JS erstellen</noscript> 
Tabelleninhalte…
Tabelleninhalte…
Tabelleninhalte…
Tabelleninhalte…
Tabelleninhalte…
Tabelleninhalte…
Tabelleninhalte…

</table>
</body>
</html>

Eines noch zur Verwendung von XHTML: Das Ziel-Attribut “_target” für Links gibt es in XHTML nicht mehr. Eine durch einen Link aufgerufene Seite öffnet sich also _immer_ im aktuellen Browserfenster.

Ich hoffe Dir damit ein wenig geholfen zu haben. Wenn Du noch Fragen hast, immer her damit… ;)

LapisInfernalis

<EDIT>Eine Sache noch:
[q=Ingo]und was bietest Du im Gegenzug an? Das wird immerhin eine profitorientierte Seite...[/q]
Ich hoffe, das war ironisch gemeint. Wenn nicht, wäre ich gelinde gesagt enttäuscht.

Erstens hat Chris04 gebeten, dass man ihm "ein bischen beim Aufräumen" hilft, und nicht darum, das gesamte Projekt vorgefertigt geliefert zu kommen.

Und zweitens entspricht eine solche Einstellung wohl kaum der Idee eines solchen Boards, oder? Sind nicht viele Threads Fragestellungen zu Projekten die in irgendeiner Form profitorientiert sind?

Wenn ich mich hier erkundige, dann habe ich auch meist Probleme mit Seiten, die ich für Kunden erstelle, oder aber es geht um unsere Firmenwebsite. Mit der will ich ja irdendwie auch Geld verdienen, und zwar durch die Aquisition neuer Kunden...

Sind Antworten auf solche Fragen seit neuestem Gebührenpflichtig?

Ich hoffe, wie bereits erwähnt, dass dieser Kommentar nicht ernst gemeint war... X( :( ;) </EDIT>
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.

Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)

Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von »LapisInfernalis« (13. Mai 2004, 20:18)


7

Donnerstag, 13. Mai 2004, 20:59

wow, danke, vielen dank ;) -> wird morgen alles eingebaut!


-> Meint ihr, ich soll die auflösugn auf eine breite von etwa 1000 Pixel anheben???
Mit wurde halt empfohlen, 800*600, da so die meisten seiten angepasst sind.

Was meint ihr? gruß

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Chris04« (13. Mai 2004, 21:03)


8

Donnerstag, 13. Mai 2004, 21:20

Wenn Du CSS richtig nutzt, ist es egal, welche Auflösung der User hat. :)
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.

Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)

9

Donnerstag, 13. Mai 2004, 22:47

Hallo Chris04,
ich muss leider sagen, dass mir die Seite nicht wirklich gefällt. Dafür gibt es folgende Gründe:

Testsystem:
Windows 98; 1152x864px; Mozilla Firefox 0.8; DSL

  • Das Orange der Webseite wirkt durch die JPEG-Komprimierung nicht sehr schön. Ich rate dir, nimm für solche kräftigen Farben nicht JPG sonder lieber PNG oder GIF.
    Dies sieht man besonders an der Titel Grafik und an den Abrundungen an der Ecken.
  • Zwischen der oberen und unteren "Runden Ecke" des Menüs ist eine helle, aber trozdem auffällige Linie: http://temp.pltg-datahaven.net/paid4x-menue.png
  • Die Schriftart vom Inhalt ist bei mir eine Standart Serifen Schrift (Times New Roman), ändere sie lieber in eine Sans-Serifen Schriftart, wie z.b. Arial oder Verdana.
    In CSS gibst du das ganz einfach in der Definition für den body folgendes an:

    Quellcode

    1
    2
    
    body {
    font-family: arial,verdana,sans-serif; }
  • Oben Rechts im Menü ist ein Copyright Hinweis, dieser ist zudem schlecht leserlich. Warum setzt du ihn nicht einfach als Text an das Ende jeder Seite?
  • Wofür brauchst du eigentlich 2 Navigationen? Oder ist das nur ein Beispiel für Überschriften im Menü?


MfG Arne :)

PS: Bei Rückfragen stehe ich gern Rede und Antwort :)) .

10

Donnerstag, 13. Mai 2004, 23:28

Hi,
meine erste Aussage ar genauso ernst gemeint wie meine zweite, daß die erste natürlich nicht eine Hilfe hier im Forum, wie Du sie ja bereits gegeben hast, betrifft.
Oder anders gesagt: Tips geben und Probleme besprechen natürlich auf jeden Fall, bei darüber hinausgehenden Hilfen, wenn mit "bisschen mir zu helfen mit dem aufräumen" gemeint sein sollte, die Arbeit abzunehmen, mache ich schon einen Unterschied zwischen kommerziellen und privaten Seiten just for fun oder gar Seiten für gemeinnützige Zwecke.

Übrigens finde ich den Tip, XHTML1.1 zu nehmen, nicht besonders gut. Du kennst die Probleme mit der Auslieferung als application/xhtml+xml doch, oder?

Gruß
Ingo

11

Freitag, 14. Mai 2004, 00:01

[q=Ingo]Übrigens finde ich den Tip, XHTML1.1 zu nehmen, nicht besonders gut. Du kennst die Probleme mit der Auslieferung als application/xhtml+xml doch, oder?[/q]
Natürlich kenne ich das Problem. Da ich selber damit aber noch nie Probleme hatte (alle meine, der letzten Zeit erstellten Seiten, sind XHTML 1.1), habe ich schlichtweg nicht daran gedacht. Die XHTML 1.1-Seiten auf meinem Webspace laufen selbst auf Operas der 5er Serie und mit Netscape 4.7.

Aber natürlich sollte man das Problem kennen, und daher hier eine kleine Lektüre zu dieser Thematik.

Aber vielen Dank, dass Du es erwähnt hast... :)


[q=Ingo]wenn mit "bisschen mir zu helfen mit dem aufräumen" gemeint sein sollte, die Arbeit abzunehmen, mache ich schon einen Unterschied zwischen kommerziellen und privaten Seiten just for fun oder gar Seiten für gemeinnützige Zwecke.[/q]
Tut mir ja leid, aber diese Einstellung finde ich armselig. Chris04 hat nicht um mehr, als um etwas Hilfe beim Aufräumen gefragt, oder? Wie wäre es denn, wenn man sich etwas besser informiert, oder die Postings liest, bevor man mit solchen Sprüchen wie "was bekomme ich denn, wenn ich Dir helfe?" vom Stapel lässt?

Ich bin mir sicher, dass niemand ernsthaft erwartet, das auf Anfragen wie: "ich kann das nicht, macht mir das einer mal für lau?" mit "Klar, ich habe gerade zwei Wochen lang nichts vor, und Geld zum Leben brauche ich auch nicht!" antwortet.

Und ich bezweifele ebenfalls, dass Leute hier eine umfangreiche Hilfe anfragen würden, ohne eine Art "Bezahlung" zu erwarten.

Aber bei derart kleinen Dingen mit solchen Sprüchen zu kommen halte ich, auch wenn ich mich wiederhole, für armselig. Ich finde, das wirft ein extrem schlechtes Licht auf das Board. Neuankömmlinge denken wohlmöglich noch, dass Sie Ihr Taschengeld zusammenkratzen müssen, bevor sie ihre Frage hier posten können...

Ja, ja... Es lebe der Kapitalismus... ;)

Sorry für das Abwandern vom Thread-Topic, aber das musste ich vor dem Schlafengehen noch loswerden...

<EDIT>Guten Morgen... ;)</EDIT>
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.

Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »LapisInfernalis« (14. Mai 2004, 00:13)