freeQnet-Logo
freeQnet

Blogdesign für LaienGrafik-Ersatz mit CSSPart 1

Nachdem ich ja am Dienstag ganz vorsichtig angekündigt habe, die Serie schon am Wochenende fortzusetzen, bin ich heute echt froh, dass ich es doch wirklich mal geschafft habe! Heute geht’s also direkt weiter mit unserem im letzten Mal mit HTML 5 modernisierten, aber bisher designtechnisch noch reichlich langweiligen Layout. Wir hatten bisher nur einfache CSS-Klassen angewendet, um die Bereiche der Seite an ihren gewünschten Platz zu rücken. Heute soll alles etwas Farbe und Stil bekommen, den man früher nur aufwendig mit Grafiken erreichen konnte. Wir fangen aber erst mal klein an und erweitern die Möglichkeiten mit jeder weiteren Ausgabe etwas.

Ich werde nun erst ein mal meine Ideen und Änderungen am Layout dokumentieren und dann anschließend noch direkt auf das daraus resultierende CSS eingehen. Am HTML-Code der Seite hat sich übrigens fast gar nichts geändert! Um euch schon mal ein Bild zu machen, könnt ihr euch schon mal ein Demo des Designs anschauen und die Zip-Datei herunterladen. Wie gesagt sind das erste Schritte zu einem tollen Design, aber definitiv noch nicht alles.

Malerarbeiten

Die Auswahl der Farben für ein Design ist eine kleine Wissenschaft für sich. Die Farbtöne sollen natürlich zusammenpassen, aber auch dem Thema des Designs entsprechen und beim Leser eine gewisse Stimmung erzeugen. Natürlich steht dabei aber noch an erster Stelle, dass die Seite auch gut lesbar ist, denn darum geht es in Blogs doch hauptsächlich: Gut lesbare Texte!

Ein guter Anlaufpunkt, um sich inspirieren zu lassen und schön zusammengestellte Farbpaletten zu entdecken, ist die Website COLOURlovers.com. Die Community dort hat wirklich ein gutes Händchen für zusammenpassende Farbtöne und interessante Stimmungen. Ich habe mich für die Farbgebung unseres Beispiel-Designs z.B. in den Website-Trends dort gestöbert und mich dann bei dieser Palette bedient.

Um den Inhalt hervorstechen zu lassen, möchte ich in dem Design den äußeren Hintergrund in eine gedecktere Farbe stecken, während der Mittelpunkt der Seite, der Inhalt in einem hellen beige erscheint. Der Header setzt sich mit einem kräftigen dunklen Rot ab. Bei solchen Kontrasten sollte man allerdings beachten, dass es unschön aussehen kann, dunkle Bereiche mit heller Schrift neben hellen Bereichen mit dunkler Schrift zu stellen, vor allem, wenn es sich um völlig unterschiedliche Farben handeln. Da wir im Header aber bisher nur eine Überschrift haben, stört das nicht weiter und wir färben diese im selben Beige ein wie den Content-Bereich.

Typografie

Typografie ist mindestens eine genau so große und wichtige Wissenschaft wie die Wahl der Farben. Man kann ganze Blogs mit Tipps, Regeln und Denkanstößen zu dem Thema füllen, aber ich will euch hier erst mal nur einen kleinen Einblick geben.

Zu aller erst sei gesagt, dass Browser standardmäßig nur die Schriften darstellen können, die der Leser auf seinem Rechner hat. Man kann also nicht einfach jeden schicken Font, den man selbst hat, für sein Design verwenden, weil es beim nächsten Leser schon wieder völlig grütze aussehen kann. Glücklicherweise unterstützen die modernen Webbrowser mittlerweile alle eine Möglichkeit, Schriften vom Webserver zu laden und darzustellen. Interessanterweise war hier sogar der Internet Explorer Vorreiter, braut aber bis heute ein wenig sein eigenes Süppchen, um es den Designern schwer zu machen.

Um jetzt nicht zu sehr ins Detail zu gehen und einfach mal einen simplen Weg aufzuzeigen, wie man für alle modernen Browser schöne Schriften anbieten kann, nutzen wir die Google Font-API. Diese ermöglicht es, durch einfaches Einbinden eines CSS die von Google online bereit gestellten Fonts zu verwenden. Wie das funktioniert, zeige ich etwas weiter unten noch oder man liest sich einfach die Anweisungen direkt bei Google durch.

Für unser Beispiel-Layout habe ich mich übrigens erst mal für die Schrift Yanone Kaffeesatz entschieden. Da ich aber noch einen eigenen Beitrag nur zur Schrift-Formatierung plane, wird sich das sicher noch ein wenig ändern bzw. erweitern. Bis dahin setzen wir die Schriftgrößen erst einmal locker auf ordentliche Werte und geben dem eigentlichen Header eine wirklich herausstechende Überschrift.

subtile Effekte

Kommen wir nun ins CSS-Eingemachte, das unser Design erst richtig schön macht. Es sind nämlich meistens die unscheinbaren, kaum wahrnehmbaren Stilmittel, die den größten Effekt machen. Hier haben wir aber auch gleich unseren Haken: Der Internet Explorer stellt diese Effekte kaum dar. Ein Leser, der mit dem IE zu uns kommt, wird zwar ein sauberes, simples Design zu sehen bekommen, das wahre Eye Candy sieht aber nur der Nutzer moderner Browser, auch wenn er diese Effekte gar nicht bewusst wahrnimmt.

Um den Hintergrund nicht ganz so trist wirken zu lassen, geben wir ihm einen leichten Farbverlauf, der bis zur Mitte der Seite herunter läuft. Auch der Header bekommt einen leichten Verlauf, der zwar noch weniger wahrnehmbar ist, aber gerade dadurch das Rot etwas wärmer macht.

Der Übergang zwischen Hintergrund und Content wirkt nicht gerade einladend, wenn man einfach nur die Farben aufeinander prallen lässt. Hier hilft ein ganz leichter Schattenwurf, um einen kleinen Absatz zu erzeugen. Hier ist allerdings auch etwas Vorsicht geboten. Nimmt man ein zu helles Grau, kann dieses statt eines Schattens um einen dunklen Bereich wie unseren Header herum sogar eher wie ein Leuchten erscheinen, was in bestimmten Fällen natürlich auch keine schlechte Idee sein muss.

Zu guter letzt verleihen wir den Überschriften noch ein wenig mehr Nachdruck. Dazu verleihen wir ihnen einen ganz leichten, einen Pixel breiten Schlagschatten mit einer nur leicht anderen Farbe als die Schrift selbst. So stechen die Schriften hervor, ohne einen wirklichen 3D-Effekt zu erreichen, den wir hier nicht unbedingt haben wollen.

Die Umsetzung

Zu erst einmal müssen wir eine kleine Anpassung am HTML machen, damit die Schriftarten von Google auch geladen werden. Dazu fügen wir folgenden Schnipsel in den Head-Bereich des HTMLs ein, am besten direkt über dem eigenen CSS! So lädt man die Yanone Kaffeesatz in all ihren Varianten in die eigene Seite. Analog geht das auch mit allen anderen Schriften, die Google anbietet.

1
	<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight,light,regular,bold' rel='stylesheet' type='text/css'>

Daneben ist die einzige weiteren Änderung im HTML selbst eigentlich nur noch die Änderung des Seitentitels und des Textes im Header, da es sich ja nun nicht mehr um Beispiel 1 handelt. Das CSS hat sich aber umfassend geändert, weshalb ich den Code hier einfach erst mal präsentiere und dann kurz auf einzelne Änderungen eingehe:

38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
html, body {
	border: 0;
	margin: 0;
	padding: 0;
}
 
html {
	background-color: #7A6A46;
	background-image: -moz-linear-gradient(top, #4B4934, #7A6A46 50%);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0, #4B4934), color-stop(0.5, #7A6A46));
	background-repeat: repeat-x;
}
 
body {
	font: 16px/160% "Yanone Kaffeesatz","Palatino Linotype",Georgia,"Times New Roman",serif;
	width: 940px;
	margin: 0 auto;
	box-shadow: 0px 0px 10px #4B4934;
	-moz-box-shadow: 0px 0px 10px #4B4934;
	-webkit-box-shadow: 0px 0px 10px #4B4934;
	background: #EFEACC;
}
 
header, aside, footer, section, article {
	display: block;
}
 
header {
	width: 900px;
	height: 100px;
	display: block;
	overflow: hidden;
	padding: 20px;
	color: #EFEACC;
	text-shadow: 1px 1px 1px #CFCAAC;
	font-size: 60px;
	background-color: #A23607;
	background-image: -moz-linear-gradient(top, #922600, #A23607 70%);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0, #922600), color-stop(0.7, #A23607));
}
 
#content {
	float: left;
	width: 580px;
	overflow: hidden;
	padding: 20px;
}
 
aside {
	float: right;
	width: 280px;
	overflow: hidden;
	padding: 20px;
}
 
footer {
	width: 900px;
	overflow: hidden;
	padding: 20px;
	clear: both;
}
 
h1 {
	font-size: 40px;
	text-shadow: 1px 1px 1px #7A6A46;
}
 
h2 {
	font-size: 30px;
	text-shadow: 1px 1px 1px #7A6A46;
}
 
a {
	color: #A23607;
}
 
nav ul li {
	display: block;
	width: 100px;
	float: left;
}

Zu aller erst geben wir dem HTML die Hintergrundfarbe und den Farbverlauf. Die Farbe allein sorgt zusammen mit dem “repeat-x” dafür, dass bei einer Seite, die kürzer als das eigentliche Browserfenster ist, der Verlauf nicht unter dem Inhalt erneut beginnt. Außerdem wird sie einfach im Internet Explorer verwendet, der mit den Verläufen nichts anfangen kann. Auffällig ist auch, dass da einmal “-moz” und einmal “-webkit” auftauchen und die Syntax eine etwas andere ist. Das liegt daran, dass CSS 3 noch experimentell ist und die Browserhersteller erst mal eine eigene Syntax unterstützen, solange noch kein fester Standard definiert ist. Über den genauen Aufbau der Gradient-Befehle kann man sich bei Mozilla (Firefox) und Webkit (Chrome und Safari) informieren. Um sich aber die Arbeit etwas zu vereinfachen, greift man einfach zu einem simpel einstellbaren Gradient-Generator!

Der Body-Bereich wird um Hintergrund-Farbe und die neue Schrift ergänzt und erhält seinen Schatten, der nach der Standard-Version wiederum einmal für Mozilla und einmal für Webkit zu definieren ist. Alle drei gleichen sich allerdings in der Syntax. Der erste Wert definiert den vertikalen Versatz vom zu schattierenden Objekt, der zweite Wert den horizontalen. Im dritten wird dann die Stärke des Schattens angegeben und zu guter Letzt die Farbe. Da wir keinen Schlagschatten wollen, setzen wir den Versatz jeweils auf 0px, die Stärke aber auf 10px, um einen kleinen weichen Verlauf zu bekommen. Die gewählte Farbe ist das dunkle Braun, mit dem der Verlauf des Hintergrund beginnt, damit der Effekt ganz subtil wirkt.

Der “header” wird mit etwas mehr Innenabstand versehen und erhält ebenfalls eine Hintergrundfarbe sowie einen Verlauf. Mit einer font-size von 60 lassen wir den Titel der Seite ordentlich hervorstechen und setzen mit einem minimalen text-shadow einen kleinen Akzent. Die Syntax dieses speziellen Schattens ist übrigens genau wie die des box-shadow, geht aber halt direkt auf den Text los.

“content”, “aside”, “footer” werden in dieser Ausgabe erst mal nicht weiter verändert, sondern nur mit einem etwas größeren Innenabstand versehen, weil dies mit der gewählten Schriftart einfach mal schöner aussieht. Dafür folgen nun ein paar neue Stile, die wir vorher nicht hatten.

Wir verwenden im Inhalt bisher die Überschriften “h1″ und “h2″. Dementsprechend versehen wir beide mit einer schönen Schriftgröße und ebenfalls dem oben schon erwähnten Schatten. Natürlich kann und sollte man das später auch analog für “h3″ bis “h6″ machen, da man gerade beim Bloggen verschiedene Überschriften gebrauchen kann, um den Text ordentlich zu gliedern und damit für den Leser bekömmlicher zu machen.

Zu guter letzt wenden wir uns noch ein wenig der Navigation zu, die allerdings in den kommenden Ausgaben noch weit mehr angepasst werden wird. Für’s erste soll reichen, die einzelnen Listen-Elemente in der Navigation als Block zu definieren und mit “float:left” nebeneinander anzuordnen. Wie man sieht, verschwinden damit auch sofort die typischen Punkte der Aufzählungsliste. Damit das aber nur in der Navigation geschieht, legen wir diesen Stil explizit nur für “nav ul li” fest! Außerdem gibt’s für Links ganz zum Schluss noch schnell eine etwas passendere Farbe als das übliche blau.

Fazit

Nun haben wir mit eigentlich gar nicht so aufwendigen Schritten schon ein Design, das gut was hermacht und meines Erachtens auf den ersten Blick hervorsticht. Natürlich ist noch lang nicht alles wirklich ausgearbeitet, aber für’s erste kann’s sich schon mal sehen lassen.

Die gewählten Farben und Effekte sollen natürlich nur Ideen und Anhaltspunkte sein. Tobt euch aus, wie es euch gefällt und experimentiert herum, was das Zeug hält! Nur so lernt man wirklich, was einem gefällt und was wie funktioniert. Außerdem entdeckt man so doch hin und wieder auch mal wirklich verblüffende Effekte, die man nicht überall zu sehen bekommt.

In den folgenden Ausgaben werde ich das Design nun nach und nach verfeinern. Das wird zum Einen in allgemeineren Beiträgen wie diesem hier stattfinden, zum Anderen aber auch teilweise mit einem speziellen Themenschwerpunkt wie Typografie oder auch mal der wirkungsvollen Formatierung eines einzelnen Objekts. Ich hoffe, ich kann euch damit auch wieder auf ein paar neue Ideen bringen und den einen oder anderen ansprechen, der mit reinen Laien-Tipps unterfordert ist. Natürlich freue ich mich auch wieder über jegliche Tipps, Ideen, Anregungen und auch konstruktive Kritik in den Kommentaren. Ihr könnt auch sehr gern Wünsche äußern, was ich in einer zukünftigen Ausgabe mal genauer beleuchten soll!

Für heute soll’s aber dann doch erst mal genug sein, bevor ich noch die Schallmauer von 2000 Wörtern im Beitrag knacke! Wie beim letzten Mal gibt’s natürlich wieder eine Zip-Datei mit den Dateien und diesmal auch wie oben schon erwähnt, eine Demo-Seite, um sich das Ergebns direkt im Browser anzusehen!

Kommentare

1

Tolle Artikelreihe, da lerne sogar ich noch was neues :)
2 kleine Tipps: Screenshots im Text! Und die Artikel vielleicht noch mehr aufteilen, der hier ist doch schon sehr umfangreich. Lieber öfters und dafür kürzer.
Bin gespannt, wie es weitergeht :)

geschrieben von David
antworten  •  Link
2

@David: Danke!

Ja, ich hab im Nachhinein auch schon gedacht, der Beitrag ist mir etwas lang und trocken geworden. Da gab’s aber auch ein wenig die Zwickmühle, auf der einen Seite das Layout wirklich weiter zu bringen, auf der anderen aber auch die verwendeten Techniken genauer zu beschreiben. Ich glaube, ich steige in den kommenden Ausgaben doch mehr auf einzelne Themen um, die ich dann näher beschreibe. Da passen Screenshots dann auch besser, um das aufzulockern.

geschrieben von beetFreeQ
antworten  •  Link
You dress up for Armageddon
I dress up for summer!

The Hives

Blogverzeichnis - Blog Verzeichnis bloggerei.de blogoscoop Bloggeramt.de