AlphaImageLoader und nicht-klickbare Links

Der AlphaImageLoader ist ein proprietärer Filter, den man häufig verwendet, um den Internet Explorer 6 dazu zu bringen, Alpha-Transparenzen von PNG-Dateien anzuzeigen. Ein Problem, welches beim Einsatz des AIL auftreten kann: Links und Formelemente innerhalb des Bereichs, auf den der Filter angewendet wurde, sind nicht mehr klickbar. Schnelle Abhilfe schafft in diesem Fall das Setzen von position: relative für die entsprechenden tags (<a>, <input />, etc.).

Veröffentlicht am 25.01.2008 um 19:31 Uhr
Keine Kommentare

Halbtransparente Pixel mit Fireworks und dem PNG-8 Format

Gerade bei Stanislav entdeckt und für sehr lesenswert befunden: Using PNG8 in Fireworks. Der Forenbeitrag beschreibt, wie man mit Hilfe von Fireworks dem PNG-8 Format echte Transparenzen verpasst, die auch noch “graceful degraden”, wie der Fachmann sagen würde (wie übersetzt man das eigentlich ins Deutsche?). Lesebefehl.

Veröffentlicht am 18.09.2007 um 06:57 Uhr
3 Kommentare

tingelets: Bookmarklets for Web Developers

tingelets

Färbt euer HTML ein!

Mit tingelets starte ich heute ein kleines Projekt, dass euch Webentwicklern und -designern das tägliche Leben ein wenig erleichtern soll:

Die Vorgeschichte

Bei mir kommt es recht häufig vor, dass ich zu Debug-Zwecken zusätzliche Regeln in meine CSS-Dateien einfüge. Meistens handelt es sich dabei um Hintergrundfarben, die bestimmte Elemente hervorheben sollen, damit man die Größen und Abstände parallel in mehreren Browsern vergleichen kann.


div#column {
    margin: 2em 0;
    float: left;
        background: #5ff; /* debug */
}

Da dies oft recht mühsam ist, vor allem wenn man später wieder die richtige Zeile zum Herauslöschen finden will, habe ich es mir angewöhnt, Debug-Angaben immer einen Tab weiter nach rechts einzurücken.

Dennoch hab ich mich oft gefragt, ob das nicht noch einfacher geht. Sicher gibt es tolle Tools, die diese Aufgabe mit Bravour erledigen, man schaue sich nur das großartige Firebug Plugin, den Safari Web Inspector oder Xyle scope an. Das Problem bei der Sache ist allerdings, dass diese Lösungen immer auf eine Rendering-Engine begrenzt sind – um Ergebnisse zu vergleichen, also unbrauchbar.

Die Idee

Kürzlich hatte ich eine Idee, die genau an dieser Stelle ansetzt: Warum nicht das ganz über Bookmarklets steuern? Gesagt getan hab ich mich die letzten Tage mal hingesetzt und die tingelets Bookmarklets Suite gebastelt, die als Ergänzung zu den oben genannten Tools das Leben des gemeinen Webdesigners erleichtern soll.

Einmal eingerichtet, kann man in Windeseile beliebige Tags, CSS-Klassen oder auch IDs einfärben und sich so einen schnellen, browserübergreifenden Eindruck von einer beliebigen Seite verschaffen:

bartelme.at tinged
praegnanz.de tinged
daring fireball tinged

Und so funktioniert’s

Auf dem tingelets-Server liegt zum einen die Datei tingelets.js, die alle Funktionen enthält sowie für jedes Bookmarklet ein eigenes kleines Script, dass den Funktionsaufruf erledigt. Beide werde über das Bookmarklet in die aktuelle Seite geladen und ausgeführt. Passende Hintergrundbilder werden ebenfalls vom tingelets-Server geladen und angezeigt.

medienfreunde tinged

Mehr Infos und natürlich die Bookmarklets findet ihr unter www.tingelets.com.

Über Feedback würde ich mich natürlich freuen, besonders im Hinblick auf die Weiterentwicklung: Was fehlt, was könnte man weg lassen, was könnte man noch ändern/optimieren, welche bugs gibt es?

Und weil getingete Seiten so hübsch aussehen, hab ich gleich noch eine flickr-group angelegt, auf die ihr eure Screenshots hochladen könnt. Viel Spaß.

Veröffentlicht am 02.02.2007 um 11:09 Uhr
13 Kommentare

Die höchste Webseite der Welt

präsentiert von Jens Meiert.

Veröffentlicht am 24.10.2006 um 19:10 Uhr
Keine Kommentare

Die neue Unübersichtlichkeit

Wieso wird eine der bislang sympathischsten Webseiten, zu einem kunterbunten, gesichtslosen Yahoo-Clon umgestaltet? Wieso wird Übersichtlichkeit und Reduziertheit durch Informationsflut und Schriften-Chaos ersetzt? Wieso wird auf eigenständige, nette Illustrationen verzichtet zu Gunsten von 0815-Stock-Icons?

Technorati bis vor 1 Woche

Technorati früher

Technorati heute

Technorati neu

Nun ja, man kann dem Redesign durchaus auch Gutes abgewinnen, wie zum Beispiel die bessere Platzausnutzung. Doch im großen und ganzen bin ich sehr enttäuscht. Die Farben scheinen nahezu zufällig ausgewählt, es gibt zahlreiche Designunstimmigkeiten (mal sind die Ecken abgerundet, mal nicht), es herrscht ein bunter Stilmischmasch, der jegliche Geradlinigkeit im Design zunichte macht. Die früher da gewesene Verspieltheit, die Technorati so unverwechselbar gemacht hat, ist einem beliebigen Einheitsdesign gewichen. Die Seite wirkt vollgeknallt wie ein Teenie-Blog, bei dem auf Teufel komm raus alle noch so unsinnigen Plugins in die Sidebar gepackt werden, einfach nur weil es geht.

Und Technorati ist mit der eingeschlagenen Richtung nicht alleine: Bei sehr vielen aktuellen Seiten kann man eine Art “Neue Unübersichtlichkeit” feststellen – Die Rückkehr des Portals sozusagen. Man schaue sich nur mal das Blog von Veerle Pieters oder Vitamin an. Im Gegensatz zum neuen Technorati beides Seiten mit einem klasse Design. Aber ist diese Fülle an Informationen auf einer Startseite wirklich notwendig und sinnvoll? Ist der Nutzer nicht ohnehin schon überfordert mit dem viel zu großen Angebot im Netz oder ist gerade das Portalhafte hier wieder die Lösung: Auf den ersten Blick gleich alles in kleinen Häppchen präsentieren, so dass der Benutzer das Gefühl hat, alle angebotenen Dienste und Inhalte auf den ersten Blick zu erfassen? Ist über die Jahre mit dem Internet auch der User ein Stück weit erwachsener und medienkompetenter geworden und kommt nun spielend mit solchen Seiten zurecht? Sicher kann man einem interneterfahrenen Vitamin-Besucher eine etwas reichhaltigere Einstiegsseite präsentieren, aber der gemeine Technorati-User profitiert sicher nicht unbedingt von der neuen Vielfalt seines Lieblings-Blog-Trackers.

Veröffentlicht am 25.07.2006 um 18:08 Uhr
1 Kommentar

Layout Grid Bookmarklet

Einfacher geht’s wirklich nicht.

Veröffentlicht am 23.07.2006 um 17:28 Uhr
Keine Kommentare

sIFR 3.0 alpha

Tasting the 3.0

via: CSS Beauty

Veröffentlicht am 02.06.2006 um 05:48 Uhr
Keine Kommentare

Wikipedia Design Overhaul 2006

Wer hat Zeit?

Veröffentlicht am 17.05.2006 um 11:04 Uhr
Keine Kommentare

Negative Margin-Werte

oder

Lessons learnt from rebooting, Part 2:

Über den Einsatz von negativen Margin-Werten kann man streiten. Ich finde es jedenalls nicht verwerflich sondern sogar sehr praktisch, wenn man z.B. einzelne Elemente aus der umschließenden Layoutbox herausragen lassen möchte. Auf meiner neuen Seite habe ich an diversen Stellen negative Margin-Angaben benutzt, z.B. für die Bilder der Arbeitsproben. Die grauen Ränder sollten aus dem Satzspiegel herausragen, so dass die eigentliche Bildkante bündig am Text ausgerichtet ist. Kein Problem: Einfach den Bildern links einen negativen Margin-Wert von der Stärke des Rands zuweisen, fertig.

img {
    border: 6px solid #E5E6E9;
    margin-left: -6px;
}

Safari rendert richtig

In Safari sieht das auch ganz prima aus. Leider aber nicht in unserem Lieblingsbrowser, dem Internet Explorer. Dort wird alles, was nach links übersteht, einfach abgeschnitten:

Der IE rendert falsch

Erster Lösungsansatz bei einem solchen Problem: Man muss dem überstehenden Element “Layout” geben. In diesem speziellen Fall ist dies allerdings bereits der Fall, da es sich um ein img Element handelt. Will man zum Beispiel einem div oder einem h1 Element “Layout” geben, ist die einfachste Lösung, eine Breitenangabe (width) für das Element festzulegen. (Weitere Möglichkeiten findet ihr hier). Damit das ganze auch im IE6 funktioniert ist zusätzlich noch die Angabe position:relative nötig. In meinem Fall also:

img {
    border: 6px solid #E5E6E9;
    margin-left: -6px;
    position: relative;
}

Für ein Element, dass nicht von Hause aus “Layout” hat:

#herausragend {
    margin-left: -10px;
    width: 100px;
    position: relative;
}

Zum Weiterlesen:

Veröffentlicht am 09.05.2006 um 07:30 Uhr
2 Kommentare

Django for non-programmers

zu lesen bei Jeff Croft.

Veröffentlicht am 04.05.2006 um 05:44 Uhr
Keine Kommentare