Eure Webseiten #5

**dead_orc** · 30.06.2008 09:05

Zitat von Mugen

Neues Layout, Content trudelt in den nächsten Tagen ein, laut dem Validator valider XHTML- und CSS-Code.

Dazu sag ich nur eins: mehr Kontrast!
Ich dachte im ersten Moment, die Seite wäre irgendwie deaktiviert o.Ä. und da läge ein alphatransparenter schwarzer Layer drüber. IMO muss unbedingt entweder der Hintergrund heller oder die Schrift - Schwarz auf Dunkelgrau liest sich scheiße.

**Mugen** · 30.06.2008 12:44

So, verändert und an der area gearbeitet, der ein alt-Attribut fehlte.

**Spark Amandil** · 30.06.2008 14:40

Meine Fresse, mal wieder viel Bunti bunti mit wenig Inhalt. Naja wers mag, was die Seite darstellen / vermitteln soll is jedenfalls nicht ersichtlich, und ich hoffe sehr dass deine Zielgruppe keinen Internetexplorer benutzt. (ja ich spreche von dem immer noch extrem weit verbreiteten ie6 bei dem diese Pngs dann extrem scheisse aussehen werden)
In meinen Augen leider nichts weiter als ein kleiner, unbedeutender Grafikblender, sorry.
Was mir irgendwie nicht so recht klar werden will: deine Divs setzen zum Teil auf 800px breite, der eigentliche Content innerhalb dieser Divs nimmt gerade mal 2/3 ein während viel leerer Raum bleibt. Was das bezwecken soll kann ich nicht erkennen... spätere Werbeeinblendungen an den Seiten vielleicht?

**Mugen** · 30.06.2008 15:43

Nö, hab' in zu kleinen Maßstäben designt.

Und mal ehrlich: Die (meist) unerfahrenen Benutzer des Internet Experten 6 werden wohl bei den "Features" des IE7 (aufgepasst: Neues Aussehen der Schaltflächen "Zurück", "Vorwärts", "Startseite" und "Aktualisieren".) längst gewechselt haben. Und wie du sicherlich weißt, hat es der neue Internet Experte 7 sogar geschafft, Transparenz in PNGs darzustellen.

Und wegen des Bunti, Bunti: Klicki-Bunti ist doch schön.

(Außerdem kann man an Spiegelungen, Glass-Effekten und Schatten nie sparen, hehe.)

Im Vergleich zum alten Layout, falls es dir besser gefallen sollte:
Klick(i-Bunti?)

Das ganze ist übrigens eine Seite über unser Entwicklerteam, das atm wohl kaum Mitglieder hat.

Inhalt wurde beim Bild natürlich entfernt, damit man das gesamte Layout betrachten kann.

EDIT: Bzgl. der Divs: Das Ganze muss man übrigens machen, damit auch Nutzer des IE7 die zentrierte Seite sehen können. Ansonsten gibt's wieder Anzeigefehler. (Auch ein Grund, warum man den IE eigentlich in Stich lassen sollte; wären da nur nicht die Surfer, die mit ihm das Internet erkunden.)

**Spark Amandil** · 30.06.2008 19:59

Zitat

Und mal ehrlich: Die (meist) unerfahrenen Benutzer des Internet Experten 6 werden wohl bei den "Features" des IE7 (aufgepasst: Neues Aussehen der Schaltflächen "Zurück", "Vorwärts", "Startseite" und "Aktualisieren".) längst gewechselt haben. Und wie du sicherlich weißt, hat es der neue Internet Experte 7 sogar geschafft, Transparenz in PNGs darzustellen.

Das Problem ist dass die meist unerfahrenen Benutzer des Internet Explorers gar nicht wissen dass man diesen in neuerer Version haben kann, bzw es nicht gebacken bekommen, Autoupdate hin oder her.
Die Statistiken diverser Dienste bestätitigen dies auch. Von den rund 60-70% der Internetnutzern die mit dem IE surfen, nutzt noch spürbar mehr als die Hälfte die Version 6 (ein paar wenige sogar niedriger). Und dass der IE7 den Alphakanal eines PNG mitlerweile richtig interpretiert ist mir bewusst, ändert aber leider nichts daran dass umgerechnet 2 von 5 Leuten deine Seite als wüstes Chaos sehen würden

Ich kann dich verstehen und würde mir auch nichts lieber wünschen als meinen Kunden zu sagen "IE ist technischer Dreck, auf den Verzichten wir" dann würden die Kunden aber auch auf meine Dienste verzichten. Es wäre so als würde der Staat sagen "Jeder der mit einem Auto auf unseren Straßen fährt das älter als 2 Jahre ist hat ein Bußgeld zu zahlen, gibt schließlich neue Autos". Leider kann und darf man es sich auch heute noch nicht leisten den mit Abstand meistverbreiteten Browser aussen vor zu lassen so sehr auch jeder Webdesigner laut "ja!" schreien würde.

Dass das neue Layout im vergleich zum alten besser ist streite ich nicht ab, nur an den relevanten Dingen hat sich dabei leider eher wenig getan. Die Grafiken nehmen trotz Transparenzverlauf teilweise mehr Fläche ein als nötig wäre, der Bereich der für den Content gedacht ist kommt vollkommen zu kurz obwohl er der mit Abstand wichtigste Teil ist.

Zitat

EDIT: Bzgl. der Divs: Das Ganze muss man übrigens machen, damit auch Nutzer des IE7 die zentrierte Seite sehen können. Ansonsten gibt's wieder Anzeigefehler. (Auch ein Grund, warum man den IE eigentlich in Stich lassen sollte; wären da nur nicht die Surfer, die mit ihm das Internet erkunden.)

Ich hab gerade wenig Lust / Zeit mich durch deine Struktur und das Stylesheet zu wühlen, muss mich über diese Bemerkung aber doch sehr wundern. Ein schlichtes margin: 0 auto; stellt die Seite zentriert dar, auch für den IE.
Dein Aufbau hingegen ist doch recht... ehm spektakulär, vor allem die Mischung einerseits im head css anzuwenden, nur um die gleichen Befehle in der Codestruktur dann zu wiederholen. Die Buttons dann als map statt einer Liste bzw Tabelle in der die Slices der einzelnen Buttons liegen... Dafür dass die Seite an und für sich sehr simpel aufgebaut ist, hast du erstaunlich umständlich verschachtelten Code verwendet der locker dreimal so umfangreich ist wie nötig wäre.

Puh ich muss sagen es fällt schwer bei soviel Chaos im Code den Durchblick zu behalten, sorry nicht persönlich gemeint.

edit:
okay hab mir den Code doch mal genauer angesehen. Zum Teil wirken da Anweisungen zwei/dreimal in Folge, so zb gibts 3 mal n <a href> für ein und das gleiche Picture.

**Manni** · 01.07.2008 23:44

Zitat von Mugen

Neues Layout, Content trudelt in den nächsten Tagen ein, laut dem Validator valider XHTML- und CSS-Code.

Dann will ich auch mal meinen Senf dazu abgeben. Zu dem Design an sich will ich gar nicht viel sagen, das ist Geschmackssache

Aber zum Code fallen mir einige Punkte ein:

Warum teilst du deine Stylesheetdefinitionen auf drei Dateien auf, wenn du ganze vier Klassen definierst? Das ist nicht übersichtlich, sondern nur sinnlos (Javaprogrammierer scheinst du ja laut deiner Signatur nicht zu sein).
Des Weiteren fehlen Alternativtexte für die Überschriften und das Menü, die Seite ist somit ohne Bilder nahezu unbenutzbar.
Mir persönlich gefallen Bilder über Stylesheets besser als <img>-Tags, denn damit kann man sauberen HTML Code erzeugen und Inhalt und Design besser trennen. So kann man zum Beispiel über folgenden Code Überschriften machen:
HTML-Code:
```
<h1 id="#foo"><span>Eine Überschrift</span></h1>
```
Code:
```
h1
{
  margin: 0px;
  padding: 0px;
}

h1 span
{
  display: none;
}

#foo
{
  background: url('dein_bild.png') no-repeat top left;
  width: 42px;
  height: 23px;
}
```
Das lässt sich wunderbar auch für Headergrafiken verwenden, die im Prinzip ja eine Überschrift erster Ordnung darstellen.
Einrückung würde den Code lesbarer und besser strukturiert machen, allerdings ist das bei dynamisch generiertem Inhalt nicht so einfach und auch nicht unbedingt notwendig
Ich kann dir nur empfehlen, mal Lynx Viewer zu versuchen, zwar musst du deine Seite nicht unbedingt textbrowserfreundlich machen, allerdings zeigt eine solche Sicht gut, wie gut die Informationen der Seite zugänglich sind (bei dir fehlen beispielsweise Header, Menü und Überschrift).
Wenn du für das Menü eine formatierte Liste benutzt, fallen die imho unschönen und undurchsichtigen Imagemaps weg. Du könntest überhaupt mehr spezifische Elemente wie <p> benutzen anstatt einem Haufen generischer <div>s.
Warum benutzt du als "Python Fanboy" PHP? :P

Ich hoffe, diese Kritik hilft dir weiter

**Inius** · 02.07.2008 05:48

Mugen also das erste Design gefällt mir recht gut.

So jetzt meine:
http://home.gelsennet.de/~doerner/HP/default.htm

Die Portal Seite werde ich dann mal Updaten(auf unteren Text bezogen).

Bevor jemand mit den IFrames kommt, ich weiss das ihr sie nicht mögt aber alle Browser außer:
MSIE 5.01 Windows XP Leerer Frame
MSIE 4.01 Windows XP Leerer Frame
MSIE 5.5 Windows XP zeigt nicht alles an im Frame. (Könnte daran liegen das der mit meine Reload Methode ein Problem hat)
IRONIE,MEIN LIEBLINGS BROWSER,BIN JETZT TRAURIG!

Zerhacken die Seite:
Dillo 0.8.5 Ubuntu 7.10 Zerhackt die ganze Seite(ist am schlimmsten!)
MSIE 8.0 Beta/ Windows XP (nur leicht aber trotzdem nicht schön!)

Und diese zeigen die Bilder im Frame nicht an. Aber sonst alles normal!Liegt wohl daran das, dass neben dem Bilder der Text sein soll, wenn ich das abschalte geht es!
Opera 9.50 Windows XP
Flock 2.0 / Ubuntu 7.10 (Gutsy Gibbon)

Habe das ganze auf http://browsershots.org/ testen lassen.
Scheint ganz gut zu sein.

Würde mich über Kritik freuen.

**NPC Fighter** · 02.07.2008 17:24

Zitat

WIR SIND FÜR ALLE BROWSER

Abgesehen von IE < 6 und 8, Dillo, Opera und Flock. Davon abgesehen finde ich diese gesamte Introseite ziemlich merkwürdig, auf der mir im Titel und in der Mitte ein großgeschriebener Satz entgegensteht, der grammatikalisch auch nicht allzu anspruchsvoll ist und abgesehen von Links zu diversen Webbrowsern wenig Sinn hat. Ich würde das Ding ersatzlos streichen. Braucht niemand, ist nervig und zieht die Zeit bis zum Finden einer gewünschten Information unnötig in die Länge.

Zur Seite an sich:
Also grafisch macht das Teil meiner Meinung nach nicht besonders viel her. Diese quietschbunten, runden Buttons, die einen andersfarbigen Hintergrund an ihren Kanten haben, passen da halt irgendwie einfach so gar nicht ins Restbild.
Diese Streifen überall sind auch nicht gerade State of the Art.
Der Header macht auf mich einen irgendwie plumpen Eindruck, weil dieses Logo keinen Wiedererkennungswert hat und ansonsten halt auch nur aus dem (arg großen) Schriftzug auf einem Verlauf besteht.
Das Bild rechts ist halt extrem nichts sagend, wie wäre es mit einer Bildunterschrift, die mir erklärt, was das überhaupt soll?
Dass die Frames auf keine allzu große Gegenliebe stoßen werden, hast du ja selbst schon ganz richtig erkannt. (;

Also mein Fall ist es (wie du wahrscheinlich schon gemerkt hast) nicht so wirklich. Ich würde das Design nochmal komplett überarbeiten und dabei auch darauf achten, kein so grobes Layout zu machen. Bei kleineren Displays sieht das nicht unbedingt klasse aus und mit einer horizontalen Scrollleiste ist auch niemandem geholfen. Warum lässt du die Breite nicht einfach mit der des Browserfensters mitskalieren?
Und bitte: Auf der Seite hast du angegeben, dass du PHP-Kenntnisse hast. Da ist es doch nicht so das Problem, auf Frames zu verzichten und damit die typischen Frame-Probleme, mit denen du deine Seite belastest, aus der Welt zu schaffen. ^^

**Mugen** · 02.07.2008 17:42

Zitat von Manni

Dann will ich auch mal meinen Senf dazu abgeben. Zu dem Design an sich will ich gar nicht viel sagen, das ist Geschmackssache

Aber zum Code fallen mir einige Punkte ein:

Warum teilst du deine Stylesheetdefinitionen auf drei Dateien auf, wenn du ganze vier Klassen definierst? Das ist nicht übersichtlich, sondern nur sinnlos (Javaprogrammierer scheinst du ja laut deiner Signatur nicht zu sein).
Des Weiteren fehlen Alternativtexte für die Überschriften und das Menü, die Seite ist somit ohne Bilder nahezu unbenutzbar.
Mir persönlich gefallen Bilder über Stylesheets besser als <img>-Tags, denn damit kann man sauberen HTML Code erzeugen und Inhalt und Design besser trennen. So kann man zum Beispiel über folgenden Code Überschriften machen:
HTML-Code:
```
<h1 id="#foo"><span>Eine Überschrift</span></h1>
```
Code:
```
h1
{
  margin: 0px;
  padding: 0px;
}

h1 span
{
  display: none;
}

#foo
{
  background: url('dein_bild.png') no-repeat top left;
  width: 42px;
  height: 23px;
}
```
Das lässt sich wunderbar auch für Headergrafiken verwenden, die im Prinzip ja eine Überschrift erster Ordnung darstellen.
Einrückung würde den Code lesbarer und besser strukturiert machen, allerdings ist das bei dynamisch generiertem Inhalt nicht so einfach und auch nicht unbedingt notwendig
Ich kann dir nur empfehlen, mal Lynx Viewer zu versuchen, zwar musst du deine Seite nicht unbedingt textbrowserfreundlich machen, allerdings zeigt eine solche Sicht gut, wie gut die Informationen der Seite zugänglich sind (bei dir fehlen beispielsweise Header, Menü und Überschrift).
Wenn du für das Menü eine formatierte Liste benutzt, fallen die imho unschönen und undurchsichtigen Imagemaps weg. Du könntest überhaupt mehr spezifische Elemente wie <p> benutzen anstatt einem Haufen generischer <div>s.
Warum benutzt du als "Python Fanboy" PHP? :P

Ich hoffe, diese Kritik hilft dir weiter

Werd' bei einem neuen Projekt/Layout mehr darauf achten.

Das mit den Imagemaps hat mir Spark Amandil ebenfalls gesagt. Werd' sie wohl beim nächsten mal komplett weglassen, es sei denn, es fallen kleine Spielereien an, die Imagemaps benötigen (bzw. mit denen es leichter wird). (Z.B. ein Bild, welches Pixel enthält, die 'ne Map besitzen und einem zu 'ner Seite führen.)

PHP hab' ich eigentlich nur als Dateiendung genommen - weiß nicht, gefiel mir besser als .html. *g*

Alternativtexte kommen auch noch rein, die tags dafür sind da.

An die Überschriften hab' ich, um ehrlich zu sein, auch nicht richtig gedacht.

Aber nun gut, danke für eure Tipps, die ich natürlich in spätere Webprojekte mit einfliessen lasse.

(Python-Crack bin ich noch nicht, eher'n Anfänger, der grade einen nicht-grafischen Taschenrechner hinbekommt - mit Schleifen. *g* Bisher gefällt mir die Sprache jedoch sehr, da sie sehr einfach, jedoch trotzdem mächtig ist, zumindestens für eine Interpretersprache. Da fande ich eine Fanboy-Sig doch schon passend. *g*)

**Antares** · 03.07.2008 02:45

So, hier mal eine von mir. Ich weiß, der Code ist nicht gerade der beste, was aber daher kommt, dass ich bisher einfach zu faul war die ganzen "style" in meinen divs zu classes umzuwandeln bzw. sie in den Stylesheet einzubinden.
Deswegen ist alles auch ~~etwas~~ sehr unübersichtlich, ich hoffe ihr verzeihts mir..

Zum Inhalt bleibt zu sagen, dass da wohl keiner mehr hinzukommen wird, da ich nicht vorhabe was aus der Seite zu machen...daher kommts auch, dass kein einziger Link funktioniert, bzw. keine Funktionen zur Verfügung stehen.

//Edit: Der Top-Button funktioniert

**Inius** · 03.07.2008 03:29

Also mir gefällt die Seite gut.
Bis auf das Logo, weil die Schrift nur sehr schwer lesbar ist.

NPC Fighter:
Aber der Server muss auch PHP können und den Platz haben.
Was mit 10MB nicht grade gut umsetzbar ist

, aber dort gibt es wenigstens keine Werbung.
Muss mich erst mal nach einem richtigen Server umschauen.
Bin am überlegen ob ich mir einen bei Strato zuelege.

**kris** · 06.07.2008 14:48

Zitat von Fansoftware

Bin am überlegen ob ich mir einen bei Strato zuelege.

Davon kann ich abraten! www.netclusive.de <3

btw. ich werkel gerade an einer neuen Version meiner Homepage.
Momentan noch "alpha", mit einigen Bugs (vorallem der IE verzerrt das Design so schlimm -__-") aber trotzdem dürft ihr euch Kritik-mäßig mal austoben:

http://home.perception-studios.de/test

Der YouTube-Converter funzt übrigens schon. ^^
Wird aber erst in den nächsten Tagen für registrierte User unter "Web-Services" verfügbar sein.

**Manni** · 06.07.2008 17:17

Zitat von kris

Davon kann ich abraten! www.netclusive.de <3

btw. ich werkel gerade an einer neuen Version meiner Homepage.
Momentan noch "alpha", mit einigen Bugs (vorallem der IE verzerrt das Design so schlimm -__-") aber trotzdem dürft ihr euch Kritik-mäßig mal austoben:

http://home.perception-studios.de/test

Der YouTube-Converter funzt übrigens schon. ^^
Wird aber erst in den nächsten Tagen für registrierte User unter "Web-Services" verfügbar sein.

Das Design gefällt mir

Aber leider ist die Seite nicht valide. Ausserdem fehlen alt-Attribute bei den Überschriften. Du könntest außerdem genau wie Mugen mehr spezielle Elemente wie zum Beispiel <h*> für Überschriften anstatt einem Haufen von <div>s und <span>s (oder aber Bilder) verwenden (siehe meinen letzten Post in diesem Thread).
Statt mit <center> solltest du Elemente mit margin: 0px auto zentrieren. Auch <font> ist veraltet, verwende stattdessen <span>s mit den entsprechenden CSS Eigenschaften.
Zu deinem CSS-Code: float: center gibt es (leider) nicht, und bei vielen Größenangaben fehlen die Einheiten (px).
Zum Design: Was eventuell gut aussehen würde, wäre eine dunklere Umgebung des Inhaltsbereichs in der Mitte.
Ich hoffe du kannst damit was anfangen

**kris** · 07.07.2008 09:17

Zitat von Manni

Das Design gefällt mir

Danke.

Zitat von Manni

Aber leider ist die Seite nicht valide. Ausserdem fehlen alt-Attribute bei den Überschriften.

Ob ich sie noch valide kriege, werden wir sehen. Die "alt-Attribute" werden noch ergänzt.

Zitat von Manni

Du könntest außerdem genau wie Mugen mehr spezielle Elemente wie zum Beispiel <h*> für Überschriften anstatt einem Haufen von <div>s und <span>s (oder aber Bilder) verwenden (siehe meinen letzten Post in diesem Thread).

Nein. Das ist leider nicht möglich, da die "Überschriften" dynamisch, mit php generierte, Bilder sind. D.h. ich müsste den Text an die CSS-Datei übergeben oder die Klasse in der "index" selber deklarieren... Da finde ich meine Lösung etwas sauberer!

Zitat von Manni

Statt mit <center> solltest du Elemente mit margin: 0px auto zentrieren.

Och Leudde, seid doch froh, dass ich zum 1. mal keine Tabellen verwende. -__-"
Bin halt da nun mal etwas "oldsql". :P

Zitat von Manni

Auch <font> ist veraltet, verwende stattdessen <span>s mit den entsprechenden CSS Eigenschaften.
Zu deinem CSS-Code: float: center gibt es (leider) nicht, und bei vielen Größenangaben fehlen die Einheiten (px).

Der Code ist ja nicht zu 100% neu geschrieben. Gerade der Content ist ja noch der selbe, wie bei der alten Page und dass dann mal ein <font> reinrutscht kann gut sein. Werde ich nicht zu 100% wegbringen können, weil dann müsste ich 3 Tage lang mit phpMyAdmin schlafen und das wäre mir unangenehm. -__-"
Und Einheiten hatte ich vergessen. ^^ Ist erledigt.

Zitat von Manni

Zum Design: Was eventuell gut aussehen würde, wäre eine dunklere Umgebung des Inhaltsbereichs in der Mitte.
Ich hoffe du kannst damit was anfangen

Hm.. Ich hab mal ein bisschen rumprobiert, aber das sieht nicht so gut aus, wie vorher.

Danke für deine Hilfe.

**Manni** · 07.07.2008 10:53

Zitat von kris

Nein. Das ist leider nicht möglich, da die "Überschriften" dynamisch, mit php generierte, Bilder sind. D.h. ich müsste den Text an die CSS-Datei übergeben oder die Klasse in der "index" selber deklarieren... Da finde ich meine Lösung etwas sauberer!

Du kannst trotzdem statt

HTML-Code:

<div class="news_headline"><b>#</b><img></div>

HTML-Code:

<h2><span>#</span><img></h2>

mit entsprechendem CSS dazu verwenden.

Und für den Header kannst du <h1> benutzen, indem du zum Beispiel ein <h1> in das <div> packst, dass du dann über CSS aublendest. Das hat den Vorteil, das auch Leute mit Browsern ohne CSS/Bilder (sehr selten) oder auch Suchmaschinen mit der Seite besser klarkommen.
Ansonsten ist mir eben noch aufgefallen, dass der Kontrast der Schrift in den Loginfeldern sehr gering ist, das ist nahezu unlesbar bei einer etwas höheren Auflösung. Zumindest bei Focus könnten die heller sein.

**kris** · 08.07.2008 15:14

http://home.perception-studios.de/te...hp?go=services

Kleines Update. Der "YouTube 2 Mp3 - Converter" ist einsatzbereit.

**Antares** · 08.07.2008 15:38

Ist meine Seite so perfekt, dass es nichts dran auszusetzen gibt? Wohl kaum..
Bewertung & Kritik bitte ;__;

**treeghost** · 08.07.2008 16:25

@Antares Vom Design her sieht es richtig klasse aus.Der Aufbau sieht aus wie bei einem Blog.Wo zu ist den eigentlich das Login ding oben gut?
Wirst du vielleicht ein Forum einbauen oder ein message System?

@kris Die Seite an sich sieht schon klasse aus.Das eigebaute YT to MP3
ist sehr geil.Njo aber der Header passt ihrgendwie nicht zum farblichem schema.

Lynch · 08.07.2008 18:09

Der YT zu MP3 Converter rockt eh alles weg, nie wieder No. 23! NIE WIEDER! Yaaaay!

**Antares** · 09.07.2008 03:03

Zitat von LS~

@AntaresWo zu ist den eigentlich das Login ding oben gut?
Wirst du vielleicht ein Forum einbauen oder ein message System?

Also generell erstelle ich eigentlich selten richtige Webseiten, ich erstelle entweder Designs oder verwende ein bereits bestehendes meiner Designs, um Scripts zu entwickeln, welche unter Anderem auch das Anmeldung der User ermöglichen. Demnach baue ich in jedes meiner Design irgendwo einen Login Part ein.

Dieses Design habe ich auch hauptsächlich auß Langeweile erstellt und es wird wohl keine Verwendung mehr finden.

Thema: Eure Webseiten #5

Themen-Optionen

Anzeige

Berechtigungen