Mobile responsive design not working for outlook
Question
I am working on an email template design for outlook. Need your support to optimize the design for mobile responsive. Attaching the image for the reference. I tried media query but it looks like internal CSS doesn't supported by the email template.
> <!DOCTYPE html>
> <html>
> <head>
> <meta http-equiv=Content-Type content='text/html charset=UTF-8' />
> <meta name=viewport content='width=device-width, initial-scale=1.0'/>
> <style>
> @media only screen and (max-width: 600px){
> td {
> display:table-row;
> padding-left:32px;
> height:100%;
> border:1px dotted red;
> text-align:center;
> position: relative;
> padding: 50%;
> }
> table{
> height:100vh;
> width: 100%!important;
> }
> .panel{
> width: 100%;
> margin-bottom: 15px;
> overflow-y: hidden;
> -ms-overflow-style: -ms-autohiding-scrollbar;
> border: 1px solid #ddd;
> }
> .panel > .table {
> margin-bottom: 0;
>
> }
> .panel > .table > thead > tr > th,
> .panel > .table > tbody > tr > th,
> .panel > .table > tfoot > tr > th,
> .panel > .table > thead > tr > td,
> .panel > .table > tbody > tr > td,
> .panel > .table > tfoot > tr > td {
> white-space: nowrap;
> display: block;
> width:100%;
> }
> }
> </style>
> </head>
> <body>
> <div class='panel'>
> <div class='heading' style = 'background-color:#0BF4CD; border-style:none;mso-line-height-rule: exactly;line-height:
> 30px;'> </div>
> <div class='panel-body' style='margin: 0;padding: 0;'>
> <table style='width: 100%; font-size: 16px;border-collapse:collapse;' border='1' bordercolor='#A9A9A9'
> cellspacing='0' cellpadding='0'>
> <tbody>
> <tr style='color:#000000'>
> <td style='padding-left:32px'>
> <strong>Customer Impact</strong>
> </td>
> <td style='padding:10px 0 7px 15px'>
> <span id='spanCustomer_Impact'>[[textarea:Customer_Impact]]</span>
>
> </td>
> </tr>
> <tr style='color:#000000'>
> <td style='padding-left:32px'>
> <strong>Notes</strong>
>
> </td>
> <td style='padding:10px 0 7px 15px'>
>
> <span id='spanReason_for_Notification'>[[textarea:Reason_for_Notification]]</span>
>
> </td>
> </tr>
> <tr style='color:#000000'>
> <td style='padding-left:32px' rowspan='4'>
> <strong>Timestamp</strong>
>
> </td>
> <td style='padding:7px 0 0 15px; border-bottom-style:hidden!important'>
>
> <strong>Notification Date/Time (EST):</strong>
>
> <span id='spanNotification_Time'>[[date:Notification_Time]]</span>
> </td>
> <tr style='color:#000000'>
> <td style='padding:7px 0 0 15px; border-bottom-style:hidden!important'>
>
> <strong>Start Date/Time (EST):</strong>
>
> <span id='spanStart_Date'>[[date:Start_Date]]</span>
> </td>
> </tr>
> <tr style='color:#000000'>
> <td style='padding:7px 0 0 15px; border-bottom-style:hidden!important'>
>
> <strong>End Date/Time (EST):</strong>
>
> <span id='spanEnd_Date'>[[date:End_Date]]</span>
> </td>
> </tr>
> <tr style='color:#000000'>
> <td style='padding:7px 0 7px 15px'>
>
> <strong>Expected End Date/Time (EST):</strong>
>
> <span id='spanExpected_End_Time'>[[date:Expected_End_Time]]</span>
>
> </td>
> </tr>
> </tr>
> <tr style='color:#000000'>
> <td style='padding-left:32px'>
>
> <strong>Expected Duration</strong>
>
> </td>
> <td style='padding:10px 0 7px 15px' >
>
> <span id='spanDuration'>[[string:Duration]]</span>
> </td>
> </tr>
> </tbody>
> </table>
> </div>
> <div class='footer' style = 'background-color:#0BF4CD; border-style:none;mso-line-height-rule: exactly;line-height:20px'> </div>
> </div>
> </body>
> </html>
As we know only inline css work with outlook. Is there any way for mobile responsive design for outlook and how to implement that? Can someone help me out for this design? I'm not much good in design. I need your support this.
1 answers
solution1
0 2020-04-08 00:07:20
You've got the right idea using tables, because Outlook desktop on Windows does not support floats. However, for Outlook mobile, I assume you are not talking about Outlook desktop. In that case, media queries should work, but only if the CSS is acceptable (however, some mobiles do not use embedded CSS either, such as Gmail utilised through IMAP).
You can try https://www.caniemail.com/ for specific advice on what is needed.
For the general approach, instead of a responsive approach that uses media queries, its best to rely only on inline CSS. You might like to try the hybrid fluid approach, as detailed here: https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919
The essential elements are to float using a div wrapper: <div style="display:inline-block;width:100%;max-width:300px;vertical-align:top">
There is also a fallback for Outlook, which does not support max-width as follows:
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
[column to go here]
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
[column to go here]
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.