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

Beurteilung Design (Zentrierung, Footer)

Xeno

Mitglied
Liebe Beraterinnen und Berater

Ich bin daran das Design meiner Webseite Michael Ritter "aufzumöbeln" und habe mich an die Themen "Zentrierung" (1. Priorität) und "Footer" (2. Priorität) gemacht. Das vorläufige Zwischenresultat ist unter Michael Ritter zu bewundern.

Ich schreibe um ggf. Rückmeldungen bezüglich offenkundigen Fehlern und so zu erhalten (regelrechte Syntaxfehler sollten an sich nicht vorhanden sein, da die Seite HTML5-validiert ist); es geht dabei am ehesten um Fehler vom Typ "daraus kann nie etwas Schlaues werden". Es geht wie gesagt ums Design, deshalb habe ich den Fred im CSS-Forum eröffnet. Der CSS-Code der oben verlinkten Testseite ist:

Code:
*                         { 
                        margin:0; 
                        padding:0; 
                                        }

html                    {
                        background-color:#008000;    
                        }
                                
body                     { 
                        background-color:#B4DC00; 
                        font-family:Verdana, sans-serif;
                        margin-left:10%;
                        margin-right:10%;
                        margin-top:20px;  
                                        }                                
                                    
p, #navi              { 
                        margin:0 20px 20px 20px; 
                                        }



h1, h2, h3             { 
                        margin:0 20px 10px 20px; 
                                        }
                                
h1                     { 
                        font-size:180%; 
                                        }
                                
h2                     { 
                        font-size: 160%; 
                                        }
                                
h3                     { 
                        font-size: 140%; 
                                        }
                                
a, span                 { 
                        text-decoration:none; 
                                        }
                                        
img                    {
                        text-align:center;
                        border:0;        
                                        }
                                        
div                    {
                        margin:0 20px 20px 20px;
                        background-color:#FFFF66;
                        font-size:80%;
                        padding:10px 0 10px 5px;
                                        }
                                
a:link                 { 
                        color:#2F54FF; 
                                        }
                                
a:visited             { 
                        color:#FF4B4B; 
                                        }
                                
a:hover                 { color:#FEFF49; 
                                        }
                                
span                     { 
                        color:#2F54FF; 
                                        }
                                
.linkliste li         { 
                        margin:0 0 0 37.5px; 
                                        }
                                        
.linkliste             {
                        margin:0 0 20px 0;
                        }
                                        
                                
#navi                 { 
                        list-style-type:none; 
                        float:left; 
                        width:95%;  
                        background-color:#FFFFFF; 
                        margin-top:5px; 
                                        }
                                
#navi li             { 
                        float:left; 
                        position:relative; 
                                        }
                                
#navi a, span         { 
                        padding:10px; 
                        display:block; 
                        background-color:#FFFFFF;
                        margin:0;
                                        }
                                    
#navi li ul         { 
                        position:absolute; 
                        left:-999999px; 
                        top:auto; 
                                        }
                                    
#navi ul li         { display:block; 
                        width:100%; 
                        font-size:90%;
                        margin:0; 
                                        }
                                        
#navi li:hover ul { 
                        left:0; 
                                        }
                                        
#navi a:hover         { 
                        color:#FF40CF; 
                                        }
                                        
#navi span             { 
                        background-color:#D2A5FF;
                                        }
                                        
#hauptbild            {
                        text-align:center;
                        }                                        
                                
#anfang                {
                        text-align:center;
                        margin-bottom:20px;
                        font-size:200%;    
                        }


Es geht dabei nicht ums broweserspezifische Fragen; auf den drei meistverwendeten (FF, IE und Chrome, je nur auf aktuellen Versionen getestet) sieht es überall gleich aus - ob gleich gut oder gleich mies, das wäre also dann eher die Frage...!

Ich bin für alle Feedebacks dankbar. Noch etwas zum für mich derzeit umsetzbaren technischen Niveau der Antworten: Ich möchte derzeit noch kein JavaScript (und erst recht kein PHP) einsetzen, es geht also mal nur um HTML und CSS.

Ich habe das neue Design noch nicht auf anderen Seiten als auf der Hauptseite getestet, das dürfte aber ein Nebenschauplatz sein.

Ich danke allen Postern im Voraus herzlich.

Lg Xeno
 
Zuletzt bearbeitet:
Werbung:
also zum design:hellblaue schrift auf gelbgruen: schlecht lesbar-
hellblaue links, und hellgelber hover: schlecht lesbar ...
 
Hallo,

also Design würde ich das nicht nennen, mehr Gerüst.
Das ist eher so guter Standart von vor mehr als 20Jahren was ja nicht schlecht sein muss.

Die frage ist was hälst von Farbharmonie und grafiken für hintergründe um das locker zu machen und um ein Design um zu setzen, was natürlich in einer grundform schon mal gezeichnet existieren sollte oder hast kein ziel.

Cheffchen
 
Werbung:
Ich bin für alle Feedebacks dankbar. Noch etwas zum für mich derzeit umsetzbaren technischen Niveau der Antworten: Ich möchte derzeit noch kein JavaScript (und erst recht kein PHP) einsetzen, es geht also mal nur um HTML und CSS.

In diesem Fall geht es nicht um HTML und CSS. Design ist eine völlig andere Baustelle und nicht ohne Grund ein eigenständiger Beruf. Deine Seite besitzt zwar mittlerweile eine Struktur, aber noch lange kein Design, und wenn ich mir Farben, Schriften und Aufteilung anschaue, denke ich mal, dass du mit dem Thema in der Vergangenheit auch noch nicht in Berührung gekommen bist. Natürlich gibt es diverse Online Mags (drweb.de, smashingmagazine.com, etc.), die sich damit beschäftigen, aber ich würde dir vorab empfehlen, Anregungen bei professionellen Webseiten zu holen. Vielleicht findest du ja dort etwas, was dir gefällt und sich nachbauen lässt.

Free Website Templates - Free HTML Templates
 
Hallo,

ich finde dass das durchgehende grün ein wenig zu stechend, und damit nicht hilfreich, wenn man sich den Text durchlesen möchte.
Eine Idee wäre es den Inhalt nicht über die gesamte Breite zu ziehen und diesen Bereich dann mit einem weißen Hintergrund zu belegen (Schrift dann schwarz), damit wäre der Text deutlich einfacher zu lesen.
Zu den Links hat efwe ja schon was gesagt, was mir spontan noch auffällt ist dass ich nach links und rechts scrollen kann, es mir aber keinen Mehrnutzen bringt. Wahrscheinlich hast du irgendwo die Breite auf 100% gesetzt und dann noch ein padding (somit dann defacto mehr als 100% Breite) dabei, da könntest du nochmal gucken wie du das lösen kannst.

Oliver

Edit: Upps, die Testseite habe ich ganz übersehen. Das Problem mit dem hellen grün und den Links besteht aber trotzdem..
 
Zuletzt bearbeitet:
Werbung:
In diesem Fall geht es nicht um HTML und CSS. Design ist eine völlig andere Baustelle und nicht ohne Grund ein eigenständiger Beruf. Deine Seite besitzt zwar mittlerweile eine Struktur, aber noch lange kein Design, und wenn ich mir Farben, Schriften und Aufteilung anschaue, denke ich mal, dass du mit dem Thema in der Vergangenheit auch noch nicht in Berührung gekommen bist. Natürlich gibt es diverse Online Mags (drweb.de, smashingmagazine.com, etc.), die sich damit beschäftigen, aber ich würde dir vorab empfehlen, Anregungen bei professionellen Webseiten zu holen. Vielleicht findest du ja dort etwas, was dir gefällt und sich nachbauen lässt.

Free Website Templates - Free HTML Templates

Liener Tronjer

Da mir Deine Meinung (besonders) wichtig ist, eine kurze Antwort: Der Begriff "Design" war unglücklich gewählt. Ich meinte bestenfalls "Gestaltung". Ich weiss, dass Webdesign ein eigener Beruf ist, und Du hast richtig erkannt, dass ich davon nichts verstehe:cool:. Ich weiss, dass hier ein Unterforum "Websitecheck" gibt, und daorthin (wenn überhaupt irgendwohin) hätte das Thema wohl besser gepasst. Ich habe es nicht dort erstellt, weil mir meine Webseite dafür noch zu rudimentär war.

Ich will hier keinesfalls das Forum stören. Wenn Du findest, der Fred sei dort besser aufgehoben, bitte ich Dich ihn zu verschieben.

In der Sache habe ich durchaus bereits einige interessante Feedebacks bekommen. Daher würde es mich freuen, wenn der Fred (ggf. an passenderem Ort) erhalten bleiben kann. Wenn er gelöscht wird, geht aber natürlich auch nichts Weltbewegendes verloren. Ich überlasse das der Moderation.

Lg Xeno
 
Mir fällt zudem auf:
- Der Footer sähe besser aus, er würde die Breite des hellgrünen Bereichs komplett ausfüllen, das heißt, du machst aus dem margin links und rechts ein padding:
Code:
    margin: 0;    padding: 10px 20px 10px 20px;
Dann steht der Text wieder in der Flucht.
Das gilt genauso für die Navigation. Die braucht auch keinen Platz nach oben.

- Das Bild würde ich nach rechts rücken, zentriert ist schlimm. Das wirkt etwas äh ... sebstverliebt. Ich würde sagen: Packs in ein DIV, gib dem ein float:right; und die Breite des Bildes, margin nach links (Abstand zum Text) und bau dann ggf. noch eine Bildunterschrift drunter. (DIV im DIV, unterhalb des IMG) Kommt sympathischer und man muss nicht scrollen auf kleinen Bildschirmen, um mit dem Lesen anzufangen. (Scrollen erweckt im Unterbewusstsein den Eindruck: hier kommt viel Text. Und die Frage: will ich das? Wenn der Benutzer scrollt sollte er sich schon festgelesen haben oder auf andere Weise fasziniert sein.)

- Du machst den dunkelgrünen Hintergund über eine Hintergrundfarbe des <HTML>, den hellgrünen Hintergrund über die Hintergrundfarbe des <BODY> - das ist wohl valide, aber es ist etwas ungewöhnlich. Da wäre ich mir nicht sicher, dass das auf jedem Browser läuft, kann aber sein, dass diese Sorge unbegründet ist.

- Dein Body (der hier die Funktion eines DIVs hat, dem man sonst z.B. die id="wrapper" geben würde) ist in der Breite komplett vom Browser abhängig. Das ist mutig, weil sich dessen Inhalt immer der Breite des Browsers anpassen muss. Solange da nur Absätze untereinander stehen und Bilder eigene Zeilen haben, gibt das kein Problem. Aber schon die Navigation verhält sich ggf. etwas unvorhergesehen, wenn der Browser zu schmal wird. Abhilfe könnte hier eine feste Breite liefern (960px ist gerade voll angesagt) oder zumindest eine min-width, die so gewählt ist, dass zumindest die Navigation sauber dargestellt wird. Den hellgrünen Bereich zentrierst du dann, indem ihm margin:0 auto; mitgibst. (Für den IE6 brauchst du dann im übergeordneten Bereich ein text-align:center; das du im Bereich selbst wieder aufheben musst. [text-align:left;]) Ob das alles auch funktioniert, wenn man einen Body in einem gestylten html plaziert, weiß ich aber nicht. Sonst macht man das so:
Code:
* {margin:0; padding:0}
html {
  height:100%
}
body {
  background-color:#008000;
  height:100%
  text-align:center /*für IE6*/ 
  width:100%;
}
#wrapper {
  background-color:#B4DC00;
  margin:0 auto;
  text-align:left; /* für IE6 */
  width:960px;
}
- In einem kurzen Test fand ich das Dunkelgrün des Hintergrundes (#008000) als Farbe für die bisher hellblauen Links besser. Das Weiß der Navi gefällt mir auch nicht, da habe ich aber gerade auch keine zündenede Idee. Das »Gelb« der Fußzeile? Bestehst du denn auf das Dunkelgrün außenrum? Ist keine »Partei-Farbe« (wie ich gerade festgestellt habe) und macht das ganze sehr düster und schwer - obwohls ne schöne Farbe ist. Auf der von dir verlinkten Seite Grnliberale Partei Emmental ist viel mehr Weiß, ein helles Grau ... das wirkt zugänglicher und weniger streng.

- Deine <h1> benutzen eine zu große Schrift. font-size:1.2em; (=120%) reicht völlig.

(alles Meinungen des Laien vom Dienst, unser Ästhetik-Beauftragter hat gerade Urlaub.)
 
Danke für die Feeedbacks. Ich habe in einem ersten Umgang Folgendes gemacht:

1) den Footer lasse ich im Moment noch ganz weg. Es gibt da noch Sonderprobleme, ich konzentriere mich mal aufs Übrige.

2) Die Farben für Links habe ich wie vorgeschlagen verbessert: rot statt gelb fürs Hover, rot statt rosa in der Navigation, blau statt hellblau allgemein. Insgesamt haben sich die Kontraste (das war ja zunächst mal ein Hauptkritikpunkt) meiner Meinung nach verbessert. Das Farbkonzept als Ganzes (ums mal grossartig "Konzept" zu nennen) muss aber weiter durchdacht werden.

Auf die Postings im Einzelnen gehe ich nun Schritt für Schritt ein.

Die neue Gestaltung ist jetzt "scharf" geschaltet ( Michael Ritter ).

Danke allen, die geantwortet haben!

Lg Xeno
 
Werbung:
Ich bin in meinem vorherigen posting bewusst nicht ins Detail gegangen, weil ich es besser fände, dass du dir vorab einmal Vergleichsbeispiele anschaust. Wenn ich eine Seite für, sagen wir mal einen Fußballverein bauen sollte, käme ich nicht auf den Gedanken, den Rasen neu zu erfinden, sondern würde mir Anregungen bei ähnlich gelagerten Portalen holen.

Ich will dir nachfolgend aber trotzdem ein nützliches Tool zur Gestaltung deiner Homepage vorstellen. Der Color Scheme Designer erstellt Schemata aus Primär- Sekundär- und Tertiärfarben zu den sechs Farbmodellen.

Color Scheme Designer 3
 
Hallo Cheffchen

Danke für Dein Feedback!

Hallo,

also Design würde ich das nicht nennen, mehr Gerüst.
Das ist eher so guter Standart von vor mehr als 20Jahren was ja nicht schlecht sein muss.

Das ist sicher richtig; "Gestaltung" wäre der bessere Titel gewesen als "Design". Vor mehr als 20 Jahren gab's zwar noch kein CSS, aber ich weiss, was Du meinst:grin:.

Die frage ist was hälst von Farbharmonie...

Hast Du ggf. einen guten Link zum Thema? Aber sonst auch gut, scheint ein Fachbegriff aus dem (richtigen) Design zu sein.

...und grafiken für hintergründe um das locker zu machen und um ein Design um zu setzen, was natürlich in einer grundform schon mal gezeichnet existieren sollte oder hast kein ziel.

Hintergrundgrafiken kann ich mir in einer späteren Phase schon vorstellen. Das setzt aber technisch Weiteres voraus (Stichwort Grafikprogramme). Das allgemeine Ziel ist halt, meine Homepage Schritt für Schritt zu entwickeln. Kleine Verbesserungen sind mir dabei wichtiger als das Kopieren von Code, vom dem ich nichts verstehe.

Lg Xeno
 
Werbung:
Hallo,

ich finde dass das durchgehende grün ein wenig zu stechend, und damit nicht hilfreich, wenn man sich den Text durchlesen möchte.
Eine Idee wäre es den Inhalt nicht über die gesamte Breite zu ziehen und diesen Bereich dann mit einem weißen Hintergrund zu belegen (Schrift dann schwarz), damit wäre der Text deutlich einfacher zu lesen.
Zu den Links hat efwe ja schon was gesagt, was mir spontan noch auffällt ist dass ich nach links und rechts scrollen kann, es mir aber keinen Mehrnutzen bringt. Wahrscheinlich hast du irgendwo die Breite auf 100% gesetzt und dann noch ein padding (somit dann defacto mehr als 100% Breite) dabei, da könntest du nochmal gucken wie du das lösen kannst.

Oliver

Edit: Upps, die Testseite habe ich ganz übersehen. Das Problem mit dem hellen grün und den Links besteht aber trotzdem..

Hallo sOliver

Wie findest Du die jetzt unter Michael Ritter scharf geschaltete Farbkombination?

Lg Xeno
 
Lieber bodil

Herzlichen Dank für Dein umfassendes Feedback! Dazu Folgendes:

Mir fällt zudem auf:
- Der Footer sähe besser aus, er würde die Breite des hellgrünen Bereichs komplett ausfüllen, das heißt, du machst aus dem margin links und rechts ein padding:
Code:
    margin: 0;    padding: 10px 20px 10px 20px;
Dann steht der Text wieder in der Flucht.

Ich habe mich entschieden im Moment auf den Footer zu verzichten. Dennoch verdanke ich Dein Votum.

Das gilt genauso für die Navigation. Die braucht auch keinen Platz nach oben.

Wie findest Du die aktuelle Lösung ( Michael Ritter )?

- Das Bild würde ich nach rechts rücken, zentriert ist schlimm. Das wirkt etwas äh ... sebstverliebt. Ich würde sagen: Packs in ein DIV, gib dem ein float:right; und die Breite des Bildes, margin nach links (Abstand zum Text) und bau dann ggf. noch eine Bildunterschrift drunter. (DIV im DIV, unterhalb des IMG) Kommt sympathischer und man muss nicht scrollen auf kleinen Bildschirmen, um mit dem Lesen anzufangen. (Scrollen erweckt im Unterbewusstsein den Eindruck: hier kommt viel Text. Und die Frage: will ich das? Wenn der Benutzer scrollt sollte er sich schon festgelesen haben oder auf andere Weise fasziniert sein.)

Ich habe jetzt eine Lösung gewählt mit dem Bild links (statt rechts, wie Du vorgeschlagen hast). Eine Legende finde ich bei dem Bild etwas redundant (rein inhaltlich argumentiert). Was sagst Du ggf. dazu? Es ist aber zweifellos so, dass das zentrierte BIld eher unangenehm gewirkt hat.

Ich nehme zum Weiteren in einem separaten Posting Stellung!

Lg Xeno
 
Hey,

Jetzt kann man es auf jeden Fall sehr gut lesen!
Kann es sein, dass du heute zwischendurch ein ganz ganz leichtes Grün ausprobiert hattest? Das fand ich gar nicht so verkehrt. (wobei schwarz auf weiß natürlich am besten zu lesen ist).
Safari (iOS) mogelt hier und da einen Rand hinzu (siehe Screenshot), das könntest du noch unterbinden, auch wenn es nicht so dramatisch ist.

Foto 06.10.12 18 46 44.jpg
 
Zuletzt bearbeitet:
Werbung:
Du könntest bei deinem Changelog vieleicht eine Tabelle für die Darstellung der einzelnen Änderungen verwenden.
Das würde ordentlicher und vor allem übersichtlicher aussehen ;)
 
- Du machst den dunkelgrünen Hintergund über eine Hintergrundfarbe des <HTML>, den hellgrünen Hintergrund über die Hintergrundfarbe des <BODY> - das ist wohl valide, aber es ist etwas ungewöhnlich. Da wäre ich mir nicht sicher, dass das auf jedem Browser läuft, kann aber sein, dass diese Sorge unbegründet ist.

Ja, ich verstehe dieses Feedback. Allerdings habe ich die Idee nicht selber er- oder gefunden, sondern aus meinem Lehrbuch ("CSS - Das umfassende Handbuch", von Kai Laborenz, Verlag Galileo). Aber es zählt natürlich immer die Praxis und nicht die Theorie. Keine Probleme habe ich bei den drei Brwsern, die ich immer ausprobiere (aktueller Firefox, IE 9 und aktueller Chrome). Heikel könnte der IE 8 sein, den ich noch berücksichtigen möchte (wegen der vielen PCs mit Win XP, die noch laufen, und dort gibt es keinen IE 9); auf IE 7 oder gar IE 6 würde ich mir aufgrund der Art der Homepage zu verzichten erlauben. Die Seite geht ferner problemlos auf mobilem Firefox und mobilem Safari auf iPhone 4S (iPhone 5 nicht getestet). Etwas Zicken macht der Dolphin Broweser (ein mobiler Browser für Android-Smartphones), wo der Inhalt im Body komisch nach links ausgerichtet wird). Nicht getester habe ich zudem Opera und nicht-mobilen Safari und alle noch selteneren Brwoser wie Konqueror und so.

Gibt es andere Meinungen oder (negative) Browsertests zur Vorgehensweise, <html> direkt per CSS Formatierung zuzuweisen? Würde mich theoretisch und praktisch interessieren!

Lg Xeno
 
Werbung:
Hey,

Jetzt kann man es auf jeden Fall sehr gut lesen!
Kann es sein, dass du heute zwischendurch ein ganz ganz leichtes Grün ausprobiert hattest? Das fand ich gar nicht so verkehrt. (wobei schwarz auf weiß natürlich am besten zu lesen ist).
Safari (iOS) mogelt hier und da einen Rand hinzu (siehe Screenshot), das könntest du noch unterbinden, auch wenn es nicht so dramatisch ist.

Anhang anzeigen 2851

Lieber sOliver

Danke für das Posting. Ja, ich habe kurz noch mit einem ganz hellen Grün experimentiert, um dann bei Weiss zu landen. Ich finde es optisch im Moment am besten von allen bisherigen Varianten.

Den Kommentar zu Safari verstehe ich schlicht nicht, oder anders: Ich sehe auf dem Screenshot nichts Falsches. Meinst Du mit "Rand" den hellgrünen Bereich zwischen der Navi und dem Rest? Das ist gewollt *duck*. Vielleicht reden wir aber da aneinander vorbei. Also gemäss Screenshot macht Safari (wo ich nur die mobile Version auf iPhone 4S getestet habe) das, was alle anderen auch und was der Künstler wollte...

Lg Xeno
 
Gibt es andere Meinungen oder (negative) Browsertests zur Vorgehensweise, <html> direkt per CSS Formatierung zuzuweisen? Würde mich theoretisch und praktisch interessieren!

Lg Xeno

Umgekehrt wird ein Schuh daraus. Man weist CSS per HTML zu. Stichwörter wären hier Browserweichen, Responsive Webdesign, Media Queries und Conditional Comments.

Wie deine Seite in älteren IE-Versionen aussieht, kannst du mit den Entwicklertools (F12) des Internet Explorers überprüfen.
 
Zurück
Oben