3. CSS Naked Day, 9.April 2008

Naked Day 08

Das dritte Jahr in folge findet der CSS Naked Day statt. Das erste und zweite Jahr der Aktion waren gute Erfolge und nun rückt der dritte Termin an.

German, English, Spanish, Thai, Chinese, [Korean 01, Korean 02]

Die Idee

Hinter dieser Aktion steht die Idee die Webstandards zu fördern. Dazu gehören der korrekte Gebrauch von (x)HTML, semantisches Markup, hierarchische Struktur und zu letzt das Spiel der Wörter - der Inhalt. Es ist an der Zeit, deinen <body> der Öffentlichkeit zu zeigen. Damit zeigt man, dass gute Webseiten auch ohne Design leserlich sind.

Wie macht man mit?

Fülle das kleine Formular aus und deine Webseite wird in die offizielle Liste aufgenommen.

Am 9.April 2008 werden alle Formatierungen der Webseite entfernt, völlige Befreiung vom Design.

(optional): Setze den folgenden Hinweis am obersten Punkt deiner Seite.


<h3>What happened to the design?</h3>
<p>To know more about why styles are disabled on this website visit the
<a href="http://naked.dustindiaz.com" title="Web Standards Naked Day Host Website">
Annual CSS Naked Day</a> website for more information.</p>

Dieser Hinweis dient unter anderem als Hinweis für deine Besucher und sie wissen schnell warum und wieso dein <body> nackt ist.

Warum wieder?

Einige Leser sind interessiert und wollen wissen, warum es am 9.April zu dieser Aktion kommt.

  • Die Aktion soll auf einen Dienstag, Mittwoch oder Donnerstag fallen (Viel-Traffic-Tage)
  • Möglichst in der ersten Woche des April
  • Es soll nie am 1.April sein (internationaler Scherz- und Streichtag)
  • Es soll ausreichend Zeit zur Ankündigung sein

Einbinden via PHP

Um die nackten Tatsachen zu zeigen, kann man mittels PHP-Funktion den Naked Day automatisch einleiten. Folgende Funktion dient dieser Aufgabe.
WordPress User hinterlegen diese Funktion beispielsweis ein der Datei functions.php oder direkt im Template, die header.php. Alternativ kann auch das Plugin „WordPress Naked Day“ genutzt werden.


<?php
function is_naked_day($d) {
  $start = date('U', mktime(-12, 0, 0, 04, $d, date('Y')));
  $end = date('U', mktime(36, 0, 0, 04, $d, date('Y')));
  $z = date('Z') * -1;
  $now = time() + $z; 
  if ( $now >= $start && $now <= $end ) {
    return TRUE;
  }
  return FALSE;
}
?>

Die Funktion gibt TRUE aus, wenn es sich um den 9.April 2008 handelt. Daher gilt es nun die Funktion auszuwerten und jeweils zu reagieren. Dazu muss der Link zum Stylesheet in die if-Abfrage.


<head>
...
<?php
if ( is_naked_day(9) ) {
  echo '<!-- Naked Day hat kein Style -->';
} else {
  echo '<link rel="stylesheet" type="text/css" href="styles.css" />';
}
?>
...
</head>

In WordPress sollte das dann in der header.php eingepflegt werden. Das könnte dann beispielsweise so aussehen:


<?php
if ( is_naked_day(9) ) {
  echo '<!-- Naked Day hat kein Style -->';
} else {
	<style type="text/css" media="screen">
		@import url(&lt;?php bloginfo('stylesheet_url'); ?&gt;);
	</style>
}
?>

Tools und Plugins

Die Aktion ist unter einer ganzer Reihe von Entwicklern bekannt und so gibt es auch eine große Anzahl von Tools und Plugins um die Aktion zu unterstützen. Schau die auf der Aktions-Seite um, dort findet man eine aktuelle Liste der Tools und Plugins; um nur Einige zu nennen: WordPress Plugin, PHP class, Rails Helper, Serendipity Plugin, LifeType Plugin, ...

51 Kommentare

  1. Ein "Disable Styles" in der Webdeveloper Toolbar des FF tuts auch... ich überlasse es lieber den User mich "auszuziehen" und verwirre andere nicht unnötig damit.

  2. Muss man das als "meme" oder "hype" verstehen? Finds absurt, da nur die Leute das Konzept dahinter verstehen, die sich eh mit CSS auseinander setzen. Alle anderen (zahlenden Auftraggeber) gehen warscheinlich verwirrt weiter...

  3. Calaelen, Gnome an die Macht » womit du sicher recht hast, aber das ist der Vorteil, wenn man das Blog als Hobby betreibt - man kann sich solchen Ideen hingeben 😉

  4. Kannte die Aktion noch gar nicht. Prinzipiell natürlich eine gute Idee, nur werden die meisten wirklich nicht verstehen, was dahinter steckt.
    Dennoch hast du Recht - als privater Blog kann man das schonmal machen. Bei meinen kommerziellen wäre mir der Verlust du groß.

  5. Es gibt Hypes, denen muss man nicht folgen. Gerade so etwas ist doch einfach nur "unlustig", da genau die Menschen, die sich Webseiten anschauen, meistens nicht die sind, die so eine Aktion überhaupt werten können. Anstatt eines HTML-Unlayouts denken die meisten, die Seite sei kaputt und gehen wieder.

  6. Christian Heß-Grünig » korrekt, aber ich habe lediglich die Idee und den Inhalt wieder geben wollen, keine Übersetzung im wörtlichen Sinne liefern, dazu ist mein leider Englisch zu schlecht.

  7. Oh man. Ich dachte im ersten Moment der Firefox hat nen CSS-Bug oder aber das deine Seite nur noch mit JS schön aussieht... *g*

  8. das ist der allergrösste quatsch. aufwand betreiben damit die webseite nicht mehr funktioniert, also nicht mehr zu gebrauchen. man kann auch alles weiss machem, also vordergrund- und hintergrundfarbe weiss einstellen, dazu alle bilder weiss machen, ebenso die filme. warum? weil mans kann - spring doch aus dem fenster raus, nur weil alle anderen auch rausspringen - (bitte NICHT!) dumme können nicht anders, besonders dumme müssen die extrawurst aufhängen.

    die aktion ist der allerletzte schrott.

  9. Prinzipiell ist das eine ganz gute Idee, auch wenn es tatsächlich ein wenig Preaching To The Coven ist - es verstehen erstmal nur die, die sich sowieso mit Webstandards und Semantik auseinandersetzen. Die anderen reagieren so wie Roland. Tatsächlich ist es aber sinnvoll, sich mal mit der Struktur der Seite auseinanderzusetzen. Bei den meisten Seiten ist auch die Navigation eines der ersten Elemente im Quelltext, so wie auch hier - und was mir auffällt, ist, dass man mit der nackten Seite grössere Schwierigkeiten hat, den eigentlichen Inhalt zu finden. Ich muss erst einmal eine recht lange Navigation (im visuellen Design die linke Spalte) wegscrollen, bevor die Artikel lesbar sind.
    Als Konsequenz aus dieser Beobachtung habe ich bei mir die Navigation im Quelltext nach den Inhalten positioniert und hole sie mit entsprechenden float-Anweisungen für die visuelle Ausgabe nach links. Auch macht der Einsatz von [hr] Tags für die Strukturabgrenzungen ohne CSS Sinn, die dann durch display:none im "visuellen" CSS rausgenommen werden.
    Aber die wenigsten "normalen" Besucher der Website werden verstehen, was das soll und wieso es eine gute Idee ist, obwohl es vermeindlich hässlich aussieht.

  10. was soll dieser Unsinn? Soll man jetzt zu der Aktion sagen sagen "Willkommen HTML 1.0" ;). Man gibt sich immer Mühe die Webseite grafisch mit Bildern und CSS so umzusetzten das es einen gefällt und dann soll ich alles ausschalten. Ne ich glaube nicht. Das ist ja als ob man alle Klamotten auszieht und dann auf die Straße rennt. OK manche Menschen machen das, aber ich gehöre nicht dazu.

  11. Webrocker » Die Navi vor den Inhalt zu holen macht aber SEO- und Besuchertechnisch sinn. Die Erweiterung via hr ist eine klasse Lösung und oft vergessen. Aber da zeigt sich ja, dass die Aktion auch positive Seiten hat - man denkt drüber nach.

  12. @Frank (12):
    Sollte auch keine bösartige Kritik sein. Wenn Du nicht darüber berichtet hättest, hätte ich ja nicht einmal von der Aktion mitbekommen. Und das, wo ich wirklich häufig Webstandards predige :o)
    Ich hatte es auch nur deswegen erwähnt, weil Deine Übersetzung meines Erachtens ziemlich das Gegenteil aussagt. (Meine Englischkenntnisse sind beileibe auch nicht perfekt, aber gerade deshalb dachte ich mir, wäre ein kurzer Hinweis gern gesehen.)

  13. Und, wie viele Besucher verlassen aufgrund dessen nun vorzeitig die Seite? Wahrscheinlich ein vielfaches mehr an Abbrüchen, würde ich mal behaupten.

    Gruß,

    Steini

  14. Hallo Frank,

    wenn Du für die Suchmaschinen schon unbedingt die Navi zuerst haben musst, dann wäre es für die Besucher wirklich sinnvoll, einen Link gleich oben vorzufinden, der da heißt "Direkt zum Seiteninhalt" - auch der kann ja per css visuell versteckt werden. :o)

    Alternativ und das finde ich noch ein Stück eleganter und sinniger, die ich Webseiten prinzipiell zuerst für die Menschen und dann für die Maschinen mache :D, zuerst den Inhalt auszugeben und die Suchmaschinen per Link zur Navigation zu führen, die dann später im Code auftaucht.

    Übrigens: der Naked CSS-Day ist vorbei 😉

    Es grüßt
    Freddy

  15. @Freddy » Danke für die nützlichen Hinweise, die ich auch voll verstehe und unterstütze. Leider mangelt es an zeit um sie umzusetzen, das ist eben nur Hobby.
    Naked Day ist noch nicht vorbei, denn auf Grund der Zeitverschiebung ist er noch aktiv.

  16. Naja, wenn nicht Du, dann vielleicht andere. Kommen ja viele hier vorbei. 😉 Und ich hoffe, die Zeitverschiebung bringt dann bald das Ende des Naked CSS-Days...

    Herzlich grüßt: Freddy

  17. @Freddy: Aber das ist eigentlich das schöne, dass man mal die Defizite sieht.
    Ebenso herzliche Grüße.

    Nur mal als Anmerkung: ich möchte das Design vieler Seiten nicht missen, dazu gibt es viel zu schöne Seiten, aber die Aktion gefällt mir und zeigt eine ganze Reihe von Problemen und meiner Diskussion mit Leuten, die noch immer via Drag&Drop Seiten bauen ist verständlicher, wenn auch nicht fruchtend, denn die reden immer über den Preis.

  18. Ich find’s auch an sich eine gute Idee, aber tatsächlich verstehen werden es doch die wenigsten, eben die, die sich mit diesen Dingen auch ständig beschäftigen. Aber an die ist das ja auch adressiert. Den normalen User wird es wohl eher irritieren, wenn er auf eine Seite ohne Design gelangt, und er wird die wohl schnell wieder verlassen. Vielleicht gibt es ja bald einen neuen Trend zu CSS-freien Seiten

  19. Die Startseite hier ist auch nicht valid... 😉

    Fehler (1)

    Zeile Spalte: 510
    402 Fehler: Beim Verwenden von style-Attributen muss die verwendete Stylesprache in einen Meta-Element
    (meta http-equiv="Content-Style-Type" content="text/css")
    und/oder im HTTP-Header (Content-Style-Type: text/css) mitgeteilt werden.
    Weitergehende Informationen finden Sie hier.
    Fehlerstelle:

    d/2.5/deed.de" rel="license nofollow" style="text-decoration: underline..

Kommentare sind geschlossen.