On HTML emails, what is best practice A) text sizing B) email width? - Webmaster General forum at WebmasterWorld - WebmasterWorld

Forum Moderators: phranque

Message Too Old, No Replies

On HTML emails, what is best practice A) text sizing B) email width?

What is best practise HTML

shiphen

1:00 pm on Mar 23, 2012 (gmt 0)

10+ Year Member

Hi

What is the best way:
A) to size ordinary text is in an HTML email(?)
B) what width should our emails be(?)
There is much debate in the office on this matter!

Backgound:
Many of our emails are sent at font size = 12 pixels - e.g. using

<font style="font-family: arial,helvetica,sans-serif; font-size: 12px;">

However when arrives is is being rendered in Outlook (2003) at just 7.5 points (which feels pretty darned small to me at least!)

We are currently using a fixed width of 600 pixels for our emails - but what with modern screen resolutions getting higher (particularly on the New iPad 3!)... it is tempting to go higher. Obviously if you too far an simply let the email splurge to full width then the user can end up with very wide lines, which can be v hard to read.

Also my client is promoting highly visual (fairly upmarket) products so images and exact layout are extremely important.

And the trouble with raising text size is that if we do keep the width at 600 pixels, there really isn't much room for the text - particularly if one is using more imaginative layouts with more than one column...

- What is 'best practise'?

- Have any of you guys done any A/B split testing experiment to discover what actually works best for you?

Cheers

J

StoutFiles

1:20 pm on Mar 23, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

-Don't used fixed width. Use percentages to accommodate different size screens. If you're worried about it being too wide, use css to set a max-width.

-I've never used a mail client that alters font size. Perhaps you can fix that problem in css as well.

body {font-size:100%;}
h1 {font-size:1em;}

shiphen

5:56 pm on Mar 23, 2012 (gmt 0)

10+ Year Member

> Don't used fixed width.
Do you mean for tables tags?

> Use percentages to accommodate different size screens.
I assume you do NOT mean table tags otherwise you will be wasting screen area on small email browser screens.
Perhaps you mean <TD> tags?

> If you're worried about it being too wide,
> use css to set a max-width.
OK, but how then do you control the width of columns and exact layout of images etc?

shiphen

6:01 pm on Mar 23, 2012 (gmt 0)

10+ Year Member

P.S. What a minute, I thought it was better to use <FONT> tags, rather than CSS for emails. No?

shiphen

6:43 pm on Mar 23, 2012 (gmt 0)

10+ Year Member

PPS.
Okay I've done a bit more reading.
This guy is saying if you want reliable results then use nested tables, and rather than CSS to control layout.

[sitepoint.com...]

StoutFiles

7:17 pm on Mar 23, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

"Do you mean for tables tags?"
Yes.

"Perhaps you mean <TD> tags?"
That as well. Set the table width at, say 95%. Inside the table, set the td width at a % as well. The point being is that the table will expand to the ratio of the viewing area, and not be fixed. Make an HTML page and then shrink/expand your browser viewing area to see how it works.

"OK, but how then do you control the width of columns and exact layout of images etc?"
It won't look exactly the same for every computer, that's the point. If you want it exact use exact measurements.

phranque

12:14 am on Mar 24, 2012 (gmt 0)

WebmasterWorld Administrator

10+ Year Member

Top Contributors Of The Month

don't assume images will be displayed - test your email with images off, using both an email client and a webb app.
use inline css.
make sure you include a plain text version.

shiphen

1:10 pm on Mar 24, 2012 (gmt 0)

10+ Year Member

Hi
> don't assume images will be displayed
Good point.

> test your email with images off, using both
> an email client and a webb app.

When you say "web app" rather than an email client, do you mean Gmail/Hotmail/Yahoo or a mobile phone "app" ?

J

phranque

5:47 am on Mar 25, 2012 (gmt 0)

WebmasterWorld Administrator

10+ Year Member

Top Contributors Of The Month

i meant gmail/hotmail but you make a good point - i typically use a mobile app to access gmail accounts since it's so hard to switch between accounts using a web browser.