• Projekte: Alle wichtigen und zukünftigen Webdesign-Projekte wandern nach Github. Ab ca. 5,50 € im Monat bekommt man eine gewisse Anzahl private Projekte und kann an diesen auch Andere mitmachen lassen. Ist meines Erachtens ein sehr okayer Deal, denn damit ist man nicht nur zur Verwendung von Versionskontrolle gezwungen (was immer gut ist), sondern hat auch dank der dezentralen Natur von Git prima Sicherheitskopien von allen Projekten auf allen Rechnern und auf Github selbst. Github rockt!
• Sonstige Daten: Als Ubuntu-Nutzer habe ich das Vergnügen, dass meine Distribution mit Ubuntu One einen eingebauten Cloud-Hoster hat. Für 8 € im Monat gibt es 50GB Speicher – das reicht dicke. Sensible Daten werden vorher mit Truecrypt sicher eingedost.
• To-Do-Listen: Mein bisheriges Aufgabenverwaltungs-Tool Tasque hat von Haus aus eine Schnittstelle für Remember the Milk. Problem gelöst! Tasque ist extrem minimal, aber für mich reicht es.
• Feeds: Google Reader hat eine bessere Performance als mein bisheriges Desktop-Tool Liferea, insofern war der Wechsel hier nicht schmerzhaft. Mit GoogSysTray, einer kleinen Tray-App für Linux, bleibe ich über die Anzahl der ungelesenen Artikel informiert (und nebenbei auch noch über ungelesene Waves und alle meine sonstigen Google-Apps.)
• Browsing: Sync ist ein einfaches Addon für Firefox, das Tabs, Bookmarks und History zuverlässig zwischen verschiedenen Rechnern synchronisiert. Ein Muss, nicht weniger.

Was in der Liste noch fehlt, ist E-Mail. Ich habe leider einen Bestand von ein paar tausend Mails im Evolution-Format, die quasi ein ausgelagertes Gedächtnis für mich sind – die müssen also irgendwie mitgeschleppt werden. Eine richtig gute Lösung zur Synchronisation oder Migration zu irgend einem Webapp habe ich hier noch nicht gefunden. Sieht man aber davon ab, muss man sagen dass das Abschieben von so vielen Aufgaben in Webapps im Endeffekt recht problemlos vonstatten ging. Ich würde sogar sagen, dass ich gar nicht mehr weiß, was ich ohne Firefox Snyc und Github machen würde bzw. wie ich je ohne beides klarkam.

Feed gefällt? Flattrn | Twittern | Kommentieren

Workrave ist ein Open-Source-Programm für Linux und Windows, das der recovery and prevention of RSI dient, indem es sich als eine Art Pausen-Manager betätigt. Es gibt Mikropausen, die alle paar Minuten für wenige Sekunden zur Ruhe auffordert, ein Maximalpensum für den Tag und längere Ruhepausen, für die das Programm diverse Dehn- und Augenübungen vorschlägt. Die Pausen lassen sich natürlich auch ignorieren, überspringen oder aufschieben. Alle Zeiten sind konfigurierbar und mehrere Rechner mit Workrave lassen sich sogar untereinander vernetzen, damit man keine Pause verpasst. Wenn man außerplanmäßig die Finger von der Maus lässt, hält das Programm die Zeit an.

Das Programm mit seinen diversen Meldungsfenstern und dem Zeitzähler im Systray sieht (zumindest bei mir unter Linux) auch sehr angenehm aus.

Eine Mikropause

Eine Ruhepause nebst Fingerüberungen

Der einzige Haken an diesem Tool ist vielleicht, dass die weniger Konzentrationsfähigen unter uns sich vielleicht von Workrave und insbesondere den Mikropausen genervt fühlen könnten … aber das kann man sich dann ja so konfigurieren, wie man es tolerierbar findet.

Ubuntu Linux hat Workrave in der Universe-Paketquelle, für Windows gibt es eine Exe zum Download und Sourceforge ist ja auch noch da.

Feed gefällt? Flattrn | Twittern | Kommentieren

Aufbauend auf die Gedanken des Kollegen teilte ich die CSS-Eigenschaften in Gruppen ein. Diesen wies ich anschließend einen Rang zu, der so ungefähr die Wichtigkeit der jeweiligen Gruppe von Eigenschaften widerspiegelte: je größer die Auswirkungen von Eigenschaften auf das Layout, desto wichtiger.

Da steht dann layoutänderndes Verhalten wie float, display und position am Anfang und Dinge wie background und color kommen an das Ende.

Nico Brünjes hingegen sortiert alphabetisch:

Das ist einfach, versteht jeder, ist eine nachprüfbare, also durchsetzbare Regel und super umsetzbar. Und führt auch auf lange Sicht zu lesbaren Stylesheets.

Ich persönlich finde beide Ansätze recht seltsam. Was die Gruppierungs-Methode bringen soll, erschließt sich mir nicht so recht und die Einteilung erscheint mir recht subjektiv. Und bei der bürokratischen ABC-Ordnung könnte ich mir allenfalls vorstellen, dass sie dann zu etwas gut ist, wenn man mit einer Vielzahl von Leuten zusammenarbeiten muss, die etwas anderes nicht kapieren. Der Preis ist dann, dann man Dinge, die logisch eigentlich zusammen gehören (z.B. position und z-index) auseinander reißt. Nicht so toll.

Das Patentrezept habe ich freilich auch nicht und mein Vorgehen entspricht vielleicht einer typischen Einzelkämpfer-Sortierung, aber mir hilft sie.

Ich frage mich immer: Wie wahrscheinlich ist es, dass in näherer Zukunft mal Eigenschaft X geändert werden muss? Sehr wahrscheinlich (Farben, Textgröße)? Ab an den Anfang. Sehr unwahrscheinlich (Layout, Position)? An das Ende. Ein einfaches Beispiel:

div.foobar { color:#CC0000; text-decoration:underline; position:relative; }

Während ich die Seite baue wird die Farbe des Links mit absoluter Sicherheit das eine oder andere Mal einem Tuning unterzogen werden. Dass der Link aber unterstichen sein soll, ist etwas, das wird sich im Designprozess nicht gar so oft ändern. Deswegen kommt text-decoration an das Ende. Und das Layout ist von Anfang an geplant und wird nach Möglichkeit auch durchgezogen, also versammeln sich Dinge wie position, margin und Konsorten am Ende. Innerhalb dieser Einteilung ist es ganz sinnvoll zusammenhängende Eigenschaften auch zusammenzuhalten (z.B. font-size, line-height und text-align).

Damit kann ich flott arbeiten, weil einem die Eigenschaften, an denen man die meiste Arbeit zu verrichten hat, gleich am Anfang einer Deklaration entgegen springen. Meine Meinung.

Wenn man wirklich etwas tun will, um einen Stylesheet für die Allgemeinheit lesbarer zu machen, muss sich vor allem für eine Sortierungsmethode entscheiden und diese Methode dann auch durchziehen. Ich hab schon so manche seltsame Sortierung gesehen, aber verzweifelt bin ich immer nur, wenn überhaupt kein Muster erkannt habe. In alles, was eine Art System hat, kann man sich reinkämpfen und ganz loswerden kann man die WTFs nie.

Feed gefällt? Flattrn | Twittern | Kommentieren

Eine Art Framework benutze ich aber trotzdem. Es ist im Wesentlichen ein Haufen (großteils leerer) Dateien und Verzeichnisse, die ich aber wirklich bei so gut wie jedem Projekt brauche. Ich nenne es immer mein Starterkit. Und das sieht so aus:

HTML

Eine Datei index.html mit folgendem Inhalt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE">
	<head profile="http://gmpg.org/xfn/11">
		<title></title>
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<meta name="author" content="Peter Kröner" />
		<meta name="language" content="de" />
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<meta http-equiv="content-style-type" content="text/css" />
		<meta http-equiv="content-script-type" content="text/javascript" />
		<meta name="robots" content="index,follow" />
		<style type="text/css" media="screen">@import url("default.css");</style>
		<style type="text/css" media="screen">@import url("style.css");</style>
		<!--[if IE 7]><style type="text/css" media="screen">@import url("ie7.css");</style><![endif]-->
		<!--[if lte IE 6]><style type="text/css" media="screen">@import url("ie6.css");</style><![endif]-->
		<style type="text/css" media="print">@import url("print.css");</style>
		<link rel="shortcut icon" href="favicon.ico" />
		<link rel="apple-touch-icon" href="apple-touch-icon.png" />
	</head>
	<body>

	</body>
</html>

Ein ganz einfaches, leeres XHTML-Strict-Dokument. Sofern man nicht ein bestehendes System bearbeiten muss, braucht man das immer irgendwann. Eingebaut sind die Links für das Favicon, das Icon für iPhones und iPod Tourch sowie alle fünf Style-Elemenente.

CSS

Es gibt fünf CSS-Dateien, die ich eigentlich immer benutze. Erstens: default.css mit folgendem Inhalt:

/*

	Projekt:
	Datei: default.css
	Author: Peter Kröner

*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; background-image:none; }

body { line-height:1; color:black; background:white; text-align:center; }

ol, ul { list-style:none; }

table { border-collapse:collapse; border-spacing:0; }

caption, th, td { text-align:left; font-weight:normal; }

blockquote:before, blockquote:after, q:before, q:after { content:""; }
blockquote, q { quotes:"" ""; }

Das ist ein ganz durchschnittlicher CSS-Reset, den ich irgendwann mal von Eric Meyer geklaut und dann so lange umgebaut habe, bis ich zufrieden war.

Zweitens: style.css mit folgendem Inhalt:

/*

	Projekt:
	Datei: style.css
	Author: Peter Kröner

	============
	== FARBEN ==
	============

	Hintergrund:
	Text: 

*/

/* Basics */
body {  }
a {  }
	a:link {  }
	a:visited {  }
	a:hover {  }
	a:active {  }
q {  }
	q q {  }
strong {  }
em {  }

/* Layout */

/* Textgestaltung */

/* Spezielle Klassen */

/* Allgemeine Klassen */

.clear { display:block; width:100%; clear:both; }

Wie man sieht ist die Datei weitgehend leer, abgesehen von den Dingen, die jedes Mal gebraucht werden: Dokumentkopf, ein paar Kommentare für die Gliederung und ein paar Elemente und Klassen.

Drittens und viertens gibt es die Dateien ie6.css und ie7.css für das Ausbügeln der Böcke unserer Lieblingsbrowser, die bis auf einen Dokumentkopf wie beim Hauptstylesheet leer sind. Letzte Datei im Bunde ist print.css, die den gleichen Inhalt hat wie die style.css.

Verzeichnisse

Bilder lade ich so gut wie immer in img ab, kleine Icons landen in img/icons. Deswegen gehören die beiden Verzeichnisse auch zu meinem Framework.

Optional: htc-Files für den Internet Explorer

Oft, aber nicht immer braucht man ein Set an htc-Dateien, die dem Internet Explorer Unterstützung für Dinge beibringen, die er normalerweise nicht kann. Das wichtigste ist hierbei htcmime.php mit folgendem Inhalt:

<?php
	// Get component file name
	$fname = (array_key_exists("file", $_GET)) ? $_GET["file"] : "";
	// basename() also strips x00, we don't need to worry about ? and # in path:
	// Must be real files anyway, fopen() does not support wildcards
	$ext = array_pop(explode('.', basename($fname)));
	if (strcasecmp($ext, "htc") != 0 || !file_exists($fname))
		exit ("No file specified, file not found or illegal file.");

	$flen = filesize($fname);
	header("Content-type: text/x-component");
	header("Content-Length: ".$flen);
	header("Content-Disposition: inline; filename=$fname");
	$fp = fopen($fname, "r");
	echo fread($fp, $flen);
	fclose($fp)
?>

Diese Datei habe ich von hier und sie sorgt dafür, dass .htc-Dateien vom Server mit dem korrekten Mimetype ausgeliefert werden. Man muss dann nur in seinen Stylesheets behavior:url(xyz.htc) durch behavior:url(htcmime.php?file=xyz.htc) ersetzen.

Dazu kommen dann, je nachdem was gebraucht wird, IEPNGFix v2.0 (transparente PNGs) und/oder csshover.htc (:hover für den IE6), die ich beide lokal vorrätig halte.

Fazit

Der eine oder andere vermisst in der obrigen Aufstellung vielleicht ein Javascript-Framework, aber ich als Mootooler baue mir da lieber für jedes Projekt die Komponenten neu zusammen. Manchmal braucht man JSON-Support, manchmal nicht.

Mit diesem Starterkit kann man (zumindest ich) schnell aus dem Nichts eine Website zusammenbauen, ohne sich um die nervigen Basics kümmern zu müssen. Es ist, anders als bei den ganzen dicken Frameworks nichts dabei, was ich nicht wirklich jedes Mal bräuchte, aber es ist genug, um den Start spürbar zu beschleunigen. Und so gefällt mir das.

Wie sieht euer Starterkit oder Framework aus?

Feed gefällt? Flattrn | Twittern | Kommentieren

Das Ganze basiert auf Mozillas XULRunner und ist natürlich Open Source. Die Bedienung ist kinderleicht und neben geschriebenen Tutorials stehen auch Screencasts bereit. Zu haben ist Pencil Project als Stand-Alone-Programm oder als Firefox-Extension –wobei letztere Variante bei meinem Test eine nicht besonders gute Performance bot.

Gefunden bei WebAppers.

Feed gefällt? Flattrn | Twittern | Kommentieren

Sieht in meinen Augen reichlich bizarr aus … ist wohl eher was für ganz beengte Verhältnisse. Mitte des Monats soll man das Ding käuflich erwerben können.

Feed gefällt? Flattrn | Twittern | Kommentieren

Feed gefällt? Flattrn | Twittern | Kommentieren

Um sich diesbezüglich etwas bremsen, gibt ein ganz einfaches Mittel: Einrückungstiefe erhöhen!

Bei Aptana: Window → Preferences → General → Editors → Text Editors → Displayed tab width

Jeder anständige Editor lässt den User festlegen, wie viele Zeichen ein Tab breit sein soll. Zwei oder vier sind gängig, aber mehr sind zumindest mal eine Überlegung wert. Denn abgesehen davon, dass größzügige Einrückung allgemein die Übersichtlichkeit steigert, merkt man so auch schneller, ob man gerade dabei ist, ein Divitis-Monstrum zu verbrechen. Was in den Linux Kernel Coding Guidelines steht, kann für uns Webfritzen auch nicht so falsch sein: wenn man plötzlich anfangen muss, seitwärts zu scrollen um neue <div> einzufügen, hat man sehr wahrscheinlich bisher ganz schönen Mist zusammengetippt und sollte sein HTML überarbeiten.

Feed gefällt? Flattrn | Twittern | Kommentieren

Gerade wenn man an Websites arbeitet macht man zig Sachen gleichzeitig in Photoshop, der IDE, fummelt vielleicht noch mit dem FTP-Programm herum und hat immer ein Auge auf irgendwelche Serverlogs. Und selbst wenn man nicht den Vollnerd gibt sondern eine Art Alltags-Poweruser ist, entfrustet der zweite Schirm doch allgemein – die nächste Information ist dann nur noch einen Blick entfernt und nicht mehr hinter Klicks und Tastenkombinationen verborgen. Man hat mehr Informationen im Blick und dadurch besser unter Kontrolle.

Meine persönlichen Lieblings-Setups mit Dualhead:

• Aptana links, Photoshop rechts
• Bloggen links, Quellen und Informationen rechts
• Arbeit links, Fußballstream oder Film rechts

Nachteile einer Doppelkonfiguration sind vorrangig Anschaffungskosten und der Platzverbrauch auf dem Schreibtisch. Aber es lohnt sich. Zweifel? Ihr habt doch sicher noch einen ollen Röhrenmonitor irgendwo auf dem Dachboden stehen, stimmt? Schließt den mal an euren Rechner an und ihr werdet schon sehen …

Feed gefällt? Flattrn | Twittern | Kommentieren

Und die harte Tour:

Die harte Variante setzt für die Elemente einer Website höhere Qualitätshürden und verlangt möglicherweise von Designer/Programmierer, seine Werke oder Ideen vielleicht häufiger zu Grabe zu tragen. Bei der weichen Variante gibt es für Elemente, die nicht absolut nötig sind oder nicht wie der grafische Überhammer daherkommen, noch einen Notausgang. Ob man den nutzen möchte und auf diese Weise vielleicht auch Dinge durchwinken mag, die nicht perfekt sind, sei jedem selbst überlasen.

Fazit: Was dem weichen Test nicht standhält, gehört ohne Diskussion gelöscht. Und was den harte Kritieren nicht entspricht, sollte zumindest überdacht werden.

Feed gefällt? Flattrn | Twittern | Kommentieren

Ein Blindtext, wie ihn die meisten Generatoren ausspucken, hat mit dem Inhalt einer Website wenig gemein – es fehlen Links, Listen, Tabellen, Bilder, Headlines und sonst alles, was HTML so hergibt: <strong>, <em>, <q> und so weiter. Klar, die kann man alle hinterher von Hand einbauen. Wenn aber man einfach den Inhalt der Wikipedia-Seite über Seehunde ausleiht, kann man sich die Mühe sparen.

Da ist alles fast drin was das Herz begehrt. Sicher, ein paar HTML-Archaismen auch, aber die sind mit drei Durchgängen mit Search & Replace erledigt. Und dann hat man nach ein ein paar kurzen Handgriffen eine echte Hypertext-Seite mit echtem Text. Und kein unformatiertes Geleier wie Lorem ipsum, das ja noch nicht mal entfernt nach deutschem Text aussieht.

Und deswegen geht es bei jeder Website aus meiner Hand erst mal immer um Seehunde.

Feed gefällt? Flattrn | Twittern | Kommentieren

Feed gefällt? Flattrn | Twittern | Kommentieren

Ich selbst bin schon länger ein Anhänger von Bitstream Vera Sans Mono. Die hohen Buchstaben bieten einfach im Vergleich zum Rest einen Bonus an Lesbarkeit und Courier (New) hat auch mich mittlerweile einen eher ätzenden Effekt – einfach zu schon zu oft gesehen, zu abgenutzt. Und außerdem gibt es die Schriften der Vera-Familie kostenlos zu haben. Wie kann man da nein sagen?

Feed gefällt? Flattrn | Twittern | Kommentieren

/*
  ============
  == FARBEN ==
  ============

  Hintergrund: #FFF
  Text: #000
  Text Hell: #A1A1A1
  Bordergrau: #CCC;
  Links: #FFFF00
  Hervorhebung: #FF0000
*/

Klingt naheliegend, machen aber die wenigsten.

Feed gefällt? Flattrn | Twittern | Kommentieren

Bei etwas aufwändigeren Projekten wird zumindest bei mir auch die zentrale CSS-Datei recht groß. Das gilt umso mehr, wenn das Projekt nicht von A nach B in einem Zug umgesetzt wurde, sondern steig wächst. Die style.css dieses Blogs wiegt als Folge eines solchen Wachstumsprozesses mittlerweile saftige 13,4 KB. Die Frage stellt sich, wie man diese vielen Informationen sortiert.

Im CSS-Kurs werden dem Anfänger folgende Zeilen als beispielhaft vorgesetzt:

body{
font-family: verdana, "minion web", helvetica, sans-serif;
font-size: 1em;
text-align: justify;
}
h1{
font-family: verdana, sans-serif;
font-size: 1.3em;
}
code{
font-family: courier, sans-serif;
font-size: 1em;
}

So einfach kann man es machen, keine Frage. Das ist nach meinem Eindruck auch die häufigste Variante, die man findet wenn man in fremden CSS-Dateien schnüffelt. Auch die Variante mit zusätzlichem Tabulator ist verbreitet.

.clear {
	clear: both;
}

.clear_fusion {
	clear: both;
	line-height: 1px;
	height: 1px;
	font-size: 1px;
}

Die Tabulator-Methode in Firebug.

Firebug zeigt ebenfalls CSS in dieser Form an und an fast allen Ecken und Enden des Internets sieht man CSS so strukturiert. Der Vorteil davon ist durchaus ersichtlich: Man kann jedes Element Zeile für Zeile inspizieren und hat alle Eigenschaften der Reihe nach aufgelistet. Das erhöht die Übersichtlichkeit.

Ich persönlich bin aber von diesem Format schon länger nicht mehr überzeugt und behaupte: Bei wirklich komplexem CSS ist an dieser Stelle diese Form der Übersichtlichkeit weniger nötig als an anderer bzw. die Übersichtlichkeit in der Liste der Elemente ist auch anders zu erreichen.

Vielleicht ist das nur mein persönlicher Eindruck, aber verschachtelte Elemente finde ich wesentlich übersichtlicher als zeilenweise aufgeführte CSS-Eigenschaften. Entsprechend rücke ich mein CSS ein. Ein Beispiel:

#navi { position:absolute; bottom:-8px; left:0; }
  #navi li { display:inline; }
    #navi li a { font-variant:small-caps; background:none; text-decoration:none; display:block; width:144px; height:48px; float:left; text-align:center; background:url(img/navi.jpg) no-repeat top center; margin:0 4px; padding:24px 0 0 0; }
      #navi li a:link, #navi li a:visited { color:#59514C; }
      #navi li a:active, #navi li a:hover { color:#000; }
    #navi li.active a { background:url(img/navi-active.jpg) no-repeat top center; }
      #navi li.active a:link, #navi li.active a:visited { color:#000; }
      #navi li.active a:active, #navi li.active a:hover { color:#A82A2A; }

#foot { background:#A82A2A url(img/foot.jpg) repeat-y top center; color:#F2E9DF; margin:0; padding:8px 0; }
  #foot li { display:inline; margin:0 8px; }
    #foot li a:link { color:#FFF; text-decoration:underline; }
    #foot li a:visited { color:#F2ECE6; text-decoration:underline; }
    #foot li a:active, #foot a:hover { color:#A82A2A; background-color:#FFF; text-decoration:none; }

Dass dies der genaue Gegenentwurf zu den obrigen Modellen ist, ist offensichtlich. Man findet schneller sein zu formatierendes Element, muss dafür dann aber in der Kette der Eigenschaften die Anweisung suchen, die man bearbeiten möchte. Aus dreierlei Gründen ziehe ich dieses Modell aber vor:

1. Wenn man Default Stylesheets zum Einsatz bringt, muss man nicht mehr jedem HTML-Element seine willkürlichen Margins und Paddings austreiben. Das verkürzt die Eigenschaftslisten.
2. Durch Kurzangaben und Zusammenfassungen kann man viel Länge einsparen. Will man beispielsweise die Farbe Rot ausdrücken, kann man statt #FF0000 genau so gut #F00 oder einfach red schreiben. Man muss auch nicht sowohl background-color als auch background-image und background-position angeben, sondern kann all das unter background vereinigen. Wieder ein paar Zeichen gespart.
3. Schließlich hilft ein festes Zeilenschema beim Wiederfinden von einzelnen Eigenschaften. Mein persönliches Zeilenschema sieht in der Regel so aus:
   element { positionierung; schriftformatierung; hintergrund; margin; padding; }
   Hat man ein solches Schema einmal verinnerlicht, wird auch das Navigieren längerer Zeilen zum Kinderspiel.

Ich habe den Eindruck, dass mir die Kombination aus meiner Einrückmethode und meinem festen Zeilenschema die Arbeit an wirklich verschachtelten CSS-Dateien deutlich erleichtert.

Irgendein tief vergrabenes Element hat einen falschen Margin? Das Elternelement ist in einem Stylesheet mit wenigen Zeilen sowie Absätzen und Kommentaren schnell gefunden, das Ziel lässt sich nur drei Zeilen auch sofort orten. Weil ich weiß, dass in meinem Zeilenschema der Margin immer am Ende steht, ist auch dieser mittels Ende-Taste sofort erreicht. Problem gelöst.

Der Hauptstylesheet dieses Blogs hat mit meiner Einrückmethode immer noch 238 Zeilen. Würde ich da auch noch jeder Eigenschaft statt nur jedem Element eine eigene Zeile gönnen, müsste ich mir für jede Änderung einen Wolf scrollen.

Feed gefällt? Flattrn | Twittern | Kommentieren

Meinem Eindruck nach ist es sinnvoll, das XHTML-Gerüst noch mit normalem (d.h. gar keinem) CSS aufzuziehen - so behält man über bestehende Strukturen komfortabel den Überblick. Spätestens aber bevor man mit der eigentlichen Gestaltung beginnt, sollte man Reset Reloaded an den Start bringen, denn ab diesem Punkt erspart man sich damit ein beachtliches Maß an Tipperei.

Besonders deutlich wird das, wenn man sich an die Formatierung von Listen heranmacht. Dann da braucht man doch erstaunlich selten die üblichen Abstände und Aufzählungszeichen, denn die sind nur im Inhalt zu irgendetwas gut. Und mögen dort Listen auch besonders oft auftauchen, wirkliche CSS-Arbeit muss meist doch an anderer Stelle verrichtet werden. Gerade bei komplexen Navigationslisten ist es eine Wohltat, bei Null anfangen zu können.

Negatives? Man kann darüber streiten, ob es wirklich sinnvoll ist, Elementen wie <pre> und <code> die Monospace-Font zu rauben. Und ob es nicht inkonsequent ist, dass Links ihre Farben und Unterstreichungen behalten dürfen - schließlich werden diese später mit sehr großer Sicherheit geändert werden um sich besser in die Seite einzufügen oder herauszutreten.

Aber bei diesen Punkten gilt: Selbst ist der Mann/die Frau. Das nun wirklich nicht unübersichtliche Reset-CSS ist leicht an individuelle Wünsche anzupassen und kann dann immer wieder verwendet werden. Und dazu möchte ich ausdrücklich raten, denn dann schreiben sich eigene Stylesheets spürbar einfacher und vor allem übersichtlicher. Es lohnt sich.

Feed gefällt? Flattrn | Twittern | Kommentieren