Kategorien
Frontend: HTML5, CSS3, jQuery Webstandards

Hacks oder Conditional Comments?

Mitmachen: Umfrage: CSS-Hacks vs. Conditional Comments

Kategorien
Frontend: HTML5, CSS3, jQuery Webstandards

Bringt das Zurückwechseln von XHTML nach HTML eigentlich Probleme mit JavaScripts/dem DOM?

Da ja soviele von XHTML wieder auf HTML wechseln: gibts da nicht gelegentlich Probleme mit JavaScripts und dem DOM? Ich mein da mal zu gelesen zu haben, dass das alles sehr verschieden ist und manche Scripts eben nicht mehr so gut greifen. Ich bin nun wirklich nicht so der JavaScript-Könner, muss ich leider zugegeben. (Das kam wohl mit der Zeit der animierten Mauszeiger-Verfolger, dass ich da eine gewisse Phobie bekam.)

(Ein kurzer Gedanke zum Arbeitsbeginn nach drei Wochen Abstinenz durch Klassenfahrt und Projektwochen.)

Kategorien
Frontend: HTML5, CSS3, jQuery Webstandards

10 Jahre

Mir ist gerade aufgefallen, dass ich mich seit etwa 10 Jahren mit HTML, Webdesign und so beschäftige. 10 Jahre! Da war ich 12, 13 Jahre alt. Kann ich mich jetzt Experte nennen?

Kategorien
Frontend: HTML5, CSS3, jQuery Usability Webstandards

„Du bist von Google gekommen und hast folgendes gesucht“ nervt

Mit das nervigste in Blogs sind „du bist von Google gekommen und hast folgendes gesucht“-Meldungen. Am besten noch vollgespickt mit Links zu ähnlichen Beiträgen und massig Werbung. Natürlich vor dem eigentlichen Inhalt, den man lesen wollte.

Ein Beispiel:

Du kommst von-Beispiel

Man stelle sich das mal auf einer Party vor: Man sucht jemanden, mit dem man sich gut unterhalten könnte, geht auf ihn zu und wird folgendermaßen begrüßt:

– „Hallo, du bist durch die Tür gekommen. Höhö.“

– „Ja, richtig. (Verständnisloser Blick.) Ich würd mich gern mit dir über den neuen Opel unterhalten.“

– „Ja, aber vielleicht interessiert dich ja auch der VW Käfer oder der kaputte Mechanismus des Porsche von Günther.“

– „Ähm, ne. Der neue Opel.“

– „Ja ok, ich hab hier ein paar Flyer rumfliegen vom Opel-Club Castrop-Rauxel. Und hier, Mannis Werkstatt hat günstige Stoßdämpfer.“

– „Ehm, danke. Du, ich glaub das wars dann mit unserem Gespräch. Tschüss.“

So in etwa fühle ich mich, wenn ich auf die Teile stoße. Nichts gegen weiterführende Links und Werbeeinblendungen, aber bitte dann erst nach dem Eintrag oder daneben und nicht als riesengroße Box davor. So schön die Adsense-Kassen da auch klingeln mögen, wirklich hilfreich ist es für den Besucher nicht. Und auf den kommt es ja an ;-)

Kategorien
Browser Frontend: HTML5, CSS3, jQuery Webstandards

CSS: Runde Ecken in der Zukunft

Runde Ecken kann man ja bald1 entweder mit border-radius, multiplen Hintergrundbildern (Oldschool) oder waghalsigen CSS-Verzerrungen erstellen. Geht alles irgendwie.

1 so ungefähr 10 Jahre nach Einführung des Internet Explorer 10

Kategorien
Frontend: HTML5, CSS3, jQuery Netzwelt Webstandards

Nackich

Ha, heute ist CSS Naked Day.

Kategorien
Frontend: HTML5, CSS3, jQuery Webstandards

Brotkrumen-Navigation als ineinander verschachtelte Listen?

(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?

Kategorien
Frontend: HTML5, CSS3, jQuery Webstandards

„Man kann Tabellen layouten aber nicht mit Tabellen layouten.“