Entries tagged as me

2008-12-14 OMG! web output hat ein eigenes Design!

Ich hätte selbst nicht gedacht, daß das nochmal irgendwann passieren würde.

Schon vor über einem Jahr hatte ich eine Design Idee und diese Fireworks gelayoutet. Ein erster HTML-Dummy war schnell gebastelt. Dann schaute ich mir zum ersten mal an wie man in Serendipity (der hier verwendeten Blog-Engine) Templates baut und habe augenblicklich die Lust verloren.

Glücklicherweise war das alte Design so hässlich und der Code noch viel schlimmer als das Design daß mich der regelmäßige Anblick dann doch irgendwann so geschämt hat, daß ich mir den heutigen Sonntag mit Smarty (der Template Engine in Serendipity) vertrieben habe und tadaaaaaaaaaaa:

Das neue Design ist tatsächlich gerade eben online gegangen!

2008-12-13 Der Webkrauts Adventskalender öffnet mein erstes Türchen

Heute ist es soweit! Der erste Teil meines Website Performance Artikels mit dem Titel "Sehr sehr schnelle Seiten" ist aus dem heutigen Webkrauts Adventskalender Türchen gefallen. Viel Spass damit und freut euch auf morgen denn da kommt schon der zweite Teil :-)

Banner: Best Practice im Web

2008-12-11 jQuery-skipnavHighlight - nicely highlighting skip link targets

[deutsche Version dieses Beitrags anzeigen]

When I read about the Skip Links of the recently relaunched Website of City of Stockholm in the "EfA-Laborbericht, Teil 7" (german) I got instantly aware that I want to use this technique from now on as well.

To avoid "jumping" of the highlighted Containers the Developers used the CSS 2 Property outline which does not add up to the width of the Element it's surrounding like border would do. Sadly this Property is only available in the newest Browser Generation which makes the effect entirely invisible in the Internet Explorers.

To work around this Issue I used another approach. My little jQuery Plugin "skipnavHighlight"created an empty DIV and uses it to draw a Border around the link target.

You can find the working Demo here and you can download the Code of skipnavHighlight.jquery here.

2008-12-11 jQuery skipnavHighlight - Skip-Link-Ziele Anschaulich machen

[switch to english Version of this Post]

Als Tomas Caspers in seinem gestrigen "EfA-Laborbericht, Teil 7" auf die Skip-Links der frisch relaunchten Website der Stadt Stockholm verwies war mir klar, daß ich diese einfache und einfach Sinnvolle Technik zukünftig unbedingt ebenfalls nutzen möchte.

Um ein "Springen" der markierten Container zu vermeiden setzten die Entwickler der Webseite auf die CSS2 Eigenschaft: outline die das umrandete Element nicht verbreitert wie es border machen würde. Leider ist diese Eigenschaft nur in der neuesten Browser Generation verfügbar, was das Feature in den Internet Explorern vollständig verschwinden lässt.

Um diesen Makel zu umschiffen habe ich einen anderen Lösungsweg eingeschlagen. Mein kleines jQuery Plugin "skipnavHighlight" erzeugt ein leeres DIV und malt damit einen Rahmen um zu markierende Linkziel.

Eine funktionierende Demo gibt es hier und herunterladen kann man den Code von skipnavHighlight.jquery hier.