Zitieren, aber richtig

Schöne Zusammenfassung darüber, wie man in HTML richtig zitiert findet sich heute bei 456 Berea Street. Steht eigentlich nahezu alles Wissenwerte drin. Zum Thema <blockquote> hätte ich allerdings noch etwas hinzuzufügen:

  1. <blockquote>
  2. <p>Hier der Text der gequotet werden soll.</p>
  3. <p>Etwas länger sollte er schon sein.</p>
  4. <address><a href="http://adresse.deszitats.de/">Urheber des Zitats</a></address>
  5. </blockquote>

Den Tag <address> kann man sich dann natürlich noch schön via CSS gestalten. Entnommen habe ich das der Mozilla Markup Reference, die Seite antwortet im Moment allerdings gerade nicht :(.

Redesign: Einfaches Menü

Menüs als hübsch gestylte HTML-Listen (ul), ein alter Hut, gewiß. Schon einhundert Mal beschrieben und alles was dem in letzter Zeit noch hinzugefügt wurde ist entweder langweilig, oder—sagen wir mal—suboptimal.

Für das aktuell anstehende Redesign habe ich auf eine aufwendige Tabnavigation, auf das Sliden von Backgroundimages und was es sonst noch an fetten, aber schweren Effekten und Techniken so gibt… verzichtet. Gerade die aktuelle Navigation, die sicherlich ein Eyecatcher ist (in den Browsern, in denen sie wie vorgesehen funktioniert), ist vor allem eins: schwer zu handlen und null erweiterbar. Das ist überhaupt die Crux der horizontal angeordneten Navigation auf einer in der Breite festgelegten Website: irgendwann ist kein Platz mehr da.

Zurück also in die Vertikale. Und auch dort lassen sich ansprechende Effekte erzielen, ohne gleich mit dem Monsterhackcsshammer zu schwingen oder gar Javascript zu bemühen.

HTML:

<div id="navigation">
<ul>
<li><a href="#" title="Artikel">Schreiberling</a></li>
<li><a class="akt" href="#" title="Weblogger">Blogger</a></li>
<li><a href="#" title="Entwicklung">Entwickler</a></li>
<li><a href="#" title="Musik">Plattenalleinunterhalter</a></li>
<li><a href="#" title="Persoenlich">Mensch</a></li>
<li><a href="#" title="Fotos">Kamerabenutzer</a></li>
</ul>
</div>

Stimmt nicht ganz. Da der dumme IE mal wieder buggy spielt, habe ich in der Endversion alle Zeilenumbrüche weglassen müssen, da sonst ungewollte Abstände zwischen den Listenpunkten angezeigt werden.

CSS:

#navigation {margin-bottom: 2em;}
#navigation ul {
list-style:none;
margin:0;
padding:0;
background: transparent url(images/brd7c6750bottom.png) repeat-x top;}
#navigation ul li {
background: transparent url(images/brd7c6750bottom.png) repeat-x bottom;
margin: 0;
padding: 0;}
#navigation a {
display: block;
margin: 0;
padding: .7em .8em;}
#navigation a.akt {font-weight: bold;}
#navigation a:link, #navigation a:visited {
color: #7c6750;
text-decoration: none;}
#navigation a:hover {
color: #fff;
font-weight: bold;
background: #7c6750;}
#navigation a:active {
color: #7c6750;
text-decoration: none;}

Das Hintergrundbild brd7c6750bottom.png ist ein simples 10×1px großes PiNG, welches die gepunktete Linie enthält (da ja, richtig geraten IE border-bottom:1px dotted #7c6750 fälschlicherweise als gestrichelte Linie darstellt. Und noch ein Unterschied zwischen IE und richtigen Webbrowsern: obwohl die Links als Blockelemente dargestellt werden, wird beim IE der Hovereffekt trotzdem nur gezeigt, wenn man direkt über die Schrift des Links fährt. Wie arm! Aber IE-Surfer dürften solche Dinge gewöhnt sein…

Eins sei noch angemerkt: Textpattern mit eingeschaltetem Textile ist für die Wiedergabe von Sourcecode mehr als ungeeignet. Das nervt.

Print Stylesheet via DOM

Ein extra Stylesheet für die Ausgabe einer Webseite auf dem Drucker gehört oft zum guten Ton oder Service, mit modernen CSS-Techniken (:after, :before, content()) kann man dabei sogar Linkadressen mit aufs Papier drucken (was nützen dort auch normale Links), aber das kann ja wieder nicht jeder Browser. Es geht auch mit ein wenig DOM-Scripting: Displaying URL’s of Links When Printing.
(Link gefischt bei del.icio.us).

Drei schnelle Links

Mit dem Online CSS Optimizer kann man seine Stylesheets optimieren, vorausgesetzt man benutzt nicht sowieso schon CSS-Shortcuts. Ein elendig grosses CSS aus Dreamweaver lässt sich damit allerdings ansehnlich verkürzen (aus der Rubrik: “wer’s braucht? Helge zum Beispiel…”).

Ein ausführliches Tutorial über CSS-Positioning gibt’s bei BrainJar.

Viele, viele, viele Photoshop-Workschops gibt’s beim Tutorial-Outpost. Ebenso Tutorials für Flash und 3D-Studio Max.

CSS: Welche Regel geht vor?

Wenn man an Seiten arbeitet, die von anderen gecodet wurden, kann man manchmal sehr interessante Erfahrungen beim editieren von CSS-Regeln machen. Es gibt Arten ein CSS zu schreiben, die das nachträgliche Editieren der Seiten wahrlich zur Hölle machen. Will man nun aber nicht die komplette Struktur verändern, also die Site komplett neu schreiben, ist man manchmal zu drastischen Mitteln gezwungen.

Die Frage die sich aufdrängt: wenn zwei CSS-Regeln auf ein Element zutreffen, welche Regel zieht?

Beispiel aus dem CSS:

td {color: red;}
.test {color:blue;}
td.test {color:black;}

Beispiel aus dem HTML:

<td class="test" style="color:green">Welche Farbe habe ich nun?</td>

Antwort: Grün. In diesem Falle, denn das dem td zugeordnete style-Attribut überschreibt die anderen Regeln, es ist die speziellste Anweisung. Das mit dem “speziell” ist also sehr wichtig. Wenn wir das style-Attribut weglöschen:


<td class="test">Welche Farbe habe ich nun?</td>

… wird der Text nun schwarz, weil td.test gegenüber .test spezieller, schwerwiegender ist. Was überstimmt nun aber welche Regeln?

  • die speziellere Regel geht vor der unspezielleren Regel
  • im Code angewendete Styles überstimmen Regeln aus dem Stylesheet (sind aber meist unschön!)
  • CSS Klassen gehen vor Zuweisungen an HTML-Elemente
  • CSS Anweisungen die für mehrere Elemente gelten überstimmen solche, die nur für ein Element gelten
  • ID’s überstimmen Klassen

Auch nachzulesen bspw. hier. Der letzte Punkt in dieser Liste hat mir ein wenig zu schaffen gemacht, denn

CSS:

td {color: red;}
#test {color: blue;}
td.testen {color: black;}

HTML:

<div id="test">
<table>
<tr>
<td class="testen">Welche Farbe habe ich denn nun?</td>
</tr>
</table>
</div>

gibt schwarzen Text aus,

CSS:

td {color: red;}
#test td {color: blue;}
td.testen {color: black;}

macht uns den Text wieder blau. Zum Glück, wenn alles nicht hilft, kann man diese Regeln auch noch durchbrechen, mit der !important-Anweisung. Denn bspw.

td {color: red !important;}

macht alles wieder rot.

Home?

The Information Architecture of a site is something that gets overlooked by designers for various reasons. One of the lastest IA mistakes that I am beginning to see popup is the lack of a “home” link in the navigation. Many times the logo takes the place of a Home tab, but I don’t think it should be used as a substitute.
Whitespace – The Disappearing Home Link

Lesenswerter Artikel, obwohl man dass eigentlich auch so wissen könnte. Manche machen’s halt trotzdem falsch. Ich zum Bleistift. 😉

Den Blick lenken

Eine anschauliche kleine Sammlung von Designbeispielen, die den Blick des Betrachters auf eine Website gekonnt lenken, hat Sam Royama zusammengestellt: hier und hier. Und Sam verrät auch gleich das Rezept für eine gelungene Blicksteuerung:

  • weniger, ausdrucksvollere Grafiken
  • experimentelle Randeinstellungen
  • gesunder Einsatz von Raum zwischen den Texten (aka. Whitespace)

Vor allem letzteres gefällt mir hier überhaupt noch nicht. Punktum. Ist zwar mit dem neuen Layout für die “Blockquotes” ein wenig besser geworden, aber immer noch suboptimal. Ich arbeite dran.

Bookmarksammlung: Webstandards

Eine riesige Liste mit Beispielen (guten und schlechten), Texten, Tests und allem anderen was mit Webdesign mit Webstandards zusammenhängt hat Joe Clark zusammengestellt:

Over the course of a year-long project, and because Web Content Accessibility Guidelines Working Group members never seem to actually surf the Web, I bookmarked sites that seemed to be examples of certain topics in standards-compliant Web development and accessibility.

Via The Web Standards Project.