the-tutorium.de | Nun sind wir online!

[x3Ro]

the-TUTORIUM.de
Wir brauchen eure Meinung!

Es hat sich eventuell schon herum gesprochen; Ich mache zur Zeit eine neue Tutorial-Website auf.

Ich bin gerade dabei die Index-Seite zu gestalten und da wollte ich mal eure Meinung zum bisherigen Stand hören.

the-Tutorium.de

Was würdet ihr verändern?
Was kann ich besser machen?
Wie findet ihr den Code? [HTML | CSS ]

Anmerkung: Das Logo ist noch nicht zu 100% fertig, aber man kann glaube ich die Idee dahinter schon erkennen.
Bilder und Texte sind bisher alles Blindtexte, aber so bekommt einen guten Eindruck wie der Text später wirken wird.
(Ich habe extra auf Lorem verzichtet und alte Referate rausgekramt, da man so besser die Lesbarkeit des Textes prüfen kann)

In der HTML/CSS Abteilung habe ich einen Sammelthread; hier sammele ich alle meine technischen Fragen die ich an euch habe

[chrizZ]

Da ich von Coding keine Ahnung habe, kann ich mich nur zum Design äußern.

Es ist alles viel zu GRAU!!!!!!!!
Die paar Verläufe die drin sind reißen auch nicht wirklich was.
Tutorialseiten sollten doch schon etwas mehr, wenn nicht sogar auf extrem auf das Design ausgelegt werden. Da man dahinter auch das können des Teams erkennt. So wie es jetzt aussieht würde ich euren Tuts kein großes Vertrauen schenken.
Bringt mehr Farbe rein, ein paar Brushes oder Bilder, damits etwas schöner aussieht und nicht so ein tristes, langweiliges grau.
Die Aufteilung ist auch nicht gerade ideal, da man auf so einer Seite im Normalfall eine menge Inhalt findet, sollte die auf jeden Fall größer sein. Zudem sind die Zeiten von 15" Monitoren vorbei. Größer = Besser. Zudem würde ich es zentriren.
Die Bilder die ihr verwendet haben nicht gerade eine gute Qualität, sowas schreckt auch ab.
Das Logo finde ich ist auch nicht wirklich der Bringer, da kann man besseres bauen.

...........................................................................................
Alles meine Meinung. Laut Artikel 5 des Grundgesetzes der BRD hab ich das Recht dazu.
Ob Ihr sie annehmt ist eure Sache

[Karl]

Es ist alles viel zu GRAU!!!!!!!!

dito.
Da brauchts Farbe, blautöne vielleicht. Die mit der Maus überfahrenen Links werden viel zu dunkel, die ganze Seite wirkt nicht so als wolle man mehr als 5 Minuten verweilen.

[x3Ro]

Anmerkung: Das Logo ist noch nicht zu 100% fertig, aber man kann glaube ich die Idee dahinter schon erkennen.
Bilder und Texte sind bisher alles Blindtexte, aber so bekommt einen guten Eindruck wie der Text später wirken wird.
(Ich habe extra auf Lorem verzichtet und alte Referate rausgekramt, da man so besser die Lesbarkeit des Textes prüfen kann)

Damit hätten wir Bilder und Logo erklärt.
(Sind Blindbilder, sollen einen groben Eindruck geben, wie es mit Bildern aussehen könnte. Das Logo soll so schlicht bleiben, es kommt allerdings noch ein Hintergrund und ein paar Texteffekte dazu. Wir sind uns nur noch nicht sicher, wie wir diese einbinden.)

Wir wollen uns gerade von all den anderem Tutorialseiten abheben, indem wir nicht grafisch aufwendig arbeiten, sondern unseren Hauptaugenmerk darauf legen, dass der User nicht überfahren wird von "unnützen" Grafiken.
Das Design ist extra schlicht gehalten, damit man von den Tutorials nicht abgelenkt wird.

Auflösung: Okay, mein Fehler, ich habe vergessen dazu was zu sagen.
Bisher ist die Seite auf 1024x768 optimiert, das wird später noch dynamischer! Allerdings ist das die am weitesten verbreitete Auflösung. Und auf meinem 15,4" Screen ist die Seite eigentlich überhaupt nicht zu klein.

Trotzdem vielen Dank für Meinung, und ja die werden wir annehmen.
Allerdings würden wir uns auch sehr über (Lösungs-)vorschläge freuen.

Ich möchte nochmal betonen, dass es sich hier nur um die Indexseite handelt, also um die Startseite, das Layout der Unterseiten, kann und wird noch variieren.

Ich persönlich finde aber auch, dass die Seite mehr Farbe vertragen könnte, daran arbeiten wir zur Zeit auch noch.
Mal ein Versuch etwas mit Farbe zu machen. Noch nicht so passend, wie ich finde. (nur eine grobe Idee, ich weiß, dass der Verlauf auf der Hälfte aufhört )
Blau-Weiß Verlauf

Es ist alles viel zu GRAU!!!!!!!!

Die mit der Maus überfahrenen Links werden viel zu dunkel...

Das war eigentlich auch so. Ich weiß nicht was da gerade durch einander gekommen ist.
Ich versuch das möglichst schnell zu fixen.

Danke für den Tipp!

Edit: Das Menu erscheint jetzt wie geplant.

[Avedo]

Hallo!
Mir sind nur ein paar Dinge erstmal aufgefallen, die ich ändern würde.
Zum ersten würde ich nie Links in eine Seite einbauen, die auf einem dunklen Hintergrund schwarz sind. Selbes gilt natürlich auch für Text. Weißen und schwarzen Text würde ich auch meistens vermeiden. Das kann man sich für die Hover-Effekte sparen. Damit meine ich nun speziell die Links unten links im Footer. Ich würde sie #CCCCCC machen und beim Drüberfahren dann #FFFFFF. Die Schrift im Footer und in den beiden Boxen in der Navigation würde ich ebenfalls in #CCCCCC einfärben. Der Hintergrund des Footer sollte auch die gleiche Farbe wie diese Boxen haben. Mein Vorschlag #666666. Für die Textfarbe, auch für den Masthead, würde ich #333333 nehmen. Den Hintergrund beim Mouseover in der Navigation würde ich keineswegs so dunkel machen. Immer nur eine Farbänderung um wenige Tonwerte. In diesem Falle würde ich auch hier #CCCCCC nehmen. Die verschiedenen Farben in den Subnavigation von Tutorials finde ich ganz schön und würde dies daher auch bei Team machen. Den Footer würde ich wie auch die Navigation auf die ganze breite des Layouts ausdehnen. Soviel zum allgemeinen Layout.

An eurer Stelle würde ich mir überlegen, ob ihr euch in der Navigation oben nicht auf das wesentliche konzentriert und für die Tutorials eine weitere Navigation rechts unter der TV-Box hinzufügt. Finde ich sehr angenehm und etwas übersichtlicher. Dann könntet ihr die Navigationspunkte oben auch horizontal zentrieren. Das würde besser aussehen. Das extra Untermenü für jeden einzelnen Mitarbeiter würde ich mir sparen. Das werden vielleicht im Laufe der Jahre doch relativ viele und dann kann man so etwas nicht mehr machen. Würde alle unter einander auf eine Seite packen, die man unter About findet, und fertig.

Ich hoffe, dass ich dir etwas weiter helfen konnte.
MfG, Andy

PS: Ich finde es übrigens echt lobenswert, dass es endlich mal Leute gibt, die sich bei solchen Seiten auf das wesentliche konzentrieren. Soetwas findet man nur selten, aber die erfolgreichsten Seiten für Tutorials sind doch die schlichtesten. Ich möchte da nur mal an das PHP-Manual, Selfhtml.org und http://tut.php-quake.net erinnern.

//EDIT: Würde die abgerundetetn Ecken vielleicht am Besten ganz weglassen. Hier übrigens noch eine sehr sehr schlichte Tutorial-Seite, die sich aber sehr lohnt.

[schnuppel]

Hallo,

klingt jetzt vll böse... aber: wenn Du sagst dass Ihr Euch von anderen abheben wollt und deswegen grafisch nix aufwendigeres machen wollt, sieht sich das für mich bei der betrachtung der Indexseite so an, dass Ihr es in wirklichkeit nicht besser könnt.

Mir fehlts immo an der verwendung von modernen Webtechnolgien wie z.B. Java und Flash. Grafisch gesehen sind die immo verwendeten "grafisch unaufwendigen Grafiken" nicht sauber umgesetzt (z.B. die abrundungen), die Farben sind deutsch gesagt: nicht edel, sondern öde. Auch mit grautönen lässt sich was reissen, aber nicht mit denen.

Gruß

Schnuppel

[x3Ro]

Hallo!
Mir sind nur ein paar Dinge erstmal aufgefallen, die ich ändern würde.

Ich versuche mal die Qualität deiner Kritik für meine Antwort zu übernehmen.
Zwischenstand

Ersteinmal, danke für die vielen Vorschläge. Ich wusste ja selbst, dass das Layout nicht perfekt ist.
Ich habe mal alle deine Vorschläge umgesetzt. Sie sind alle plausibel und nachvollziehbar.
Vorallem gefallen mir "deine" Farben. (Farbenlehre war nie mein Freund )

Allerdings muss ich sagen, dass ich einige deiner Ideen auch hatte, die mein Team aber leider nicht mögen.
(zB. unterschiedliche Farben für das Team; Begründung: Wir sind ein Team, unterschiedliche Farben würden uns "auseinander reißen" - sinniges Argument muss ich sagen.)

Zur Navigation:
Zur Zeit ist sie noch nicht perfekt ausgerichtet. Allerdings soll sie auch dort bleiben. Unter der TV-Box wird in der finalen Version kein Platz mehr sein, da dort noch eine Playlist für den Fernsehr hinkommt
Das Team wird sich auch erstmal nicht vergrößeren, da wir sonst gegen einige Regeln verstoßen würden.
Kleine Anmerkung: Die Website ist eine Abiturarbeit im fünften Prüfungselement.

PS: Ich finde es übrigens echt lobenswert, dass es endlich mal Leute gibt, die sich bei solchen Seiten auf das wesentliche konzentrieren.

Dankeschön, das baut auf !

... sieht sich das für mich bei der betrachtung der Indexseite so an, dass Ihr es in wirklichkeit nicht besser könnt.
... verwendung von modernen Webtechnolgien wie z.B. Java und Flash. Grafisch gesehen sind die immo verwendeten "grafisch unaufwendigen Grafiken" nicht sauber umgesetzt (z.B. die abrundungen), die Farben sind deutsch gesagt: nicht edel, sondern öde. Auch mit grautönen lässt sich was reissen, aber nicht mit denen.

An den technisches Fähigkeiten mangelt es eigentlich nicht unbedingt.
Wir haben im Zuge der Konzeptionsarbeiten sehr viele Tutorialseiten gesehen und der Großteil war einfach viel zu überladen und unübersichtlich. Man konnte sich nicht mehr auf die Tutorials an sich konzentrieren, weil überall nur Grafiken waren.
Daraus resultierte einer unserer Gestaltungsstile: Reduktion. Wir brauchen keinen blinkenden Flashheader, um zu zeigen wie gut wir sind. (Das soll nicht heißen, dass Flash unbrauchbar ist)
Das diese Reduktion eventuell kein Vertrauen aufbaut, damit müssen wir leben. Wir wollen ja auch, dass unsere User wegen der Tutorials auf die Seite kommen und nicht weil die Seite vor Grafiken nur so strotzt.

Verwendung von Flash und Java:
Flashfilme werden aufjeden Fall auf der Website vertreten sein. Im TV rechts werden Trailer zu den Tutorials laufen, diese werden mit Flash gemacht. Davon ist allerdings noch keiner fertig.
Außerdem werden einige Tutorials auf Flash basieren, da sie interaktiv sein sollen.

Ansonsten haben wir bisher keinen sinnvollen Nutzen für Flash bei uns gefunden - außer Tutorials zu schreiben, wie Flash den eben funktioniert. Das gleiche gilt für Java.
Javascript hingegen (ja ich trenne das), wird bei uns auch noch seinen Nutzen finden. Der TV bekommt eine Sliding-Funktion damit der User die Möglichkeit bekommt ihn auszublenden, falls der TV Ablenken soll.

Diese Features sind paralell noch alle in der Mache, daher verwende ich bisher nur Platzhalter.

Nichtsdestotrotz ist es gut seine Arbeit mal aus der Sicht einer Person zu bekommen, die nicht das gesamte Konzept kennt und die zukünftigen Schritte schon mit eingeplant hat.

Danke an alle Kritiker

[Avedo]

Abend!
Schön, dass ich dir helfen konnte. Habe gerade nochmal einen Blick in den Quellcode geworfen und bin eigentlich recht angetan, von dem, was ich da sehe, allerdings haben sich da doch noch ein paar Fehler eingeschlichen. Zum Beispiel solltest du

Code: Alles auswählen

<a href="#" title="Den gesamten Artikel lesen"><p class="align_right">weiterlesen...</p></a>

in

Code: Alles auswählen

<p class="align_right"><a href="#" title="Den gesamten Artikel lesen">weiterlesen...</a></p>

ändern.

Bin leider etwas zu müde, um mir das noch weiter an zu sehen, aber wenn morgen alles fertig ist, schau ich es mir gerne nochmal kurz an.
MfG, Andy

//EDIT: Es ist ein kleiner Balken rechts zu sehen, seit dem dudie Navigation grau gemacht hast, den Fehler solltest du noch beheben, sieht sonst schon etwas besser aus. Das Orange in dem linken der beiden oberen Kästen solltest du übrigens lieber durch ein helles blau ersetzen. Das sieht auf jeden Fall besser aus. Zudem solltest du deinen Quellcode validieren.
HTML-Validator
CSS-Validator
Die Validierung deines Codes zeigt ja auch, dass da noch ein paar sehr grobe Schnitzer drin sind, die aber ja schnell behoben sind.

//EDIT: Den Abstand zwischen den einzelnen Artikel-Boxen solltest du unbedingt auf mindestens 3px setzen. Zudem sollte dieses Weiterlesen nicht weiß werden. Eher von #666666 zu #999999.

[x3Ro]

Ich habe noch garnicht so auf validen Code geachtet. Es ging mir bisher eher um die Logik, Sturktur.
Die CSS ist nun valide. Mit der HTML wirds etwas schwierig, da Validome einen schwerwiegenden Fehler meldet, bei dem ich nicht weiß wie ich den umgehen kann.
Der HTTP Header sendet eine falsche Kodierung, aber wie änder ich das?
Lade ich die Datei hoch klappt es - aber ich bin mittlerweile auch zu müde, um die Fehler zu beheben.
Wie gesagt, es ging mir eher darum, dass der Code verständlich ist. Das validieren schaffen ich schon irgendwie noch

Den Fehler beim Weiterlesen habe ich korrigiert. Den "Fehler" mit dem grauen Balken rechts, war beabsichtig. Dadurch bekommt die Seite etwas Tiefe. Was hälst du davon?

Ach ja, das Orange in der Box oben. Hier ist geplant, dass die Überschrift in der jeweiligen Programmfarbe des Tutorials geschrieben wird. Also: Illustrator Tutorial -> orange, Photoshop-Tutorial -> blau. Das Blindbild ist ein Photoshop Screenshot und der Text läßt auf Illustrator schließen, das verwirrt etwas. Wird am Ende aber passen

Gute Nacht

[Summernoon]

Die Navigation verschachtelt sich ineinander.
Ansonsten nette Idee.
mfg
Summernoon

[x3Ro]

Die Navigation verschachtelt sich ineinander.
Ansonsten nette Idee.
mfg
Summernoon

Was meinst du damit genau? Wird die navi bei dir nicht richtig angezeigt? Vielleicht liegt das an deinem Browser.
Opera zeigt das korrekt an, andere Browser habe ich bisher noch nicht berücksichtig.
In Firefox zB. überlappt das alles. Das kommt mit dem Feinschliff.

[Avedo]

Morgen!
Bastel gerade noch ein bisschen an deiner CSS-Datei rum. Poste sie nachher, wenn ich fertig bin mal. Würde dich dann bitten sie mal zu testen.
MfG, Andy

[x3Ro]

Ja klar, kein Problem. Bin gespannt was du da rumbasteltst

So, ich habe den Fehler im Menu zwar nicht gefunden, aber es funktioniert jetzt trotzdem wieder

@Avedo:

Wenn du schon in meinen Daten rumbastelst, kannst du mir dann gleich ein kleines Feedback schreiben, ob der Code, die Struktur, ... verständlich sind? Ist der Code so gegliedert, dass ein Externer (du ) sich da drin gut zurecht findet?
Das wäre super !

[Avedo]

Hallo!
Also zur Strukturierung deines CSS-Codes muss ich sagen, dass diese mir nicht so wirklich gefällt. Du solltest alles in sinnliche Blöcke unterteilen. Damit meine ich inhaltliche Trennung in Masthead, Content, Navigation und Footer. Alles andere gehört unter Generals. So kann sich jeder in deinem Code zurechtfinden. Habe den Code mal in geänderter und formatierter Weise angehängt. Von den Schriftgrößen her musst du mal schauen. Würde aber alles nur prozentual angeben und die normale Schriftgröße für den Body festlegen. Solltest diesen Code aber nochmal validieren. Wegen den Farben muss ich nochmal schauen. Lade es einfach mal so hoch und dann schaue ich es mir nochmal an.

Code: Alles auswählen

/*----------------------------------MAIN------------------------------------*/

body            { background: url(../images/hintergrund_verlauf_index.jpg) repeat-x;
            margin: 0;
            padding: 15px;
            font-family: Arial,Verdana,Tahoma,sans-serif;
            color: #333333;
            font-size: x-small; /* IE5 Win */
            font-size: small; }
            
html>body         { /* be nice to Opera */
            font-size: small; }
            
/*------------------------------PAGE-------------------------------*/

#site          { position: absolute;
            z-index: 10;
            width: 635px;
            left: 0px;
            top: 0px; }
            
/*------------------------------HEADLINE-------------------------------*/

#header          { position: relative;
            z-index: 15;
            height: 140px;
            background: url(../images/header_index.png) no-repeat;
            font-size: 200%;
            text-indent: 110px;
            color: #666666;
            text-transform: uppercase;}
            
/*------------------------------NAVIGATION-------------------------------*/

#menu          { position: relative;
            z-index: 15;
            height: 35px;
            width: 633px;
            background: #999999;
            border: #333333 solid 1px;
            border-bottom: none;
            text-transform: uppercase; }

#menu          { text-align: right; }
            
#menu .unterkategorie { font-weight: bold;}
            
#menu ul, li       { float:left;
            list-style-type: none;
            margin: 0px 20px;
            padding: 0px; }
      
#menu .unterkategorie
            { visibility:hidden;
            position:absolute;
            top: 0px;
            left: 0px;
            margin: 0; }
            
#menu li li      {float: left;}

#menu ul li:hover ul, #menu ul a:hover ul
            { visibility: visible; }

#menu ul li .unterkategorie .photoshop
            { color: #18447F; }
            
#menu ul li .unterkategorie .illustrator
            { color: #E26C10; }
            
#menu ul li .unterkategorie .flash
            { color: #6C0517; }
            
#menu ul li .unterkategorie .dreidmax
            { color: #0BA3D8; }
            
#menu ul li .unterkategorie .sponsor
            { color: #023D9B; }

#menu a:hover       { background: #333333; }

#menu a          { color: #CCCCCC;
            font-variant: small-caps; }
            
/*------------------------------CONTENT-------------------------------*/

#content          { width: 590px;
            padding: 5px 20px;
            position: relative;
            border: none;
            z-index: 15;
            border: #333333 solid 1px;
            background: #E5E5E3;
            float: left; }
            
/*-------------------------CONTENT-BOXES------------------------------*/

#top_box          { position: relative;
            z-index: 20;
            width: 593px;
            border: none;
            margin: 0 -3px; }

#top_tut         { background-color: #666666;
            position: relative;
            z-index: 25;
            height: 150px;
            width: 230px;
            border: #333333 solid 1px; }
            
#top_pic          { background: url(../images/top_tut_pic.jpg) no-repeat;
            position: relative;
            height: 150px;
            width: 150px;
            float: left; }
            
#top_text       { position: relative;
            z-index: 25;
            height: 140px;
            width: 70px;
            vertical-align: top;
            text-align: left;
            float: right;
            margin: 0px 5px; }
            
#sponsor          { background-color: #4c4c4c;
            position: relative;
            z-index: 25;
            height: 150px;
            width: 230px;
            left: 9px;
            border: #000000 solid 1px; }
         
.sponsor          { width: 245px; }

#article          { position: relative;
            z-index: 25;
            width: 477px;
            background: #BFBFBF; }
            
.article          { width: 100%; }

.row          { position: relative;
            border: #000000 solid 1px;
            background: url(../images/column_verlauf_index.jpg) repeat-x;
            margin: 3px 0px; }
            
#news          { position: relative;
            top: 3px;
            height: 480px;
            width: 110px;
            float: right;
            background: #7F7F7F;
            border: #000000 solid 1px; }
            
.newsbox          { height: 90px;
            width: 100px;
            background: #D8D8D8;
            margin: 5px 5px;
            text-align: center; }
            
.newspic          { width: 90px;
            height: 70px;
            padding: 5px 5px 0px; }

/*----------------------------------FOOTER------------------------------------*/            
            
#footer         { position: relative;
            width: 633px;
            bottom: 0px;
            margin: 0px 0px;
            background: #999999;
            color: #CCCCCC;
            font-size: 80%;
            border: #000000 solid 1px;
            text-indent: 5px;
            text-transform: uppercase; }

#footerleft       { float: left; }

#footerright       { float: right;   }
            
#footerright a    { color: #CCCCCC; }

#footerright a:hover
            { color: #FFFFFF; }

/*----------------------------------TV------------------------------------*/   

#tv             { position: absolute;
            top: 133px;
            left: 634px;
            z-index: 5;
            width: 241px;
            height: 323px;
            background: url(../images/tv.png) no-repeat; }
         
/*------------------------------HEADLINES--------------------------------*/   

.the, .de       { font-size: 130%;
            vertical-align: super; }
            
.de             { vertical-align: baseline; }
            
.row h2          { font-size: 130%;
            text-indent: 10px; }
            
.row p          { line-height: 15px;
            margin: 3px; }
            
.newsbox          { font-size: 100%; }

.weiterlesen       { text-align: right;
            line-height: 0px; }
            
#top_text       { font-size: 120%; }

#top_text strong p    { color: #FF6600;
            margin: 0px 0px 5px; }
            
#top_text p a       { text-align: right; }
            
#sponsor p       { font-size: 120%;
            margin: 5px; }
         
/*------------------------------HEADLINES--------------------------------*/   
      
a, a.link       { text-decoration: none;
            color: #CCCCCC;
            font-weight: bold; }
            
a:hover          { color: #FFFFFF; }
            
.row .weiterlesen a { color: #666666; }

.row .weiterlesen a:hover
            { color: #999999; }

/*--------------------------------GENERALS-----------------------------------*/

.noborder       { border: none; }

.clearboth       { clear: both; }

img             { border: none; }

MfG, Andy

[x3Ro]

Hier ist deine Version

So, ich schätze du möchtest ein Feedback. Ich formuliere es mal so, als ob du das nicht freiwillig gemacht hast, sondern eher auf der Ebene: Kunde - Gestalter.
Bitte die Kritik nicht falsch verstehen.

So umreissen tut es mich nicht. (hingegen aber das du Zeit geopfert hast dafür erstmal Danke!)

Das Logo im Header, ist glaube ich nicht so wie du es wolltest, falls doch; bei uns sollte das Tutorium im Vordergrund stehen, nicht das The und .de Aber wie gesagt, ist glaub ich ein kleiner Fehler.

Die Schrift generell ist etwas zu groß, in den Boxen läuft es über den Rand und im den Artikelboxen wäre etwas mehr Zeilenabstand ganz förderlich, damit das Auge in der Zeile bleibt. (evtl sonst noch eine Serifen Schrift)

Beim Sponsor, die Überschrift heller machen, gute Idee!
(Aber da muss ich sowieso mit unserem Sponsor noch drüber reden, wie er sich das genau vorstellt.)

Eine Frage habe ich: Wie hast du den Abstand nach oben verringern können? Bei mir kam der plötzlich und ich wusste nicht wie ich den wieder weg bekomme

Mit der Strukturierung hast du Recht, da muss ich mir noch mal Gedanken machen. Ich habe die CSS zwar gestern noch mal Überarbeitet, aber insgesamt muss da noch etwas gemacht werden.

Vielen Dank nochmal für deine Arbeit! Ich werde sie noch mal mit meiner Gruppe besprechen und schauen von was wir uns inspirieren lassen. 100%ig übernehmen dürfen wir es ja leider nicht (Abiprüfung)