Nachdem ich diese Woche doch noch von der Warte- auf die Teilnehmerliste gerutscht bin, werde ich die nächsten zwei Tage auf dem UXcamp in Berlin verbringen.
Es ist meine BarCamp Premiere, daher bin ich überaus gespannt darauf, was mich dort erwartet. Ich freue mich auf jeden Fall auf eine Menge netter Leute und massenweise neue Ideen, Diskussionen und Inspirationen im Bereich User Experience.
Sobald ich wieder zurück bin, wird es hier einen ausführlichen Erfahrungsbericht geben. Bis dahin empfehle ich mein Twitterkonto.
See you at UXcamp Europe 2010.
Microsoft Internet Explorer… allein die bloße Erwähnung dieser drei Worte lässt selbst gestandene Webentwickler vor Schreck zusammen zucken. Vor allem die berühmt-berüchtigte Version 6 dieses Browsers sorgt, dank zahlreicher Fehler und falsch oder gar nicht implementierten Standards, immer noch für regelmäßiges Haare raufen. Der Nachfolger IE7 machte zwar einiges besser, dafür aber anderes verkehrt. Im Vergleich dazu, ist der momentan aktuelle Internet Explorer 8 ein wahrer Segen, da er zumindest in der Lage ist, den HTML4 und CSS2 Standard halbwegs vernünftig zu implementieren.
Für Webentwickler zwar ein großer Vorteil, dürfte die Standardkonformität eines Internetbrowsers dem durchschnittlichen Benutzer ziemlich gleichgültig sein. Denn IE6 und IE7 sind noch immer weit verbreitet, obwohl der IE8 bereits seit über einem Jahr verfügbar ist.
Dafür könnten zwei Gründe verantwortlich sein:
- Der Internet Explorer 6 ist der vorinstallierte Browser unter Windows XP, welches immer noch das meist verbreitetste Betriebssystem ist, gerade im Firmenumfeld.
- Ein Upgrade von Internet Explorer 7 auf Version 8 bietet dem Endnutzer kaum merkliche Vorteile, denn den Vergleich mit wirklich modernen Browsern hält auch der IE8 nicht stand – weder was Funktionen noch Geschwindigkeit betrifft. Weiterlesen »
Das Google Chrome momentan einer der schnellsten Browser ist, sollte kein Geheimnis sein. Wie schnell er tatsächlich ist, zeigt nun dieses Promovideo »Google Chrome Speed Tests«:
Als wenn das nicht schon schnell genug wäre, wird bereits daran gearbeitet, die JavaScript Engine V8 noch ein Mal um über 30% zu beschleunigen.
webdirections hat über 1500 Webentwickler bezüglich ihrer Arbeitsweise befragt und nun die Ergebnisse hier unter einer CreativeCommons Lizenz veröffentlicht.
Besonders interessant: jQuery ist mit knappen 80% der absolute Platzhirsch im Bereich der JavaScript Bibliotheken.
Das nur 2% der befragten Entwickler den Internet Explorer als Browser ihrer Wahl angegeben haben, ist hingegen wenig überraschend.
Die kompletten Umfrageergebnisse inkl. eines Downloads der Rohdaten im CSV Format gibt’s hier:
The State of Web Development 2010 [webdirections]
Einen schnellen Überblick über den aktuellen Stand der HTML5 und CSS3 Browserunterstützung bekommt man mit dieser interaktiven Infografik. Schön anzuschauen und nützlich zugleich.
Kleines Osterei: Mal am Scrollrad der Maus drehen…
Eine perfekte Spielwiese für HTML und CSS bietet CSSDesk. Einfach direkt im Browser das HTML-Markup und die dazu gehörigen CSS Regeln eingeben und sofort das Resultat begutachten.
(via)
Von Interactive Logic kommt diese nützliche Vorlage zum Erstellen von Wireframes für Apple’s iPhone bzw. weitere mobile Geräte mit vergleichbarem Formfaktor:
iPhone Wireframe Vorlage als PDF oder im Visio Format
Übersichtliche Präsentation von Serviceplan über die Nutzung von sozialen Netzwerken in Deutschland. Obwohl der weltweite Marktführer »Facebook« in dieser Statistik fehlt, ist es dennoch interessant zu sehen, welch große Unterschiede doch zwischen den einzelnen Bundesländern bestehen. Weiterlesen »
So funktioniert CSS3 Schlagschatten(box-shadow) auch im Internet Explorer. Sogar ab Version 6!
Eine der interessantesten Neuerungen, die CSS3 für Webdesigner mit sich bringt, ist die Möglichkeit beliebigen Elementen einen Schlagschatten zu verpassen. Musste man früher mit Grafiken und HTML-Handständen einen hübschen Schatten basteln, so kann man das nun bequem per CSS erledigen:
.shadow {
-moz-box-shadow: 0 0 5px #222; /*Mozilla-basierte Browser (z.B. Firefox)*/
-webkit-box-shadow: 0 0 5px #222; /*WebKit-basierte Browser (z.B. Safari/Chrome)*/
box-shadow: 0 0 5px #222; /*CSS3 Standard*/
}
Wie man sieht, muss man für die verschiedenen Browser noch spezielle Regeln verwenden (sog. Vendor-Prefixes). Diese werden aber wohl in nicht all zu ferner Zukunft überflüssig werden. Daher macht es Sinn, die Definition ohne Prefix ans Ende zu stellen–somit erhält sie die höchste Priorität.
Der oben stehende Code funktioniert in allen modernen Browsern:
- Safari 3+
- Firefox 3.5+
- Opera 10.5+
Fehlt noch… der Internet Explorer, der selbst in der aktuellen Version 8 gerade mal so CSS2 auf die Reihe bekommt.
Was zuerst nach einem hoffnunglosen Unterfangen aussieht, kann recht praktikabel gelöst werden, durch den Einsatz des Microsoft Shadow Filters:
.shadow {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=0, Strength=3)
progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=45, Strength=2)
progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=90, Strength=3)
progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=135, Strength=2)
progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=180, Strength=3)
progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=225, Strength=2)
progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=260, Strength=3)
progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=305, Strength=2);
-moz-box-shadow: 0 0 5px #222; /*Mozilla-basierte Browser (z.B. Firefox)*/
-webkit-box-shadow: 0 0 5px #222; /*WebKit-basierte Browser (z.B. Safari/Chrome)*/
box-shadow: 0 0 5px #222; /*CSS3 Standard*/
}
Nicht sonderlich elegant, aber auf diese Weise kann man die CSS3 box-shadow Eigenschaft annähernd identisch im IE emulieren–ohne überflüssiges Markup und Grafiken. Die zusätzliche Eigenschaft »zoom« ist notwendig, um diversen Darstellungsfehler vorzubeugen.
Und so sieht das dann aus:
 CSS3 box-shadow im Firefox 3.6 |
 Box-shadow im Internet Explorer |
Erfolgreich getestet habe ich diese Methode im Internet Explorer 6, 7 und 8.
Weiterführende Links zum Thema »CSS3 box-shadow«:
- »box-shadow« Eigenschaft im W3C Spec
- Box-shadow, one of CSS3’s best new features
- Box Shadows – CSS3 Spielwiese/Codegenerator
Foto: http://www.flickr.com/photos/ranopamas/ / CC BY-ND 2.0
Marc Fennell erklärt kurz und bündig, warum Arial–das Helvetica-Plagiat von Microsoft–dem Original nicht ansatzweise das Wasser reichen kann. Sehr schön.
