Skip to content

Instantly share code, notes, and snippets.

@hteumeuleu
Created June 21, 2016 15:36
Show Gist options
  • Save hteumeuleu/90ca12ce07324e5076900d0a2abad35d to your computer and use it in GitHub Desktop.
Save hteumeuleu/90ca12ce07324e5076900d0a2abad35d to your computer and use it in GitHub Desktop.
Example of a non auto-scaled email on iOS 10
<!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=utf-8" />
<title>Fermeture de votre compte comptepro.service-public.fr</title>
</head>
<body style="margin:0px auto; padding:0px; font-family: Arial, Helvetica, Geneva, sans-serif; font-size:12px;" bgcolor="#d5d5d5">
<!-- Lien miroir -->
<center>
<table border="0" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td width="600" bgcolor="#ffffff" align="center" valign="middle">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #000000;">
<br />
Si le message ne s'affiche pas correctement,
<a href="###">voir en ligne</a>
.
<br />
<br />
</span>
</td>
</tr>
</table>
</center>
<!-- /Lien miroir -->
<!-- Header -->
<center>
<table border="0" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td width="150" bgcolor="#ffffff"></td>
<td width="300" height="55" bgcolor="#ffffff">
<img src="https://images.mperf.com/RAYM/05B/ActionsMail/0007O0/logo-sp.jpg" alt="Service-public.fr" width="300" height="55" style="border: 0; display: block;" />
</td>
<td width="150" bgcolor="#ffffff"></td>
</tr>
<tr>
<td colspan="3" width="600" height="20" bgcolor="#ffffff"></td>
</tr>
</table>
</center>
<!-- /Header -->
<!-- Accroche -->
<center>
<table border="0" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td width="600" height="20" bgcolor="#0c6ca8"></td>
</tr>
<tr>
<td width="600" bgcolor="#0c6ca8" align="center" valign="middle">
<h1 style="margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 20px; text-transform: uppercase; color: #efefef;">
<strong>Plus simple, plus pratique... <br />le nouveau compte é votre service !</strong>
</h1>
</td>
</tr>
<tr>
<td width="600" height="20" bgcolor="#0c6ca8"></td>
</tr>
<tr>
<td width="600" height="170" bgcolor="#0c6ca8">
<img src="https://images.mperf.com/RAYM/05B/ActionsMail/0007O0/icone-ordi.jpg" width="600" height="170" style="border: 0; display: block;" />
</td>
</tr>
</table>
</center>
<!-- /Accroche -->
<!-- Intro -->
<center>
<table border="0" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td colspan="3" width="600" height="20" bgcolor="#ffffff"></td>
</tr>
<tr>
<td width="50" bgcolor="#ffffff"></td>
<td width="500" bgcolor="#ffffff" align="center" valign="middle">
<h2 style="margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #000000;">
<strong>Créez dès à présent <span style="color: #0c6ca8;">un compte personnel sur service-public.fr</span>, l'espace unique d'information, d'orientation et de services.</strong>
</h2>
</td>
<td width="50" bgcolor="#ffffff"></td>
</tr>
<tr>
<td colspan="3" width="600" height="20" bgcolor="#ffffff"></td>
</tr>
</table>
</center>
<!-- /Intro -->
<!-- Points -->
<center>
<table border="0" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td rowspan="5" width="50" bgcolor="#ffffff"></td>
<td width="500" height="30" bgcolor="#efefef">
<img src="https://images.mperf.com/RAYM/05B/ActionsMail/0007O0/bloc-border-top.jpg" width="500" height="30" style="border: 0; display: block;" />
</td>
<td rowspan="5" width="50" bgcolor="#ffffff"></td>
</tr>
<tr>
<td width="500" bgcolor="#efefef" align="center" valign="middle">
<h3 style="margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 20px; text-transform: uppercase; color: #000000;"><strong>bénéficiez :</strong></h3>
</td>
</tr>
<tr>
<td width="500" height="20" bgcolor="#efefef"></td>
</tr>
<tr>
<td width="500" bgcolor="#efefef" align="center" valign="middle">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="440" align="center">
<tr>
<td width="200" height="20" bgcolor="#efefef" align="center" valign="middle">
<img src="https://images.mperf.com/RAYM/05B/ActionsMail/0007O0/point1.jpg" width="155" height="55" style="border: 0; display: block;" />
</td>
<td width="40" height="20" bgcolor="#efefef"></td>
<td width="200" height="20" bgcolor="#efefef" align="center" valign="middle">
<img src="https://images.mperf.com/RAYM/05B/ActionsMail/0007O0/point2.jpg" width="155" height="55" style="border: 0; display: block;" />
</td>
</tr>
<tr>
<td width="200" height="20" bgcolor="#efefef" align="center" valign="top">
<p style="margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #000000;">
D'un
<strong>fil d'activité personnel</strong>
<br />
<br />
</p>
</td>
<td width="40" height="20" bgcolor="#efefef"></td>
<td width="200" height="20" bgcolor="#efefef" align="center" valign="top">
<p style="margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #000000;">
D'un
<strong>espace confidentiel et sécurisé de stockage d'informations</strong>
<br />
<br />
</p>
</td>
</tr>
<tr>
<td width="200" height="20" bgcolor="#efefef" align="center" valign="middle">
<img src="https://images.mperf.com/RAYM/05B/ActionsMail/0007O0/point3.jpg" width="155" height="55" style="border: 0; display: block;" />
</td>
<td width="40" height="20" bgcolor="#efefef"></td>
<td width="200" height="20" bgcolor="#efefef" align="center" valign="middle">
<img src="https://images.mperf.com/RAYM/05B/ActionsMail/0007O0/point4.jpg" width="155" height="55" style="border: 0; display: block;" />
</td>
</tr>
<tr>
<td width="200" height="20" bgcolor="#efefef" align="center" valign="top">
<p style="margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #000000;">
D'un
<strong>porte-documents</strong>
<br />
<span style="font-size: 12px;">(dans lequel vous pouvez transférer vos documents enregistrés sur mon.service-public.fr)</span>
</p>
</td>
<td width="40" height="20" bgcolor="#efefef"></td>
<td width="200" height="20" bgcolor="#efefef" align="center" valign="top">
<p style="margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #000000;">
D'un
<strong>suivi simplifié de vos démarches</strong>
<br />
<br />
</p>
</td>
</tr>
</table>
</center>
</td>
</tr>
<tr>
<td width="500" height="20" bgcolor="#efefef"></td>
</tr>
</table>
</center>
<!-- /Points -->
<!-- Bouton -->
<center>
<table border="0" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td rowspan="3" width="50" bgcolor="#ffffff"></td>
<td width="145" height="30" bgcolor="#efefef">
<img src="https://images.mperf.com/RAYM/05B/ActionsMail/0007O0/bloc-border-bottom1.jpg" width="145" height="30" style="border: 0; display: block;" />
</td>
<td width="210" height="30" bgcolor="#0c6ca8">
<img src="https://images.mperf.com/RAYM/05B/ActionsMail/0007O0/bouton-border-top.jpg" width="210" height="30" style="border: 0; display: block;" />
</td>
<td width="145" height="30" bgcolor="#efefef">
<img src="https://images.mperf.com/RAYM/05B/ActionsMail/0007O0/bloc-border-bottom2.jpg" width="145" height="30" style="border: 0; display: block;" />
</td>
<td rowspan="3" width="50" bgcolor="#ffffff"></td>
</tr>
<tr>
<td width="145" bgcolor="#ffffff"></td>
<td width="210" bgcolor="#0c6ca8" align="center" valign="middle">
<a href="###" title="Créer un compte" target="_blank" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; text-transform: uppercase; text-decoration: none; color: #efefef;"><strong>créer un compte</strong></a>
</td>
<td width="145" bgcolor="#ffffff"></td>
</tr>
<tr>
<td width="145" bgcolor="#ffffff"></td>
<td width="210" height="30" bgcolor="#0c6ca8">
<img src="https://images.mperf.com/RAYM/05B/ActionsMail/0007O0/bouton-border-bottom.jpg" width="210" height="30" style="border: 0; display: block;" />
</td>
<td width="145" bgcolor="#ffffff"></td>
</tr>
</table>
</center>
<!-- /Bouton -->
<!-- Intro -->
<center>
<table border="0" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td colspan="3" width="600" height="20" bgcolor="#ffffff"></td>
</tr>
<tr>
<td width="50" bgcolor="#ffffff"></td>
<td width="500" bgcolor="#ffffff" align="center" valign="middle">
<p style="margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #000000;">
<strong>
Suivez toutes les évolutions de service-public.fr sur son blog :
<br />
<a href="###" title="2016.service-public.fr" target="_blank" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #0c6ca8;">2016.service-public.fr</a>
</strong>
</p>
</td>
<td width="50" bgcolor="#ffffff"></td>
</tr>
<tr>
<td colspan="3" width="600" height="20" bgcolor="#ffffff"></td>
</tr>
</table>
</center>
<!-- /Intro -->
<!-- Rappel -->
<center>
<table border="0" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td rowspan="3" width="50" bgcolor="#ffffff"></td>
<td rowspan="3" width="125" height="175" bgcolor="#ffffff" valign="top">
<img src="https://images.mperf.com/RAYM/05B/ActionsMail/0007O0/icone-rappel.jpg" width="125" height="175" style="border: 0; display: block;" />
</td>
<td width="325" height="30" bgcolor="#ffffff" valign="top">
<img src="https://images.mperf.com/RAYM/05B/ActionsMail/0007O0/pointille-top.jpg" width="325" height="30" style="border: 0; display: block;" />
</td>
<td rowspan="3" width="50" height="175" bgcolor="#ffffff">
<img src="https://images.mperf.com/RAYM/05B/ActionsMail/0007O0/rappel-bordure-droite.jpg" width="50" height="175" style="border: 0; display: block;" />
</td>
<td rowspan="3" width="50" bgcolor="#ffffff"></td>
</tr>
<tr>
<td width="325" height="115" bgcolor="#ffffff" align="left" valign="middle">
<p style="margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000;">
Mon.service-public.fr ferme le 01.07.16.
<br />
Transférez dès maintenant vos documents vers votre nouveau compte avant qu'ils ne soient définitivement supprimés.
</p>
</td>
</tr>
<tr>
<td width="325" height="30" bgcolor="#ffffff" valign="top">
<img src="https://images.mperf.com/RAYM/05B/ActionsMail/0007O0/pointille-bottom.jpg" width="325" height="30" style="border: 0; display: block;" />
</td>
</tr>
<tr>
<td colspan="5" width="600" height="20" bgcolor="#ffffff"></td>
</tr>
</table>
</center>
<!-- /Rappel -->
<!-- Signature -->
<center>
<table border="0" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td width="50" bgcolor="#bfbfbf"></td>
<td width="500" bgcolor="#bfbfbf" align="center">
<p style="margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #000000;">
<br />
<strong>L'équipe service-public.fr</strong>
</p>
<p style="margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #000000;">
<br />
<strong>Ce message a été envoyé automatiquement. Nous vous remercions de ne pas répondre.</strong>
<br />
Conformément à la loi "informatique et libertés" du 6 janvier 1978 modifiée, vous pouvez à tout moment demander à accéder, faire rectifier ou supprimer les informations personnelles vous concernant ou vous opposer à leur traitement par La DILA, opérant le site service-public.fr. Si vous ne souhaitez plus recevoir d'emails de la part de La DILA, vous pouvez vous
<a href="###" title="Se désinscrire" target="_blank" style="font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #000000;">désinscrire</a>
<br />
<br />
</p>
</td>
<td width="50" bgcolor="#bfbfbf"></td>
</tr>
<tr>
<td colspan="3" width="600" height="20" bgcolor="#bfbfbf">
<img src="https://images.mperf.com/RAYM/05B/ActionsMail/0007O0/footer-shadow.jpg" width="600" height="20" style="border: 0; display: block;" />
</td>
</tr>
</table>
</center>
<!-- /Signature -->
<img src="###" style="visibility : hidden;" border="0" width="0" height="0">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment