sIFR tighter text control

In the world of web standards and deprecating web browsers sIFR fits in nicely as it supports these while allowing standard headings or text to be replaced with custom fonts and elaborate typefaces.

Whilst developing with sIFR there is a rule of thumb when combining the javascript and CSS. The call method for a sIFR object inherits the styles of the container element. As with most CSS styles from the parent are inherited in the child, so the same goes with sIFR. However, dispite using this rule you may want add special sIFR style to the javascript configuration.

'.sIFR-root { background: transparent; text-transform: uppercase; leading: -5; letter-spacing: -1; kerning: true; }'

Listed above are sIFR attributes which return tighter control over the actual flash text replacement. Line-height is replaced with leading and kerning is set to true. Letter-spacing is a numerical number and no unit extension is required. For more information on styles you can use in the sIFR call see this link below.

http://wiki.novemberborn.net/sifr3/Styling

Key word arguments which can be added to the javascript configuration such as:

  • fitExactly
  • forceWidth
  • tuneHeight
  • offsetTop
  • offsetLeft

sIFR.replace(neutradisplay, { selector: 'H1', wmode: 'transparent', fitExactly: true, forceWidth: true, tuneHeight: -5, css: [ '.sIFR-root { background: transparent; text-transform: uppercase; leading: -5; letter-spacing: -1; kerning: true; }' ] });

The full list is below can help create vertical rhythm within your website.

http://wiki.novemberborn.net/sifr3/JavaScript+Methods

Finally the font-size can be set by pixels, however the sIFR 3 Wiki suggest -

"When specified for the .sIFR-root class and given a px unit, this determines the actual font size sIFR uses to render the Flash movie. This prevents the text from scaling with the browser text. Think very, very hard about doing this, and then think again. When specified for other selectors, use the % unit to make the font size relative to the main font size. This only works when specified in JavaScript."

I have tended to set the font-size in the CSS class or id of the header tag which is to be replaced using sIFR. By setting up these attributes in the javascript configuration, you can add towards helping force text to display exactly as you wish on your website.

E-Newsletter HTML Emails – Getting yours to work in Hotmail, Gmail, Apple Mail, Outlook 2003 & Outlook 2007

This is a guide i wrote about a year and a half ago on some of the stuff relevant if you are needing to create email newsletters. Once again, a bit rough but read it and make what you will of it.

Problems encountered:

1: Outlook 2007 strips the body tag from all emails therefore any styles applied are removed.

2: Hotmail strips the head, title and body tags.

3: Hotmail adds text attributes such as font-size and line-height.

4. I have a rounded edge box and can’t get images to line-up.

Solutions:

1: No background images are allowed, other ways around must be accommodated either in design stage or when slicing up images.

2: Styles must be applied either inline (i.e. ) or inside the style tag below the body tag.

3. Reset these using inline css styles where needed. This will reduce margins on images and correct spacing.

4. Split the corners of the box into four corners. Align using table cells and apply inline styles to these table cells. Apply width and height values to cells. Use bgcolor on table cells where appropriate. Apply align attribute to images. Apply inline padding to your table cells to position and pad your inner content.

Best practices:

1: Wrap your whole email newsletter into a container table. Align center on the first table cell and set the width of the container table to 98%.

2: Sloppy code can be read as spam. Large CAPITALS, bright colours such as red, blue or green and use of 1x1 pixel transparent images all attract spam blockers attention. Use of spacer images all increase calls to the server and will increase download times.

3: Email Newsletters must use the screen real-estate thoughtfully. The top 500 pixels of any E-News design must have content and attract the attention of the reader. As MailChimp suggests - “Design for the preview pane of email applications. That means you’ve got about 500, 600 pixels tops for your email designs. If you think recipients will actually double click an email to view your message in full screen “to appreciate all its glory,” send us whatever you’re smokin.”

4:On email programs which block images automatically (inc. Outlook and Gmail), emails must be prepared not to be overly image heavy.

5: Create Text Only versions of HTML email newsletters. Use the letter ‘W’ 60 times across the top of your document to rule and show where to create hard returns.

Resources:

1: http://www.thinkvitamin.com/features/design/html-emails
2: http://mailchimp.blogs.com/blog/2006/01/im_a_web_design.html
3: http://www.alistapart.com/articles/cssemail/