Existe um equivalente de CSS max-width que funciona em emails HTML?

114

Estou tentando criar um e-mail em HTML que será exibido corretamente em todos os clientes de e-mail amplamente usados. Estou empacotando todo o e-mail em uma tabela e gostaria que ele tivesse uma largura de até 98% da largura disponível, mas não superior a 800 pixels. Como isso: <table style="width:98%; max-width:800px;">

Mas não estou fazendo assim, pois de acordo com este Outlook 2007 não suporta a propriedade de largura do CSS.

Em vez disso, estou fazendo isso: <table width="98%">

Existe alguma maneira de também definir uma largura máxima sem depender de CSS?

Tim Goodman
fonte
1
Eu atualizei a resposta aceita para a de @MarkNugent, uma vez que parece ter atraído um consenso - mesmo que tenha chegado 4 anos tarde demais para ser útil para mim. :)
Tim Goodman

Respostas:

224

Sim, existe uma maneira de emular max-widthusando uma tabela, proporcionando um layout responsivo e amigável ao Outlook. Além do mais, esta solução não requer comentários condicionais.

Suponha que você queira o equivalente a centralizado divcom max-widthde 350px. Você cria uma tabela, define a largura para 100%. A tabela possui três células em uma linha. Defina a largura do centro TDpara 350(usando o HTMLwidth atributo , não CSS) e pronto.

Se você deseja que seu conteúdo seja alinhado à esquerda em vez de centralizado, apenas deixe de fora a primeira célula vazia.

Exemplo:

<table border="0" cellspacing="0" width="100%">
    <tr>
        <td></td>
        <td width="350">The width of this cell should be a maximum of 
                  350 pixels, but shrink to widths less than 350 pixels.
        </td>
        <td></td>
     </tr>
</table> 

No jsfiddle, eu dou uma borda à mesa para que você possa ver o que está acontecendo, mas obviamente você não iria querer uma na vida real:

http://jsfiddle.net/YcwM7/

Mark Nugent
fonte
18
Esta é a melhor resposta aqui mesmo a todos ^^^. Ignore a resposta aceita e a resposta condicional.
Nick Manning
4
Só para economizar algum tempo de outra pessoa, é necessário pelo menos um desses elementos <td> vazios, ou então o <td> com o conteúdo se estenderá para preencher todo o <tr>. Mas esta é definitivamente a melhor solução entre as oferecidas.
Chris Strickland
2
@Phyllis Sutherland Você pode tentar remover o tamanho da imagem inline e substituí-lo por:style="max-width: 100%; height: auto; width: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;"
morespace54
5
tenha cuidado para não adicionar unidades à largura interna como eu fiz ou então não funcionará! ou seja, não faça largura = "350px"
magritte
3
@PhyllisSutherland encontrou uma solução para as imagens: <img src="file.jpg" "width="350" alt="" style="display:block;width:100%" /> litmus.com/community/discussions/…
cbron
34

Há um truque que você pode fazer no Outlook 2007 usando comentários html condicionais.
O código a seguir garantirá que a tabela do Outlook tenha 800 px de largura, não a largura máxima, mas funciona melhor do que permitir que a tabela se estenda por toda a janela.

<!--[if gte mso 9]>
<style>
#tableForOutlook {
  width:800px;
}
</style>
<![endif]-->

<table style="width:98%;max-width:800px">
<!--[if gte mso 9]>
  <table id="tableForOutlook"><tr><td>
<![endif]-->
    <tr><td>
    [Your Content Goes Here]
    </td></tr>
<!--[if gte mso 9]>
  </td></tr></table>
<![endif]-->
<table>
Shay Erlichmen
fonte
6
excelente sugestão, mas como é um seletor de id e não uma classe, você economizaria um pouco de digitação usando o
atributo
Isso é ótimo. Exceto por um problema, ao definir a largura, o Outlook não deixará o e-mail ficar menor do que as dimensões fornecidas. Ao não definir a largura, o e-mail se expandirá para a tela inteira. Escolha seu veneno :)
The Coordinator
13

A resposta curta: não.

A longa resposta:

Os formatos fixos funcionam melhor para emails em HTML. Em minha experiência, é melhor fingir que é 1999 quando se trata de e-mails em HTML. Seja explícito e use atributos HTML (largura = "650") sempre que possível nas definições de sua tabela, não CSS (estilo = "largura: 650px"). Use larguras fixas, sem porcentagens. Uma mesa com largura de 650 pixels é uma aposta segura. Use CSS embutido para definir propriedades de texto.

Não é uma questão de o que funciona em "emails HTML", mas sim a abundância de clientes de email e sua capacidade limitada (e às vezes deliberadamente no caso do Gmail, Hotmail, etc.) de renderizar HTML.

Diodeus - James MacFarlane
fonte
Sim, era o que eu esperava, mas pensei em perguntar.
Tim Goodman
35
Definir uma largura fixa de 650 fará com que seus e-mails tenham uma aparência péssima em clientes de e-mail móveis.
DrewB
6
-1: Parece terrível porque os dispositivos móveis têm dimensões relativamente pequenas no mundo real. Isso significa que, sem zoom e panorâmica, o texto em seus designs será ilegivelmente pequeno. Dê uma olhada no guia do Campaign Monitor Design responsivo de e-mail .
Karl Horky
1
-1 também porque acabei de lidar com isso em clientes mobile também e ter largura fixa era exatamente o meu problema.
Brian FitzGerald
7
O ano é 2015. Os dispositivos móveis estão por toda parte. Você está dizendo para esquecer os dispositivos móveis para a perspectiva estúpida? Eu digo, esqueça o panorama. E todos os outros produtos de merda da Microsoft.
refaelio
5

Um pouco tarde para a festa, mas isso resolverá. Deixei o exemplo em 600, pois é isso que a maioria das pessoas usará:

Semelhante ao exemplo de Shay, exceto que também inclui largura máxima para trabalhar no resto dos clientes que têm suporte, bem como um segundo método para evitar a expansão (consulta de mídia) que é necessária para o Outlook '11.

Na cabeça:

  <style type="text/css">
    @media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
  </style>

No corpo:

<!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<div class="maxW" style="max-width:600px;">

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td>
main content here
    </td>
  </tr>
</table>

</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->

Aqui está outro exemplo em uso: E -mails de confirmação de pedido responsivos para dispositivos móveis?

John
fonte
0

Esta é a solução que funcionou para mim

https://gist.github.com/elidickinson/5525752#gistcomment-1649300 , graças a @ philipp-klinz

<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
     <tr>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
        <td style="padding:0px;margin:0px;" width="560"><!-- max width goes here -->

             <!-- PLACE CONTENT HERE -->

        </td>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
    </tr>
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
</table>
Henry
fonte
Você poderia dar um exemplo mais conciso, há muitas coisas lá que não são necessárias para resolver a questão
EdL
A ideia da @EdL é que essa é a maneira mais concisa de tornar o e-mail amigável max-width. Essa coisa toda iria substituir <div style="max-width: ...px">...</div>. Para o e-mail em que eu estava trabalhando quando descobri essa essência, essa foi a única solução que fez as coisas parecerem certas no Outlook 2010, 2013 e 2016.
henry
[ o arquivo de imagem), geralmente resulta em larguras fixas.
EdL
Deixando isso como está porque não é meu código - estou apenas citando-o pela essência - mas fiz um wiki da comunidade. Acredito que seja necessário especificar explicitamente 0px paddings e margins, bem como 0 cellpaddinge cellspacing. É possível especificar line-heightque funcionaria como um substituto para font-sizepreencher os tempos heightnão respeitados (eu gostaria de testar em todos os se trdepois em todos os tds para ver exatamente onde é necessário). @EdL se você conseguir fazer uma solução mais leve funcionar tão bem como esta, seria incrível - poste aqui e no link principal
Henry