1076170 - EOY 2014: Design MoFo email template

Status: RESOLVED WONTFIX

(Mozilla Foundation Communications :: Graphic Design, task)

Comment 1

[Sabrina Ng [:sabrina]]

Priority: P3
Dimensions/requirements: unknown

This will likely get recycled and stay simple. 

Do you know where it currently lives and who has access? or attach a screenshot with what needs to be changed.

Comment 2

[Andrea Wood [:andreawood]]

i'm adding Kelli to this bug, she can help dig out last year's template

Comment 3

[Kelli Klein]

Hey all! Last year we used 'Mozilla Wordmark - Mobile Optimized' as the template for our EOY campaign in BSD. It's a pretty standard one (really just our logo), so I think it's fine to reuse. I've pasted to code below in case you all needed that as well.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<style>

	.ExternalClass
	{
		width: 100%;
	}
	
	html, body
	{
		margin: 0px;
		padding: 0px;
	}
	
	.no_text_size_adjust
	{
		-webkit-text-size-adjust: none;
		-moz-text-size-adjust: none;
		-ms-text-size-adjust: none;
		text-size-adjust: none;
	}
	
	@media only screen and (-webkit-min-device-pixel-ratio: 0) and (max-device-width: 1024px) and (min-device-width: 768px)
	{
		div[class="mobiledevicesupport"]
		{
			min-height: 1024px;
		}
		div[class="mobiledevicesupport"]
		{
			width: 768px;
		}
	}
	
	@media only screen and (-webkit-min-device-pixel-ratio: 0) and (max-device-width: 1024px) and (min-device-width: 768px) and (orientation: landscape)
	{
		div[class="mobiledevicesupport"]
		{
			min-height: 768px;
		}
		div[class="mobiledevicesupport"]
		{
			width: 700px;
		}
	}
	
	@media only screen and (max-device-width: 480px)
	{
		div[class="mobiledevicesupport"] .max_width_on_mobile
		{
			width: 320px !important;
		}
		div[class="mobiledevicesupport"] .masthead_on_mobile
		{
			display: none !important;
		}
		div[class="mobiledevicesupport"] .masthead_bg_on_mobile
		{
			background-image: url(https://sendto.mozilla.org/page/-/ws_assets/email_images/banner_mozilla_wordmark-red.jpg);
			background-position: -58px -4px;
			background-size: 445px;
			height: 55px;
			background-repeat: no-repeat;
		}
		div[class="mobiledevicesupport"] .inset_on_mobile
		{
			width: 190px !important;
			padding-bottom: 20px !important;
			margin-left: 35px !important;
			float: none !important;
		}
		div[class="mobiledevicesupport"] .list_on_mobile
		{
			padding-left: 0px;
		}
		div[class="mobiledevicesupport"] .postcard_on_mobile
		{
			width: 270px !important;
			height: auto !important;
		}
                div[class="mobiledevicesupport"] .image_on_mobile
		{
			width: 270px !important;
			height: auto !important;
		}
		div[class="mobiledevicesupport"] .divider_shrinks_on_mobile
		{
			width: 270px !important;
			height: auto !important;
		}
		div[class="mobiledevicesupport"] .pagebottom_shrinks_on_mobile
		{
			width: 320px !important;
			height: auto !important;
		}
		div[class="mobiledevicesupport"] .top_padding_on_mobile
		{
			padding-top: 1em !important;
		}
		div[class="mobiledevicesupport"] .left_padding_on_mobile
		{
			padding-left: .25em !important;
		}
		div[class="mobiledevicesupport"] .right_padding_on_mobile
		{
			padding-right: .25em !important;
		}
		div[class="mobiledevicesupport"] .hide_on_mobile
		{
			display: none !important;
		}
	}

</style>
<div class="mobiledevicesupport">
<table class="max_width_on_mobile" border="0" width="100%" cellspacing="0" cellpadding="0" bgcolor="#f5f3f3">
	<tr>
		<td>
			<table class="max_width_on_mobile" border="0" width="620" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center">
				<tr>
					<td class="masthead_bg_on_mobile" colspan="11"><img class="masthead_on_mobile" src="https://sendto.mozilla.org/page/-/ws_assets/email_images/banner_mozilla_wordmark-red.jpg" alt="Mozilla" width="620" height="95" border="0" style="display: block;" /></td>
				</tr>
				<tr>
					<td class="hide_on_mobile" bgcolor="#f0eeee"><img alt="" border="0" height="1" src="https://sendto.mozilla.org/page/-/ws_assets/spacer.png" style="display: block;" width="2" /></td>
					<td class="hide_on_mobile" bgcolor="#e7e5e5"><img alt="" border="0" height="1" src="https://sendto.mozilla.org/page/-/ws_assets/spacer.png" style="display: block;" width="1" /></td>
					<td class="hide_on_mobile" bgcolor="#d7d5d5"><img alt="" border="0" height="1" src="https://sendto.mozilla.org/page/-/ws_assets/spacer.png" style="display: block;" width="1" /></td>
					<td class="hide_on_mobile" bgcolor="#c4c2c2"><img alt="" border="0" height="1" src="https://sendto.mozilla.org/page/-/ws_assets/spacer.png" style="display: block;" width="1" /></td>
					
					<td><img alt="" border="0" height="1" src="https://sendto.mozilla.org/page/-/ws_assets/spacer.png" style="display: block;" width="20" /></td>
					
					
					<td width="570"><br />
					<!-- END STATIONARY-->

Comment 4

[Erika Drushka]

Thanks Kelli. Can you clarify: is this a ticket we need to be working on, or are you fine to re-use what you pasted above?

Comment 5

[Kelli Klein]

Correct. We will be reusing this template. Thanks for double checking Erika!

Comment 6

[Erika Drushka]

Sweet! Closing this bug, then.