freeQnet-Logo
freeQnet

Blogdesign für Laien Update und Ausblick

Lang lang ist’s her. Der eine oder andere wird sich noch erinnern, dass ich im Sommer 2009 mal mit einer Beitragsserie begann, die sich um Webdesign drehen und vor allem Bloggern ohne viele Vorkenntnisse ein wenig Einblick in Tricks und Kniffe mit HTML und CSS geben sollte. Einige haben dann auch lang auf eine Fortsetzung dieser Serie gewartet, die Hoffnung vermutlich aber längst aufgegeben. Ich weiß selbst nicht, wieso ich es bisher nicht dazu gebracht habe, die Reihe wie versprochen fortzusetzen. Aber genau das habe ich nun endlich vor, wo ich doch sowieso gerade an meinem eigenen neuen Design arbeite.

Bevor wir uns aber in eine eigentliche Fortsetzung stürzen, will ich den Beitrag von 2009 ein wenig an neue Erkenntnisse und Design-Entscheidungen meinerseits anpassen. Ich habe mich nämlich dafür entschieden, so vollständig wie möglich auf HTML 5 und CSS 3 zu setzen. Was das genau bedeutet: Es wird einige Dinge für den Designer einfacher machen und man kann viele tolle Gestaltungen ganz ohne Grafiken entwickeln.

Auf der anderen Seite wird man damit leben müssen, dass der Internet Explorer nicht alles davon wird darstellen können. Ich habe mich dafür entschieden, nicht mehr für den schwächsten Browser unter allen zu designen, sondern für den besten und dann dafür zu sorgen, dass die schwächeren auch etwas ordentliches zu sehen bekommen. Warum sollen die User von Browsern wie Firefox, Chrome oder Safari darunter leiden, dass der IE diverse Befehle nicht beherrscht? Wer auf den Browser setzt, wird dann zwar viele schöne Details nicht zu sehen bekommen, aber wenn man es richtig macht, vermutlich nicht mal merken, dass der Website was fehlt.

Ich muss aber auch dazu sagen, dass dieses Tutorial damit für einige Leute nicht mehr so nützlich sein wird. Wessen Leserschaft zum Großteil den Internet Explorer (egal ob Version 6, 7, 8 oder 9) hat und diesen das beste Erlebnis bieten will, muss nicht weiterlesen. Ebenso wird das Tutorial für Leute uninteressant, die Wert auf IE-Nutzer mit ausgeschaltetem JavaScript legen. Wohl gemerkt betrifft das nur den IE, andere Browser werden nicht unbedingt JavaScript benötigen. Warum, werde ich etwas weiter unten noch genauer beschreiben. Wenn aber diese Bedenken euch keine Kopfzerbrechen bereiten, kann’s losgehen!

HTML 5 und die Auswirkungen auf mein Design-Beispiel

Wer damals mitgelesen hat oder sich den Beitrag nun noch mal zu Gemüte geführt hat, wird sich vielleicht auch die Beispiel-Dateien als Zip heruntergeladen haben. Diese könnten zwar an sich so immer noch genau so verwendet werden, aber ich möchte HTML 5 nutzen, um sie noch weiter zu vereinfachen. Die in dieser Version neu eingeführten Tags, die man in allen modernen Browsern bereits nutzen kann, lösen nämlich endlich das nervige “DIV-Kuddelmuddel”, das sich durch verschachtelte DIV-Tags ergab. Anstatt von DIV-Tags mit Klassen wie “header”, “content” und so weiter führen wir nun die Tags “header”, “section”, “footer” und andere ein. Etwas mehr ins Detail geht dieser interessante Artikel (allerdings auf englisch) Schauen wir uns erst mal das HTML aus dem alten Beispiel an, wie ich es heute machen würde:

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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Blogdesign f&uuml;r Laien - Beispiel 1 (Update)</title>
	<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
	<header>
		<p>Blogdesign f&uuml;r Laien - Beispiel 1 (Update)</p>
	</header>
	<nav>
		<ul>
			<li><a href="#" id="button-home">[home]</a></li>
			<li><a href="#" id="button-archiv">[Archiv]</a></li>
			<li><a href="#" id="button-impressum">[Impressum]</a></li>
		</ul>
	</nav>
 
	<section id="content">
		<article>
			<h1>Ein absolut interessanter Beitrag!</h1>
			<time>01.06.2009 14:00</time>
			<p>Dies ist ein Testbeitrag. Der Inhalt tut nichts zur Sache sondern dient nur der Veranschaulichung.</p>
		</article>
 
		<article>
			<h1>Und noch einer!</h1>
			<time>01.06.2009 13:00</time>
			<p>Dies ist ein Testbeitrag. Der Inhalt tut nichts zur Sache sondern dient nur der Veranschaulichung.</p>
		</article>
	</section><!-- content -->
 
	<aside>
		<h2>Sidebar</h2>
		<p>Der Inhalt der Sidebar ist derzeit noch nicht großartig von Interesse. Sie ist nur schonmal da, um die ersten Layoutgrundlagen zu veranschaulichen.</p>
	</aside>	
 
	<footer>
		<h2>Footer</h2>
		<p>Der Inhalt des Footers ist derzeit noch nicht großartig von Interesse. Sie ist nur schonmal da, um die ersten Layoutgrundlagen zu veranschaulichen.</p>
	</footer>
</body>
</html>

Wie man sieht, ist einiges herausgeflogen, anderes wiederum ersetzt worden. Vor allem fällt auf, dass ich kein einziges DIV mehr verwende. Hier mal die Änderungen im Schnelldurchlauf:

  • DOCTYPE – Was vorher ein komplexer String war, um dem Browser zu sagen, dass wir XHTML verwenden wollen, ist einem einfachen html gewichen. Mehr ist bei HTML 5 nicht nötig.
  • DIV-Ersatz Die DIVs sind teilweise ganz verschwunden, weil sie eigentlich unnötig waren (z.B. das DIV mit der ID “site” oder der class “entry-content”) oder sie wurden durch neue Tags ersetzt, die dem eigentlichen Aufbau einer Website entsprechen: header, nav, section[1], article für die einzelnen Artikel, time für das Datum der Beiträge, aside für die Sidebar und footer. Wie man sieht, können damit auch die meisten Kommentare an schließenden Tags weg, die mir vorher einfach nur als Erkennungshilfe dienten, welcher Tag da denn genau geschlossen wird.
  • Einige Klassen sind auch verschwunden, da man diese zum Stylen der Seite eigentlich nicht braucht.

So wird das ganze weit übersichtlicher und eleganter. Dementsprechend muss natürlich auch das CSS-Stylesheet angepasst werden, das dann danach so aussieht:

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
html, body {
	border: 0;
	margin: 0;
	padding: 0;
}
 
body {
	font: 16px/160% "Palatino Linotype",Georgia,"Times New Roman",serif;
	width: 940px;
	margin: 0 auto;
}
 
header, aside, footer, section, article {
  display: block;
}
 
header {
	width: 920px;
	height: 100px;
	display: block;
	overflow: hidden;
	padding: 10px;
}
 
#content {
	float: left;
	width: 600px;
	overflow: hidden;
	padding: 10px;
}
 
aside {
	float: right;
	width: 300px;
	overflow: hidden;
	padding: 10px;
}
 
footer {
	width: 920px;
	overflow: hidden;
	padding: 10px;
	clear: both;
}

Hier hat sich nicht so viel geändert. Der Style für #site ist direkt in den Body gewandert, ansonsten habe ich nur die einzelnen Teile der Seite, die vorher DIVs mit einer ID waren (erkennbar an dem # vor dem Style) durch ihre direkten Tags ersetzt. Also z.B. #header durch header. Lediglich #content ist geblieben, da wir hier ja auch eine ID beibehalten haben. Ich hätte sie zwar auch wegnehmen können, allerdings kann das Tag section auch mehrfach auf einer Seite genutzt werden und ohne IDs oder Klassen würden sonst alle den selben Style enthalten. Um auch allen Browsern zu sagen, dass die neuen Tags doch als feste Blöcke zu behandeln sind, definiere ich dafür noch schnell die Eigenschaft “display: block”.

Außerdem habe ich als weitere Änderung noch die Schrift-Formatierung von der vorher verwendeten Maßeinheit “pt” (Point) auf “px” (Pixel) geändert. Das hat den Grund, dass Pixel für Webdesigns an sich viel geeigneter sind, als die anderen Maßeinheiten, weil man nur so eindeutig sicher stellen kann, dass die Schrift auch wirklich so viele Pixel hoch ist, wie man möchte und nicht von den Eigenheiten der Browserhersteller abhängt. Natürlich kann man für Stylesheets zum Drucken auf andere Einheiten setzen, aber das ist ein ganz anderes Thema!

Hilfe, im IE ist nichts formatiert!

Jetzt kommen wir zu dem leider noch kleinen Nachteil dieser Technik mit neuen Tags zu arbeiten. Der IE, egal in welcher Version, kennt die Tags wie header, footer etc. nicht. Das stört ihn an sich auch nicht, aber anders als die anderen Browser, die diese Tags auch nicht alle kennen, weist der IE unbekannten Tags den Style aus dem CSS nicht zu. Also werden die ganzen schönen Formatierungen nicht angezeigt.

Die Lösung des Problems ist ein kleines JavaScript, das dem IE sozusagen diese Tags beibringt. Das ist auch der Grund, warum dieses Tutorial nur für den IE und keinen anderen Browser JavaScript voraussetzt! Das JavaScript, das man ganz einfach über das Google-Code-Repository einbinden. Im des HTML-Gerüsts baut man dazu einfach folgendes ein:

1
2
3
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Das war’s. Nach einem Neuladen der Seite sollte auch der IE die Formatierungen anzeigen.

Fazit und Ausblick

Wir haben nun das aus dem letzten Teil bekannte HTML- und CSS-Gerüst stark vereinfacht und bekommen mit einem meines Erachtens verschmerzbaren Nachteil im Internet Explorer das gleiche Ergebnis heraus. Ich habe die Dateien dazu noch mal in einer neuen Zip-Datei zusammengefasst, damit ihr es selbst ausprobieren könnt. Diesmal gibt’s nur noch ein Beispiel1 (ohne a und b), um es übersichtlicher zu machen. Wir wissen nun ja auch, wie man ein Stylesheet einbindet.

In den folgenden Teilen, die nun auf alle Fälle häufiger folgen werden, werde ich wie ursprünglich geplant ins CSS-Eingemachte gehen. Dabei wird der Fokus ganz klar darauf liegen, auch ohne Einsatz aufwendiger Grafiken ein schickes Design zu erstellen. Dabei werde ich beim Stylen der einzelnen Bestandteile der Seite verschiedene interessante Tricks zeigen, die das Design herausstechen lassen und zum Experimentieren einladen. Wenn alles gut geht, geht es schon dieses Wochenende mit den ersten Tipps weiter! Drückt mir die Daumen, dass ich mich diesmal dran halte!

  1. einzelne Sektionen einer Website – das kann alles sein []

Kommentare

1

Ach ja, HTML5 und CSS3… ich wollte mein Theme auch schon länger so modernisieren, insb. Schatten und Rundungen ohne Bilder realisieren – aber an Zeit und Lust mangelt’s halt… Jedenfalls bin ich mal gespannt, ob/was ich in deiner Serie noch lernen kann. :) Zumindest die IE-Lösung war mir auf Anhieb nicht geläufig.

geschrieben von cimddwc
antworten  •  Link
2

Und wenn man dann noch JS abgeschaltet hat…? 😛
Nur Spaß, cooler Artikel!

geschrieben von David
antworten  •  Link
3

@cimddwc: Ja, gerade die Schatten und Rundungen haben’s mir ja auch angetan, wie man hier ja auch schon teilweise sieht. Ich bin da aber auch sehr für weitere Ideen, Kritik und Tipps offen!

@David: Dann kriegt man wenn’s nach mir geht, heutzutage einen an die Backen! 😉

Ich sehe echt keinen Grund mehr, JS wirklich noch abzuschalten. Vor allem setzen ja mittlerweile so viele Seiten stark auf JS, um Flash und so langsam abzulösen und wirklich toll bedienbare Web-Apps zu schreiben. Da wäre das echt mal sowas von letztes Jahrtausend! 😛

geschrieben von beetFreeQ
antworten  •  Link
4

Ach klasse, genau mein Thema. Dasselbe habe ich nämlich auch vor. CSS3 setze ich teilweise schon ein. Habe meine Formulare damit umgesetzt. Und auch wenn man es nicht in jedem Browser gleich sehen kann, ich sehe es auch nicht mehr ein auf veraltete Technik zu setzen.

Als nächstes steht auch bei mir eine Überarbeitung des Templates auf HTML5 an. Bin mal gespannt, ob das alles so glatt wie ich mir das vorstelle. Mein jetziges Layout soll nämlich weitestgehend beibehalten werden.

LG
Fini

geschrieben von Fini
antworten  •  Link
5

Danke sehr.
Ich habe aber den Footer im Beispiel auf [float:left;] setzen müssen, damit er unterhalb des [#content] angezeigt wird. Oder habe ich gepennt?

geschrieben von ErnieSouchak
antworten  •  Link
6

@ErnieSouchak: Eigentlich soll der Footer ganz unten drunter landen – also unter #content und aside. Und das wird eigentlich schon mit der Anweisung “clear: both” erreicht. Konnte bei mir keine Probleme feststellen. In welchem Browser ist das Problem denn? Und welche Versionsnummer? Vielleicht hab ich da irgendwas übersehen, was nur die aktuellsten Versionen der Browser beherrschen.

geschrieben von beetFreeQ
antworten  •  Link
7

Morgen.
Das Problem taucht bei mir nur unter Firefox 3.6.13 (Mac) auf. Im Safari (5.0.3) ist alles ok. Andere Browser habe ich nicht getestet. Ich kann Dir gerne einen Screen zuschicken.
P.S. Alle Addons (noscript etc..) sind abgeschaltet.

geschrieben von ErnieSouchak
antworten  •  Link
8

@ErnieSouchak: Ah, ich hab die Ursache gefunden. Ich hatte es neben dem IE und Chrome dummerweise nur in der Firefox 4 Beta getestet und die kennt die neuen Tags schon. Im Firefox 3.6 werden die Tags zwar dargestellt, der weiß aber ohne weiteres nicht, dass sie eigentlich Blöcke sind, die eine Breite und Clear haben können. Das lässt sich aber einfach dadurch beheben, dass man den neuen Tags im CSS die Eigenschaft “display: block” verleiht.

Ich habe die Änderung mal in Beitrag nachgetragen und auch die Beispieldateien angepasst! Danke für den Hinweis. Die kommenden Teile der Reihe werde ich auf alle Fälle auch im 3.6er Firefox testen!

geschrieben von beetFreeQ
antworten  •  Link
9

Jetzt hab ich mal ne Frage: bei mir funktioniert das nicht. Ich zweifelte schon an meinen Fähigkeiten, bis mir einfiel, das Ganze mal in einem anderen Browser zu versuchen.
Klartext: wenn ich header, footer, usw. CSS zuweise, wird das bei mir im FF einfach ignoriert. Im Chrome sieht es perfekt aus, genau wie vorher mit divs… sogar im IE sieht es besser aus als im Firefox…

Aaaahhh, deinen Comment mit der FF Beta gerade erst gelesen. Stimmt, das display:block braucht man in der aktuellen Version vom Fuchs noch. Chrome kann es ohne.

geschrieben von David
antworten  •  Link
Kein Wind bewegt die Stille,
die Luft ist regungslos,
als wenn die Welt an diesem Ort in ihrem Atmen innehält

Kante

Blogverzeichnis - Blog Verzeichnis bloggerei.de blogoscoop Bloggeramt.de