Mailings


4
Feb 09

HTML mailings, let’s take it back 5 years

Dat we al met veel verschillende work-arounds in mailings rekening moesten houden was al bekend. Firefox in combinatie met Hotmail, IE die bepaalde tags niet snapte, geen CSS, wel CSS, noem maar op. Vanaf nu moeten we de design-klok ook nog eens zo’n 5 jaar terug zetten: Microsoft outlook 2007 laat geen background images meer in. Tot Outlook 2003 werd in mailtjes gebruik gemaakt door internet explorer, vanaf 2007 is dit echter Microsoft WORD geworden. Deze heeft erg veel beperkingen waarbij de missende ondersteuning van achtergrond plaatjes de meest vervelende is.

@DESIGNERS: Het enige wat nu nog ONDER tekst vlakken mag staan is een PUUR 100% kleur. (of zwart / wit natuurlijk :) )
@PROGRAMMERS: Onderstaand is nog een opsomming van de rest van de beperkingen in de nieuwe Outlook.

No animated GIFs
Other than Flash, animated GIF images are the only animation possibility available for HTML e-mail. However, in Outlook 2007 only the first frame of the animated GIF will render.

No background images
Workaround: use images, forget about gradient backgrounds and other niceties.

Margins for images (ex: ” img style=’margin: 5px’”) are ignored.
Workaround: (1) add white space to the image itself, (2) add padding to the table cell, or (3) if it is not in a table, put it inside a table cell.

“float” style is ignored.
Workaround: use “align=left/right” for images, but be mindful of missing margins (see above).

Align=”absmiddle” is ignored for images.
Workaround: none found so far – please recommend one.

Padding for P and DIV tags is ignored (ex: <p style=”padding: 10px 0 0 0;”>)
Workaround: use margins whenever possible: ex: <p style=”margin: 10px 0 0 0;”>

Paragraph width is ignored (ex: <p style=”width: 200px; border-top: 1px solid #999;”>).
Workaround: be creative, so in the example above you can use an image to create a line (some of us may be reminded the old days before CSS)

List styles are ignored: no images for bullets, no square bullets, no lists without bullets.
Workaround: close your eyes and count to 10. If you don’t want bullets to appear – use paragraphs instead of lists.

Padding for lists is ignored.
Workaround: use margins whenever possible.

Cell padding is acting up.
This is by far my favourite and I can’t quite grasp the cell padding concept of the new Outlook. You just have to see it to believe me, but sometimes, padding-top adds space on TOP of the cell, NOT INSIDE the cell, so that the borders on top of 2 neighbouring cells in the table are not on the same line. Vertical alignment does not help, setting cells to the same height does not help. Workaround: avoid tight situations where ever possible. Set same padding to all cells in a row or, if using images, add white space to the images themselves instead of cell padding.

Font styles set for the entire email in a DIV or SPAN are ignored inside tables.
Workaround: set font styles for each table inside <table> tag.

Tot slot: Happy designing & programming


4
Feb 09

MySQL en UTF8 Problematiek

Altijd al een crime geweest, maar nooit last mee gehad; is het plaatsen van special characters in de MySQL database. Tot voorheen maakte we ons hier niet zo druk over, zolang het bij de output op een pagina er maar gewoon uit kwam. Gebruik je echter geen pagina maar een CSV bestand als output; dan wordt het lastiger.

MySQL slaat speciale tekens standaard op een andere manier op, voorbeelden hiervan zijn bijvoorbeeld: ® = ®   â�¢ = ·   ë = ë   ï = ï   â��= ’

Uiteraard begrijpt Excel niet dat ë een ë is. Daarom moeten er een paar handelingen gebeuren om er voor te zorgen dat de tekens op de originele manier in de database gestopt moeten worden.

  1. Zorg ervoor dat de database EN je tabel staan ingesteld op de UTF8_UNICODE_CI collocatie.
    dit kan je checken door in PHPMyAdmin de volgende query te doen:
    SHOW VARIABLES LIKE ‘character_set_database’
     
  2. Zet bij de standaard DBConnect functie in je PHP script de volgende regels extra:
    $db_charset = mysql_query( “SHOW VARIABLES LIKE ‘character_set_database’” );
    $charset_row = mysql_fetch_assoc( $db_charset );
    mysql_query( “SET NAMES ‘” . $charset_row['Value'] . “‘” );

    Dit script zorgt ervoor dat alles op dezelfde manier de database in wordt geschreven als hoe de collocatie ook echt staat.

That’s it. Er is nog een tweede manier, maar deze is een stuk minder mooi. Voor elke $_POST die de database in gaat er een utf8_decode($_POST['whatever']) voor te zetten. Let er dan wel op dat je deze ook weer encode als je dit op een web pagina wil laten zien.

Excel snapt het echter ook allemaal nog niet helemaal bij het dubbelklikken op een geexporteerde CSV dump. Dit is op te lossen door in plaats van het bestand standaard te openen, een nieuw bestand te maken en: data -> externe gegevens importeren -> gegevens importeren (zorg er dan voor dat de import op UTF8 – 65000 staat!)

Aangezien Excel altijd last heeft met enters en dergelijke, kan je in phpMyAdmin beter kiezen voor de export naar XML. Open dit in Excel; en alles staat meteen zoals het hoort!

Meer hierover kan je hier vinden.

IMPORTEREN VAN CSV bestanden: Als de speciale tekens er niet uit zien (niet goed werken) – Selecteer dan bij het importeren “Latin1″.

Get Adobe Flash playerPlugin by wpburn.com wordpress themes