Newsletter width and viewport

hi all

i am coding a newsletter for mobile and desktops both.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>newsletter</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body style="background-color:#d1d3cf; font-family:Arial, Helvetica, sans-serif;">
<p align="center">20 June 2013, View in <a href="#">Browser</a></p>
<table border="0" cellspacing="0" cellpadding="0" align="center" style="background-color:#FFFFFF">
  <tr>
    <td align="center" style="background-image:url(images/logo_bg.gif); background-repeat:repeat-x"><img src="images/logo.jpg" alt="" /></td>
  </tr>

so i m using “viewport” meta tag for mobiles which work fine for me.

But the problem is i want to use “width:600px” on the <table> tag for only web browsers or email clients.

If i dont use “width:600px” then the newsletter opens fine on 320x480 mobile screen but takes full width on a web browser.

If i use “width:600px” then it exceeds the mobile screen width and doesnt fit on screen.

how can i use “width:600px” only for web browsers.

vineet

Hi

You could add a class to the table and apply the width via the class and then use a media query to change that width to 100% for smaller devices.

e.g.


.tableclass{width:600px}

@media screen and (max-width: 600px) {
  .tableclass {
   width:100%
  }
}

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width">
<style type="text/css">
.newsletter {
	width:600px;
	margin:auto;
	border:1px solid #000;
}
 @media screen and (max-width: 600px) {
.newsletter { width:100% }
}
</style>
</head>

<body>
<table class="newsletter">
		<tr>
				<td>Testing</td>
		</tr>
</table>
</body>
</html>

Usually though you would do that in reverse and use a mobile first approach but then you would need to add js for ie8 and under as they don’t underatsnd media queries.

You should avoid maximum scale in the meta tag for reasons mentioned in this thread.

Note that Email clients are a different kettle of fish altogether though and you;d be better off using a template from campaign monitor instead.

hi Paul

thanks for the reply and solution.

I have a question :
Does all the styles that are inside the <head></head> remain intact in the email clients.
Normally i use inline styles for newsletters.
So i would like to know your point of view whether its fine to use styles inside <head></head> and then call the classes inside the <table class=“newsletter”>.

Does all EMAIL CLIENTS support styles and classes which are inside <head></head>.

OR i should use inline styles for newsletter.

vineet

Hi,

You can’t really create a page both for email and for the web unless its a very simple page. Why would you do that anyway as your email campaign will have its own template and not really have anything to do with the web (unless you have a link to an online version in the email but then you would just create the normal web version).

As far as email support goes then all bets are off and very little normal css works. You have to create all your css inline and use tables for all positioning and margins. However some mobile email clients will read the media queries so they will work as long as you use !important to over-ride any inline styles.


 @media screen and (max-width: 600px) {
.newsletter { width:100%!important }
}

I usually put the css in the head and then use an online tool to “inline it”.

However, as I mentioned earlier you should download one of the campaign monitor templates and work from those as they have all the tricks and tips inside them to get them to work as best they can. Or use the builder to build a simple starting point and then you can modify the resulting code to suit your designs. At least download one of their templates just to have a look at how they have coded it as you wlil pick up a lot of tips.