CSS Support von Thunderbird, Gmail und Co. bei HTML-Newslettern

Email Standards ProjectNewsletter sind für viele Firmen ein wichtiger Bestandteil ihres Marketing. Sie sorgen für lang anhaltende Kundenbindungen und sind ein effizientes Mittel zur Neukundengewinnung. Ziel von Newslettern ist das "emotionale Erreichen" des Abonnenten, mit einen eventuelle daraus resultierenden Kauf eines Produktes oder einer Buchung einer Reise. Diese Emotionen werden, nicht unerwartet, mehr durch Bilder als durch Text geweckt werden. Ein Frage die mit jeder Erstellung von Newslettern einhergeht, ist die der Art der Umsetzung. Text oder HTML. Aus Sicherheitsgründen entscheiden sich viele User für den ausschließlichen Empfang von Text-Mails. Wenn seitens eines Kunden allerdings ein HTML-Newsletter für seine Kunden in Auftrag gegeben wird, gibt es wie in der Entwicklung für Webseiten, die Aufgabe die zahlreichen Mail-Clients und Mail-Services bei der Umsetzung zu berücksichtigen. Der wichtigste Punkt hierbei ist, die fehlende bzw. unzureichende Unterstützung von Webstandards wie CSS.

 (weiter)

Firefox 3, Safari 3.1.2, Opera 9.5 und Co. im Acid3-Test

Acid3-TestUm den Fähigkeiten der Browser(hersteller) noch ein wenig mehr über die Schulter zu schauen, folgt nach dem Ausblick auf die Ladezeiten der bekanntesten JavaScript-Frameworks, ein Ausblick auf die Fähigkeiten der Browser Webstandards korrekt zu interpretieren. Grundlage des Ausblickes ist der Acid3-Test. Diesem liegt ein prozentualer Counter zugrunde. Dieser am Ende erreichte Wert steht für Anzahl der bestandenen Einzeltests (CSS, DOM, JavaScript, ...). Aber nicht nur das Bestehen aller 100 Einzeltests reicht zum Bestehen des Tests aus, sondern auch die Darstellung muss der Referenz-Rendering des Acid-Tests (siehe Abbildung) entsprechen. Die tabellarische Übersicht birgt in Sachen korrekter Interpretation der Webstandards allerdings keine wirklichen Überraschungen.

 (weiter)

Ladezeiten von Firefox 3, IE7, Safari 3.1.2 und Opera 9.5 im Test

Slickspeed Selector TestIn den letzten Tagen haben viele neue Browser(versionen) den Weg auf die heimischen und dienstlichen Rechner gefunden. Viele von Ihnen werden werden von den jeweiligen Anhängern oft über den grünen Klee gelobt. Ob diese Vorschusslorbeeren vor allem in Sachen Geschwindigkeit gerechtfertigt sind, kann bspw. mit einer Testumgebung von MooTools, dem Slickspeed Selector Test, getestet werden. Hierbei werden die unterschiedlichen Ladezeiten der Frameworks wie Prototype, jQuery, MooTools, Dojo, YUI, bezüglich CSS Selektoren abgefragt. Die Ergebnisse variieren zwar, sind aber gute Anhaltspunkte für einen schnelleren oder eher langsameren Browser. Das sich die Ladezeiten doch recht gravierend unterscheiden, dürfte letztendlich nicht wirklich überraschend sein. Teilnehmende Browser auf einer Windows Vista Plattform sind: Firefox 3.0, Opera 9.5, IE7 und Safari 3.1.2

 (weiter)

Tutorial-Buch für CSS-Design zu gewinnen

CSS-Design. Die Tutorials für EinsteigerVerlosungen und insbesondere die von Büchern werden immer häufiger und auch der Webstandardblog macht hiervor nicht halt. Allerdings aus einem ganz besonderen Anlass. Mein erstes Buch "CSS-Design - Die Tutorials für Einsteiger" ist nach monatelanger Arbeit endlich fertig! Aber nun zum eigentlichen Thema: Die Leser und Kommentatoren des Webstandardblogs haben in den letzten Jahren dazu beigetragen, dass dieser Blog seinem anfangs gesteckten Ziel näher kommt, Webstandards im deutschsprachigen Raum bekannter zu machen und Lesern eine Diskussionsplattform zu bieten. Das Buch ist hierbei nur ein weiterer Schritt und genau aus diesem Grund soll eines der ersten Exemplare an Euch verlost werden. Denn das Webstandard-Team möchte von Euch wissen, welches Thema Euch momentan in Sachen Webentwicklung / Webdesign am meisten beschäftigt. Dazu solltet ihr in einen Kommentar zu dem jeweiligen Thema verfassen und mit einem Link zu einem Artikel oder auch Tutorial verlinken.

Am Ende der Verlosung, die übrigen bis zum 15.Juli 2008 läuft, wird via Zufallsgenerator einer der Teilnehmer ausgewählt. Alles weitere wird dann per Mail geklärt. Also beim Kommentieren nicht vergessen eine entsprechende E-Mail-Adresse anzugeben! Die bis zum letzten Tag verlinkten Beiträge aller Teilnehmer, werden dann in entsprechende Themengebiete zusammengefast und kategorisiert. So haben am Ende alle Teilnehmer eine hoffentlich sehr interessante Link-Sammlung zu lesenswerten Beiträgen zu den Themen Webentwicklung / Webdesign. Vorteil dieser Variante ist es, dass die Themen unter verschiedenen Gesichtspunkten (Know-How, Interessensgebiete, etc.) betrachtet und diskutiert werden. Bedingungen gibt es, bis auf die Orientierung an den vorgegebenen Themengebieten und der E-Mail-Adresse nicht. Das Webstandard-Team freut sich auf Eure Artikel und wünscht allen Teilnehmern viel Erfolg beim Gewinnspiel!

Update 30.06.2008:Da bis zum heutigen Tag von den Kommentatoren lediglich einer (!) alle Bedingungen erfüllt hat, nämlich Artikel zu den angegebenen Themen ab dem 18.06.2008 inklusive korrekter E-Mail Adresse zu verfassen, werden die Teilnahmebedingungen verändert. Bis zum 15.Juli 2008, dem Ende des Gewinnspiels, muss nun nur noch ein Kommentar inklusive eines Links zu einem Artikel zu den jeweiligen Themen abgegeben werden.

Update 16.07.2008:Gewonnen hat der Kommentar Nummer 12 von Biggi. Herzlichen Glückwunsch! Nr.12 daher, weil der Doppelkommentar von Frank und unserer natürlich nicht mitzählen. Allen anderen sei gesagt, dass das nächste Gewinnspiel eines Buches bereits in Planung ist.

Webentwickler gesucht

Warum den Webstandardblog nicht dazu gebrauchen, einem Leser oder dem Leser eines Lesers zu einem interessanten Job zu verhelfen bzw. die Chancen darauf zu erhöhen. Die Leser dieses Blogs werden mit bekommen haben, dass in der rechten Marginalspalte seit einigen Tagen eine vakante Position eines Webentwicklers der yeebase media solutions GbR offeriert wird. Die yeebase media solutions GbR sucht einen motivierten und erfahrenen Webentwickler für Ihr Entwicklungsteam, mit einer sofortigen Festanstellung in Hannover. Wer also jemanden kennt, der im Raum Hannover noch auf der Suche nach einem Job ist und für den AJAX, XML und Rails oder auch PHP keine Fremdwörter sind, könnte bald Teil eines dynamisch wachsendes Medien-Unternehmens mit jeder Menge Tatendrang werden. Wer dazu beitragen möchte, dass vielleicht das (Berufs)Leben eines seiner Leser oder Bekannten eine interessante Wende nimmt, kann ja ebenfalls auf dieses Stellengesuch verweisen. Es werden im übrigen auch Praktika und Ausbildungsplätze vergeben!

Wir wünschen allen Bewerbern viel Erfolg!

Eye Tracking, Nutzerverhalten durch Feng Gui besser verstehen

HeatmapDas Verhalten von Webseitenbesuchern während des Besuches auf einer Webseite zu erkennen und verstehen ist nicht erst seit kurzem eines der Ziele, welches man sich bei jedem Webprojekt stellt. Vor und während der Projektplanung, insbesondere aber nach der Projektumsetzung wird analysiert was zu verbessern bzw. zu optimieren wäre. Ein Beispiel für eine solche Anwendung ist ClickTale, eine Applikation die es ermöglicht mittels JavaScript Klicks, Mausbewegungen oder Scrollen des Besuchers der Webseite zu erfassen und auszuwerten. Ein andere Anwendung ist crazyEgg. Interessantestes Feature dieser Anwendung ist die Darstellung des Besucherverhaltens durch eine Heatmap (rechter Bereich der Abbildung). Diese bietet eine farbliche Visualisierung aller angeklickter Links innerhalb der Webseite. Voraussetzung hierfür ist, dass man ein kleines Websitetracking-Skript innerhalb der Seite integriert. Das es aber auch ohne die Implementierung von JavaScript auf das Nutzerverhalten schließen kann, zeigt eine kleine aber feine Anwendung deren Resultat die hier angezeigte Abbildung ist.

 (weiter)

CSS3 Features für den Internet Explorer zugängig machen

Das vorgestern angesprochene Skript von Dean Edwards beinhaltet neben der Lösung der PNG-Problematik auch weitere interessante Ansätze, um Unzulänglichkeiten des IE, auch in Version 7, zu beheben. Dazu muss lediglich ein Upgrade des JavaScriptes durchgeführt werden ( Download von IE8.js ). Dieses beinhaltet dann u.a. Lösungsansätze für min-height und max-height, die allerdings bereits in der 7er Version des Skriptes angeboten werden. Interessant sind aber vor allem die Lösungsansätze für CSS Selektoren. Um diese Möglichkeiten etwas bildhafter zu gestalten, verwenden wir an dieser Stelle die leicht modifizierte Tabelle eines früheren Artikel zum Thema "Der Einsatz von Tabellen in Webseiten".

 (weiter)

Alpha-transparente PNG-Grafiken auch für den IE kleiner Version 7!

IE ohne TransparenzTransparenzen in Bildern und Grafiken für den IE kleiner der Version 7 darzustellen zeigt, ein nicht ganz unbekanntes Problem. Gerade bei Grafiken die sich wie die Abbildung über wechselnden Hintergrundfarben oder Farbverläufen befinden, ergibt dies ein oft unansehnliches Bild. Zur Lösung dieses Problems gibt es wie so oft, mehrere Ansätze. Da gerade bei den Suchanfragen oder direkten Anfragen an das Webstandard-Team, nach einer solchen Lösung gefragt wird, wollen wir an dieser Stelle auf ein kleines aber feines JavaScript hinweisen, welches von Dean Edwards entwickelt wurde. Neben vielen anderen Features die dieses Skript ermöglicht, ermöglicht der Download des Skriptes unter der zusätzlichen Verwendung einer transparent Grafik im GIF-Format, eine optimale Darstellung alpha-transparenter PNG-Grafiken in allen IE-Versionen kleiner der Version 7.

 (weiter)

625 helpful links for webdesigners

for Web designersAuf eine noch relativ neue Anlaufstelle in Sachen Linksammlungen sind wir im CandyCollege Blog aufmerksam geworden. Die dort vorgestellte Webseite www.forwebdesigners.com bietet aktuell 625 Links zu Webseiten und Weblogs zu Themengebieten wie CSS, Ajax, Fonts, Flash, Photos, Inspirationsquellen, Iconsammlungen und vielem anderen mehr. Die einzelnen Quellen dieser Rubriken, können zudem von der Usern bewertet werden und können je nach Beurteilung, in der Popularität steigen oder fallen. Alles in allem eine Linksammlung, die in jeden Feedreader gehört, um somit in Sachen Neuvorschlägen immer auf dem laufenden zu bleiben.

 (weiter)

Photoshop vs. Illustrator, der Weg zum eigenen RSS-Logo

Logo via PhotoshopDa allein die Position eines RSS-Logos nicht ausschlaggebend für die Wahrnehmung durch die User ist, sollte auch die gestalterische Seite entsprechend berücksichtigt werden. Die folgenden zwei Tutorials zeigen, dass der Weg zum Ziel wie gewohnt über verschiedene Wege erreicht werden kann. Sie zeigen, dass in wenigen Arbeitsschritten dein eigenes Badge (zu dt. „Abzeichen“) erstellt werden kann. Bei der Umsetzung eines solches Abzeichens, gibt es die Möglichkeit dies pixelgenau via Photoshop zu erstellen oder vektorbasiert mittels Illustrator.

 (weiter)