Zeilenumbrüche im HTML-Code

Freitag, 14. März 2008

Wer sauber arbeitet rückt seinen Code ein. Doch Vorsicht: Der IE fasst Tabs sehr sonderbar auf.
Wenn man z.B. eine Liste für sein Menü aufbaut und in dieser Form einrückt:

<div class="menu"><ul>
<li><a href="#">menupunkt1</a></li>
<li><a href="#">menupunkt2</a></li>
<li><a href="#">menupunkt3</a></li>
</ul>
</div>

wird schnell merken, dass der IE trotz padding:0 und margin:0 Abstände zwischen die Listenelemente setzt.
Diese wird man nur los indem man entweder alles in eine Zeile schreibt also:


<ul>
<li><a href="#">menupunkt1</a></li><li><a href="#">menupunkt2</a></li><li><a href="#">menupunkt3</a></li>
</ul>

Oder man mit PHP jede Zeile mit einem echo ausgibt (was im HTML-Quelltext das gleiche bewirkt) also so:


<ul>
echo'<li><a href="#">menupunkt1</a></li>';
echo'<li><a href="#">menupunkt2</a></li>';
echo'<li><a href="#">menupunkt3</a></li>';</ul>

Das gleiche Verhalten zeigt der IE bei Tabellen. Dort müssen die TD's in einer Zeile stehen, um Abstände zu vermeiden.

 

HTML-Newsletter – Was geht, was nicht?

Samstag, 8. März 2008

Newsletter haben schon lange nicht mehr den Ruf den sie einst hatten.
Die meisten landen im Spamfilter wieder andere werden gar nicht erst geöffnet. Was also muss ein Newsletter sein, damit er akzeptiert wird?

spam.jpgEin Newsletter sollte heutzutage niemandem mehr aufgezwungen werden, das nervt und bewirkt oft nur das Gegenteil vom gewünschten Resultat. Ein Internetnutzer sollte selber entscheiden dürfen welche Informationen er z.B. wöchentlich bekommen möchte. Niemand wünscht sich E-Mails mit dem Betreff "Mahnung" im Postfach, um dann Werbung von einer Glücksspielseite zu erhalten.

Also: "Informationen nur dem der sie auch will!"

Doch in welcher Form, ist die Frage die sich dann automatisch anschließt. Text oder doch HTML?
Textnewsletter haben den Vorteil, dass sie von jedem E-Mail Client "richtig" angezeigt werden, aber im Zeitalter von Web 2.0 soll auch ein Newsletter nett aussehen und nicht "nur" schwarz-weiß sein.

Natürlich muss die Form des Newsletters auch immer an die Informationen angepasst werden. Ein Newsletter eines Reiseanbieters wird ohne Fotos wohl kaum Wirkung erzielen, während ein Newsletter zum Thema Bücher auch gern Textbasiert sein darf. Auf den Inhalt kommt es eben an.

Doch nun zu den Richtlinien, die keinen Anspruch auf Vollständigkeit haben soll, aber einen kleinen Hinweis zu häufig auftretenden Problemen geben soll.

Die Größe

Ein Newsletter (sowohl Text als auch HTML) sollte nicht breiter als 400px sein, damit er auch im Internet, also bei gmx, web.de o.ä. angezeigt werden kann.

Die Technik

Wer sich nun für den HTML-Newsletter entschieden hat sollte nun einiges beachten, was sonst in der Webdesign-Produktion nicht auftaucht oder sogar verpönt wird.

Damit ein Newsletter in den gängigen E-Mail Clients (Outlook, Thunderbird usw.) richtig dargestellt wird sollte man auf
CSS-Styles gänzlich verzichten. Outlook kann externe CSS-Dateien gar nicht verarbeiten und Styles die im Header unter

<style type="text/css"> ... </style>

stehen werden auch nur selten erkannt.
Wenn Styles dann Inline!!!
Allerdings sollte man versuchen Styles die etwas mit Abstand zu tun haben zu vermeiden. Das heißt alles was mit Padding, Margin usw. zu tun hat wird von Client zu Client unterschiedlich interpretiert (oder auch gar nicht) und sollte vermieden werden.
Auch eine oft Fehlinterpretierte Anweisung ist "Border".

Tabellen statt Divs

Auch wenn es sich schlimm anhört, aber nur Tabellen werden von (fast) allen richtig interpretiert. Dementsprechend soltle der Newsletter mit Tabellen gelayoutet werden. Doch Vorsicht: Lotus Notes schafft nur eine Tabellentiefe-Verschachtellung von 3 Tabellen, alles was darüber hinausgeht wird nicht mehr interpretiert. Divs sollten nach Möglichkeit nicht verwendet werden, da viele Clients diese nicht interpretieren.

Texte

Textstyles werden zum Glück von den meisten Clients korrekt dargestellt, doch auch hier gibt es eine Änderung:
Statt p-Tags sollte man seine Texte mit font-Tags definieren. P-Tags werden z.B. von Notes nicht erkannt.

Wichtig zum Schluss: Outlook mag es gar nicht, wenn es noch Leerzeichen vor einem schließenden "td" gibt. Er bringt dort dann eine Zeile Abstand.
Heißt dass das td- Element direkt hinter das letzte Zeichen der Zeile gehört, um diese Abstände zu vermeiden

 

PhpMyVisits – Statistiken für jedermann

Montag, 3. März 2008

Ich perönlich habe vor einigen Tagen
phpmyvisites für mich entdeckt. Einfach, schnell und übersichtlich.
Wer seine Homepage statistisch erfassen möchte und ohne viel schnick schnack schnell eine Übersicht über "Besuchte Seiten" "Besuscher" und/oder "einmalige Besucher" haben will dem empfehle ich dieses nette Tool:

Es ist schnell installiert und man findet sich so schnell zurecht, als hätte man nie etwas andres gemacht. Neben den übelich Erfasungsmöglichkeiten bietet die neue Version 2.3 auch die Möglichkeit der generation einer Heatmap auf der Sichtbar wird wohin die meisten Benutzer klicken.

phpmyvisits.jpgMan kann sich die Statistiken per Mail zuschicken lassen oder bequem als RSS-Feed abonieren. Auch die Verwaltung mehrere Webseiten ist möglich.

Das ganze wird mit einem Javascript-Snippet in die eigene Seite integriert und schon kann die Erfasung losgehen.

Ich finds super einfach und super zu bedienen.

 

Links in der Druckansicht

Montag, 3. März 2008

Das Print-Design einer Website ist in manchen Fällen fast genauso wichtig wie das Screendesign. Doch in der Standardeinstellung werden Links nur mit Ihrem Namen gedruckt.
Es geht aber auch anders.
Man kann das attribut href aus einem Link filtern und hinter dem Namen ausgeben lassen, und das alles mit CSS. Die dafür zuständige Anweisung lautet:

a[href]:after {
content:" <"attr(href)">";
background-color:inherit;
font-style:italic;
size:75%;
}

Hier wird der Link der in href="" steht nach dem Namen auf das Papier gedruckt. Es erscheint also z.B.: "Der Blog von zyris.de und progchild.de <blog.zyris.de>"

Leider funktioniert diese Anweisung nur im FF und Opera. Der IE ignoriert die Anweisung.