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.).

tingelets: Bookmarklets for Web Developers

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:

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.

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ß.

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 heute

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.

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;
}

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:

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:

• On having layout: Clipping over the edge
• Clipping of negative margined blocks in a ‘hasLayout’ container

Bilder als Aufzählungspunkte

oder auch

Lessons learnt from rebooting, Part 1:

Einen kleinen CSS-Trick möchte ich gerne an euch weitergeben. Bei meinem Relaunch habe ich Bilder als Bullet-Points benutzt, was man ja sehr schön per CSS machen kann:

ul {
    list-style-image: url(bullet-galore.gif);
}

Leider hatte ich bei dieser Lösung das Problem, dass a) das Bild in manchen Browsern vertikal zum Text stets etwas nach oben versetzt dargestellt wurde und b) die Höhe des Bildes die Höhe der Listenpunkte beeinflusst hat.

Zu einer schicken Lösung bin ich dank Dan Cederholms Buch Web Standards Solutions gekommen, der für Bilder als Bullet-Points einfach das background-Attribut benutzt. So kann man das Bild genau ausrichten und hat keines der beiden oben beschriebenen Probleme:

ul {
    list-style: none;
}

li {
    background: url(bullet-galore.gif) 0 50% no-repeat;
    padding-left: 15px;
}

Die 50% Angabe funktioniert allerdings nur bei einzeiligen Listenpunkten. Wenn der Text umbricht, sollte man auf eine Pixel- oder em-Angabe umstellen.

Reboot 8.0

Die Tore sind geöffnet! Die neue Seite ist da! Speaker stehen noch nicht so viele fest, aber ich denke, es lohnt sich auf jeden Fall, das im Auge zu behalten. Letztes Jahr war diese Veranstaltung eine wirklich tolle Sache.

reboot is a community event for the practical visionaries who are at the intersection of digital technology and change all around us…

Eine Hand wäscht die andere

Fotografin und Yogalehrerin sucht Webdesignerin zur Überarbeitung oder Neugestaltung ihrer Website. Biete als “Honorar” Yoga-Einzelunterricht.

Das hört sich doch toll an. Leider komme ich nicht aus Berlin und bin auch keine WebdesignerIN.

Aufzählungszeichen verrutschen im Internet Explorer

Heute bin ich auf einen wirklich fast schon witzigen Bug im IE gestoßen. So verschieben sich nämlich Aufzählungspunkte von HTML-Aufzählungen, wenn man dem li-Tag eine feste Breite zuweist. Die Bullets erscheinen an der Unterkante des Aufzählungspunktes ausgerichtet.

ul {
    padding-left: 15px;
}

li {
    padding: 5px 0;
    width: 300px;
}

Und so sieht das ganze im Internet Explorer 6 aus:

Zur Lösung des Problems kann man einfach die Breite statt dem li-Tag dem umschließenden ul-Tag zuweisen.

ul {
    padding-left: 15px;
    width: 300px;
}

li {
    padding: 5px 0;
}

Ist dies nicht möglich, muss man sich mit margin bzw. padding behelfen.

Feed Icon News

Die Entscheidung des IE7 Teams, das Firefox Feed Icon zu benutzen, scheint eine wirklich gute gewesen zu sein. Nach dem Launch der Seite feedicons.com vor einigen Tagen, findet man das Icon nun bereits in den ersten Applikationen wieder. So zum Beispiel in der aktuellen Betaversion von NewsFire. David Watanabe hat schnell reagiert und das Icon in den Preferences und dem Dialog-Sheet zum abbonnieren neuer Feeds eingebaut.

Für alle Fireworks Benutzer hat John Oxton ein editierbares PNG gebastelt.

CSS Reboot Fall 2005

Heute ist der Stichtag für über 900 Webdesigner, die sich an diesem gemeinsamen CSS-Relaunch Event beteiligt haben. Ich persönlich finde das ganze ziemlich übertrieben, da es dieses Jahr schon zum 2. Mal statt findet. Das nimmt der Sache irgendwie die Wichtigkeit. Die Idee an sich ist sicherlich ‘ne tolle Sache, aber ein CSS Reboot pro Jahr reicht meines Erachtens nach vollkommen aus. Auf der Website zum Event kann man ab sofort alle Teilnehmer anschauen und bewerten.

3st sucht Webdesigner

Mein Arbeitgeber 3st kommunikation aus Mainz sucht zum 01. Oktober zur Erweiterung der Online Abteilung eine(n) Webdesigner(in). Einfach mal unter www.3st.de bei den Jobausschreibungen vorbeischauen und schleunigst bewerben.

Neuigkeiten zum Internet Explorer 7

Wie Sitepoint soeben berichtet, hat Microsoft offiziell bekanntgegeben, dass XMLHTTPRequest als natives Javascript-Object implementiert sein wird. Das ist natürlich schonmal frohe Kunde und macht den Weg frei für (noch) mehr AJAX-basierte Webapplikationen.

Once IE7 is widely adopted, this will help to eliminate a lot of cumbersome browser detection code that is currently required to implement AJAX across all popular browsers.

Ein weiteres Problem, das behoben werden soll, hat mit Select-Feldern zu tun. Momentan ist es im IE nicht möglich (bzw. nur mit Bauchschmerzen bereitenden Hacks), diese Felder von anderen überlappen zu lassen, wie zum Beispiel Pulldownmenues oder ähnliches. Diese schmerzliche Erfahrung musste ich erst letzte Woche wieder machen und musste schießlich ein Script einbinden, dass beim Aufklappen der Pulldowns dynamisch die darunter liegenden Select-Felder per Javascript ausblendet. Dieses Verhalten soll jedenfalls auch korrigiert sein.

Außerdem soll es, wie bereits seit langem in Firefox enthalten, eine Web-Developer Toolbar geben, die auch als Addon für den IE6 veröffentlicht werden soll.

Hört sich alles prima an, läßt allerdings nicht über die greußlichen Screenshots des neuen UI von Office 12 hinweg täuschen. Aber das nur nebenbei.

via: Sitepoint

Willkommen in der Internet-Steinzeit

Bei der Badenia Bausparkasse wird man als interessierter Mac-User wie folgt begrüßt:

Lieber User, Sie sind auf diese Seite weitergeleitet worden, da Ihre Browser-Software nicht mit den Anforderungen für diese Webpräsenz übereinstimmt und somit eine einwandfreie Darstellung der Webpräsenz nicht gewährleistet wäre.

Um Zugang auf die Präsenz zu erlangen, sollten Sie sich daher bei einem der nachfolgend aufgeführten Anbietern kostenlos die aktuellste Browser-Software Ihrer Wahl downloaden und installieren.

Danach wird man ganz freundlich gebeten, sich doch möglichst die neueste Version von Netscape oder dem Internet Explorer runter zu laden. Doch dem Haaresträuben nicht genug führen auch noch beide Download-Links ins Leere.

Für diesen Website-Supergau verantwortlich ist übrigens diese Firma. Einmal Teeren und Federn bitte!

reboot 7

Gleich vorneweg: reboot 7 war ein voller Erfolg! Die Organisation war super, alles lief wie am Schnürchen: WLAN, Essen, sogar an Mehrfachsteckdosen zwischen den Stuhlreihen wurde gedacht (ganz wichtig!). Mac-Penetration: 80%, da fühlte man sich gleich zu Hause. Wichtiger als die Stromversorgung war natürlich das Programm. Und das hatte es schon am ersten Tag wirklich in sich. Nach einem sehr kurzweiligen Opening durch Doc Searls waren vor allem die Vorträge von Wikipedia Erfinder Jimmy Wales, “How to make big things happen with small teams” von Jason Fried (37 signals) und der Vortrag über “Ruby on Rails” von David Heinemeier Hansson sehr sehenswert. Besonders Jason Fried war derart gut, dass man fast vor Glück weinen wollte. Die Krönung des Abends war allerdings Doug Engelbart, der live per iSight “The Mother of all Demos” von 1968 angekündigt hat. Großartig.

Der zweite Tag war ebenso gut wie der erste. Nach der Keynote von keinem geringeren als Cory Doctorow (Blog-Autor bei boingboing) waren meine Highlights Doug Bowman, der über den Wired News Relaunch 2002 erzählte und auch ein paar Kniffe aus seiner CSS-Trickkiste zeigte und die darauf folgende Design Master Class mit ihm und Jason Fried, in der man beide noch mit Fragen löchern konnte. Matt Webb sprach über “Fixing broken windows”, Malthe Sigurdsson über Skype und Loic Le Meur führte in die französische Blogosphäre ein (eigentlich in die europäische, aber dazu reichte die Zeit leider nicht mehr), was auch sehr interessant war. Im Vergleich zum Rest von Europa geht da nämlich ziemlich die Post ab.

Sehr interessant war auch das ganze drumherum und die Dinge, die nebenher so abliefen. Nahezu 90% hatten ihre Laptops mitgebracht und dementsprechend war auch das Informationsaufkommen über reboot im Netz. Es gab einen reboot7 IRC Channel den einige wohl 2 Tage lang nicht verlassen haben, Bilder von Vorträgen standen schon auf flickr, bevor der Speaker die Bühne verlassen hatte und es entstanden sogar kollaborative Transscriptionen von Vorträgen mit Hilfe von SubEthaEdit.

Generell kann man sagen, dass die Dänen ein sehr sympathisches Völkchen sind. Alle total sportlich und gesundheitsbewusst. Sogar bei Mc Donalds gab’s zum Kids Menü Möhren als Alternative zu Pommes. Leider sehen Vegetarier hier etwas alt aus. Auffällig an Kopenhagen war außerdem das extrem gut ausgebaute Fahrradwege-Netz. Fahrradwege sind dort so breit wie normale Autospuren und es gibt sogar ab und zu Ampeln und Rechtsabbiegerspuren nur für Fahrräder. Kein Wunder, dass hier auch wirklich jede(r) zweite mit dem Fahrrad statt dem Auto unterwegs ist. So scheint es jedenfalls. Auch sehr auffällig war, dass wirklich alle Dänen perfektes Englisch sprechen. Ich wurde sogar von einem Mädel an der Mc Donalds Kasse schief angeschaut, als ich fragte, ob sie Englisch spräche. Mag aber auch daran liegen, dass man hier sehr viel englisches Fernsehen mit dänischen Untertiteln hat.

Schön, dass es sich nicht gelohnt hat

Ich muss mal wieder meckern. Finde es ja super, dass ich bei intro.de mittlerweile die News per RSS-Feed lesen kann. Leider in gekürzter Form. Aber macht ja nix, man kann ja bei Interesse die jeweilige Seite direkt ansurfen und weiterlesen. Pustekuchen! Da versperrt mir ein riesiges Flashbanner von VW den Weg zu den eigentlichen Inhalten der Website. Wegklicken geht nicht, Mac User sollen halt sehen, wo sie bleiben. Ich finde es unfassbar wie man immer noch mit solchen Holzhammer-Methoden im Netz werben kann. Das schadet zum einen dem Betreiber der Website (der aber in diesem Fall sowieso weitesgehend schmerzfrei ist) aber auch dem Werbenden selbst. Das ist ungefähr so, als würde mir jemand im Kino während des ganzen Films ein Eis direkt vor die Nase halten und später fragen, ob ich das nicht kaufen möchte. Über die Webdesign-Verbrechen bei intro.de reden wir dann ein andermal.

Reboot your mind

Nächste Woche (10. und 11. Juni) steigt mit reboot 7.0 eines der tollsten Events in Sachen Internet, das man sich momentan vorstellen kann (einzig ebenbürtig dürfte wohl die @media in London sein). Und Hurra: Alex und ich werden dabei sein. Ab nächsten Donnerstag versammeln sich in Kopenhagen ausser zahlreichen Teilnehmern aus ganz Europa einige der innovativsten und zukunftsweisenden Persönlichkeiten rund ums Thema Internet. Reboot versteht sich jedoch nicht als Konferenz im traditionellen Sinn. Das neue Internet läßt die Menschen näher zusammenrücken und zusammenarbeiten und genau diese Philosophie soll sich auch direkt auf dem Event wiederspiegeln. Daher auch das Motto “The New Ways Ahead”. Schon vor der eigentlichen Konferenz hat man die Möglichkeit das ganze mit zu gestalten. Die komplette Reboot-Website ist ein Wiki das von allen (Teilnehmern) editiert und erweitert werden kann. Kurzentschlossene können sich immer noch anmelden, also husch husch nach Kopenhagen!

Tiger und Webfonts

So wie’s aussieht, sind die Standard MS (Web)fonts wie Arial, Verdana und Konsorten bei Tiger wieder direkt mit an Bord. Auch ohne Installation des Office Pakets. Das ist natürlich für Webdesigner gut zu wissen.

RGB Reis

Ein Muss für jeden nicht-kalibrierten Webdesigner.

Safari 1.3

Dass 10.3.9 da ist, muss ich wohl keinem hier erzählen. Aber die Neuerungen die das Update für Safari mit sich bringt sehen schon sehr vielversprechend aus.

Webby Awards 2005

Hab mich eben mal ein wenig durch die Nominierungen geklickt (sich alle anzuschauen würde sicher ‘nen Tag dauern). Sind wirklich ein paar sehr ansprechende Seiten dabei. Nicht wie so oft bei vielen anderen Web-Awards hat man hier das Gefühl, dass die wirklich wichtigen und innovativen Seiten berücksichtigt wurden (flickr, google, creativecommons, …). Obwohl für meinen Geschmack da immer noch viel zu viel Flash-Alarm angesagt ist. Warum nicht stattdessen mal Seiten wie den panic shop auszeichnen?

Auf jeden Fall ansehen: wordcount.org (Arts), wordsatplay.com (Best Welcome Site), Zelda: The Minish Cap (Best use of Sound/Music).

Ziemlich cool finde ich auch die Nominierung von Boing Boing und Jon Hicks in der Kategorie Blogs und natürlich seinfeld.com in der Kategorie Television.

Ebay für Webdesigner

Ich muss mich grade mal derbe über Ebay echauffieren. Ebay, der Platzhirsch unter den Auktionshäusern, das Flaggschiff der New Economy und was weiß ich nicht noch alles. Wie kann es sein, dass ein Unternehmen, dass seit mehr als 10 Jahren erfolgreich und weltweit im Internet vertreten ist und zudem wahrscheinlich Trilliarden Umsatz macht, einen so unsäglichen Webauftritt haben? Zunächst aus Usability-Sicht gesehen ein reinstes Horror-Kabinett: Formulare, die zig mal die gleichen Sachen abfragen (So nach dem Motto: Möchten Sie nicht doch ein Galeriebild hinzufügen?). Die Suche einmal im Header und einmal direkt über dem Inhalt. Einzeilige Texte, die in 10 Pixel Schrift und der Farbe Grau über die gesamte Fensterbreite laufen. In Sachen Screendesign sieht es auch nich rosiger aus, die Seite sieht zerrissen und einfach nur uneinheitlich aus. Tausende von unterschiedlichen Button-Designs, mal als HTML-Submit-Buttons, mal als Bild, mal als ganz normaler Link. Typografisch bietet die Seite ein buntes Potpourri an Schriftstilen und -größen, da ist für jeden was dabei. Am meisten sträuben sich aber bei mir die Nackenhaare, wenn man sich die technische Umsetzung des Frontends anschaut. Dort findet man Steinzeit-HTML der allerfeinsten Sorte. Keine Doctype-Definition, seitenlange Javascripts mitten in den Inhalten, Tabellenlayouts bis zum Abwinken. Die Krönung ist für mich aber das Einbinden von Text als Bilddatei. Bei der Navigation kann man gerade noch drüber wegsehen, obwohl es bei der Einfachheit der Menupunkte auch überhaupt keinen Sinn macht, noch dazu weil die Schrift einfach in ungeglättetem Windows 95 Stil daherkommt. Noch Unverständlicher wird es allerdings, wenn ganz ordinäre Hinweistexte sich plötzlich als Bild entpuppen. Das lässt sich mit normalem Menschenverstand nicht mehr erklären.

Wenn mittlerweile sogar Seiten wie Yahoo auf modernes XHTML und CSS umsteigen, sollte man sich bei ebay wirklich mal Gedanken machen.

Defensive Design for the Web

Neues Buch im Webdesigner-Bücherregal. Nein diesmal geht’s nicht um schlankes HTML, Webstandards oder die Trennung von Inhalt und Aussehen. Dieses Buch beschreibt auf sehr kurzweilige Art, wie man Internetseiten an den Stellen verbessern kann, an denen Fehler auftreten. Es zeigt an Hand von vielen Beispielen, wie man Formulare, Fehlermeldungen und andere kritische Punkte besser handhaben kann. Diesen Teilen eines Internetauftritts wird bei der Programmierung oft nicht die nötige Aufmerksamkeit geschenkt, obwohl es sehr wichtig ist, den Benutzer in “Krisensituationen” wieder auf den richtigen Weg zu bringen. Kann ein User mit der ausgegebenen Fehlermeldung nichts anfangen oder werden ihm keine leicht verständlichen Lösungen angeboten, stehen die Chancen gut, dass er sich den nächstmöglichen Ausgang sucht. Und tschüss! Dieses Buch widmet sich genau diesen Stellen einer Website.

Ich hab’ zwar erst ungefähr die Hälfte gelesen, kann aber jetzt schon sagen, dass sich die Anschaffung lohnt. Mehr Information zum Buch und ein Probekapitel findet ihr auf der 37signals Website.

W3C feiert 10. Geburtstag

… und veröffentlicht eine Online-Geburtstagskarte in die man sich als braver Webdesigner schleunigst eintragen sollte. Herzlichen Glückwunsch.

Druckbarer Bereich von HTML-Seiten

Ich habe kürzlich im Rahmen eines Jobs ein paar Tests bezüglich des druckbaren Bereichs von HTML-Seiten gemacht. Dabei bin ich von einer eins zu eins Ausgabe ausgegangen, also ohne die Inhalte vorher über spezielle Druck-Stylesheets zu verändern. Um nun rauszufinden, welcher Bereich einer Internetseite denn überhaupt auf eine DIN-A4 Seite passt, habe ich einfach mal ein Testdokument erstellt, in HTML eingebettet und anschließend auf allen möglichen Browsern ausgedruckt. Die Ergebnisse sehen wie folgt aus:

• IE 6 Windows: 645 x 975 Pixel
• IE 5 Windows: 645 x 975 Pixel
• Opera 7 Windows: 645 x 935 Pixel
• Netscape 6 Windows: 660 x 990 Pixel
• Netscape 7 Windows: Seite wird automatisch passend skaliert
• Firefox Windows: Seite wird automatisch passend skaliert
• IE 5 Mac OS X: Seite wird automatisch passend skaliert
• Safari Mac OS X: Seite wird automatisch passend skaliert
• Firefox Mac OS X: Seite wird automatisch passend skaliert

(Und wieder einmal belegt das, wie steinzeitlich der IE doch ist.)

CSS Beauty

Mein persönliches Portfolio wurde soeben auf CSS Beauty gekürt. CSS Beauty zeigt ausschließlich CSS-basierte Seiten, die zudem noch schick aussehen und ist eine der bekanntesten Informations- und Inspirationsquellen für die “CSS Design Community”. Habe die Ehre!

Da tut sich was

… bei selfhtml. Nachdem das Projekt seit kurzem endlich unter einer vernünftigen Domain erreichbar ist (www.selfhtml.org), gibt’s jetzt den seiteneigenen Validator. Bei Fehlern wird direkt in den Inhalt von selfhtml verlinkt.

Gefunden bei css-technik.de

Smallscreen X

… ist ein nettes kleines Tool für OS X, zum Simulieren unterschiedlicher Bildschirmauflösungen. Grade für Webdesign eine feine Sache, wie ich finde. Man kann beliebig viele “Fenster” öffnen und auf verschiedene Abmessungen einstellen. Das ganze ist kostenlos, bzw. kann man zur Unterstützung etwas spenden (Donationware).

Zu finden unter: http://www.lorenb.com/software/smallscreenx/.

Wann hört das endlich auf?

Wir sind nicht allein

Web Standards sind ein großes Thema, finden aber leider immer noch viel zu wenig Beachtung. Um die Popularität von standardkomformem Webdesign zu erhöhen, wird ab sofort monatlich ein Web Standards Award vergeben. Die ersten Gewinner und weitere Infos gibt’s unter www.webstandardsawards.com. Besonders nett ist die Seite von Wildly Sophisticated.

Kaufbefehl

Diese Buch wurde sicher schon des öfteren empfohlen, was natürlich kein Grund ist, es nicht nochmal zu tun: Jeffrey Zeldmans “Designing with web standards”. Ich hab’s gerade zu Ende gelesen und bin einfach nur fasziniert, mit welcher Hingabe es geschrieben wurde. Designing with web standards informiert in sehr kurzweiliger Form über den modernen Einsatz von XHTML, Stylesheets (CSS) und das DocumentObjectModel (DOM). Jeffrey Zeldman erklärt, wie man ohne den Einsatz von veralteten Techniken wie Browserabfragen, JavaScript-Rollovers oder proprietärem Code, Internetseiten basteln kann, die trotzdem keine Benutzer aussen vor lassen und zudem noch den Standards des W3C gerecht werden. Es enthält viele Tipps, Tricks und Workarounds für Probleme, die uns momentan noch das Leben schwer machen (IE Box-Model Bug, etc.) und macht uns fit für das Webdesign der Zukunft (wow!). Unbedingt kaufen!

Most versions of Netscape 4 get pixels right, even if they get practically everything else wrong (J.Zeldman).

3st startet durch

Da sind wir doch tatsächlich diesen Monat mit einem Beitrag in der PAGE gelandet. In einem Artikel über Präsentationstechniken erzählt mein Chef Florian Heine, auf welche Lösungen 3st bei Präsentationen setzt. Und schwuppdiwupp: Eine Woche später gibts auch schon die ersten Reaktionen auf unsere neue Seite im Netz.

Flash und xhtml

Flashmovies xhtml-konform in html einbinden erweist sich als recht schwieriges aber nicht unmögliches Unterfangen. Hier und Hier erfahrt ihr, wie mans machen kann.