Aus Zeitmangel mal wieder eine, leider unvollständige, Liste an Artikeln, die mit Webdesign, -entwicklung und ähnlichem zu tun haben.

The 10 best fonts from the Google Webfonts Directory | Ralf Herrmann: Wayfinding & Typography

OMG!!! Rainbow Dividers in CSS3!!!

Where are my rounded corners? « Boagworld

Do you struggle to explain or understand why a website looks different in different browsers? If so, I might just be able to help.

10 ways to screw up a web form and piss me off – TNW Design & Dev

10 online tools to simplify HTML5 coding | CatsWhoCode.com

I’m redesigning Smashing Magazine » Blog » Elliot Jay Stocks

[…] and Iâ€ÃƒÂ¢Ã¢â‚¬Å¾Ã‚¢m happy to say that my involvement now runs even deeper: Iâ€ÃƒÂ¢Ã¢â‚¬Å¾Ã‚¢m currently in the midst of redesigning the website.

Who Does Facebook Think You Are Searching For? | thekeesh.com

Damit ich es nicht beim nächsten Redesign vergesse habe ich mir kurzerhand aufgeschrieben, welche Elemente es in einem Blog gibt, die irgendwie gestyled werden müssen. Und damit auch ihr was davon habt, teile ich das mit euch :)

Aufgeteilt ist die Liste in die Beitrags-Elemente, Kommentar-Ansicht, Kommentarformular, Footer, Navigation, verschiedene Inhaltstypen und -seiten und sonstige Sachen, die meistens gut in die Sidebar passen.

Artikel-Elemente

Artikeltitel
Datum
Kommentaranzahl mit Link zu den Kommentaren
Text
Zwischenüberschriften
fett, kursiv
Blockquote
Code
Links
Bilder
Listen
– unsortiert
– sortiert
– Definitionslisten
Tabellen
Tags
Kategorien
Edit-Link

Optional:
Facebook-Sharing
Retweet
flattr
sonstiger Socialkram

Kommentare
Gravatar
Text
Autor
Datum
Reply-Button
Edit Link

Kommentare und Trackbacks trennen

Kommentarformular
Name
Website
E-Mail
Labels, input, textarea
Checkboxen
Submit-Buttons
Kommentar-Feed

Navigation
Hauptnavigation (Seiten)
Pagination
Suchformular
Archivseiten
Tags
Kategorien

Footer
Copyright
Wordpress-Satz
cooler Abschlusssatz

anderes
Adsense
andere Werbung (Linklift)
Facebook-Like-Box
letzte Tweeds
Blogroll

Inhalte
Über mich-Seiten
Kategorie-Archiv
Tag-Archiv
zeitliches Archiv
Suchergebnisse
Kontaktseite
Impressum
Feed-Links

(Screenshot) Webkrauts: Doppelt gewinkelte Klammer zu?

Maik Wagner schreibt im heutigen Webkrauts-Türchen „Doppelt gewinkelte Klammer zu“ über die Aussprache von Zeichen wie », → oder > in Screen-Readern und welche davon unbenklich für Brotkrummen-Navigationen verwendet werden können. (Puh, langer Satz.)

Am Ende des Artikels schreibt er, und da gebe ich ihm recht:

Grundsätzlich sollten Breadcrumb-Navigationen immer als Liste ausgezeichnet sein, hierbei eignet sich eine geordnete Liste besser als eine ungeordnete, denn über die CSS-Formatierung kann die Nummerierung ausgeblendet werden, die der Screenreader trotzdem vorliest.

Dabei kam mir folgender Gedanke: Müsste eine Brotkrummen-Navigation nicht eigentlich aus ineinander verschachtelten Listen bestehen um die Tiefe auch semantisch aufzugreifen? In Hauptnavigationen macht man das doch auch so, wenn eine Ebene mit Unterpunkten geöffnet ist.

<ul class="breadcrumb">
<li><a href="">Werners Elektro-Shop</a>
<ul>
<li><a href="">Produkte</a>
<ul>
<li><a href="">Lötkolben</a></li>
</ul>
</li>
</ul>
</li>
</ul>

Schließlich sind die verschiedenen Ebenen miteinander verknüpft und eine ist jeweils die Tochter der anderen, macht also durchaus Sinn, ist aber wahrscheinlich schon wieder zuviel des Guten.

Wenn die Brotkrummen-Navigation nicht aus zu vielen Unterpunkten besteht – was aber meistens nicht der Fall ist -, besteht doch sogar die Möglichkeit, denen, die sich die Website vorlesen lassen, Zusatzinformationen zukommen zu lassen:

<ul class="breadcrumb">
<li><a href="">Werners Elektrop-Shop</a>
<ul>
<li>Hauptkategorie: <a href="">Produkte</a>
<ul>
<li>Unterkategorie: <a href="">Lotkolben</a></li>
</ul>
</li>
</ul>
</li>
</ul>

Diese Zusatzinformationen kann man noch in ein <span>-Element einwickeln, um sie für die Bildschirm-Anzeige zu verstecken. Nicht unbedingt mit display: none;, sonst werden sie gar nicht erst vorgelesen, aber mit dem allseits bekannten text-indent: -9999px; sollte es klappen. Habe ich allerdings nicht getestet.

Wahrscheinlich ist das wieder zuviel des Guten und es reicht, eine Brotkrummen-Navigation als geordnete Liste auszuzeichnen und die Nummerierung auszublenden. (list-style-type: none;) Was meint ihr? $-ility-Experten im Haus?