Pixelfans

Ein Jahr Pixelfans - was hat sich verändert?

geschrieben von Pawel

Es ist über ein Jahr her, das wir mit Pixelfans an den Start gingen. Carsten und ich hatten Lust mal ein paar Dinge auszuprobieren.

Neben einem alternativen Blogsystem war vor allem die Absicht über unsere Experimente rund um das Webdesign zu schreiben und diese im Blog auch gleich auszuprobieren. Auch das Blogdesign haben wir immer wieder verbessert. Ein Jahr später schauen wir noch einmal auf die Artikel und die Webentwicklung seither.

Transparenzeffekte

Unser erster Artikel beschäftigte sich mit den Transparenzeffekten. Die CSS3-Eigenschaft opacity hielten wir schon für gut verwendbar, da es es auch einen workaraund für den IE gibt. Mit CSS spart man sich viele Bilder und damit (unnötige) Requests.Ein Nachteil ist es aber, das damit alle Kindelemente die gleiche Transparenz erhalten. Darunter leidet u.a. auch die Lesbarkeit von Schriften.

Für das Design ist deshalb die Verwendung von rgba viel besser, da dieses auch von Opera seit Version 10 unterstützt wird. Man kann einfach Farbe und Transparenz definieren. Alles rund macht schließlich der Tipp von Eric Eggert.

Twitter und Flickr mit PHP

Die Nutzung der API‘s war Bestandteil mehrere Artikeln mit nutzbaren Beispielen. Wir halten seit PHP 5.2 das JSON-Format für gut verwendbar und verwenden jetzt eher eigene kleine Klassen für unsere Anwendungen, da wir ohnehin nur eine Handvoll von Funktionen benötigen.

@font-face

Bei pixelfans.de haben wir sofort auf @font-face gesetzt, was zunächst noch sehr experimentell war. Mittelerweile unterstützen es die meisten wichtigen Browser. Den größten Komfort bietet fontsquirrel mit vielen fertige einsetzbaren Sets. Mit dem (kommenden) Firefox kommt ein neues Fontformat.

Webstandardsmagazin

Der neue Stern am Magazinhimmel war uns zwei Artikel wert. Das Heft ist immer noch ein bisschen experimentell (eine Linkliste gehört einfach zum Artikel und nicht ins Netz), bietet aber viele Anregungen und ist jetzt (auch) Pflichtlektüre. Ein umfassender Artikel über SVG steht immer noch aus.

SVG

Viele Artikel (mehr als wir ursprünglich dachten) drehen sich um dieses Grafikformat. Die Unterstützung der Webbrowser wird immer besser und mit dem AmpleSDK und Googles svgweb kann es auch für Seiten eingesetzt werden, auf denen viele Nutzer mit dem IE vorbeikommen.

Von mit Javascript erzeugter SVG halte ich prinzipiell wenig. Was soll der Vorteil sein, die Grafik komplett mit Javascript zu erzeugen? DOM-Manipulation via Script macht da mehr Sinn, ohne Javascript sieht man wenigsten noch das Bild. Wir stellten ein Beispiel für ein valides xhtml-Dokument ohne Javascript  vor, dass zwei Vektorgrafiken inline einbettet und damit für IE und andere Browser Vektorgrafiken direkt in der Website ermöglicht..

Zum Geburtstag haben wir uns auch das nebenstehende Bild spendiert, was natürlich mit Inkscape entstanden ist.

Kategorie: Ideen , Layout , News | Trackbacks (0) | Permalink

HTML in E-Mails

geschrieben von Pawel

Die einen halten sie für gefährlich und überflüssig, andere lieben sie - E-Mails mit HTML. Da ich eine Zeitung auch lieber gestaltet lese (und nicht als Nur-Text auf einer Endlosrolle) finde ich E-Mails mit HTML völlig naheliegend. Zusätzlich erhalte ich häufig  E-Mail, die PDF-Anhänge erhalten, die dann meistens nur aus gestalteten Text und Bildern bestehen.

Mich hat aber bisher die unterschiedliche Darstellung in den verschiedenen Emailprogrammen abgehalten, mich näher damit auseinanderzusetzen. Ein nahender Geburtstag hat mich aber zum Umdenken bewogen.Mit meinen Kenntnissen und nicht zu hohen Ansprüchen, sollte sich doch ein kleiner Nenner finden lassen.

Idee

• Verwendung eines Bildes
• Ausrichtung des Bildes
• Textumfluss
• Texthervorhebungen (fett, kursiv, unterstrichen)
• Schmuckschrift
• Gestaltung mittels CSS

Im Vergleich mit den Möglichkeiten, die wir mittlerweile bei der Gestaltung von Webseiten haben, entspricht das einem Standard von vor 6-7 Jahren.

Recherche

Das email standard project ist schon einmal eine große Hilfe. Es bietet Vergleichswissen zu den wichtigsten E-Mailprogrammen. Zusätzlich haben die Macher einen Email Standards Project Acid Test entwickelt. Dieser ist von den Acdtests für Browser inspieriert und bietet die Möglichkeit sich eine Testmail schicken zu lassen, die es einem ermöglicht, die Unterstützung für CSS seines E-Mailprogrammes zu überprüfen. Die Seite von campaign monitor bietet eine Tabelle, die die Möglichkeit der Verwendung von CSS in den Mailprogrammen vergleicht. Insgesamt sah das für mein bescheidenes Vorhaben recht vielversprechend aus, bis mein Blick die Spalte von Outlook 2007 erspähte. Dieses Programm hat eine deutlich schlechtere CSS-Unterstützung als sein Vorgänger. Da kann sich der ambitionierte Entwickler wirklich in der Steinzeit fühlen.

Die Frage mit welchem Werkzeug ich denn die E-Mails gestalten sollte, stellte sich für mich als Thunderbirdnutzer natürlich nicht. Mozilla Thunderbird hat zwar keinen eigenen Editor, lässt sich aber schnell mit der Komponente EditHTML um diesen erweitern. Sie ist dann über das Formatmenü erreichbar.

Layout

Die Erstellung des Bildes wird hier nicht erläutert. Auf die Dateigröße habe ich nicht geachtet. Das Bild war sogar eher groß, um bei Programmen ohne CSS-Unterstützung die gesamte Breite einzunehmen. Ich verwende ausschließlich Styles im <head>. Thunderbird überrascht zunächst auch mit längst vergessenen Elementen wie <big> u.ä. und möchte unbedingt dem <body> eine bgcolor vergeben.

Hier mein Code, der durch Outlook 2007 leider nicht "kugelsicher" ist:

<head>
 <style>body{background-color: #f8fbf0; font-family: "Helvetica Neue", Verdana, Arial} img{border-width:3px; border-style:solid; border-color:#f8fbba; padding: 15px; background-color: #7498fd;float: left; height: 280px; width: 307px; margin: 5px} h1{color:#cc2626; font-size:390%; width:30%; float:right; margin: 10px} .script{width:20%; float: right;margin-top:-60px;font-size:350%;font-weight:700; color:#7498fd; font-family:  "Bickley Script", Chopsscript, "Comic Sans MS"} .kontakt {text-decoration:underline; font-weight:bold}</style>
</head>
<body bgcolor="#ffffff" text="#000000">
<h1>Einladung</h1>
<p>
<img alt="4 bunte Teetassen" title="for tea oder so..." src="mailbox://pfad">Okay, ich gebe zu,
dass ich sehr selten feiere. An bestimmten, runden Geburtstagen mache
ich aber immer mal eine Ausnahme.</p>
<p> ...</p>
<p>Viele liebe Grüße
<span class="script">Pawel</span>
</p>
<p><span class="kontakt">Hier noch einmal die Kontaktdaten:</span>
<br>
<strong>E-Mail:</strong>
<a href="mailto:">Adresse</a>
<br>
<strong>Telefon:</strong>
 ..</p>
</body>

Das Bild muss Bestandteil der Nachricht sein, da einige Programme aber auch Netzwerke ein nachladen von Bildern verhindern. Thunderbird bietet die Möglichkeit Nachrichten als HTML-Mail und als Nur-Text-Version zu verschicken, was i diesem Fall unbedingt genutzt werden sollte.

Über Feedback und eigene Erfahrungen würde ich mich freuen, wenn ich dabei kein Tabellenlayout lernen muss.

Kategorie: Layout | Trackbacks (0) | Permalink