HTML & CSS Archive

CSS Live Design Tutorial

Anleitungen zu CSS gibt gibt es einige, zum Beispiel ziemlich ausführlich von SelfHTML, „Grundlagen für Spaltenlayout mit CSS„. Wer jedoch „live“ sehen will, wie sich das Layout aufgrund einer CSS-Anweisung verändert, muss entweder die Beispielanwendung selbst ausprobieren, oder wirft einen Blick auf „Live Design“ von Albino Blacksheep. In 18 Schritten wird dort das Entstehen einer zweispaltigen Webseite erklärt und Schritt für Schritt der Fortschritt anzeigt.

(via digg.com)

AdSense Design-Idee

Gestylte AdSense-Anzeigen

Eine wirklich gelungene Art der Integration von AdSense-Anzeigen ins Design zeigt Karen Cheng in ihrem (ebenfalls sehr schön gemachten) Blog „Snippets of Life„, wie auf dem nebenstehenden Bild zu erkennen ist. Ein AdSense-Kenner könnte nun aber zum Schluss kommen, dass diese Art der „Anzeigenverschönerung“ nicht erlaubt ist, denn in den AdSense Programmrichtlinien heisst es:

Sowohl der AdSense-Anzeigencode als auch der Code für das Google-Suchfeld und der Code für Verweis-Schaltflächen müssen unverändert in Webseiten kopiert werden. AdSense-Teilnehmer dürfen den Anzeigencode unter keinen Umständen auch nur in Teilen verändern, oder das Layout, das Verhalten, die Zielrichtung oder die Schaltung von Anzeigen ändern.

und weiter:

Websites dürfen keine wie auch immer gearteten Anreize enthalten, die Besucher animieren, auf die Google-Anzeigen zu klicken und dürfen auch keine Aufmerksamkeit auf die Anzeigen lenken. […] Publisher dürfen auch keine irreführenden oder unnatürlichen Mittel einsetzen, um Aufmerksamkeit auf Verweis-Schaltflächen zu lenken oder Besucher dazu animieren, auf Verweis-Schaltflächen zu klicken.

Der erste Punkt ist mit ein bisschen CSS einfach zu umgehen bzw. richtlinienkonform umzusetzen. Anders sieht es mit dem zweiten Punkt aus, denn diese Bestimmungen kann verschieden ausgelegt werden. Karen hat bei AdSense nachgefragt und die ihre Gestaltung wurde genehmigt.
Dies öffnet einen interessanten kleinen Playground für Designer, denn die AdSense-Anzeigen lassen sich so durchaus äusserst angenehm in ein Design integrieren. Ich bin gespannt, ob wir diese Gestaltungsarten auch bei uns in Zukunft öfters sehen werden. An einen Punkt seien aber alle erinnert: Vor einer solchen Gestaltung bzw. Nutzung sollte immer bei AdSense nachgefragt werden. Sicher ist sicher…

(via ProBlogger)

Firefox protokolliert Klicks

Wie heise.de in einer Newsmeldung schreibt, enthält die „Entwicklerversion“ von Firefox 1.6a1 (Deer Park 2) gemäss einem Post im Blog von Firefox-Entwickler Darin Fisher eine Funktion zum Protokollieren von Klicks. Beim Klick auf

Link

setzt der neue Firefox einen Ping an (in diesem Falle) den Heise-Server ab. Praktisch ist dies sicherlich für das Tracking von Besucherklicks. Allerdings ist fraglich, ob Firefox-User das ungefragte Senden dieser Infos akzeptieren, denn die Funktion ist standardmässig aktiviert. Bereits zeigt sich die „Anwendergemeinde“ laut Heise „besorgt, die Rede war von Spyware“.
Über das normale Konfigurationsmenü lasse sich das Pingen nicht ausschalten, via „about:config“ könne die Funktion aber über die Variable „browser.send_pings“ ausschalten.

Da darf man gespannt sein, ob diese Funktion auch in den Final-Versionen des neuen Firefox wiederfindet.

Bedingter Bindestrich

Gerade bei Webseiten im Blocksatz sind lange Worte immer wieder ein Problem, da sie die Darstellung unnötig „auseinanderreissen“. Im templaterie blog bin ich nun auf ­ gestossen, das einen bedingten Bindestrich setzt. Eben bedingt, nämlich nur dann, wenn das Wort darstellungsbedingt auch tatsächlich getrennt werden muss.

Kleiner Wehrmutstropfen: Die Mozilla-Browserfamilie ignoriert ­ leider, aber vielleicht ändert sich das in späteren Releases einmal. Der Internet Explorer verhält sich hier für einmal sehr mustergültig und setzt ­ ohne Probleme um, genauso wie Opera.

Hat man also ein langes Wort wie: ich­wollte­schon­immer­wissen­wie­ich­einen­bedingten­Bindestrich­einfügen­kann, fügt man ganz einfach an den möglichen „Bruchstellen“ ­ ein und schon wird der Blocksatz formschön umgebrochen (ausser eben, wie angesprochen, in Browsern der Mozilla–Familie).

Weitere Infos auch hier: Das Problem mit dem Zeilenumbruch im HTML

(via templaterie blog)

Linkdump: Howto’s und CheatSheets

Kleine Übersicht über Howto’s und Cheatsheets, die man immer mal wieder brauchen kann.

Howto’s:

Cheat-Sheets:

Das wären dann die Links, die sich irgendwo in meinen Bookmarks versteckt hatten. Bei Gelegenheit werde ich diese Liste dann noch erweitern…

Behindertentauglich? Ach was!

Jürg Stuker zeigt im namics Weblog ein interessantes Beispiel zum Thema barrierefreie Internetseiten auf. Die Bank Leu als feine Schweizer Privatbank erteilte einen Fr. 20’000.– -Auftrag um ihren Internet-Auftritt für Behinderte und ältere Menschen zu optimieren.

Eigentlich eine löbliche Sache, nur: So ganz hat das wohl nicht funktioniert, denn nur schon der HTML-Validator zählt 220 Fehler auf, obwohl der in der Netzwoche erschienene Pressetext sinnigerweise von „HTML-Code nach W3C“ spricht.

Weiteres Schmunzeln im Originaltext

Übrigens: Nein, auch meine Seiten validieren nicht immer, aber immer öfter (und so gut wie immer mit weniger als 220 Fehlern)… 🙂