fivedoor-gists/email-shell-basic

## email-shell-basic

    <html>
    ======
    xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"
    Including a Vector Markup Language (VML) namespace declaration, to ensure  email will render any VML

    <head>
    ======
    <head>Yahoo App Android will strip this</head>
    https://github.com/hteumeuleu/email-bugs/issues/28

    <meta>
    ======
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    Use the latest (edge) version of IE rendering engine

    <meta name="x-apple-disable-message-reformatting"/>
    Responsive emails get auto-scaled in iOS10 & iOS11: Autoscaling inresponsive emails leads to emails appearing off-centered or zoomed out. To solve this, add “padding:0;” to the <body> tag and to disable autoscaling, use this tag
    https://blog.mailup.com/2019/01/rendering-emails/

    <o:OfficeDocumentSettings>
    ==========================
    Targets all OL clients to force lower DPI rate inside the code, helps prevent image scaling. you must include the VML declaration we covered above or this code will not work.
    https://www.courtneyfantinato.com/correcting-outlook-dpi-scaling-issues/
    https://www.emailonacid.com/blog/article/email-development/dpi_scaling_in_outlook_2007-2013/

    div[style*="margin: 16px 0"]
    ============================
    ANDROID CENTER FIX
    https://litmus.com/community/snippets/57-android-4-4-center-hack?utm_campaign=bestpractices_snippets&utm_source=litmusblog&utm_medium=blog
    https://litmus.com/community/code/4194-why-is-email-not-centered-on-android-4-4
    https://blog.jmwhite.co.uk/2015/09/19/revealing-why-emails-appear-off-centre-in-android-4-4-kitkat/
     https://emails.hteumeuleu.com/today-i-learned-about-mso-generic-font-family-85b0e4703079

    body {margin: 0 auto !important;}
    =================================
    https://litmus.com/community/code/4432-android-4-4-still-not-centering

    a[x-apple-data-detectors]
    =========================
    iOS BLUE LINKS

    a[href^="tel"], a[href^="sms"]
    =============================
    CLICKABLE PHONE NUMBERS

    MEDIA QUERIES
    =========================
    Targets Gmail
    u ~ div .full-wrap {min-width: 100vw;}

    Targets Gmail on Android:
    div > u ~ div .full-wrap {min-width: 100%;}

    https://litmus.com/community/discussions/6950-full-width-on-gmail-app-for-ios#comment-14991
    https://litmus.com/community/discussions/6950-full-width-on-gmail-app-for-ios#comment-13503

    <body class="body"
    =================
    Sed in combination with CSS - If targeting gmail only with:
    u + .body .gmail {}

    .cellpad
    ========
    JH Outlook margin fix

    WIDTHS
    ======
    - width in px within attribute for OL stability
    "When you have an image with width="100%", Outlook will display it at 100% size, regardless of any classes, !important marks, wrapping divs, tables or cells with finite widths defined. So when you add an image at double the size, it blows your email right out in Outlook."
    https://litmus.com/community/discussions/1007-outlook-image-sizes
    - width defined in CSS for retaining structure in OL 120+ dpi
    - width defined as percentage in CSS for fluid layout scalling in GANGA gmail app (where no CSS or media queries support)
    - max width added in img CSS for Outlook 2000-2003 (possibly more) to keep images set at 100% behaving


    ========================== / NOTES ==========================

-->


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head><!-- Yahoo App Android will strip this --></head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting" />
<!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->

<!--[if gte mso 9]><xml>
    <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
</xml><![endif]-->

<title>${1:title}</title>

<style type="text/css">
    .ReadMsgBody {width: 100%; background-color: #ffffff;}
    .ExternalClass {width: 100%; background-color: #ffffff;}
    body     {width: 100%; background-color: #ffffff; margin:0; padding:0; }

    body,
        table,
        td,
        a {
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
        }
        table,
        td {
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
        }
        img {
            -ms-interpolation-mode: bicubic;
        }
        img {
            border: 0;
            height: auto;
            line-height: 100%;
            outline: none;
            text-decoration: none;
        }
        table {
            border-collapse: collapse !important;
            border-spacing: 0;
        }
        body {
            height: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
        }
        * {
            margin: 0;
            padding: 0;
        }
        div[style*="margin: 16px 0"] {
            margin: 0 auto !important;
        }
        body {
            margin: 0 auto !important;
        }
        a[x-apple-data-detectors] {
            color: inherit !important;
            text-decoration: none !important;
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
        }
        a[href^="tel"],
        a[href^="sms"] {
            text-decoration: none;
            color: #30383d;
            pointer-events: none;
            cursor: default;
        }
        .mobile_link a[href^="tel"],
        .mobile_link a[href^="sms"] {
            text-decoration: default;
            color: #30383d !important;
            pointer-events: auto;
            cursor: default;
        }
        .black a {
            text-decoration: none;
            color: #30383d;
        }
        .cellpad {

        }

    @media only screen and (max-width: 640px)  {
                    .nomob { display: none !important; }
                    .deviceWidth {width:${2:deviceWidth}!important; padding:0;}
                    .center .cellpad {text-align: center!important;}
                    .width-100percent { width: 100% !important;}
                    .cellpad {padding-left: 5% !important; padding-right:  5% !important;}
            }

    @media only screen and (max-width: 479px) {
                    .nomob { display: none !important; }
                    .deviceWidth {width:100%!important; padding:0;}
                    .center .cellpad{text-align: center!important;}
                    .cellpad { padding-left: 5% !important;padding-right:  5% !important;}

                    u ~ div .wrapper {min-width: 100vw;}
                    div > u ~ div .wrapper {min-width: 100%;}
            }


         /*   TESTING  */
        table tr td {background-color:yellow !important;}
        table tr td table tr td {background-color:pink !important;}
        table tr td table tr td table tr td {background-color:orange !important;}
        table tr td table tr td table tr td table tr td {background-color:green !important;}
        table tr td table tr td table tr td table tr td table tr td {background-color:cyan !important;}

</style>
</head>


<body class="body" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#${1:bgColor}" style="margin:0;padding:0;min-width:100%;background-color: #${1:bgColor} !important;mso-line-height-rule: exactly; ">

<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;"><!-- Preheader message here --></div>

<!-- Wrapper -->
<table class="wrapper" width="100%" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#${1:bgColor}" style="background-color: #${1:bgColor} !important;width:100%">
    <tr>
        <td width="100%" valign="top" bgcolor="#${1:bgColor}" style="width:100%">


        </td>
    </tr>
</table> <!-- End Wrapper -->


</body></html>

	<html>
	======
	xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"
	Including a Vector Markup Language (VML) namespace declaration, to ensure email will render any VML

	<head>
	======
	<head>Yahoo App Android will strip this</head>
	https://github.com/hteumeuleu/email-bugs/issues/28

	<meta>
	======
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	Use the latest (edge) version of IE rendering engine

	<meta name="x-apple-disable-message-reformatting"/>
	Responsive emails get auto-scaled in iOS10 & iOS11: Autoscaling inresponsive emails leads to emails appearing off-centered or zoomed out. To solve this, add “padding:0;” to the <body> tag and to disable autoscaling, use this tag
	https://blog.mailup.com/2019/01/rendering-emails/

	<o:OfficeDocumentSettings>
	==========================
	Targets all OL clients to force lower DPI rate inside the code, helps prevent image scaling. you must include the VML declaration we covered above or this code will not work.
	https://www.courtneyfantinato.com/correcting-outlook-dpi-scaling-issues/
	https://www.emailonacid.com/blog/article/email-development/dpi_scaling_in_outlook_2007-2013/

	div[style*="margin: 16px 0"]
	============================
	ANDROID CENTER FIX
	https://litmus.com/community/snippets/57-android-4-4-center-hack?utm_campaign=bestpractices_snippets&utm_source=litmusblog&utm_medium=blog
	https://litmus.com/community/code/4194-why-is-email-not-centered-on-android-4-4
	https://blog.jmwhite.co.uk/2015/09/19/revealing-why-emails-appear-off-centre-in-android-4-4-kitkat/
	https://emails.hteumeuleu.com/today-i-learned-about-mso-generic-font-family-85b0e4703079

	body {margin: 0 auto !important;}
	=================================
	https://litmus.com/community/code/4432-android-4-4-still-not-centering

	a[x-apple-data-detectors]
	=========================
	iOS BLUE LINKS

	a[href^="tel"], a[href^="sms"]
	=============================
	CLICKABLE PHONE NUMBERS

	MEDIA QUERIES
	=========================
	Targets Gmail
	u ~ div .full-wrap {min-width: 100vw;}

	Targets Gmail on Android:
	div > u ~ div .full-wrap {min-width: 100%;}

	https://litmus.com/community/discussions/6950-full-width-on-gmail-app-for-ios#comment-14991
	https://litmus.com/community/discussions/6950-full-width-on-gmail-app-for-ios#comment-13503

	<body class="body"
	=================
	Sed in combination with CSS - If targeting gmail only with:
	u + .body .gmail {}

	.cellpad
	========
	JH Outlook margin fix

	WIDTHS
	======
	- width in px within attribute for OL stability
	"When you have an image with width="100%", Outlook will display it at 100% size, regardless of any classes, !important marks, wrapping divs, tables or cells with finite widths defined. So when you add an image at double the size, it blows your email right out in Outlook."
	https://litmus.com/community/discussions/1007-outlook-image-sizes
	- width defined in CSS for retaining structure in OL 120+ dpi
	- width defined as percentage in CSS for fluid layout scalling in GANGA gmail app (where no CSS or media queries support)
	- max width added in img CSS for Outlook 2000-2003 (possibly more) to keep images set at 100% behaving


	========================== / NOTES ==========================

	-->


	<!DOCTYPE html>
	<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
	<head><!-- Yahoo App Android will strip this --></head>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="x-apple-disable-message-reformatting" />
	<!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->

	<!--[if gte mso 9]><xml>
	<o:OfficeDocumentSettings>
	<o:AllowPNG/>
	<o:PixelsPerInch>96</o:PixelsPerInch>
	</o:OfficeDocumentSettings>
	</xml><![endif]-->

	<title>${1:title}</title>

	<style type="text/css">
	.ReadMsgBody {width: 100%; background-color: #ffffff;}
	.ExternalClass {width: 100%; background-color: #ffffff;}
	body {width: 100%; background-color: #ffffff; margin:0; padding:0; }

	body,
	table,
	td,
	a {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	}
	table,
	td {
	mso-table-lspace: 0pt;
	mso-table-rspace: 0pt;
	}
	img {
	-ms-interpolation-mode: bicubic;
	}
	img {
	border: 0;
	height: auto;
	line-height: 100%;
	outline: none;
	text-decoration: none;
	}
	table {
	border-collapse: collapse !important;
	border-spacing: 0;
	}
	body {
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	}
	* {
	margin: 0;
	padding: 0;
	}
	div[style*="margin: 16px 0"] {
	margin: 0 auto !important;
	}
	body {
	margin: 0 auto !important;
	}
	a[x-apple-data-detectors] {
	color: inherit !important;
	text-decoration: none !important;
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	}
	a[href^="tel"],
	a[href^="sms"] {
	text-decoration: none;
	color: #30383d;
	pointer-events: none;
	cursor: default;
	}
	.mobile_link a[href^="tel"],
	.mobile_link a[href^="sms"] {
	text-decoration: default;
	color: #30383d !important;
	pointer-events: auto;
	cursor: default;
	}
	.black a {
	text-decoration: none;
	color: #30383d;
	}
	.cellpad {

	}

	@media only screen and (max-width: 640px) {
	.nomob { display: none !important; }
	.deviceWidth {width:${2:deviceWidth}!important; padding:0;}
	.center .cellpad {text-align: center!important;}
	.width-100percent { width: 100% !important;}
	.cellpad {padding-left: 5% !important; padding-right: 5% !important;}
	}

	@media only screen and (max-width: 479px) {
	.nomob { display: none !important; }
	.deviceWidth {width:100%!important; padding:0;}
	.center .cellpad{text-align: center!important;}
	.cellpad { padding-left: 5% !important;padding-right: 5% !important;}

	u ~ div .wrapper {min-width: 100vw;}
	div > u ~ div .wrapper {min-width: 100%;}
	}


	/* TESTING */
	table tr td {background-color:yellow !important;}
	table tr td table tr td {background-color:pink !important;}
	table tr td table tr td table tr td {background-color:orange !important;}
	table tr td table tr td table tr td table tr td {background-color:green !important;}
	table tr td table tr td table tr td table tr td table tr td {background-color:cyan !important;}

	</style>
	</head>


	<body class="body" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#${1:bgColor}" style="margin:0;padding:0;min-width:100%;background-color: #${1:bgColor} !important;mso-line-height-rule: exactly; ">

	<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;"><!-- Preheader message here --></div>

	<!-- Wrapper -->
	<table class="wrapper" width="100%" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#${1:bgColor}" style="background-color: #${1:bgColor} !important;width:100%">
	<tr>
	<td width="100%" valign="top" bgcolor="#${1:bgColor}" style="width:100%">






	</td>
	</tr>
	</table> <!-- End Wrapper -->


	</body></html>