Tablas son la unidad básica de construcción de nuestros emails. Debemos incluir estas propiedades para asegurarnos que van a ser interpretadas en su forma mas pura. También es mejor siempre declarar un valor para “aling” y “valign”
Siempre usa los 6 dígitos cuando necesites declarar un color en el CSS en línea y solo en formato hexadecimal
Ejemplo:
<td style=”color:#000000 font-size: 14px, background-color:#ffffff”>texto va aquí</td>
Texto y fuentes
Para declarar nuestras fuentes, es mejor siempre incluir todos los aspectos de tu fuente como propiedades CSS en línea. Nunca uses el elemento <FONT> o el elemento <p>.
Estas declaraciones deben ir n el elemento más inmediato del texto.
Ejemplo:
<td style="font-family:Arial, Helvetica, sans-serif; font-size: 17px; line-height:22px; color:#FFFFFF;">text va aqui</td>
Links:
Los programas de email tienden a resaltar links en el texto. Para prevenir eso, siempre debemos declarar en el estilo en línea, el color y el tipo de decoración de texto que necesitamos
Ejemplo:
<a href=”” style="text-decoration:none; color:#ffffff; text-decoration:underline”>link va aqui</a>
Mobile Links:
En dispositivos mobiles, texto que parezca una dirección, un teléfono o una fecha, va a ser resaltado como un link automáticamente. La solución es una mezcla de CSS y de HTML.
Ejemplo:
<td style="font-family:Arial, Helvetica, sans-serif; font-size: 17px; line-height:22px; color:#FFFFFF;">Estaremos en diciembre 28,2016.</td>
Solución:
<style>.ios_text a {color:#000000!important; text-decoration:none !important;}</style><td style="font-family:Arial, Helvetica, sans-serif; font-size: 17px; line-height:22px; color:#000000;">Estaremos en <span class=”ios_fecha”>diciembre 28,2016.</span></td>
Espacios entre tablas
Es recomendable usar una tabla con una imagen transparente para tener más control de los espacios entre tablas.
No soy troll, pero chequen el spelling del párrafo Texto y fuentes
Y para el tema de Mobile Links:
La clase tendría que ir en los estilos generales, no en la media querie pues de este modo te ahorras un par de estilos y matas tanto en la versión desktop como en móbil los links coloreados .ios_texta{} que yo modificaría esta clase y sería así .ios_texta { color: inherit; text-decoration:none !important; } y ahora toca envolver esas anclas en un span con el color que heredaría.
Y en el código final de Spacios entre tablas está mal desplegado, al igual que su título.
Te refieres al error datilográfico: </table> o hay un error semántico? Si es sintáctico seguramente ocurrió en el momento de copiarlo y se corrige.
Yo veo faltas ortográficas, tendrán que revisar el texto, por lo demás genial el curso. 😃
(Spacios = Espacios, mas = más por ej)
Hola, no entiendo una cosa en la sección de Mobile Links ¿no debería concordar el nombre de la clase? Es que veo que arriba se declara “ios_text” y en el span se llama “ios_fecha”.
Pues lleva esto 3 meses sin revisarse… está mal, sí…
4 años sin revisarse
<tr><tdalign="center"valign="top"><imgsrc="img/spacer.gif"width="50"class="w10"></td></tr></t```able> **esta bien ? ó deberia ser así:**
```<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><tdalign="center"valign="top"><imgsrc="img/spacer.gif"width="50"class="w10"></td></tr></table>```
