Imágenes de“fondo” y VML para Outlook

Clase 7 de 32 • Curso de Diseño HTML y CSS para Emails 2016

Resumen

Uno de los desafíos más complejos cuando programamos emails es usar Outlook, que es un software muy usado en las oficinas. Por esto, es importante aprender cómo utilizar imágenes. En este video te enseñaré cómo poner imágenes en este tipo de emails.

Luis Palomo

student•

¿Porqué todo el CSS está dentro de html? ¿No se puede crear un link a un archivo CSS cuando se trabaja para correos?

Carlos Cipagauta

student•

No se puede, los Emails no funcionan como páginas web, los emails deben llevar el css implícito, inline.

Luis Palomo

student•

Gracias! Ya terminé el curso :)

David Aguilera

student•

Me confundi un poco . comentaste en el video anterior que se usaria una plantilla que ya estar testeada en todos los sentidos. y ahora mencionas que este hack es para poner imagenes de fondo en outlook.

la pregunta es 1.- la plantilla anterior no sirve para realizar lo mismo que en esta explicacion. y 2.- se tiene que hacer una plantilla diferente para outlook cada que quieramos usar fondos en los emails?

Andreas Rutjens

student•

soy yo o se confunde todo el tiempo con filas y columnas???

Jorge Luis Paiva Huamán

student•

hay unas sentencias en el fragmento condicional: v:react ... v:fill ... v:textbox es html u otra sintaxis? Sigue aplicando en el 2021?

Juan Felipe Salamanca Gonzalez

student•

Hice una practica intentando ponerle mas cosas, podrían darme consejos sobre como mejorarlo ya sea el código o el diseño

codigo


<html>
  <body>
    <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; height:332px;">
    <v:fill type="tile" src="img/sydney.jpg" color="#000" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
      <table width="600" align="center">
        <tr>
          <td background="img/lambo.jpg" height="332">
            <table width="600">
              <tr>
                <td style="font-family: arial; font-size:30px; color:#FECD4B; font-weight:bold; text-shadow: #976300 1px 1px;">
                  <span> <img src="img/logo-lambo.png" alt="logo lambo" width="80" style="vertical-align: middle; margin-right: -5px;">Lamborghini</span>
                </td>
              </tr>
              <tr style="background: black; text-align: justify; opacity: 0.7;">
                <td width="20" style="font-family: Arial, Helvetica, sans-serif; font-size: 12px;">
                  <p style="padding: 10px 50px 20px; color: blanchedalmond;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit pulvinar scelerisque.<br>
                  Proin fringilla arcu sed arcu interdum, sed lacinia justo vestibulum. Fusce consectetur dignissim risus. Praesent non magna non urna posuere vestibulum. Nam interdum ullamcorper diam. Etiam ultrices nisl in libero placerat tempus.<br>
                  In imperdiet congue nisi, in commodo nibh interdum eu. Sed at purus dui. Curabitur dolor augue, pellentesque non orci in, imperdiet eleifend justo. Vestibulum tristique elit at viverra interdum.<br>
                  Integer at quam laoreet, dignissim est eget, dignissim libero. In tempus tellus in erat tincidunt, non feugiat magna porta.
                  </p>
                </td>
              </tr>
              <tr>
                <td width="20"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
     <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->

  </body>
</html>

David Leonardo Barrios Rodriguez

student•

Hola, hice el ejercicio con el archivo plantilla que nos dejaste en videos anteriores, y monte la imagen a un servidor e hice el ejercicio pero no me carga la imagen de fondo para este mail de Sidney y descargue el ejemplo del html que nos dejaste en este y tampoco funciona, que puede estar sucediendo.

Camilo G

student•

como alinear el texto en el medio de la IMG verticalmente hablando ?

si el default es top

Diego Forero

Team Platzi•

Puedes probar con vertical-align: middle

Antony C. Medina

student•

Si hablas de poner una imagen de fondo en un <td>, y dentro escribir, la opción es valign=“center” en el <td>, quedando así:

<td valign="center">

David Fernando Aros Palacio

student•

Este fue mi resultado Gracias!!

Alexander Valencia

student•

👍😎

German Yesid Rubiano Romero

student•

Hola @micposso, qué diferencia encuentras, apelando a tu experiencia, en usar la extensión Open in Browser que sugeriste, y la opción de Live Preview que trae como herramienta propia Brackets?

Rodrigo Burgos S.

student•

En realidad es como lo mismo, sólo que OIB, te abre el navegador y tu recargas, a diferencia de LP que re va recargando cada vez que guardas tu archivo.

Michael Mojica

student•

Segun litmus ** Outlook 2010 w7** y ** Outlook 2013 w7** no lo reconoce - de resto todas las plataformas mas top lo reconoce.

Michael Mojica

student•

rectifico, si se visualizan fue un fallo de mi parte. Perdona se me olvido repetir la ruta de publicacion en la imagen en hack jejeje… sorry. Se ve en todas sus versiones. como mola.

Camilo Tabares

student•

Pregunto:
¿A la propiedad background se le puede dar no-repeat?

Diego Forero

Team Platzi•

Respuesta corta Si.

Juan Navarro

student•

tengo una duda no se supone que todo lo que esta en  es un comentario como es que el siguiente código es interpretado por outlook
<!–[if gte mso 9]>
<v:rect xmlns:v=“urn:schemas-microsoft-com:vml” fill=“true” stroke=“false” style=“width:600px; height:332px;”>
<v:fill type=“tile” src=“img/sydney.jpg" color=“#000”/>
<v:textbox inset=“0,0,0,0”>
<![endif]–>

Diego Forero

Team Platzi•

Estos comentarios lo que impiden es que se muestren cosas en el navegador, pero el motor de render del navegador igual lee todo el contenido, por esto es que se usan para poner ciertas condiciones para forzar cosas en navegadores, sobre todo por Internet explorer.
Outlook tiene un motor de render para poder leer y pintar el html del correo electrónico que envias.

Josue Alejandro Torres Gonzalez

student•

Este código funciona en la plantilla que paso en la clase pasada?? agregándola dentro del Body?

Jesus Estevez Rodriguez

student•

Lo de crear tablas sobre tablas ahora se pueden utilizar el sistema grid para hacerlo de una forma mas eficiente ?

David Toca

student•

No, como vas a ver mas adelante muchos clientes de correo no lo soportan, esa es una de las razones que hacen complicado hacer codigo para correo.

Bryant Acero

student•

si la fuente no esta instalada, como la puedo incluir ?

Jose Sequera

student•

HTML te ofrece una manera:

<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">

y CSS te ofrece dos maneras:
#1

<style type="text/css">
    @import url('http://fonts.googleapis.com/css?family=Open+Sans');
</style>

<style type="text/css">
    @font-face{
        font-family:'Open Sans';
        font-style:normal;
        font-weight:400;
        src:local('Open Sans'),
            local('OpenSans'),
            url('http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
    }
</style>```


Ya luego las puedes llamar normalmente. Te recomiendo que uses más de una, que sean parecidas con el fin de cuidar tu diseño. En general todas estas formas están bajo los límites del cliente de email. Espero te funcione.

Bryant Acero

student•

Gracias por responder, estas formas son tradicionales web, alguna es la recomendada para correos ?

Harry Saenz Arias

student•

Saludos,
No entiendo porque pese a tener el código escrito exactamente igual al ejemplo la imagen me sale a la izquierda.

Cristina Albor Cepeda

student•

¿Cómo puedo hacer para que aparezca el boton de open in browser en el menu contextual? Me aparece instalado el plugin más no en el menú.

Harry Saenz Arias

student•

A mi me pasa igual

<html>
  <body>
    <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; height:332px;">
    <v:fill type="tile" src="img/sydney.jpg" color="#000" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
      <table width="600" align="center">
        <tr>
          <td background="img/lambo.jpg" height="332">
            <table width="600">
              <tr>
                <td style="font-family: arial; font-size:30px; color:#FECD4B; font-weight:bold; text-shadow: #976300 1px 1px;">
                  <span> <img src="img/logo-lambo.png" alt="logo lambo" width="80" style="vertical-align: middle; margin-right: -5px;">Lamborghini</span>
                </td>
              </tr>
              <tr style="background: black; text-align: justify; opacity: 0.7;">
                <td width="20" style="font-family: Arial, Helvetica, sans-serif; font-size: 12px;">
                  <p style="padding: 10px 50px 20px; color: blanchedalmond;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit pulvinar scelerisque.<br>
                  Proin fringilla arcu sed arcu interdum, sed lacinia justo vestibulum. Fusce consectetur dignissim risus. Praesent non magna non urna posuere vestibulum. Nam interdum ullamcorper diam. Etiam ultrices nisl in libero placerat tempus.<br>
                  In imperdiet congue nisi, in commodo nibh interdum eu. Sed at purus dui. Curabitur dolor augue, pellentesque non orci in, imperdiet eleifend justo. Vestibulum tristique elit at viverra interdum.<br>
                  Integer at quam laoreet, dignissim est eget, dignissim libero. In tempus tellus in erat tincidunt, non feugiat magna porta.
                  </p>
                </td>
              </tr>
              <tr>
                <td width="20"></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
     <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->

  </body>
</html>

<style type="text/css">
    @font-face{
        font-family:'Open Sans';
        font-style:normal;
        font-weight:400;
        src:local('Open Sans'),
            local('OpenSans'),
            url('http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
    }
</style>```


Ya luego las puedes llamar normalmente. Te recomiendo que uses más de una, que sean parecidas con el fin de cuidar tu diseño. En general todas estas formas están bajo los límites del cliente de email. Espero te funcione.

Imágenes de“fondo” y VML para Outlook

¡Espera pronto la actualización de este curso!

¡Espera pronto la actualización de este curso!

Bienvenido al curso

Bienvenidos

Un poco de historia del correo electrónico

Buenas Prácticas en el Diseño de Email

Configurando el Entorno de Trabajo para Email

Bases de desarrollo para Email

Buenas prácticas en plantilla de estilos para email

Imágenes de“fondo” y VML para Outlook

Imágenes de Alta resolución para Email

¿Cómo organizar tu CSS para email ?

Técnica de Stacking

Técnica de Spacers

Repaso de buenas prácticas para Email

Creando nuestro proyecto

Introducción al proyecto

Exportando nuestras imágenes desde Photoshop

Header de Email de Bienvenida

Responsive en Email de Bienvenida

Call to action en nuestro Email de bienvenida

Terminando el Header del Email

Construyendo el Hero de nuestro Email de bienvenida

Agregando elemento de 3 columnas en el email

Creando un Footer para nuestro Email

Creando un Mail Transaccional

Creando un email de promoción

Mailchimp y Testing con Litmus

MailChimp

Subiendo nuestro Email a MailChimp

Testing con Litmus

Conclusiones

Conclusiones

Complementos del curso

Como usar web fonts en email

Email HTML5 para video

Usando responsive email frameworks

Desafíos

Crear un email con 2 web fonts

Crear un email con Video