Cómo crear un correo electrónico HTML receptivo

1. Vista previa el proyecto final: Hola, soy Chris Converse, y en este curso vamos a crear un diseño de correo electrónico HTML sensible con un diseño bastante complejo que se adaptará a diferentes tamaños de pantalla. Ahora, considerando que los clientes de correo electrónico más antiguos requieren usar diseños basados en tablas, te mostraré estrategias para hacer un diseño basado en tablas que sea receptivo. Y esta técnica renderizará aceptablemente en más de 30 de los clientes de correo electrónico basados en aplicaciones web y nativas más populares de hoy en día. Y otra característica del diseño que vamos a construir es su capacidad para degradarse con gracia en el correo electrónico más antiguo. Los clientes diseñarán esto con gráficos de fondo alrededor de las esquinas y sombras, pero aplicarán estos elementos de tal manera que no sacrifiquen la integridad de los diseños si no son soportados en ciertos clientes de correo electrónico. Entonces espero que este curso te suene interesante, y si es así, empecemos 2. Acerca de los archivos de ejercicio: Ahora, cuando descargues el bios de ejercicios, van a haber cuatro soportes dentro de ahí dentro de una carpeta. Uno es un iniciador. Archivo Html. Este es un documento HTML bien formateado, y tengo esto aquí solo para asegurarme de que todos estamos empezando desde el mismo punto de partida Dentro de las plantillas aparte están los archivos fuente Photoshopped. Por lo que si quieres seguir creando los gráficos y el capítulo Photoshopped, puedes usar estos archivos. También puedes usar estos para modificar el diseño de tu proyecto a medida que pasas por el curso dentro de una Folder tres es una serie de fragmentos. Vamos a estar recubriendo a mano todo lo que es el núcleo del curso, pero cualquier cosa ajena como diseño extra, características o contenido. Vamos a cortar, pagar parte del contenido desde dentro de una carpeta tres dentro de una carpeta cuatro es un archivo de video con un marco de póster de video. Vamos a estar usando estos más adelante en el dedo del pie del curso. Mira cómo podemos incorporar multimedia a nuestros correos electrónicos. Entonces ahora que estamos familiarizados con los archivos de ejercicios, empecemos a construir nuestro correo electrónico 3. Cómo establecer expectativas sobre el correo electrónico HTML: Ahora, antes de que empecemos en este curso, quiero establecer algunas expectativas. Quiero establecer expectativas para ti y este curso en particular y darte alguna información que puedas compartir con tus clientes sobre el establecimiento de sus expectativas. Con el correo HTML, hay algunas buenas noticias y malas noticias. Ahora la mala noticia es que los correos electrónicos HTML no son páginas Web. Esto se debe a que la cantidad de HTML y CSS soportados en cada cliente de correo electrónico varía, y en algunos casos, que las técnicas de diseño receptivas iban a estar agregando a nuestro proyecto tendrán un efecto negativo en algunos clientes de correo electrónico basados en Web. Ahora hay algunas noticias apenas bien. En este momento, mayoría de las empresas de distribución de correo electrónico recomendarán que su correo electrónico siga siendo extremadamente sencillo. Muchas veces estas sugerencias serán que guardes tu email toe una columna. Simplemente flotas o una línea imágenes a la derecha y a la izquierda y permiten que el contenido fluya. Y si bien esta estrategia hará que tu correo electrónico funcione en el mayor número de clientes, va a ser una venta difícil para tu diseño. Clientes que quieran tener un email que sea mucho más interesante. Y ahora por las buenas noticias. Te voy a guiar por un proceso paso a paso para crear un diseño de email mucho más complejo , un email diseñado. Esto consiguió una estrategia para degradar con gracia a los clientes de correo electrónico más antiguos y al mismo tiempo incorporar técnicas de diseño responsive para que pueda adaptarse a tamaños de pantalla más pequeños. Y para el final del curso tendrá un correo electrónico responsivo que funcionará en dispositivos de pantalla pequeña . Ah, todo Siris de aplicaciones de correo electrónico de escritorio e incluso clientes de correo electrónico basados en Web, e incluso verán cómo el diseño se degradará con gracia, donde perderemos cosas como gráficos de fondo o esquinas redondeadas pero aún así podremos para mantener la integridad del diseño. Incluso cuando algunos clientes de correo electrónico no soportan todas las características de diseño, ahora es con nuestras expectativas establecidas. Empecemos a construir nuestro proyecto. 4. Comienza el proyecto: tienen que comenzar nuestro proyecto. Vamos carpeta de crédito en el escritorio. Voy a nombrar esto mi correo electrónico. Abramos esto. Voy a redimensionar esto. Pásalo al lado derecho de mi pantalla para que veas los archivos facturados a medida que avanzamos hacia el proyecto. Ahora dentro de esa carpeta, cortemos otra carpeta llamada Imágenes. Una vez que eso se haya creado, pasemos a los archivos de ejercicios. Vamos dentro de una carpeta un archivo de inicio. Vamos a copiar el correo electrónico que archivo html a la carpeta Mi proyecto de email que creamos en el escritorio No seguir. En este curso, deberás poder editar el código HTML en la pantalla. Aquí tengo una serie de editores de texto que puedes descargar tanto para Macintosh como para Windows. Algunos de estos aire libre y otros son comerciales. También puedes usar un editor gráfico como Dreamweaver o algo similar siempre y cuando tengas acceso al código HTML. Y una vez que tengas listo tu software, abramos correo electrónico ese html arriba en tu editor de texto elegido. Ahora, con este archivo HTML abierto en nuestro editor de texto, quiero llamar su atención sobre el tipo dock en la parte superior. Ahora hay algunas recomendaciones diferentes de algunos sitios diferentes ahora. Algunos clientes de correo electrónico y servicios de correo electrónico HTML te recomendarán no usar ningún tipo de doc, y simplemente comienzas a documentar con HTML. Otros te recomendarán usar el X html one Dato Transicional, en cuyo caso T. HTML necesita un atributo para el espacio de nombres XML, y luego otros te recomendarán que uses html cuatro puntos. Ah, ya que algunos clientes de correo electrónico HTML en realidad se despojarán de cualquier tipo de doc que tengas y pondré esto en, prefiero usar las especificaciones HTML 4.0, ya que tampoco estoy auto cerrando mis etiquetas HTML. Ahora, como estás siguiendo en este curso, sin duda puedes cambiar esto para que coincida con cualquier tipo de doc que tu cliente de correo electrónico o tu servicio de correo electrónico recomiende. No va a tener ningún efecto en el HTML que estructuramos dentro del área del cuerpo o el área encabezado para nuestro correo electrónico responsivo. Y ahora, con nuestros archivos de proyecto en su lugar, siguiente empezará a crear nuestros gráficos desde la tienda de fotos 5. Creación del banner y los gráficos de fondo: Ahora los primeros gráficos que vamos a crear van a ser para el banner y el contenido de fondo fantasmal . Entonces, entremos a los archivos de ejercicios. Vamos a abrir carpeta, también. Abramos imágenes de banners, no PSD arriba en Photoshop. Ahora dentro del panel de capas, se puede ver cómo se rompe en tres carpetas diferentes. Banner Pequeño, mejor mediano banner grande. Si abrimos uno de estos, puedes ver tengo un área de clip de color este rojo para que podamos verlo en el panel de capas y tengo una foto que está recortada en esto. Estas fotos también se configuran un objetos inteligentes. Ahora los objetos inteligentes se han duplicado en los otros tamaños. Entonces si abro pequeño y mediano, se puede ver que todos estos son duplicados del mismo objeto inteligente. Lo que pasa aquí es que obtenemos una instancia del objeto inteligente original, por lo que hacer un cambio a uno de estos reflejará en todos ellos. Entonces vamos a explorar eso primero, para modificar objeto inteligente, hacemos doble clic en él que traerá el archivo original dentro de una tienda de fotos que forma parte del objeto inteligente incrustado Zoom hacia fuera aquí. Entonces para demostrar esto rápidamente, subiré al menú de imágenes, bajaré a ajustes, y solo invertiré la imagen. A continuación, elegiré archivo, guardar guardar guardar. A continuación, el objeto inteligente actualizará todas las instancias en segundo plano. Por lo que ahora podemos ver que ahora se han modificado todos los gráficos de fondo. En base a este cambio inteligente de objetos, volveré aquí. Voy a deshacer ese cierre y guardar mi documento. Ahora también ves que duplicé cada objeto inteligente dos veces dentro de cada tamaño. De esta manera podríamos conseguir una imagen fantasmal que va a ir detrás del contenido ahora. Esta característica no es compatible en cada cliente de correo electrónico HTML, pero va a ser compatible en un buen número de ellos, y nos da la capacidad de que nuestro diseño se degrade con gracia. Entonces aquí puedo ver la foto fantasmal. Si selecciono esto, selecciono mi herramienta de movimiento, podría mover esto alrededor, déjame deshacer eso, o puedo subir en seleccionar la foto principal y mover esto por ahí, pero nota ahí en moverme juntos. Si mantengo presionada la tecla de comando o control, seleccione tanto los objetos inteligentes dentro de banner grande Ahora puedo mover ambos juntos . Por lo que esto te da una forma realmente rápida y eficiente de modificar la obra de arte en todos estos banners e incluso una forma rápida de cambiar el cultivo percibido entre el banner y el área fantasmal dentro del contenido. Ahora, para tener acceso a las rebanadas, vengamos y pinchemos y sostengamos la herramienta de cultivo, bajemos y seleccionemos una estola de rebanada. Todas estas rebanadas se han creado ya sosteniendo comandante Control y haciendo doble clic en una de estas traerá las opciones de rebanada. Entonces, por ejemplo, banner grande se llama banner underscore large, y si vengo aquí abajo en doble Click, podemos ver esto se llama Banner Large Ghost. Vamos a seguir el mismo patrón banner, banner medio, fantasma medio para que no tengamos patrón de nomenclatura consistente. Cuando empecemos a crear nuestro CSS Ahora para guardar todos estos, subamos al menú de archivos. Bajemos y elijamos Web más segura. También ya configuré la cinta de archivo y la compresión, por lo que seleccionar este top, por ejemplo, nos dará una calidad de imagen del 70% como archivo JPEG. Lo mismo para el área fantasmal para medio. Bajé esto a unos 60 y luego para pantallas pequeñas que lo bajaron a 40. A continuación, vamos a guardar debajo de rebanadas. Bajemos y elijamos todas las rebanadas de usuarios. Vamos a elegir a mi directorio de correo electrónico en el directorio de imágenes de escritorio. Entonces es seguro. Por lo que en el fondo veremos que ahora tenemos una pancarta, pequeña pancarta, fantasma pequeño, mediano, fantasma mediano, fantasma grande y grande. Volvamos a la tienda de fotos y ahorrar Cerrar. Ahora tienen todos los gráficos de pancarta y el contenido van picaduras que coinciden con la cosecha para la prohibición. Un gráfico siguiente creará los gráficos para el contenido. 6. Creación de los gráficos de contenido: continuación, vamos a crear los gráficos para el contenido del correo electrónico. Por lo que de vuelta en los archivos de ejercicios, vamos a la carpeta a nuestras plantillas. Abramos imágenes de contenido que PSD están aquí. Podemos ver múltiples tamaños de nuestro banner en la parte superior. Podemos ver múltiples tamaños de los gráficos promocionales que van a estar tras el cuerpo principal del HTML Abajo en la parte inferior, podemos ver los iconos para el call out y la firma que vamos a tener después del contenido principal . Ahora, para ver estas propiedades de rebanada, bajemos y optemos por rebanar herramienta de selección y hagamos doble clic en el 1er 1 Por ejemplo, podemos ver estamos llamando a este logo grande siguiente el logo medio y luego logo pequeño, y también verás que tenemos una versión grande de los gráficos promocionales y versión mediana y una versión pequeña. Ahora, si miramos hacia atrás a la respuesta de los diseños iban a estar creando en la pantalla grande, tenemos grandes gráficos para las columnas estancadas promo. Tenemos los iconos individuales para las llamadas por encima del contenido. En el tamaño mediano, aún tenemos nuestros gráficos y columnas promocionales, pero son mucho más pequeñas y los call outs ahora están moldeados dentro de una cuadrícula. Y luego, para la pantalla más pequeña, nuestra promo, van a tener un pequeño cuadrado en el lado izquierdo del contenido, y vamos a hacer algo similar para todos los llamados. Ahora, para salvar estos gráficos, volvamos a la tienda de fotos dentro del panel Capas. Bajemos y apaguemos la capa f p l thes gráficos aquí abajo, Signature y los iconos que queremos tener transparentes. Por lo que querremos asegurarnos de que no tenemos ninguna obra de arte encendida detrás de los siguientes para elegir archivo guardar para Web. Ahora bien, si hace clic en estos, podemos ver que ya he establecido los tipos de archivo para los logotipos. Elegí un formato de archivo de regalo para todas las fotos que he elegido J. Peg. Y luego si bajamos y miramos los iconos, elegí un formato de archivo de regalo, y elegí un color mate aquí del morado oscuro. Lo que esto va a hacer es poner un borde morado oscuro, ya que no podemos tener píxeles semi transparentes en un regalo para que estos iconos coincidan muy bien en ese fondo morado. Y de igual manera, si me desplazo por encima y selecciono la rebanada de firma, podría ver que el color mate está establecido en el mismo color que el fondo del área de contenido . Siguiente ha bajado a seguro para rebanadas. Asegúrate de que tenemos todas las rebanadas de usuario seleccionadas. Elija la carpeta Mi correo electrónico en el escritorio, luego el directorio Imágenes, y luego guarde ahora en las imágenes. Director de nuestro proyecto. Podemos ver todos los gráficos que se han generado a partir de nuestro contenido. Un archivo PSD. Volvamos a nuestro archivo Photoshopped, guardando cerca y ahora, con todos nuestros gráficos creados a continuación, podemos empezar a trabajar en el HTML para el correo electrónico. 7. Configuración de la estructura de diseño base: ahora de vuelta en nuestro editor de código con nuestro email ese archivo html abierto, vamos a empezar a construir nuestro layout. Dado que la mayoría de los clientes de correo electrónico no admiten una gama completa de HTML y CSS, necesitamos usar tablas, que es una estructura de diseño más antigua, fin de que nuestro contenido de trabajo sea correcto y todos los diferentes clientes. Ahora bien, esto sí plantea un reto interesante para el diseño receptivo también. Al diseñar diseño responsive dentro de un navegador usando HTML recto, tenemos la capacidad de tomar contenedores como etiquetas DIV y otros elementos. Y cuando redimensionamos el navegador, podemos mover esos elementos individuales ahora, en una tabla cambia el tamaño, todos los TD se harán más pequeños, pero en realidad podemos cambiar la relación de los TD individuales. Están encerrados dentro de esa estructura de mesa para que podamos tomar un TD, por ejemplo, y moverlo independiente de todos los demás. Entonces para sortear esta limitación, lo que vamos a hacer es poner contenido individual en tablas completas que tengan una sola celda dentro de ellas, y luego cuando el con cambie, vamos a mover las tablas enteras, por lo que de vuelta en nuestro editor de textos. Lo primero que vamos a hacer es establecer el color de fondo. Bajemos aquí dentro de la etiqueta del cuerpo. Algunos clientes de correo electrónico apoyarán establecer un color en la etiqueta de cuerpo por lo que dentro del elemento cuerpo tipo E G color conjunto que igual a la libra signo E f E uno B cero. Ahora se agregó el color de fondo, Vamos al interior del área del cuerpo. Vamos a entrar aquí y eliminar el contenido HTML va aquí comentario, y vamos a añadir una celda de tabla que va a ser látigo completo. Por lo tanto debilita centro nuestro correo electrónico. También vamos a aplicar el color de fondo a eso también. En caso de que el cliente de correo electrónico no soporte la tecnología del cuerpo. Empecemos con una etiqueta de tabla. Tengamos un ancho del 100%. ¿ Qué es eso? Un borde igual a cero. Vendo espaciado. Pongamos eso a cero. A continuación, estableceremos el relleno celular. Ponga eso a cero y de nuevo repetiremos el color de fondo para que el color BG sea igual a libra Signo E f e uno B cero. A continuación, Vamos a una fila de mesa dentro. Ahí, un TD para nosotros, vamos y la siguiente línea de televisión. Terminemos el TR y luego en la mesa. Ahora, con la mesa exterior en su lugar, vamos a crear otra mesa en el interior, que va a ser nuestro contenedor principal otra vez. Si volvemos a nuestro diseño, lo que vamos a estar haciendo es tomar esta pantalla grande, que va a ser nuestro diseño base. Y vamos a estar dividiendo esto en Rosa Individual. Entonces vamos a tener un T d Oro específico para el logo. Uno para el titular, la pancarta, el contenido, llamados de Primeau y luego el pie de página. Entonces dentro de nuestro HTML, pongamos nuestro cursor dentro de esta etiqueta TD, y vamos a poner el contenedor principal de correo electrónico dentro de aquí. Entonces, empecemos con la mesa. Vamos a establecer una clase igual a contenedor. Lo que fijó un ancho de 640. Vamos a establecer en la línea del centro siguiente conjunto de borde de Cero, vendamos relleno igual a cero y luego vendemos espaciado de cero. A continuación, vamos en nuestra primera fila y luego un TD para una celda dentro de esa fila. Ese va a ser el 1er 1 para el logo y la TV y el TR, y luego vamos a repetir este patrón hasta que tengamos siete filas voy a acelerar el video aquí para que no me veas escribiendo todos estos y sin duda puedes copiar y pega el primer set t r y TD para conseguir tu rosa. Y una vez que tenga mi mesa con mi siete rosa, voy a tabular esto solo para poder ver visualmente la estructura que esta tabla en particular está dentro de esa mesa de padres. Y ahora tienen nuestro contenedor de mesa principal en su lugar con nuestra rosa siete. A continuación, trabajaremos en peinar la carretera para el logotipo. 8. Estilar la fila de mesa para el logotipo: ahora para agregar algo de estilo a la fila del logotipo. Bajemos dentro del primer TR. Encontremos al TD. Vamos a establecer un espacio. Empecemos a agregar algunos atributos aquí para que empecemos por vía line. Dijo que la parte superior. A continuación, vamos a establecer una clase de logotipo, después BG Color. ¿ Qué es eso? Ese dedo blanco Así libra signo en seis efs. A continuación, estableceremos un estilo en línea. First Property va a estar palmaditas Si estilo taquigrafía aquí. Por lo que 10 píxeles en el espacio superior 20 píxeles a la derecha, cero en la parte inferior, 30 a la izquierda. Siguiente va a ser borde izquierdo estilo taquigrafía para esto va a ser tamaño de un pixel estilo de color sólido es DBC 064 Entonces vamos a establecer borde derecho un pixel sólido DBC 064 y luego borde superior un pixel sólido y los mismos colores los otros dos. Una vez que eso esté en su lugar, dentro del televisor Vamos y una imagen dentro de aquí, que va a ser el logo grande. Entonces, empecemos con una etiqueta de imagen. Fuente es igual a imágenes slash logo subrayado gran regalo de punto. Siguiente Vamos Haddon todo tag lt es igual a nuestro viñedo. Siguiente va a ser con un 5 85 tal que coincide con las tiendas de fotos, tamaño real y una altura de 45 y luego, por último, una frontera de cero. Ahora queremos asegurarnos de que el logotipo fuera clicable a nuestra página web. Consigamos el cursor antes del inicio. Etiqueta de imagen, vamos y una etiqueta de ancla por lo que empezar etiqueta un comedero igual pondrá aquí un letrero de libra, que es un autoenlace, y la etiqueta. Después consigue el cursor después de la etiqueta de imagen, Terminemos con la tecnología de anclaje. Y como aquí tenemos un borde establecido en cero, a pesar de que las imágenes hiperenlazadas, no conseguiremos un borde de enlace de anclaje alrededor de la imagen. Entonces en este punto, tenemos algo que podemos ver en un navegador. Entonces vamos a guardar tu trabajo. Vuelve a salir al sistema operativo. Abramos correo electrónico que html arriba en un navegador. Por lo que en el navegador podemos ver que tenemos nuestro fondo amarillo. Podemos ver que tenemos un logotipo en la primera celda de la tabla, y si redimensionamos el navegador, podemos ver que el contenido se mantiene centrado dentro de ese contenedor más grande. Y ahora que tenemos la fila del logo puesta a continuación, trabajaremos en la fila titular 9. Estilar la fila de mesa para el titular: ahora para trabajar en la Fila Titular. Vamos a entrar en nuestros fragmentos y conseguir los valores de TD. Lo hemos escrito en la última película, así que no los vamos a escribir cada vez. Cuando tu editor de texto elija archivo abierto, vamos a entrar en los archivos de ejercicio en los fragmentos y abrir un escritorio headline desk road ese HTML. En lugar de este archivo, verás una etiqueta TD. Bajemos aquí y seleccionemos toda la etiqueta TD copiada en el portapapeles. Vuelve al correo electrónico que HTML Bajemos aquí y encontremos la segunda fila de tabla. Encontremos el primer TD y peguemos en nuestro contenido que acabamos de copiar del fragmento. A continuación, metamos nuestro cursor dentro del televisor. Vamos a tocar esto y vamos a escribir una etiqueta H one. Entonces empecemos con una etiqueta H one y luego escribiremos encabezamiento principal aquí y luego terminaremos la etiqueta H one. Ahora pueden notar en esta etiqueta TD aquí tengo tamaños de fuente y familia de fuentes configurada. Entonces si especificamos lo particular en estilos de línea en este TD, cada conjunto de texto que aparece dentro obtendrá esas propiedades a menos que las envolvamos dentro de otro objeto. Entonces el H de aquí es un objeto separado de este televisor. Entonces vamos a añadir un estilo en línea al H, lo que debilita el estilo que por separado. Entonces para hacer eso, vamos a meter nuestro cursor dentro de la etiqueta H one al espacio. Vamos a un estilo en línea, así que el estilo es igual. Establezcamos un margen de cero en el cero superior a la derecha, 15 en la parte inferior y cero en la izquierda. Vamos a establecer una espera de fuente al tamaño de fuente normal. Vamos a establecer en 32 píxeles y luego para el color vamos a establecer signo de libra 7 a 3 C siete f Ahora, cualquier momento que tengas un bloque específico dentro de un TD, vamos a tener que venir aquí y añadir nuestros tamaños de fuente y propiedades diferentes. Entonces de aquí en adelante, el único elemento que vamos a poner dentro de aquí va a ser uno H, y luego el resto de la copia recogerá el estilo que ponemos en el televisor aparecerá. Entonces eso es lo que tenemos hasta ahora. Abrimos correo electrónico que html arriba en nuestro navegador. Entonces deberíamos ver esto ahora. Esto se ve bien. Por el momento, sin embargo, sí quiero que el logo tipo de colgar al lado izquierdo. Aquí. Cerremos nuestro navegador. Volvamos a nuestro código. Subiremos aquí en el logo Fila dentro de imagen. Vamos a golpear un espacio. Vamos a tener un atributo de estilo en la imagen. Establezcamos un margen. Dash izquierda. Vamos a poner eso en 15 píxeles negativos. Eso va a colgar un poco el logo a la izquierda para que se alinea ópticamente con el encabezado . ¿ De qué se guarda? Vuelve a salir al navegador. ¡ Vamos a pegarle! Recargar! Y ahora podemos ver. Nos dieron ese negativo. 15 píxeles a la izquierda, margen para el logo. Y ahora con el titular Camino completo a continuación, vamos a trabajar en el banner y contenido Rose 10. Estilar la fila de mesa para el banner y el contenido: Ahora vamos a trabajar en la fila de banners. Bajemos un poco por aquí. Yo configuro una etiqueta TD en nuestros fragmentos para esto también. Entonces vamos a entrar en nuestros archivos de ejercicios dentro de Folder tres Slippets. Abramos Banner Road ese HTML Subamos aquí y copiemos esa etiqueta TD copiada al portapapeles. Cierra mis otros fragmentos. Volvamos al correo electrónico que HTML Bajemos después de la fila de titulares. Encontremos la tercera fila. Seleccione el primer TD. Pongamos el ritmo en ese contenido. ¿ Qué es eso? Un retorno. Entonces aquí, vamos a añadir una etiqueta de imagen. Fuente es igual a imágenes. Slash banner subrayado. Punto grande j Peg establece un ancho de 638 píxeles. Estableceremos una altura de 180 píxeles. Después pondremos un poco de texto todo y escribiremos foto de nuestro viñedo. Siguiente. Queremos obtener el TD para la fila de contenido. Desplázate un poco por aquí. Acude a nuestros archivos de ejercicios. Abramos. Ver contenido. Camino que HTML en la parte superior y sube aquí y agarra la etiqueta TD. Copia eso en el portapapeles. Vuelve al correo electrónico que html Vamos a encontrar la cuarta fila seleccionada reemplazó la etiqueta TD. Voy a regresar a Tabin. Volvamos a nuestro fragmento para fila de contenido. Vamos a entrar aquí y agarrar el texto de marcador de posición todo el camino hasta la etiqueta de imagen, que tiene la firma. Copiemos eso al portapapeles. Cierra a ese vil. Vuelve al correo electrónico ese html y dentro de la T D. Basemos todo ese contenido. Voy a formatear este poquito a estas alturas. Guarda tu trabajo. Volvamos a salir y testes en un navegador. Ahora vemos que tenemos todo esto en su lugar. Ahora no tenemos un gráfico de fondo que muestre atrás aquí para navegadores que admitan fondos dentro de un TD. Entonces para agregar que vamos a agregar un estilo en línea al TD que acabamos de poner en su lugar. Cerremos nuestro navegador. Volvamos. Encontremos la etiqueta TD con la clase de contenido. Bajemos aquí dentro del estilo en línea. Consigamos un espacio. Añadamos en la propiedad de fondo, varios tipos de fondo. Aquí vamos a hacer estilo taquigráfico, así que los primeros parámetros van a ser color de fondo, así que empieza con un signo de libra f cinco f para ser cinco. Siguiente es u R l Vamos a establecer la u R l dos imágenes slash banner underscore large underscore ghost dot j Peg, Vamos a establecer nueva repetición cero píxeles en la X y cero píxeles en la propiedad blanca. Vamos a elegir archivo Guardar volverá al navegador, vuelva a cargar esto. Y ahora veremos el gráfico de fondo en su lugar. Ahora que tenemos el contenido, Roe en su lugar siguiente trabajará en la carretera para el pro más. 11. Estilar la fila de la mesa para las promociones: Ahora vamos a trabajar en las carreteras. Ese atracón Romo's Así que ha venido aquí abajo y vamos a encontrar la siguiente fila el próximo televisor. Abramos nuestros fragmentos. Encontremos D Dash promo Death Row que HTML dentro de aquí en la parte superior iban a subir aquí y copiar el TD. Copiémoslo al portapapeles. Volvamos a cambiar al correo electrónico que HTML Vamos a seleccionar y reemplazar el primer TD por lo que acabamos de copiar. Golpea un retorno de línea. Ahora lo que vamos a hacer dentro de aquí es agregar una tabla adicional como hablamos antes en diseño responsive con mesas que no podemos manipular o mover los TDs sin que estén en relación con el resto de la mesa. Ahora, para tener más a nuestro pro, posición de Jayne, vamos a necesitar poner a los promotores individuales en su propia mesa como ya hablamos antes. El respuesta de la naturaleza usando tablas significa que tenemos que envolver cada uno de nuestros elementos en una sola tabla celular con el fin de manipularlos. Entonces lo que vamos a estar haciendo aquí en tres casos diferentes es que vamos a estar tomando una tabla individual y usándola para crear nuestra llamada al Botón de Acción, que hará un poco más tarde. Lo vamos a utilizar para crear a tablas individuales en este momento para el pro más. Y también vamos a usar la misma técnica para crear cuatro tablas individuales para otras llamadas . De esta forma, medida que cambia el tamaño de nuestra pantalla, podemos manipular y mover estas tablas ya sea para apilar uno encima del otro o para hacernos más pequeños y aún en línea, derecha e izquierda. Por lo que de vuelta en nuestro archivo HTML, empecemos agregando nuestra primera tabla. Entonces vamos a empezar por escribir una etiqueta de tabla. A continuación, añadiremos una clase de subrayado primario uno. Vamos a duro ancho kota aquí de 270 y luego vamos a establecer el dedo de la propiedad alinear izquierda Siguiente línea. Vamos a establecer un TR para fila de tabla. Siguiente línea. Vamos a iniciar nuestra siguiente línea de TD. Vamos a terminar el TD que y la fila de la tabla y luego en la tabla general. Y entonces subamos aquí y formateemos que un poco ahora dentro de este TD dentro de la mesa con una clase de promo uno, volvamos a nuestros fragmentos. Bajemos a primal ¿Quieres contenido? Copiemos todo esto al portapapeles. Volvamos al correo electrónico ese html y vamos a dar un paso a ese contenido dentro de este TD. Y de nuevo, solo formatearé este pedacito Ahora Eso es todo lo que necesitamos para una promo completa dentro de nuestra promo cero. No para crear nuestra segunda promoción. Subamos aquí y copiemos toda esta mesa en lugar de regresar. Pegar la segunda copia de la tabla. Vas a formatear este pedacito ahora en el 2do 1 Cambiemos promo uno a promo a Vamos abajo y cambiemos la imagen promocional uno a promo Imagen dos en el texto todo. Cambiemos el archivo para promocionar demasiado grande. Y por último, subamos aquí y cambiemos una línea a la izquierda para alinearnos. Ahora mismo con estos en su lugar, vamos a tener archivo save. Volvamos a salir. Pruebe esto en un navegador. Ahora podemos ver nuestro para promover mesas. Una una línea a la izquierda y otra alinean ahora mismo con estos en su lugar siguiente, trabajaremos en la fila de llamadas outs 12. Estilar la fila de la mesa para las calladas: siguiente trabajaremos en la carretera para los llamados. Desplazémonos hacia abajo. Encontremos la segunda a última fila aquí el primer TD. Abrimos desde nuestra carpeta de fragmentos, El E Dash Call out perfil del escritorio en la parte superior. Vamos a subir en Seleccionar la etiqueta TD. Vamos a copiar eso. Volver a nuestro correo electrónico que HTML Vamos a reemplazar el primer TD en la segunda a última fila con ese televisor set de Return to Space. Volvamos a nuestra E Llámalo camino ese archivo html dentro. Aquí tenemos el marcado para uno de los pro más. Entonces al igual que en la última película, vamos a tomar cada llamada individual y hacerlos tablas separadas. Copiemos ese entero Llama ese al portapapeles. Vuelve a nuestro correo electrónico que HTML Vamos a dar un ritmo que dentro de la TV. Voy a subir aquí y formatear un poco eso. No es que en su lugar. Tenemos que sumar tres llamadas adicionales. Volvamos a nuestros expedientes de ejercicios. Abramos F dash call outs ese HTML dentro. Aquí tengo los llamados para los números 23 y cuatro. Vamos a entrar aquí y copiar las tres de esas mesas. Vuelva a cambiar al correo electrónico ese html y después de la clase de tabla, llame a uno. ¿ Qué es eso? ¿ Un retorno? Pongamos el ritmo en nuestras mesas restantes. Entraré aquí y formatearé este poquito ahora. En este punto, tenemos toda nuestra convocatoria. Ya está en su lugar. Si examinamos estos un poco más de cerca, verás que cada tabla tiene un ancho de 1 35 También tenemos una propiedad de línea de izquierda dentro. Tenemos una imagen que se vincula a uno de los iconos individuales que creamos. Tenemos algún texto que está siendo controlado por las propiedades de TD Font para romper etiquetas para el espacio y luego un simple enlace de anclaje. Y de nuevo, los cuatro tienen las mismas propiedades, excepto que estamos cambiando los gráficos individuales y algunos del texto. Por lo que en este punto, salvó Vuelve a salir. Mira estos nuevos navegadores y en el navegador verán estas cuatro tablas con la propiedad de línea izquierda ahora se están apilando, haciendo cuatro columnas Ahora, más adelante, en el curso, vamos a estar flotando algunas de estas tablas para navegadores que tienen soporte CSS más avanzado. Y entonces lo que vamos a necesitar hacer es agregar una etiqueta de ruptura para que podamos despejar algunas de las carrozas. Cerremos nuestro navegador. Volvamos a nuestro código después del llamado de la cuarta mesa, Vamos a conseguir unos retornos y lo que vamos a hacer aquí lo dijo. Etiquetas de rotura. Podemos despejar las carrozas, así que empieza grabando una etiqueta BR. Agregaremos estilo, colon claro, ambos semi colon y las propiedades que en la tachuela. Por lo que ahora esta etiqueta de ruptura en su lugar con sus definiciones de CSS de flotación clara cuando flotemos las tablas más adelante en el curso, esto asegurará que el contenedor más exterior, que es la Fila Púrpura de pro más, se extienda alto suficiente para abarcar todas las mesas en su interior. Y con esto en su lugar a continuación, trabajaremos en la carretera para el pie de página 13. Estilar la fila de mesa para el pie de: no trabajar en el pie de página. Vamos a bajar. Encontremos aquí nuestra última fila de mesa. Entrémonos a los archivos de ejercicios. Abramos el pie G Dash o el corredor de la muerte en la parte superior de este fragmento. Vengamos aquí y copiamos la etiqueta TD. Vuelve al correo electrónico que HTML reemplazó al primer TD con esto en lugar de devolver. Let's Tabin at content Dentro de la TV. Volvamos al pie un fragmento de fila. Bajemos aquí y copiemos todo el contenido para que tengamos un copyright y tal vez algún texto de muestra que podrías tener dentro de tu mensaje. También tenemos algunos enlaces a la privacidad y darse de baja con estilos en línea para colorear esos negros . Vamos a copiar esto. Por lo que el portapapeles cambiar de nuevo al correo electrónico que html Vamos a golpear Pegar me formato este poco. No es esto en su lugar. Vamos a guardar ese archivo. Vuelve a salir. Mira esto en un navegador, y si nos desplazamos hacia abajo, podemos ver el contenido fotográfico en su lugar. Ahora está dentro del pie una fila. Tenemos a Tedy establecido en el mismo color de fondo que la tabla que centra todo nuestro correo electrónico cual también es el mismo color que ponemos en el fondo del cuerpo. Ahora que toda la estructura para nuestros correos electrónicos en su lugar a continuación vamos a volver con estilo. Algunos de nuestros puntera de enlaces de ancla parecen botones. 14. Estilar enlaces de ancla como botones: Entonces ahora lo que vamos a hacer es tomar estos, aprender más enlaces dentro de nuestro pro Mose y peinarlos para que se vean más como botones . ¿ Cómo hacer esto? Volvamos a nuestro correo electrónico ese archivo html dentro de nuestro editor de texto. Crecer y encontrar son dos pro, mayoría así dentro de nuestra promo SRO. Aquí pudimos ver Promo uno y promo al interior de una promo. Uno. Vamos al interior de la etiqueta de ancla. Consigamos un espacio. Añadamos un poco de estilo en línea aquí. Empecemos por terminar un estilo atributos. Lo primero que vamos a hacer es poner un color de fondo. Es un fondo como color. El valor va a ser signo de libra 71 a 412 A continuación, vamos a establecer un radio de guión fronterizo en cinco píxeles. Vamos a establecer el color, que es el tipo de color a blanco. A continuación, vamos a establecer el relleno cinco píxeles en la parte superior, 10 píxeles en la derecha, cinco en la parte inferior y 10 encurtidos en la izquierda. A continuación pondremos la decoración de texto en ninguna. Esto eliminará el siguiente subyacente. Estableceremos texto chateau Bueno dicho cero píxeles en la X offset dos píxeles en la Y molestan dos píxeles de Desenfoque y luego un color de signo de libra. Tres A 5606 No que en su lugar. Vamos a golpear, guardar. Salgamos y recarguemos esto en un navegador. Ahora podemos ver nuestro aprendizaje. Botón más está estilizado aquí. Tenemos algunas esquinas redondeadas, Tenemos una sombra de gota y tenemos nuestro subrayado eliminado y el tipo es blanco. Volvamos a nuestro archivo HTML. Vamos al interior de la etiqueta de anclaje y vamos a seleccionar un atributos de estilo completo. Bajemos dentro de promo para encontrar el enlace de anclaje dentro de ahí al espacio basado. Vuelve a nuestro navegador, y ahora veremos que tenemos ambos enlaces de anclaje ahora siendo peinados como botones. Ahora, algunos clientes de correo electrónico no podrán renderizar el radio del borde, por lo que en lugar de botones de esquina redondeados, tendrás botones cuadrados y en otros casos, algunos clientes de correo electrónico no pueden renderizar un color de fondo. Por lo que dependiendo de los clientes de email que quieras apoyar, es posible que tengamos que hacer algunos cambios aquí, y hablaremos más de eso en la sección de resolución de problemas de este curso, y ahora tienen nuestros enlaces promocionales parecidos a botones. A continuación, vamos a crear un botón de llamada a la acción que podemos alinear a la derecha y tener flujo de contenido alrededor de la izquierda. 15. Crear un botón de llamada a acción: Ahora vamos a crear ese botón de llamada a la acción que va dentro del contenido y se alinea hacia el lado derecho como ya hablábamos antes. Esto también se va a poner dentro de una mesa, y vamos a poner en línea esa tabla general a la derecha para que el contenido pueda engañar alrededor del lado izquierdo. Por lo que de vuelta en su archivo HTML, subamos a la parte superior. Encontremos nuestro camino que contiene el contenido. Entonces aquí está nuestro TD de contenido de clase. Vamos a entrar aquí. Añadamos algunas devoluciones. Vamos a necesitar agregar esta llamada al botón Acción antes de nuestro contenido aquí. Ya que vamos a alinear eso a la derecha, queremos que la parte superior de este contenido sea tan alta como la parte superior del botón. Empieza con la etiqueta de mesa así que ha llegado aquí y en una mesa. Vamos a establecer un ancho de 160. Alinear es igual a clase derecha. Su botón con eso en el margen de estilo de línea, cero en la parte superior, cero en la derecha, 10 píxeles en la parte inferior y 30 píxeles en la izquierda y la etiqueta. Empecemos una nueva fila de mesa, luego un nuevo televisor dentro de la TD deja salir una línea textil de estilo de línea final que vamos a establecer para centrar el color de fondo. Vamos a establecer este signo de 2 libras 71 a 412 A continuación, pondremos el relleno 10 píxeles en la parte superior, 15 a la derecha. Eso también establecerá 10 en la parte inferior y 15 en la izquierda y el siguiente establecerá radio de guión de borde en cinco píxeles y el TD y la fila de la tabla y luego en la tabla. Ahora, con eso en su lugar, solo formatearé esto. A continuación vamos a meter nuestro cursor dentro del televisor y vamos a añadir un enlace de anclaje. Entonces empieza con una etiqueta ocho. Ref igual que ha estado en un signo de libra en estilo de línea. Vamos a poner color a blanco. Vamos a establecer el tamaño de fuente de 18 píxeles. Vamos a establecer el espaciado entre letras en una decoración de texto de un píxel a ninguna. Texto a sombra 20 en el desplazamiento X. Dos píxeles en la Y se desplazan dos píxeles de desenfoque y luego signo de libra tres A 5606 para el color. Siguiente establecerá familia de fuentes para combate aéreo Helvetica coma san serif que el texto real que está vinculado. Entonces tomaremos, aprenderemos más y luego terminaremos la etiqueta de anclaje. Por lo que aquí tenemos una etiqueta de ancla que fijando su color dedo del pie blanco y ajuste. Es propiedades divertidas. Tenemos un TD que está actuando como el padre de esa etiqueta de anclaje donde estamos asignando nuestro radio de borde en nuestro color de fondo. Y entonces tenemos una mesa más exterior dentro de un derecho de línea que está actuando como el principal padre de nuestro llamado a la acción. Entonces en este punto, vamos a golpear, guardar. Volvamos a nuestro navegador, recarguemos de nuevo, y luego veremos nuestro botón aprender más apareciendo aquí a la derecha, mientras que el contenido es mucho para envolver en el interior izquierdo. Ahora bien, si nos desplazamos, podemos ver que tenemos toda la tierra en su lugar para nuestro correo electrónico. Hay una última cosa que queremos hacer, y eso ha cambiado los colores de vinculación dentro de los call outs. Entonces para ocuparnos de eso, volvamos a nuestro correo electrónico ese archivo html en nuestro editor de texto, bajemos y encontremos nuestra fila de llamadas. Entremos aquí y encontremos nuestro primer llamado. Encontremos la etiqueta del tobillo. Bueno, dijo un espacio. Añadamos aquí un elemento de estilo en línea, así que escribiremos estilo. Entrarán aquí y fijarán color £2 signo e f B uno B cero. Ahora, con eso en su lugar, entremos y copiemos ese estilo. Atributo. Se va a llamar a Vamos a conseguir un espacio y pegar ese estilo en ese hallazgo de etiqueta de anclaje. Llama tres pega el estilo. Atributo. Entonces, por último, basémoslo en. Llama a cabo para que así se había presentado. Guardar interruptor de nuevo a nuestro navegador le permite recargar. Ahora tenemos el color amarillo claro para los llamados individuales. Y ahora, con todo este mercado de estilo y diseño en su lugar, tienes un correo electrónico tradicional que funcionará en clientes de polvo y navegadores basados en Web. Y si no quieres agregar técnicas de respuesta, sin duda puedes saltar adelante a la solución de problemas. Para aquellos que quieran hacer que el diseño sea receptivo y el siguiente capítulo, vamos a trabajar en agregar algunos estilo CSS en línea y organizar el diseño y los elementos en función del tamaño de la pantalla 16. Añadir preguntas de medios CSS a tu correo electrónico HTML: Ahora vamos a agregar algo de CSS a nuestro correo HTML, Así que vamos a subir a la parte superior ahora en el documento del que todos estamos empezando. Tenemos un elemento de estilo arriba en el área de encabezamiento. ¿ Cuáles son algunas devoluciones? Vamos primero en nuestro CSS tres consultas de medios. Entonces empecemos con Media Onley, pantalla y y paréntesis M. Vamos a poner a Max Dash con llamada en enfermo 60 pixeles inicial y final corchete Esa va a ser nuestra pantalla media y la siguiente vamos a añadir media Onley pantalla y luego vamos a poner ancho máximo de 5 10 dentro de los paréntesis y luego nuestro principio y corchete de terminación. Ahora, ya que no estamos agregando un min con ninguna regla que asignemos dentro de 6 60 también se activará dentro de 5 10 Y todos los elementos y en estilos de línea en el HTML en general se aplicarán a los tres también. Entonces para estas consultas de medios, vamos a estar anulando solo lo que se necesita cambiar o pantallas medianas a 6 60 pantallas pequeñas a 5 10 Ahora, la primera regla que vamos a crear va a estar dentro del ancho máximo de 6 60 Así que vamos entra aquí y vamos a crear una regla que va a apuntar al elemento de la tabla con la clase de contenedor. Lo que vamos a hacer aquí es que vamos a escribir con 480 píxeles, y luego vamos a añadir la bandera importante. Entonces lo que hace esta bandera es anular el atributo width que colocamos en la propia etiqueta de tabla . Ahora, normalmente, los elementos y estilos que se colocan en un elemento individual anularán las reglas CSS remotas . Entonces de nuevo, esta importante etiqueta anulará el ancho de 6 40 enviarlo de vuelta a 4 80 Y teniendo en cuenta que necesitamos usar muchos estilos en línea y propiedades de elementos para clientes de email HTML más antiguos iban a estar haciendo uso de la etiqueta importante para anular algunas de estas propiedades por la naturaleza receptiva de nuestro proyecto. Entonces ahora, con el tamaño que se está cambiando para nuestras pantallas medianas, metamos nuestro cursor dentro de estas pequeñas áreas de pantalla. Vamos a entrar aquí y tuvimos dos reglas más para anular este dimensionamiento para pantallas pequeñas. Así que empieza con la mesa ese contenedor. Una vez que lleguemos por debajo de 510 píxeles, vamos a establecer el con 2 100% agregar la etiqueta importante y al siguiente vamos a apuntar al TD dentro del contenedor de mesa alguna vez va a quitar el borde. Entonces vamos a mesa dot container space TD y luego borde colon ninguno. Y luego la bandera importante. Entonces una vez que lleguemos a menos de 5 10 vamos a tener el diseño estiramiento a toda anchura, y queremos deshacernos de ese borde que vemos para nuestras pantallas grandes y medianas. Ahora, con nuestras consultas de medios en su lugar para el contenedor más exterior, volvamos al tamaño 6 60. Ahora vamos a apuntar a la imagen dentro de la fila del logo. Hagamos t d dot logo espacio imagen. Ese es el gráfico grande. Lo que vamos a hacer es poner una pantalla sobre eso a ninguno. Entonces vamos a apuntar al propio TD. Por lo que logo de tv dot, vamos a establecer el color de fondo dedo blanco. Entonces vamos a establecer el u R l dos imágenes slash logo underscore medio regalo DOT dicho no repetición envió 10 píxeles en la X y 10 píxeles en el por qué, luego establecer una altura de 45 píxeles. Entonces, ¿qué? Esto va a hacer es ocultar el gráfico del logotipo y luego reemplazar el gráfico de fondo del televisor por el logotipo de tamaño mediano. Ahora, con eso en su lugar, bajemos nuestro cursor y dentro del área de pantalla pequeña. No necesitamos apagar el logotipo, porque de nuevo, porque de nuevo, estamos agravando estos ya que no tenemos mínimo con así las imágenes del espacio del logo td dot, se van a apagar. Entonces lo que vamos a hacer ahora es apuntar al TD con una clase baja que vamos a leer para encontrar de nuevo el fondo. Entonces vamos a decir, fondo vamos a escoger blanco para ti son l Vamos a imágenes slash guión bajo local. Pequeño No se repite. Vamos a centrar el logo y 10 píxeles en el por qué, y iban a establecer la altura en 32 píxeles. Ahora, con estas consultas de medios en su lugar, vamos a guardar. Volvamos a salir y probemos esto en un navegador. Ahora, cuando volvemos a dimensionar nuestro navegador y nos metemos por debajo del umbral 660, podemos ver que cambia el logotipo y si bajamos aún más, podemos ver que llegamos al tamaño de pantalla pequeña. Ahora notarás que el contenedor más exterior no está cambiando en absoluto. Todavía necesitamos hacer cambios adicionales a otros gráficos, como las tablas de promoción y el gráfico de banner. Y ahora que podemos ver que nuestras consultas de medios están funcionando correctamente en la fila del logotipo siguiente vamos a apuntar a la fila de encabezado y a la fila de banners. 17. Estilar el titular y banner para pantallas más pequeñas: Ahora vamos a apuntar a la fila de titulares en la fila de banners dentro del tamaño de pantalla mediano . Entonces dentro de la consulta de medios para ancho máximo de 6 60 Vamos a entrar aquí y agregar algunas reglas más . Entonces vamos a empezar por apuntar al TD con una clase de titular, así que td dot titular entre paréntesis, vamos a establecer el relleno de top de cinco pixels. Cero a la derecha es cero en la parte inferior 30 a la izquierda para luego establecer la bandera importante. Ya que estos aire set en el elemento individual TD Siguiente, vamos a hacer td dot titular espacio H uno. Vamos a establecer el tamaño de la fuente en 28 píxeles. Dijo la importante bandera en eso también. A continuación, vamos a establecer td dot banner space image. Vamos a apagar eso está bien, igual que hicimos con el logo. Por lo que mostrar colon Ninguno. A continuación vamos a hacer td dot banner target TTD. Vamos a establecer un con los 480 píxeles. Vamos a establecer una altura de 150 píxeles. Entonces vamos a establecer un fondo. Sin color. Estás Bueno, vamos a establecer dos imágenes slash banner underscore punto medio JPEG dijo no repetir cero píxeles en la X y cero píxeles en el Por qué. Entonces al igual que la fila del logo, vamos a apagar ese gráfico para el banner y luego vamos a aplicar el banner de tamaño mediano en la T D. Ahora de nuevo, estas propiedades van a ser recogidas para la pantalla pequeña. Bajemos nuestro cursor. Vamos a conseguir un retorno de línea y vamos a añadir algunas reglas más de pantalla pequeña. Desplázate un poquito hacia arriba. Vamos a entrar aquí y vamos a apuntar a la H. Entonces vamos a hacer TD Doctor Headline Space H uno. Vamos a establecer el tamaño de la fuente en 24 píxeles y luego establecer la bandera importante y luego vamos a poner el texto la línea para centrar a continuación. Vamos a apuntar a la bandera de TD DOT. No necesitamos apagar la imagen porque lo hicimos en tamaño mediano. Vamos a establecer una altura de 115 píxeles. Fondo, sin color. Vamos a establecer tus l dos imágenes slash banner underscore Pequeño que J peg No repita, nos vamos a alinear a la derecha en los píxeles X y cero. sobre el porqué, y no necesitamos establecer la imagen dentro del TD para mostrar None. ya pusimos eso en el tamaño mediano, ahora es con estos en su lugar, Vamos a golpear, guardar. Volvamos a nuestro navegador. ¿ Qué es? Recargar. Y ahora, cuando cargamos esto en un navegador y re tamaño, cuando llegamos a nuestro tamaño de pantalla mediano, pudimos ver los cambios de banner. El titular se hace un poco más pequeño, y se puede decir que los gráficos cambian realmente desde que la imagen fantasma no se está cambiando al tamaño mediano por lo que realmente podemos ver que la alineación no coincide aquí. Y luego si bajamos al tamaño más pequeño, podemos ver que sí cambiamos a nuestra vista del 100%. Por lo que todo el diseño se vuelve líquido y tenemos el banner alineado a la derecha y los titulares centrados. Podemos ver esos efectos también ocurriendo. Por lo que ahora tenemos la 1ª 3 filas completamente responsivas. A continuación, vamos a trabajar en el contenido en el área de pie de página. 18. Estilar el contenido y el pie para pantallas más pequeñas: No es para las pantallas de tamaño mediano. Vamos a modificar la fila de contenido. Vamos a meter nuestro cursor dentro del máximo con 600 Media Query. Vamos a entrar aquí y apuntar a la fila de contenido así que td dot espacio de contenido Vamos a establecer palmaditas fondo de 30 píxeles luego dijeron la importante bandera que iban a hacer imagen de fondo . Vamos a especificar imágenes slash banner en la puntuación media underscore fantasma dot j pay, luego la bandera importante. Ahora sí especificamos esa imagen de fondo en ese elemento dentro del horno en estilo de línea para especificar el banner Fantasma grande. Por lo que sí necesitamos anular eso con una etiqueta importante. A continuación, vamos a apuntar la llamada al Botón de Acción. Entonces vamos al espacio de contenido de punto de TV. Tabla ese botón. Vamos a establecer el ancho a auto y luego td dot content space Tabla ese espacio de botón Espacio TD A. Vamos a establecer el tamaño de fuente a ese enlace de anclaje en 14 píxeles y luego establecer la etiqueta importante en eso también. Ahora, si los que están en su lugar, bajemos dentro de las reglas de pantalla pequeña que decían un retorno. Vamos a entrar aquí y apuntar el contenido fila tv punto contenido. Vamos a establecer una altura de línea de 20 píxeles. Dijo la importante bandera. A continuación, vamos a establecer el fondo de palmaditas en 10 píxeles. Dijo la bandera importante para eso también. A continuación, vamos a establecer antecedentes. Vamos a establecer un color aquí, así que libra signo F cinco f a e cinco, luego las imágenes u R l slash banner underscore pequeño guion fantasma dot jpeg Vamos a establecer No repetición. Vamos a alinear el fantasma a la derecha así cero píxeles en el eje Y y luego la bandera importante. Y luego, por último, vamos a apuntar al pie de página td dot. Vamos a poner relleno de 20 para arriba e abajo y 30 para derecha e izquierda. Entonces la bandera importante de esta manera, cuando cambiemos el diseño para que sea completamente fluido o 100% con, no tendremos el texto en el pie de página tocando el lado derecho o izquierdo de una pantalla pequeña. No es lo que estas reglas en su lugar. Vamos a golpear, guardar. Salgamos y probemos esto de nuevo en un navegador. Recargo suspiros esto abajo. Veremos el gráfico de fondo de tamaño mediano que aparece dentro del contenido en la pantalla de tamaño mediano, que coincide con el banner de tamaño mediano y luego para pantallas pequeñas verá que esto coincide también. Y tanto el fantasma como la imagen aparecen están alineados a la derecha. Por lo que obtendremos un cultivo dinámico en el lado izquierdo, y tanto el fantasma como la imagen coincidirán. Ahora, si nos desplazamos hacia abajo hasta la frontera, veremos que tenemos algo de relleno a la derecha y a la izquierda. Si abro esto, una vez que lleguemos a la talla mediana, verás que el texto borra dedo del pie el lado izquierdo de su TD para que coincida con el área morada aquí. Pero cuando lleguemos a la pantalla pequeña, tamaño realmente partirá esto en un poco, para que en pantallas pequeñas el texto en realidad no toque los lados. Y ahora, con el contenido fila y pie Una fila, las consultas de medios en su lugar siguiente apuntarán a la carretera que tiene la promo está en ella 19. Estilar las promociones para pantallas más pequeñas: Ahora vamos a establecer algunas reglas para apuntar al cero promo. Vamos a desplazarnos hacia arriba a nuestras consultas de medios dentro del tamaño de pantalla mediano. Vengamos aquí y agreguemos algunas reglas nuevas. En primer lugar, vamos a apuntar a la mesa dentro de la TV Pro más. Por lo que empieza con la mesa espacial de Tedy Doubt Primeau. Establezcamos un ancho de 200 píxeles y luego la bandera importante siguiente, apunten a los encabezados dentro así td dot espacio de mesa espacial de Primeau espacio TD espacio H tres. Vamos a establecer un margen inferior de ocho píxeles. Siguiente objetivo las imágenes td dot espacio de mesa espacial de Primeau TD space image vamos a establecer se muestra en ninguna. A continuación, vamos a apuntar al TD dentro de promo uno. Así que arrancó. Ramos mesa espacial punto promo subrayado un espacio TD. Vamos a establecer una propiedad de fondo sin color. Tu l va a ser imágenes slash promo underscore uno subrayado punto medio J peg, Sin repetición, cero píxeles en la X cero píxeles en el por qué y relleno. Vamos a establecer 100 píxeles en la parte superior, cero en la derecha, cero en la parte inferior y cero en la izquierda. A continuación, vamos a apuntar el TD y la promo a tan t d dot La mesa espacial de Primeau que subrayan promo al espacio TD fondo Sin color. Siempre vas a ser imágenes slash promo Underscore para subrayar punto medio J Peg Sin repetición. Cero en el X cero en el por qué y luego para el relleno. Vamos a establecer 100 píxeles en el cero superior a la derecha, Sarah en el extremo inferior, cero a la izquierda. ¿ Ahora qué? Aquellos en su lugar? Añadamos las reglas para la pantalla pequeña. Por lo que dentro del área de pantalla pequeña, Vamos a objetivo promo uno so t d dot mesa espacial de Primeau dot promo subrayado uno. Vamos a restablecer el ancho 2 100% luego se utilizó la etiqueta importante. A continuación, vamos a añadir un borde a la parte superior. Así borde superior un pixel color sólido es signo de libra 71 un 412 Siguiente, vamos a apuntar a TD dentro de un problema uno así tv dot La mesa espacial de Primeau que promo subrayan un espacio TD. Vamos a poner el fondo sin color. Tu l va a ser imágenes slash promo subrayado uno. SubrAYar pequeño punto jpeg No se repiten cero píxeles en los X 40 píxeles en el por qué, Entonces estableceremos relleno 20 píxeles en la parte superior, cero a la derecha, 40 en la parte inferior, y 110 píxeles a la izquierda. Siguiente TD. ¡ Detente! Ramos Espacio presentó subrayado promocional a Vamos a ajustar el ancho de esto al 100% también . Tenía la etiqueta importante Siguiente, vamos a apuntar a la TV. Por lo que TD duda de la mesa espacial de Primeau punto subrayado promo al espacio TD fondo sin color. De lo contrario vas a ser imágenes slash promo subrayado para subrayar pequeño punto JPEG dijo no Repetir, cero en la X 20 en el Por qué relleno Vamos a establecer cero en el cero superior a la derecha es cero en la parte inferior y 100 y 10 píxeles en el izquierda. Y luego, por último, vamos a establecer una izquierda clara de esta manera. Por alguna razón, una de las tablas no se redimensiona al 100%. Podemos estar seguros de que la Tabla dos tendrá una izquierda clara por lo que se alineará en el lado izquierdo con la mesa de arriba. No es lo que estas reglas en su lugar. Vamos a pegarle salvar. Volvamos a nuestro navegador. Vamos a recargar. Voy a cambiar el tamaño. Este es el gran Greenview. Cuando lleguemos a medio. Podemos ver que las imágenes tienen una pantalla de ninguno, y ahora tenemos los gráficos de tamaño medio asignados al fondo, y tenemos un relleno aquí que está empujando todo el contenido hacia abajo para que podamos ver los gráficos de fondo . Y luego cuando lleguemos a la pantalla más pequeña, podemos ver que volvemos a cambiar los gráficos de fondo, los alineamos a la izquierda, y vemos que las tablas de dos ahora se apilarán verticalmente en lugar de estar en columnas. Por lo que esto es pequeño, mediano y grande. Por lo que ahora, con nuestras reglas CSS en su lugar para la promo SRO, a continuación se trabajará en la fila call out. 20. Reorganizar los llamados para las pantallas de medio: Ahora vamos a crear estas reglas CSS para los call outs de tamaño mediano. Lo que vamos a hacer es tomar las cuatro columnas y ahora arreglarlas en una cuadrícula. Entonces para hacer esto, vamos a meternos dentro de las consultas de medios para la pantalla media. Añadamos algunas reglas más. Entonces vamos a empezar por apuntar a la mesa dentro de los llamados. Cierto tipo t d punto llaman mesa de espacio. Vamos a poner el ancho al 50% que vamos a poner la bandera importante. A continuación, vamos a establecer margen inferior de 40 píxeles. A continuación, vamos a esconder las imágenes dentro de los llamados. Por lo que vamos a hacer t d dot call out space table space image set display and none. Siguiente. Apuntemos esas etiquetas de rotura. Vamos a quitar el espacio entre el párrafo en el enlace, así que td dot llama espacio mesa br vamos a establecer este plano y ninguno. Entonces vamos a apuntar a los enlaces de anclaje td punto Llamar espacio de mesa A. Vamos a establecer el tipo de pantalla para bloquear. Esto lo pondrá en su propia línea y luego marcará top de 10 píxeles que el propio TD por lo que tv dot llame espacio de mesa TD. Vamos a establecer ese tamaño de fondo de las imágenes en 65 píxeles. Ahora, ya que apagamos las imágenes dentro de cada una de las tablas, vamos a necesitar reasignar los gráficos de fondo. Por lo que ha tenido un retorno. Vengamos aquí y apuntemos a cada llamada individual. Entonces empecemos con Tedy Duck. Llamar hacia fuera Mesa de espacio punto Llamar a subrayado un espacio TD. Aquí, vamos a poner el relleno a cero en el top 30 de la derecha es cero en la parte inferior y 60 en la izquierda. Agrega la bandera importante. Entonces vamos a poner un fondo sin color. Tu l Va a ser imágenes slash icono subrayado crepes punto regalo. Vamos a establecer ningún cero de repetición en el eje X y 13 píxeles negativos en el Por qué siguiente TD llama a la mesa espacial punto Llama a subrayado al espacio TD aquí. Vamos a poner el relleno a cero en el top 20 de la derecha, cero en la parte inferior y 60 en la izquierda poner la bandera importante. A continuación, estableceremos antecedentes. Vamos a establecer la URL dos imágenes slash icon underscore botella dot gif No repetición. 10 píxeles en la X y tres negativos en el por qué siguiente td punto llamar mesa espacial punto Llamar a subrayado tres espacio TD Aquí, vamos a establecer relleno de cero en el top 30 de la derecha es cero en la parte inferior 60 en el conjunto izquierdo. El fondo de bandera importante tu L vamos a establecer a imágenes slash icono subrayado cesta regalo punto. No repetición cero en la X y negativa 13 en el por qué y luego por último para call up for t d dot call out space table dot call out underscore for space TD patting zero en el top 20 de la derecha es cero en la parte inferior y 60 en la izquierda. Dijo la bandera importante que para este. Vamos a establecer antecedentes. Eres l imágenes slash icon underscore cámara dot gif Entonces establece no repetición 10 píxeles en la X y negativo 23 en el Por qué ahora, con todas estas reglas en su lugar para tamaños de pantalla medianos, le permite guardar testes en un navegador. Ahora es en el navegador podemos desplazarnos hacia abajo y pantalla grande. Vemos que las tablas se alinearon una al lado de la otra, creando cuatro columnas. Pero entonces cuando bajamos y vamos a nuestro tamaño mediano, podemos ver que hemos reorganizado esto para ahora aparecer en una cuadrícula. Ahora hay unas cuantas reglas que cambiamos que hacen posible esto. Ahora una es que cambiamos el relleno dentro del contenido. Por lo que empujamos un contenido desde el lado izquierdo para darnos espacio para el ícono. Deshabilitamos los gráficos, redimensionamos los gráficos de fondo con el tamaño de fondo y luego asignamos gráficos individuales a cada uno de estos. Y también apagamos las etiquetas de freno. Por lo que teníamos una etiqueta de ruptura justo después de la imagen original que habría empujado este contenido hacia abajo. Y tuvimos un doble descanso dentro de aquí, lo que habría hecho que el erudito mawr se alejara más del contenido de lo que vemos aquí. Ahora hay una propiedad más que vamos a sumar en la mesa tres aquí abajo, y eso va a ser una izquierda clara. Ahora, vamos a hacer eso en caso de que tengamos muy poco contenido dentro de call out a eso permitiría que la mesa tres se envuelva al lado de la mesa uno. Entonces, con el fin de aliviar ese problema potencial, volvamos a nuestro archivo HTML. Vamos al interior del mundo CSS que apunta. Llame tres y agreguémoslo claro a la izquierda y luego es seguro. Y ahora que tenemos las consultas mediáticas en su lugar para los culottes para pantallas medianas, continuación trabajaremos en ese call outs para pantallas pequeñas. 21. Apilar los callados para pantallas pequeñas: Ahora vamos a sólo el diseño de la llamada. Es en pantallas pequeñas, por lo que dentro de nuestro CSS dentro de la consulta de medios para 510 son pantalla pequeña. Añadamos un retorno. Vengamos aquí y apuntemos a ese clamor. Entonces empecemos con TV dot call out space. Vamos a establecer el relleno 20 píxeles en el top 30 de la derecha es cero en la parte inferior y 30 en la izquierda y establecer la bandera importante. A continuación, vamos a apuntar a dos tablas dentro de t d punto llamar mesa espacial. Vamos a establecer un ancho del 100% y la bandera importante. Entonces vamos a establecer margen inferior 2 20 píxeles. A continuación, vamos a hacer TT No llames espacio de mesa TD. Vamos a establecer el relleno de cero en el cero superior a la derecha, 10 píxeles en la parte inferior y 50 píxeles en la izquierda. Dijo una bandera importante en eso, vamos a configurar el tamaño de fondo. Vamos a dimensionar los tipos fuera un poco más pequeños. Vamos a 50 píxeles en la X y 50 píxeles en el por qué dijo una bandera importante ahí, Entonces vamos a establecer una altura mínima de 60 píxeles. A continuación, vamos a hacer td dot call out space table space A. Vamos a poner la pantalla Tipo dos en línea. Ya no queremos que esos aparezcan como una cuadra. ¿ Ahora qué? Esas reglas en su lugar, vamos a posicionar los iconos que se están asignando en las propiedades de fondo para cada una de las llamadas. Por lo que el objetivo la primera llamada a cabo t d punto llamar mesa espacial. No grites. Subrayar un espacio TD. Vamos a entrar aquí y establecer la posición de fondo cero en la X y el seis negativo en el Why. Vamos target call out to td dot call out space table dot Colin underscore to space TV. Vamos a establecer posición de fondo aquí. 24 píxeles en la X y dos negativos en el por qué el próximo TD llama mesa espacial. No llames subrayado tres espacio TD posición de fondo. Vamos a poner este 20 en la X y negativo siete en el por qué y luego td dot llamar mesa espacial. No lo llames subrayado. Cuatro espacio TD. Vamos a establecer posición de fondo 24 píxeles en la X y 17 negativo en el ¿Por qué ahora? Con estos en su lugar, volvamos a salir. Recarga esto en un navegador desplácese hacia abajo redimensionar desde grandes dos medianas. Vemos nuestros cuadrantes y luego por medio, abajo a pequeño. Vemos que todos estos empiezan a apilarse. Ahora, una cosa que notarás es que nuestros enlaces de anclaje no aparecen bajo el contenido. Ahora apagamos la pantalla de la etiqueta de freno y como la etiqueta de anclaje tiene una pantalla de en línea, se envuelve junto al contenido. Entonces para aliviar este problema, vamos a volver a nuestro archivo HTML. Vamos a desplazarnos hacia abajo y encontrar los call outs, y vamos a agregar clase a la segunda tecnología de break que estamos utilizando para espaciar nuestro contenido dentro de los call outs. Entonces, vamos a desplazarnos hacia abajo. Encontremos nuestro primer llamado para llamar a ese. Tenemos que romper etiquetas aquí. Vamos a entrar en la segunda etiqueta de break. Vamos a añadir una clase de espaciador, entonces vamos a entrar aquí y vamos a copiar eso dentro de una llamada fuera para tener una clase de espacio o a la segunda etiqueta de break y llamar a lo mismo y llamar a tres y luego otra vez, mismo cosa y clamar por Así que ahora tenemos una clase sobre la segunda etiqueta de break en cada uno de nuestros call outs. Subiremos a la parte superior de nuestro documento. Vamos al interior de nuestras consultas de medios para pantallas pequeñas. Pongamos un retorno. Vengamos aquí y apuntemos a esas etiquetas de rotura. Así que TD pensó Llamar espacio mesa espacio br dot espaciador Vamos a que una pantalla a en línea Ahora es it file save. Volvamos a nuestro navegador. Vamos a golpear Reload Y ahora veremos que ahora se está reasignando la segunda etiqueta de break para que se muestre en línea. Por lo que la primera etiqueta de break de la pantalla grande y la primera pausa toman después de que se está ocultando el contenido. Pero ahora se está honrando la tercera etiqueta de break, que tiene un tipo de display de en línea porque tiene una clase de espaciador, que tiene un tipo de display de en línea porque tiene una clase de espaciador, empujando los enlaces del actor a la siguiente línea. Ahora nos queda un último detalle, y que es deshacernos de este espacio extra en el lado derecho e izquierdo. Algunos clientes de correo electrónico honrarán el CSS aplican a la etiqueta body Así que volvamos a nuestro archivo HTML . Desplazemos hacia arriba hasta la parte superior antes de nuestra primera consulta de reunión en lugar de regresar. Vamos a entrar aquí y crear una regla que apunte al elemento corporal. Vamos a entrar aquí y establecer margen de cero y palmaditas de cero. Guarda tu HTML. Vuelve a salir al hit del navegador. Recargar! Ahora verás que el diseño en pantallas pequeñas irá bordear el borde en el navegador. 22. Añadir texto de vista previa en la bandeja de entrada: Ahora, si el soporte de tu cliente de correo electrónico que te muestra la vista previa del texto en el cuadro en, notarás que el texto que vemos es el encabezado va aquí y luego el contenido que ponemos dentro del área de contenido. Entonces lo que hace el texto de vista previa es buscar el primer conjunto de texto dentro del HTML. Entonces lo que vamos a hacer es ocultar algún texto para que el texto de vista previa vea nuestro texto oculto antes de que vea el Texas dentro. Esto nos dará la capacidad de personalizar lo que vemos dentro del área de vista previa. Ahora dentro del correo que html vamos a desplazarnos hacia abajo justo después de la etiqueta body antes de la tabla. Eso crea nuestro fondo para navegadores que no soportan la etiqueta body. Y vamos a entrar aquí y empecemos agregando una etiqueta diff. Entonces tipo tive en estilo de línea. Primera propiedad va a ser tamaño de fuente. Vamos a poner esto en un píxel. Vamos a poner el color en el mismo el fondo. Por lo que libra signo e f e uno b cero. A continuación, vamos a poner una pantalla a ninguna y luego terminar la tecnología diff. Ahora que en su lugar, voy a meter el cursor dentro de aquí. Dividamos el diff abierto. Y luego dentro de esto lo hicimos Sólo vamos a poner el texto de vista previa que queremos tener mostrar dentro del área de vista previa. Voy a acelerar el video aquí, y sólo voy a poner algo que diga, coloque aquí su texto de vista previa. Y también quiero agregar algún contenido adicional para que tengamos suficiente para llenar cualquier configuración que tenga el usuario para su cliente de correo electrónico. Entonces si tienen un set de vista previa para 34 o cinco líneas de texto, tenemos suficiente contenido aquí para mostrar dentro de ese área de previsualización. Si queda espacio, el área de vista previa irá y buscará el primer conjunto de texto HTML como vimos antes. Y ahora con esto en su lugar, cuando nuestros correos electrónicos en nuestra bandeja de entrada y nuestro adelanto de Texas mostrando, veremos este impuesto para aparecer dentro de esa zona de previsualización 23. Añadir animación a tu correo electrónico HTML: Ahora, si quieres meter algo de animación en el correo HTML, hay muchos clientes de correo electrónico que soportan GIF animado, así que para explorar esta opción, bajemos al email ese archivo html. Bajemos y encontremos nuestro logo. Por lo que armé un GIF animado del logo, así que voy a poner en subrayado punto animado dar para el logo. Ahora hay algunas cosas que quieres tener en cuenta a la hora de crear un GIF animado para un correo electrónico. Dado que no todos los clientes de email soportan esto, quieres asegurarte de que el primer fotograma en el último fotograma de tu GIF animado tenga el gráfico completo en su lugar. Entonces si estás usando esto para algo así como un anuncio de banner, quieres asegurarte de que todo el texto y el logotipo nuevamente esté en el primer fotograma y en el último fotograma. Si la animación es compatible, entonces podemos ver todos los fotogramas animados en el medio, por lo que su estrategia es un poco diferente a la forma en que podrías construir un banner en el que realmente podrías construir el mensaje en el banner en partiendo de una pantalla en blanco y luego construyendo esos marcos hacia arriba. No ver esto funcionando en un correo electrónico. Voy a traer mi dispositivo móvil. Ahora. Con este correo electrónico, se puede ver la animación en su lugar. Básicamente, tengo el tallo pequeño en las uvas animando más. Tengo un punto culminante que está corriendo a través de nuestro Viñedo, y tenemos un poco de brillo y encuentro sobre la cima de las uvas. Ahora, en lugar del logotipo, sin duda podríamos animar otros gráficos en el escenario. Podríamos animar algunos de los gráficos promocionales, o tal vez incluso los iconos abajo en los call outs. Ahora, otra cosa que tal vez quieras evitar es configurar una animación que se va a utilizar como gráfico de fondo. Estamos usando los logotipos y los gráficos promocionales como gráficos de fondo. Por lo que si quieres incorporar un GIF animado en tu email, te recomiendo tenerlo sea un gráfico que re tamaño con CSS. En lugar de asignar a imágenes de fondo, podemos ver algunos clientes de correo electrónico diferentes apoyando esto, y podemos ver qué sucede cuando algunos clientes de correo electrónico no soportan esto. El Lotus Notes ocho, por ejemplo, nos mostrará un primer fotograma estático. Lo mismo para Outlook 2007. Ahora en un pozo, sí vemos la animación, y en este todavía rodado aquí, podemos ver que el GIF animado se está reproduciendo en realidad. Ahora. También obtenemos la versión animada en Gmail y también en outlook dot com. Por lo que esta podría ser una buena técnica para agregar un poco de animación a tu correo electrónico siempre y cuando la animación no sea crítica para el gráfico en sí. 24. Cómo usar fuentes web con tu correo electrónico HTML: ahora, otra cosa que quizá quieras usar dentro de tu email HTML son los teléfonos personalizados ahora. No se recomienda que uses fuentes que requieran que se cargue JavaScript, pero hay algunos servicios de estanque por ahí que suministrarán fuentes a través de una etiqueta CSS. Entonces para esta demostración, pasemos a las fuentes de Google. Las fuentes de Google son gratuitas, y ofrecen una solución CSS para agregar fondos. Y se podría encontrar este punto absolución com slash bonos. Entonces en esta pantalla principal, voy a venir aquí a todas las categorías. Vamos a hacer clic en esto, y voy a apagar todas las opciones excepto la escritura a mano, una especie de guión que la fuente para que coincida con los rizos en el tallo de las uvas. Entonces vengo aquí y elijamos a Parisienne junto al nombre. Voy a dar click en el uso rápido de esta página. Bajemos por aquí. Podemos ver algunos paneles roscados que nos muestran un estándar, y en la opción Importar y JavaScript, queremos la opción at import aquí. Bajemos aquí y copiemos esta línea de código. Volvamos a su edad a mi correo electrónico, no usar un anuncio importante. Tenemos que poner esto dentro del área CSS. Y esta sí tiene que ser la primera línea dentro del CSS, ya sea un CSS en línea en el área de encabezamiento como lo estamos haciendo aquí, o incluso si es su propio archivo CSS separado. Entonces en la parte superior del CSS, peguemos en esa importación. ¿ De qué se guarda? Volvamos a Google Fonts. Bajemos aún más abajo por integrar tus teléfonos así que necesitamos establecer este nombre. Vamos a entrar aquí y copiar el nombre. Bajemos aquí y seleccionemos el nombre de la fuente copiado en el portapapeles. Volvamos a cambiar a nuestro correo HTML. Desplazémonos hacia abajo. Encontremos que H una etiqueta y ponemos un estilo en línea en la etiqueta H one. Aquí, ten una fuente. Espera, tamaño de fuente. Vamos a entrar aquí antes del tamaño de fuente. Nos vamos a divertir familia, espacio de colon. Vamos a pegar en el nombre de la fuente. Atacama y luego pongamos una aérea que un semi colon. Entonces por alguna razón, este particular peleado no se puede cargar en línea donde el cliente de correo electrónico no lo soporte, vamos a caer de nuevo al fondo aéreo y ahora con esto en su lugar después de que probé esto. Esto funciona en todas las versiones de escritorio de Apple Mail y todos los dispositivos móviles. Esto funciona en Lotus Notes ocho. Outlook 2000 y 2011 Thunderbird y un Android cuatro. Entonces, si bien esto no está funcionando en demasiados clientes de correo electrónico hasta el momento, esto sigue siendo una opción de diseño viable para codificar tus correos electrónicos HTML. 25. Añadir video HTML5 en correo electrónico HTML: Ahora vamos a echar un vistazo a cómo podemos incorporar video HTML cinco en un correo electrónico. Entonces volvamos a los archivos de ejercicios y volvamos a la carpeta en el escritorio llamada Mi Email. Dentro de nuestro proyecto, vamos a crear una marca una carpeta llamada Video, y luego volvamos a los archivos de ejercicios dentro de Folder four. Agarremos una copia del JPEG y del impacto. Por ahora, voy a opción arrastrar una copia de estos a la carpeta de mi correo electrónico. También puedes usar cortar y pegar. Una vez que estos aire en su lugar. Volvamos a cambiar a nuestro correo electrónico ese archivo html en un editor de texto. Ahora dentro de nuestro correo electrónico, lo primero que vamos a hacer es deshacernos de los movimientos pro y reemplazarlos por el video . Bajemos por aquí y busquemos el TD que está sosteniendo ambos de los Primeau's para que podamos ver su promo quería promo a Vamos a entrar aquí y eliminar promo uno. Después eliminaremos promo a, y una vez que se eliminen esos, vamos a añadir una tecnología de video HTML five. Entonces primero empezaremos agregando una etiqueta de video que el espacio vamos a establecer el ancho en 570 píxeles. Entonces vamos a establecer la altura en 428 píxeles. Entonces vamos a apuntar a nuestro marco de póster. Entonces eso es póster igual a nosotros vamos a apuntar a ese archivo JPEG. Entonces eso va a ser video forward slash nuestro viñedo dot j peg. A continuación, estableceremos unos controles, atributos Estableceremos eso igual a controles, y luego bajaremos y terminaremos la etiqueta de video ahora dentro de la etiqueta de video, queremos agregar una etiqueta fuente que va a apuntar al archivo de video. Entonces voy a empezar con una etiqueta fuente, luego un espacio luego SRC igual a nosotros queremos apuntar al archivo MPEG cuatro. Entonces va a ser video forward, cortar nuestro viñedo punto mpeg cuatro, y luego vamos a establecer un tipo de atributos iguales a video slash m pick for, luego tuvo que regresar. Y ahora vamos a poner algún contenido HTML dentro de aquí que será visto por los clientes de correo electrónico que no entienden la etiqueta de video. Entonces en un enlace de anclaje estándar, Así que un ref Space H traiga un conjunto que igual a y lo que quiere hacer aquí es poner el su L a su sitio Web específicamente a un archivo HTML que está usando el mismo video que apuntaban arriba y luego en el etiqueta de ancla. Por lo que a continuación vamos a meter nuestro cursor dentro de las etiquetas de anclaje. Lo que vamos a hacer aquí es poner una imagen de ese mismo marco de póster dentro de esta etiqueta de ancla . Por lo que para los usuarios que no ven el video en su cliente de correo electrónico, tendrán el mismo marco de póster que se vinculará a tu sitio web que tiene el mismo video. Por lo que comenzó una fuente de espacio de etiqueta de imagen es igual. Apuntemos al mismo archivo J Peg que nos usamos el marco de póster dentro de la videotecnología . Es un video slash nuestro viñedo dot jpeg. ¿ Ahora qué? Eso agregó. Voy a entrar aquí y sólo formatear este poquito. Ahora este correo electrónico es sensible, así que vamos a necesitar agregar algunas reglas CSS para asegurarnos de que este objeto de video también sea sensible . Vamos a desplazarnos hacia arriba en nuestro archivo HTML en la parte superior donde tenemos por todas las consultas de medios. Vamos primero al interior de las consultas de medios que especifican un ancho máximo de 660 píxeles. Bajemos aquí si regresa, vamos a hacer es empezar con una regla que apunte al video. Entonces, video, vamos a establecer el ancho en 416 píxeles y vamos a poner la bandera importante en eso. Entonces vamos a ajustar la altura a 312 píxeles y de nuevo poner ahí la etiqueta importante. Y luego sólo por buena medida, vamos a apuntar a la imagen dentro del video. A pesar de que no deberíamos ver esto para los clientes que soportan video, vamos a establecer la altura y el ancho de la imagen para que sea lo mismo que el video. Por lo que 416 para el ancho y 312 para las alturas y a impuesto importante a ambos los van a formatear eso y luego ahora dentro del máximo con 510 píxeles, vamos a bajar después de un pie de página. Vamos a entrar aquí tenía las mismas dos etiquetas y vamos a cambiar las propiedades de ancho y altura un video con vamos a establecer eso a 300 píxeles con la bandera importante, vamos a establecer la altura a 255 píxeles en la etiqueta importante en eso también. Y luego vamos a apuntar a la imagen dentro del video, vamos a establecer el ancho en 300 píxeles para que coincida con el tamaño del video. Entonces vamos a ajustar nuevamente la altura a 255 para que coincida con el tamaño del video. Entonces una vez que terminemos, agregando que voy a formatear esto en una vez que hayas hecho estos cambios, guarda tu trabajo. Volvamos a cambiar a nuestro navegador. Subamos y peguemos. Recargar. Ahora dentro de nuestro navegador verá que los promotores se han ido. Y ahora tenemos este videoobjeto mostrando aquí. Entonces en mi navegador para probar esto, bajemos y presionemos el botón de reproducción. Y ahora son las reproducciones de video. Podemos ver algo de animación y podemos escuchar un poco de audio. Por lo que una vez que veamos que esto funciona correctamente en nuestro navegador irá a probar esto en nuestro entorno de pruebas de correo electrónico . Entonces cuando están probando Esto funcionó muy bien en IOS y OS 10 Male. Ahora esto incluye el programa de correo incorporado en el Macintosh. Incluye iPad, iPhone y iPod touch también, y esto también funcionó en outlook dot com cuando usamos chrome, firefox y Safari, y también tuvimos éxito con Outlook corriendo en la versión Macintosh 2011 y para plataformas móviles adicionales. Tuvimos éxito en Andrew 2.3 y cuatro dato y en Windows phone 7.5. Ahora, en todos los clientes de correo electrónico donde esto no funcionó, sí terminamos con una imagen con un enlace de anclaje alrededor de ella. Por lo que con clientes como Lotus Notes, Yahoo, Gmail un pozo y perspectivas para Windows, aún podemos ver el marco del póster, que a su vez enlazará a la página web donde podrán ver este video. Ahora. También quiero demostrar algunas de las diferencias de experiencia de usuario entre los clientes de escritorio y los dispositivos móviles. Entonces aquí tengo un dispositivo móvil, y si subo aquí y lanzo mi correo electrónico, voy a entrar en el nuestro Viñedo, envíame un email scroll aquí arriba, podemos ver el video estaba funcionando aquí. No obstante, cuando entre aquí y toque el video, va a cambiar a su reproductor móvil incorporado y jugar esto en pantalla completa. Una vez hecho el video, esto volverá a nuestro correo electrónico. Ahora, en algunos dispositivos de tableta, podemos reproducir el video en línea igual que podemos en algunos clientes de escritorio. Entonces para demostrar esto, veamos de nuevo este correo electrónico en un dispositivo tablet. Voy a desplazarme hacia arriba, ver el video, y lo que va a pasar aquí es que cuando toque el video aquí va a sacar los controles. Veremos el reproductor de video justo en línea otra vez, muy parecido a lo que veríamos dentro de un cliente de escritorio. Ahora bien, considerando los clientes de correo electrónico que no soportan video te darán una imagen enlazada. Creo que el video html cinco fue un tipo de medios muy viable para tus correos HTML. 26. Encoding e incrustar imágenes Base64: ahora otra forma en que podemos especificar gráficos e incrustarlos en HTML es a ti eres yo y código son imágenes. Esto básicamente significa que vamos a especificar los gráficos como pedir código ahora para explicar a qué me refiero con esto. Típicamente, tenemos gráficos Web. ¿ Cuáles son nuestros archivos binarios reales en nuestro equipo? Al igual que un regalo para una clavija J. Pero también podemos especificar los mismos gráficos usando código de preguntas. Entonces si fuera a acercar un poco esto, podemos ver un poco de cómo podría verse el código. Se trata de este patrón de texto, que está codificado en un formato base 64, que luego se puede convertir de nuevo en un gráfico en nuestra página, no típicamente con gráficos. Los especificamos en una etiqueta HTML. Tenemos una etiqueta de imagen con una fuente igual al nombre del archivo real para hacer uso del código base 64 . Seguimos usando una etiqueta de imagen, pero la fuente aquí va a igualar datos Colón. Entonces le vamos a dar un logo de nombre, regalo grande, especificado, basado 64 entonces tener todo el código que está representando ese gráfico ahora con el fin de crear en base 64 imágenes, podemos usar una serie de online o algunos editores de texto podrían haber incorporado enchufes. Para encontrar una herramienta en línea. Puedes buscar en un motor de búsqueda y buscar algo como convertir imágenes a base 64. Aquí hay uno en la parte superior que me gusta por Web coder tools dot com. Eso voy a abrir en una nueva pestaña. Ahora, en esta página de abajo, puedo ver la opción de subir un gráfico Voy a bajar aquí y hacer clic en Elegir archivo desde el escritorio. Vamos a entrar en mi directorio de imágenes de email y vamos a elegir el logo grande dot gif. Y una vez que golpee subir ese gráfico se subirá al servidor y ellos tomarán todos datos binarios y los convertirán en datos preguntativos. Y aquí abajo en este formulario campos. Han creado una etiqueta de imagen para nosotros, que podemos desplazarse y copiar todo este contenido. E incluso nos han dado una imagen de fondo, y en ambos casos verás que empieza con datos. Imagen de colon especifica, es un regalo, y de nuevo podrías poner un nombre de archivo aquí si quieres basado 64 entonces todo este código. Entonces otra vez, aquí abajo en el CSS, veremos exactamente la misma estructura. Ahora, una cosa a tener en cuenta es que representar datos binarios como pedir va a ser un poco más grande y de tamaño de archivo. Se sale a aproximadamente un 30% más grande. No obstante, alcista es que no hay una segunda llamada al servidor. Todos estos datos van a estar dentro del HTML. Por lo que para seguir junto con este método, vas a querer tomar cada uno de los gráficos en tu correo electrónico y convertirlos a una imagen base 64. Entonces vamos a colocar en nuestro HTML. Ahora de vuelta en nuestro editor de códigos. Algunos editores de código tienen enchufes que convertirán gráficos en imágenes base 64 justo dentro de tu editor de texto. El que estoy usando aquí para este curso pasa a tener esa característica. Entonces primero me voy a desplazar hacia abajo en nuestro HTML. Voy a encontrar la imagen referencia a ese gráfico en particular. Entonces aquí estamos. Imagen largo punto grande Dar aparecer aquí mismo puede abrir mi panel lateral aquí. Ahora qué tenemos que hacer con muchos de estos enchufes ya que necesitamos especificar este gráfico desde la raíz del disco duro. Voy a venir aquí y elegir el camino de copia. Vengamos aquí y sustituyamos esa cuerda por esto. Todo esto realmente está haciendo es especificar la posición exacta del logo grande desde el disco duro de mi computadora . Entonces volúmenes el nombre del disco duro el usuario, mi cuenta de usuario escritorio, mi correo electrónico, que es la carpeta del proyecto en nuestras imágenes de escritorio y luego local grande. Doug, si una vez que estos aire en su lugar voy a seleccionar todo este camino, sube los enchufes y elige basado 64 codificar imagen. Ahora, el resultado aquí va a ser exactamente el mismo que lo que obtuvimos de nuestra herramienta en línea. De nuevo, la eficiencia podría ser un poco más rápida si tu editor de texto tiene un enchufe, y si me desplaza aquí abajo, podemos ver todo ese código extra ahora apareciendo en un lado de la página. Entonces una vez que hayas completado esto, cada referencia gráfica individual tanto en tu CSS como en el HTML va a ser reemplazada para incrustar tus gráficos como preguntando dentro de tu email, y una vez que hayas convertido todas tus imágenes, podrás entonces probar tu correo electrónico. Entonces cuando probé esto, encontré que esto funcionaba muy bien dentro de IOS y OS 10. Esto incluye iPhone, iPad, iPod Touch y Apple mail, y esto también funcionó en la última versión de Thunderbird. Ahora, en los casos en que esto no funcionó, que eran todos los clientes de correo electrónico restantes, en lugar de ver cualquier tipo de gráfico, obtenemos un enlace roto. vemos el texto alternativo que especificamos, pero de nuevo, no vamos a ver ninguno de los gráficos especificando en esos otros clientes de correo electrónico. Entonces si bien realmente me gusta la capacidad de incrustar imágenes dentro de nuestro contenido HTML, el hecho de que veamos una serie de imágenes rotas dentro de la mayoría de los clientes de correo electrónico me aleja de usar esto para correo electrónico. Ahora mismo, sin embargo, hay algunos usos adicionales que tal vez quieras usar. Esta técnica, para esto es compatible con todos los navegadores Web más modernos. También puedes usar este enfoque para en gráficos de cama en archivos CSS y luego reutilizar esas clases como hojas de cálculo. Esto se puede utilizar como formulario en las imágenes de la tienda dentro de las bases de datos, e incluso se puede utilizar esta técnica para explorar el suministro de un archivo HTML para anuncios Web . 27. Uso de gráficos de alta definición (Retina) en tu correo electrónico HTML: en esta lección, vamos a hablar sobre el soporte de pantallas habilitadas para alta definición o retina con tus gráficos dentro de tu correo electrónico. Por lo que primero quiero hablar de lo que tenemos que hacer a un gráfico para que sea habilitada de alta densidad o retina. Ahora, Antes teníamos pantallas habilitadas para alta definición o retina, teníamos densidad estándar o baja densidad, que estaba en algún lugar alrededor de 120 píxeles por pulgada. Desde entonces, los fabricantes han podido caber cada vez más píxeles en una pantalla. Cuando tenemos alrededor de 240 píxeles por pulgada, pasamos a las pantallas de alta definición o alta densidad, y esta es la primera versión de alta densidad. Al momento de esta grabación, los fabricantes han podido crear pantallas que soportan 34 y cinco K, que es 34 y cinco veces el número de píxeles que la pantalla de densidad estándar soportaba. Entonces lo que esto significa para los gráficos es que si creamos un gráfico de este tamaño, se van a mostrar en el dispositivo. Un dispositivo de definición estándar mostrará los gráficos con toda la fidelidad que tenemos en el gráfico original. No obstante, si tomamos ese mismo gráfico y los visualizamos en dispositivos de alta densidad. Esos dispositivos tienen más píxeles de los que se representan en la imagen. Por lo que esto resultará en que las imágenes se vean borrosas o difusas porque el dispositivo tiene que duplicar el número de píxeles, ya que esos datos adicionales no están en el propio archivo de imagen. Entonces lo que necesitamos hacer para las pantallas de alta definición se utiliza el doble del número de píxeles en la imagen original, que cuando se visualicen a través de estos dispositivos de alta densidad, haya píxeles en la imagen que podrían representarse a través de todos los píxeles en la pantalla de alta definición. Ahora bien, si has estado siguiendo en este curso con la creación de nuestros gráficos y Photoshopped, tenemos una forma realmente rápida de que podemos crear gráficos de alta definición dentro de una tienda de fotos . Entonces de vuelta en los archivos de ejercicios, voy a entrar aquí y abrir imágenes de banner que PSD ahora dentro de aquí Tenemos una serie de objetos inteligentes. Hablamos de esto antes en el curso vengo aquí y selecciono a esta persona. Objeto inteligente golpeó Commander Control T para transformarse. Puedo ver aparecer que esta imagen se está escalando 39.8% en el ancho y 40% en la altura. Esto me dice que el objeto inteligente original dentro es más del doble de ese tamaño. Por lo que eso significa que podemos duplicar nuestra tienda de fotos tamaño lienzo a su vez duplicará todos los tamaños de las rebanadas. Y entonces simplemente podemos decir sobre un conjunto de gráficos de alta definición. Entonces voy a golpear la tecla de escape, voy a bajar al menú de imágenes, bajar al tamaño de la imagen. Vamos a entrar aquí, asegurarnos de que el ancho y la altura estén unidos. Cambiemos 700 a 1400. Eso cambiará automáticamente la altura también. Voy a hacer clic en Aceptar, fototienda aumentará el lienzo. Aumentará el tamaño de todas las rebanadas. Escalará las transformaciones de los objetos inteligentes y nos dará nuestro nuevo conjunto de gráficos. Me gusta ver Clave para mi herramienta de corte doble clic. El primer rebanada que podemos ver. Esto ahora es 12 76 por 3 60 Es hasta banner grande. Vamos a entrar aquí y cambiar esto para subrayar dos X click. OK, entonces entro en cada una de las rebanadas restantes y cambio eso para que podamos guardar esto en el mismo directorio y todos nuestros gráficos de alta definición tendrán un guión bajo para salir del final. Ahora, voy a hacer una cosa más aquí sólo para impugnar esto remotamente. Ya que estaré usando un servicio en línea para probar esto, no tendré forma de saber si las imágenes resultantes que estoy viendo a través de mi navegador Web me están mostrando los gráficos de retina o no. Entonces lo que voy a hacer temporalmente es entrar aquí y añadir una capa de ajuste llamada invert . Y voy a invertir todos estos gráficos individuales de esta manera. Cuando miré las pruebas en mi servidor remoto, puedo ver si se están habilitando los gráficos retina. Si se están utilizando correctamente, entonces puedo entrar aquí y quitarme esta capa de ajuste. Entonces de nuevo, solo estoy haciendo esto para probar. Entonces ahora, con todos mis tamaños gráficos duplicados y mi capa de ajuste en su lugar, voy a bajar al menú de archivos y elegir guardar como entonces en mi carpeta de plantillas de arte. Vamos a llamar a este banner imágenes subrayan dos X. Ahora tengo dos conjuntos de imágenes de banner. Tengo mi definición estándar, y mi alta definición ahora también hará el mismo proceso para todos los gráficos de contenido. Entonces duplicaremos el tamaño. Pondré un ajuste de capa para invertir en la parte superior, y luego tendremos toda una serie de gráficos de alta definición. Cuando tengas tus dos archivos de Photoshopped modificados, baja al menú de archivos. Elija Web más segura. Toda su optimización es recordada. Bajaremos y escogeremos guardar luego desde el escritorio elegirá mi email escogerá el directorio de imágenes , todos los rebanados de usuarios, y luego le pegaremos. Guardar Ahora de nuevo en nuestro archivo de proyecto, Vamos a abrir el directorio de imágenes. Y como he guardado todos mis gráficos de banner, puedo ver ahora tengo banner grande subrayado dos X, la imagen fantasma. Lo mismo para medio, lo mismo para pequeño. Y luego una vez que hayas hecho lo mismo con tus imágenes de contenido, archivo Photoshopped tendrá toda una serie de dos gráficos X adicionales para todas las imágenes de contenido. Por lo que dentro de aquí, puedo ver esta firma todos los iconos individuales, los logotipos y los gráficos promocionales. Ahora, una vez que tengas todos tus gráficos de doble tamaño creados. Cerremos nuestro directorio Imágenes. Cerremos nuestro archivo de Photoshopped. Volvamos a los archivos de ejercicio y hay un nuevo archivo en la carpeta tres fragmentos llamados Pixel ratio dot CSS. Vamos a entrar aquí y abrir esto en nuestro editor de texto ahora, al igual que las consultas de medios se crearon antes para los tamaños de pantalla individuales. Aquí tenemos algunas consultas de medios donde tenemos dos conjuntos de propiedades. Tenemos pantalla Onley, y aquí está nuestro máximo con para la pantalla media que un final. Y entonces tenemos toda una serie de proporción de píxeles. Consultas de medios CSS. Entonces el 1er 1 que estamos definiendo aquí es para Web kit, así que la relación de dispositivos de píxeles también lo es . Y solo por nota, si estás apuntando a un iPhone seis, la relación de píxeles aquí estaría en el número tres, y entonces tenemos una coma. Entonces tenemos otra afirmación, que repite el tamaño, y luego apuntamos al Mosela un navegador que ópera. Después usamos la relación de píxeles del dispositivo estándar, y luego escogimos para pantallas también las resoluciones. Entonces esta consulta de medios aquí configura la pantalla media, más todas estas configuraciones diferentes del dispositivo y luego eso termina aquí y dentro de aquí . Lo que hemos hecho es redefinir las imágenes de fondo. Por lo que para el logo tenemos imagen de fondo. Y luego señalamos el guión bajo dos x versión de ese archivo de regalo, y luego también necesitamos establecer el tamaño de fondo. Esto establece el tamaño de escala de esa imagen de fondo. De lo contrario, la imagen entraría al doble del tamaño, que no queremos que suceda. Queremos obtener la ventaja de escalar un gráfico más grande hacia abajo al tamaño de pantalla más pequeño, y a medida que bajamos aquí y pasamos por el resto de las reglas, podemos ver nuestro banner mejor medio, el contenido de Tedy aquí. En realidad especificamos una imagen de fondo antes, por lo que necesitamos el cuidado de vuelo importante para anular eso. Y luego tenemos por todo el Individual Promo Sa's Bueno, entonces, si nos desplazamos hacia abajo, tenemos exactamente el mismo constructo. No obstante, el con esto se dice a 510 que los partidos son de tamaño pequeño, todavía tenemos todas las mismas banderas del navegador por aquí en nuestra configuración de resolución, y luego aquí abajo hemos vuelto a hacer lo mismo. Nosotros lo hemos dicho imagen de fondo para logo señaló esto para subrayar dos X dijo que tamaño de fondo y han hecho todas las mismas propiedades aquí también. Por lo que esto parece un montón de CSS. Pero lo que realmente estamos haciendo es redefinir cualquier imagen de fondo para pequeño y cualquier fondo para medio. Y luego tenemos las consultas de medios que están coincidiendo con el tamaño y las banderas individuales del navegador . Entonces, ¿qué vamos a hacer aquí simplemente bajar al menú de edición? Vamos a elegir, seleccionar todo. Entonces vamos a elegir copia. Entonces volvamos a nuestro correo HTML. Lo que voy a hacer es simplemente poner estos después de nuestras consultas de medios existentes, así que simplemente me desplazaré hacia abajo hasta después de la pequeña antes de la etiqueta de estilo final. Veamos si regresas y peguemos todas esas reglas. Ahora, en este punto, tienes una opción con lo que puedes hacer con las etiquetas de imagen dentro de nuestra pantalla grande . Por lo que tenemos todas nuestras etiquetas de imagen por defecto dentro de nuestro correo HTML. Entonces aquí abajo tenemos el logo grande, por ejemplo, ahora en CSS, no podemos cambiar el valor de los atributos fuente de una etiqueta de imagen Así que lo que esto significa es que tenemos que tomar la decisión sobre si vamos a usar el gráficos grandes en las etiquetas de imagen aquí o no. Un argumento en contra de poner los grandes gráficos dentro de las etiquetas de imagen es que las personas que están mirando la versión grande de tu correo electrónico probablemente estén en una computadora de escritorio, que no tiene pantalla de alta definición. O podrían estar usando uno de los clientes Web, que tampoco soportan algunas de las consultas de medios. Por lo que en cualquier caso, estaríamos enviando una gran cantidad de datos extra para las personas que no están en pantalla de alta definición. No obstante, si sí quieres usar las imágenes de alta resolución en las etiquetas de imagen, simplemente podemos entrar aquí y cambiar local grande para subrayar dos X, por ejemplo, y obtendremos el efecto de escala porque el ancho y la altura ya se han establecido. Entonces de nuevo, esto está completamente a la altura de lo que quieres apoyar dentro de tu pantalla grande. Ahora estoy decidiendo en contra de usar los gráficos de alta definición y la versión grande, y voy a probar estas pantallas pequeñas y medianas para que pueda ver si las consultas de medios están pateando. Entonces en este punto, subiré al menú de archivos elegiré guardar Ahora antes de ejecutar esto a través de cualquier software de prueba . Primero solo quiero asegurarme de que los medios de comunicación consulten aire funcionando correctamente. Por lo que puse este correo electrónico en nuestro servidor Web local. Golpeé esto con mi iPhone en modo retrato. Puedo ver la versión de pantalla pequeña en modo paisaje. Puedo ver la versión de pantalla media, y puedo ver todos los gráficos invertidos aquí, lo que me dice que las consultas de medios CSS están detectando correctamente la resolución de esta pantalla y cambiando los gráficos de alta definición. Y así ahora, con eso funcionando, ejecutemos esto en una herramienta de pruebas en línea. Entonces estoy usando el fuego aquí en los clientes móviles. Vista rápida. Puedo ver todos los gráficos individuales que se invierten, haciéndome saber que todos estos dispositivos están siendo detectados correctamente Ahora, además de justo lo que está disponible en el fuego, un sitio web. También puedes ejecutar tu propia prueba como lo hice antes de que me fui toe litmus y comprobarlo en otros dispositivos también, y verás que esto funcionará en sistemas de escritorio con pantallas de alta definición y cualquier tablet con alta definición exhibe también. Y creo que también vale la pena señalar que puedes usar esas mismas consultas de medios en tus diseños web sensibles. Esas consultas de medios no son solo por correo electrónico. Ahora. Crear gráficos de alta definición resultará en tamaños gráficos mucho más grandes, así que ahora sí quiero hablar de algunas alternativas. Por lo general, tenemos un tamaño de pantalla, que se representa aquí, y lo que la mayoría de la gente hará es tomar un gráfico en el doble del tamaño general. Entonces en este caso, son grandes. El gráfico de banners está ahora de 12 76 por 3 60 comprimido a 75% de calidad jp. Esto da como resultado un archivo que ahora es de 282 kilobytes. Una técnica que trato de ver si puedo conseguir un gráfico mucho más pequeño con toda la fidelidad que necesito ya que tomaré ese gráfico de alta definición y lo reduciré a cerca del 75% del tamaño original. Entonces en este caso, obtendré una imagen de 9 57 por 270 píxeles. También aumentaré la compresión J pay, así que pondré la calidad en 45%. Esto dará como resultado un tamaño de archivo de 82.2 kilobytes, y esto resultará en un archivo mucho más pequeño apenas un poco más del 30% del tamaño del archivo original . Y luego, cuando este gráfico también se escale al tamaño objetivo original seguirá obteniendo el beneficio agregado de tener píxeles adicionales en esa imagen para mostrar en toda esta área. Y si bien esta técnica siempre se verá mejor que un gráfico de definición estándar en muchos casos, esta técnica se verá comparable a la versión de alta definición con un tamaño de archivo mucho más pequeño . Por lo que la combinación de gráficos de alta definición con relación de dispositivos de píxeles consultas de medios CSS le permite comenzar a usar gráficos de alta definición en su correo HTML. 28. Validar tu código HTML: que antes de enviar nuestro email HTML y antes de cargar esto en 1/3 sistema de gestión de contenido de fiesta que desplegará los emails querrá validar a nuestros entrenadores para asegurarnos de que esté lo más limpio posible no hacer esto. Te recomiendo usar una herramienta gratuita por la W tres c llamada Servicio de Validación de Mercado. Puedes encontrar que en validador dot w three dot org en este sitio principal aquí tenemos unas cuantas opciones podemos pegar en la U R L Si tenemos el correo disponible en un servidor Web, podemos subir en archivo HTML donde podemos utilizar la entrada directa. Voy a elegir entrada directa. Lo que podemos hacer aquí es copiar y pegar todo nuestro documento HTML dentro de aquí. Entonces volvamos a nuestro correo que html Vamos a hacer un selecto todo Vamos a copiar todo el correo electrónico al portapapeles. Volveremos al servicio de validación, entraremos aquí y simplemente pegaremos todo el código. Una vez que eso esté en su lugar, bajemos aquí y pinchemos cheque. Ahora, Después de completar este curso, se puede ver que tenemos cuatro errores y también se puede ver que esto está revisando en HTML para documento Bono Transitorio. Si has optado por usar X html o ningún tipo de declaración, el servicio de validación marcará contra esos tipos de documentos para no ver cuáles son estas horas. Si nos desplazamos hacia abajo, podemos ver que todos estos se relacionan con una etiqueta de todo que no se especifica en nuestros iconos dentro de nuestros llamados. Ahora bien, como se trata de un correo HTML, no tenemos que especificar todas las etiquetas en las imágenes. Pero si por alguna razón el cliente de correo de alguien no carga las imágenes, dirán el texto todo en su lugar. Entonces si esto es algo que quieres arreglar, podemos volver al email dot html. Podemos desplazarnos hacia abajo y encontrar esos llamados. Encuentra una de las imágenes. Encontraré las uvas ícono que dan archivo aquí, y podemos agregar en todo texto aquí de uvas. Y luego se puede agregar en todo el texto a los tres restantes. Y una vez que tengas todo tu mercado validado a continuación, estamos listos para pasar a un entorno de pruebas y probados en diferentes clientes de correo electrónico. 29. Prueba tu correo electrónico en más de 30 clientes correo electrónico HTML: ahora, si actualmente utilizas un sistema de correo electrónico para desplegar tus correos electrónicos, probablemente tengas una forma de probar para diferentes clientes de correo electrónico para ver si tu correo HTML se está renderizando correctamente. Si no tienes un servicio de correo electrónico, hay un montón de servicios por ahí que no solo implementarán tus mensajes de correo electrónico sino también los probarán a través de un montón de dispositivos diferentes. Por lo que en línea hay bastantes servicios populares. Ahí hay activo monitor de campaña de campaña email sobre ácido, correo de fuego, chimpancé y contacto constante. Para este curso en particular, me voy a centrar en el fuego todos estos servicios de pago por aire. Pero como ya he mencionado antes, si estás usando un servicio como contacto constante o monitor de campaña, por ejemplo, también han construido en servicios de pruebas. Por lo que el litmus tiene la capacidad de mostrar capturas de pantalla de 34 de los clientes de email más populares, y obtenemos una representación en vivo en el sitio Web de cómo se están rendiendo los correos electrónicos a través de todos estos clientes individuales de correo electrónico. Esto también nos dará la capacidad de asegurarnos de que sean responsivos. El diseño está funcionando como podemos ver a la izquierda, que es una captura de pantalla de IOS y Android, e incluso pudimos ver algunos problemas de renderizado donde algunos clientes de correo electrónico no soportan el relleno adecuado dentro del área de contenido. Utilizan pequeñas reglas de pantalla CSS, pesar de que el tamaño de la ventana es claramente el tamaño grande e incluso casos en los que algunos gráficos aire se recortan porque no están soportando el tamaño de fondo. Después de Pete, ponemos ahora dentro del ambiente de fuego, podemos ver que tenemos a nuestros clientes de email agrupados en tres categorías. Clientes de correo electrónico de escritorio y podemos ver Apple Mail Outlook. Lotus Notes Thunderbird Desplácese hacia abajo un poco más debilitarse, Ver clientes de correo electrónico móviles. Android 2.3 y cuatro BlackBerry iPad outlook dot com, que es un cliente basado en Web que se ejecuta en dispositivos móviles. Symbian y Windows 75 Y luego aquí abajo podemos ver clientes basados en Web, incluyendo un bien Gmail outlook dot com y Yahoo. Entonces para ver algunos de estos Weaken simplemente bajar y hacer clic en uno de los correos electrónicos, y esto traerá una captura de pantalla de una computadora que está ejecutando un correo bien en Firefox y nos mostrará exactamente cómo se renderiza ese correo electrónico en ese cliente en particular. Ahora, una de las cosas de las que hablamos en la introducción fue el hecho de que vamos a tener un diseño que se degradará con gracia. Entonces si estamos viendo una captura de pantalla de Outlook 2007 por ejemplo, aquí podemos ver algunos ejemplos de algunas de las características que ponemos en su lugar no siendo compatibles por lo que no obtenemos las esquinas redondeadas en el botón aprender más. No obtenemos la sombra de gota, y no obtenemos el fantasma de fondo detrás del área de contenido aquí. Y si nos desplazamos hacia abajo, podemos ver que el relleno tampoco está soportado en las etiquetas de anclaje . Pero de nuevo, diseñamos esto de tal manera que si ciertos elementos de diseño se caían o se degradaban, la continuidad del diseño general aún permanece intacta Now. Otra área problemática para este correo electrónico en particular es Lotus Notes, 6.57 y 8.5. Notas de loto. Ocho Renders perfectamente, pero hay algo sobre 657 y 8.5 que no está apoyando el relleno en estos elementos individuales aquí y más adelante en el curso, te daré algunas sugerencias en caso de que necesites apoyar estos email clientes. Otra peculiaridad interesante es en Windows 7.5. No soporta las técnicas de diseño responsive, pero lo que sí hace es escalar todo el puerto Vieux. Entonces, si bien no obtenemos los beneficios de la respuesta del diseño reordenando la pantalla, sí vemos toda la composición escala hacia abajo dentro del puerto de vista. Ahora bien, si miramos nuestro diseño dentro de Gmail, el diseño funciona perfectamente. No obstante, Gmail no admite el diseño responsive. Por lo que si cargamos nuestro correo electrónico a través de Gmail en un dispositivo móvil, Gmail no cumplirá las reglas de diseño responsive. Por lo que aún tendremos desplazamiento horizontal a pesar de que estamos en un dispositivo que, si estuviera usando su aplicación nativa de correo electrónico, apoyaría la respuesta de las técnicas de diseño. Ahora un cliente de correo electrónico basado en Web que nos dará algunos problemas con el diseño responsive es Yahoo Mail. Como puede ver, el tamaño de la ventana aquí es mucho mayor que 510 píxeles. No obstante, Yahoo Mail hace referencia al tamaño de pantalla más pequeño en nuestra consulta de medios que estableció para 510. Entonces a medida que me desplaza hacia abajo, se puede ver que todos los estilos de diseño que ponemos en la consulta de medios de tamaño de pantalla más pequeña ahora se muestra como la pantalla grande dentro de Yahoo Mail. Ahora sí estableció la consulta de medios para que la pantalla más pequeña sea tan baja como 100 píxeles, solo para ver si había un umbral mínimo en el tamaño aquí que estaba haciendo que Yahoo utilizara el tamaño de pantalla pequeña e incluso establecer la pantalla más pequeña a 100 píxeles me dio el resultados aquí. Entonces, si bien todos los demás clientes de correo electrónico simplemente tenían problemas para representar el correo electrónico HTML en general, ninguno de ellos tuvo un problema con las reglas de diseño receptivas como Yahoo Mail lo hace. Entonces si Yahoo Mail es uno de los clientes que tienes que apoyar, te recomendaría no poner algunas de las reglas de respuesta. Por lo que puedes usar el mismo diseño exacto en el que hemos estado trabajando en este curso y simplemente no aplicar ahí Reglas de respuesta. Y hablaremos más de eso más adelante en el curso con sugerencias para correo Yahoo en la última área problemática. Quieres echar un vistazo a su BlackBerry cinco. Podemos ver aquí. Esto tiene un cliente de email gráfico completo dentro de él, pero notarás que las etiquetas TD en toda la rosa individual no se están expandiendo para ser el ancho de la tabla completa ahí dentro de ahora. Esto no es un comportamiento típico para las etiquetas TD. Y más adelante en el curso, ofreceré sugerencias de lo que puedes hacer para modificar el código para que funcione en BlackBerry cinco. Y con la excepción de sólo unos pocos clientes de correo HTML, se puede ver que este diseño, con su complejo diseñado en tablas anidadas, se está renderizando correctamente y la mayoría de los clientes de correo electrónico comunes que se están utilizando hoy en día y ahora por lo que resta del curso, hablaré de algunas sugerencias que tal vez quieras considerar para Yahoo Mail, BlackBerry five y Lotus notes. 30. ¡Sugerencia para Yahoo! Incompatibilidades de correo electrónico: ahora el tema que tenemos con Yahoo Mail es que Yahoo Mail no soporta las declaraciones de consulta de medios . Por lo que las reglas de la pantalla media y las reglas de la pantalla pequeña están siendo todas vistos por Yahoo. No se admite la consulta de medios de que especificar los tamaños individuales. Entonces una obra alrededor de eso que tenemos es que podemos convertir nuestros selectores basados en clases en selectores basados en atributos . Por lo que haríamos esto convirtiendo contenedor de punto de tabla en tabla y luego dentro de corchetes . Clase es igual a contenedor. momento, esto no está siendo apoyado por Yahoo, pero es apoyado por todos los demás clientes de correo electrónico. Y si es algún punto Yahoo sí comienza a apoyar los atributos electores pero no las consultas de medios . Mi segunda sugerencia sería hacer que tus pequeños gráficos lo suficientemente amplios como para abarcar la amplia ventana dentro de Yahoo Mail. Por lo que el banner de pantalla pequeña y el gráfico de fondo de pantalla pequeña necesitan ser lo suficientemente ancho en algún lugar alrededor de 640 píxeles para que no parezca un error cuando las reglas de la pantalla pequeña se rendericen dentro de la pantalla más grande. Y lo segundo que quieres hacer es crear otro conjunto de iconos para los call outs, ya que la propiedad de tamaño de fondo en nuestro CSS no está siendo compatible dentro de Yahoo Mail, por lo que tendrás dos conjuntos de iconos, el tamaño original y otro set establecido en 50 por 50. Y luego se puede hacer referencia a los que están dentro de las reglas para pantalla pequeña. 31. Sugerencias para la corrección de la presentación de Blackberry 5: si necesitas tu diseñado para trabajar en BlackBerry cinco. BlackBerry cinco no está apoyando las consultas de los medios. Pero como mencionamos antes, las etiquetas TD dentro de la mesa se elevaron aire. No extender su totalidad con lo que BlackBerry OS necesita es un ajuste con en todos los TD individuales. Y necesitarías poner esto en el camino del logotipo, el contenido de Roe titular y cada carretera que necesita ser 6 40 Ahora, la implicación para esto en la respuesta del aspecto del diseño es que esta es otra propiedad que vamos a necesitar establecer con nuestro consultas de medios de comunicación. Entonces, como puedes ver aquí siguiendo este acercamiento dentro de la pantalla media, vamos a necesitar poner otra propiedad en el contenido del titular del logotipo de punto de TV y todas las demás carreteras en las que vas a poner la con propiedad. Y hay que hacer lo mismo para las pantallas pequeñas también. Por lo que este enfoque va a resultar en muchos más, con propiedades que se asignan a tus reglas responsive toe anular todo el con propiedades que van a estar en las etiquetas T D. Por lo que si necesitas soportar blackberry five, tendrás unas cuantas más con propiedades para administrar dentro de tus reglas HTML y CSS 32. Subir consejo para apoyar Lotus Notes 6.5, 7 y 8.5: Ahora si necesitas apoyar a Lotus Notes sexto fuera, 57 o 8.5. La primera sugerencia que tendría es no usar las propiedades de fondo en las etiquetas de anclaje . No intentaría convertir las etiquetas de anclaje dentro del pro más en botones. Esos no están siendo soportados, por lo que puedes quitar el color de fondo en línea y tal vez cambiar el color de los enlaces a verde o a un color diferente. Y lo otro que consideraría hacer es poner una sola mesa celular dentro de cada una de la rosa de mesa. Notarás aquí que el relleno no está siendo soportado en las etiquetas TD, por lo que todo el contenido dentro de los TD está tocando los bordes. Entonces si ponemos una tabla dentro de cada tabla, camino que contiene contenido y establece el ancho en unos 615 píxeles y establecemos la alineación al centro nos dará la cantidad de espaciado insertado que estamos buscando en los TD más exteriores. Y si vas a seguir este enfoque, también quieres asegurarte de quitar la panning de todos los demás TD. Ya que todos los demás clientes de correo electrónico lo están apoyando y utilizaron el ancho del nido, la tabla para controlar cuánto espaciado tienes a la derecha e izquierda de tu email. Ahora, también vale la pena señalar que este enfoque dará como resultado que las tablas de promoción y las tablas de koala sean tres tablas de profundidad. Tenemos una tabla más exterior, que está centrando todo nuestro contenido, el contenedor de contenido principal y luego las tablas para los promotos y los llamados outs. Por lo que una vez que tengas eso en su lugar, querrás probarlo en todos los clientes de correo electrónico que quieras apoyar. 33. Planifica los diseños alternativos: Entonces ahora que hemos terminado de construir este diseño en particular, lo siguiente que estoy seguro que querrás hacer es empezar a construir algunos de tus propios diseños. Entonces quiero tomarme unos minutos aquí y explicar por qué pongo algunas de estas cosas juntas como lo hice primero, Cuando tenemos múltiples tablas dentro de la promo SRO, una de las cosas que probablemente querrás hacer es agregar más tablas dentro de esta zona. Ahora. El motivo por el que pongo dos tablas dentro de cada fila es porque algunos navegadores más antiguos no admitirán una etiqueta de borrado. Entonces si son dos, las mesas no tienen la misma altura. Entonces, por ejemplo, si esta segunda tabla aquí es un poco más pequeña porque hay menos texto o un gráfico más pequeño , lo que eso va a hacer en clientes de correo electrónico más antiguos como Outlook se le permite a la tercera tabla flotar al lado de la primera tabla, especie de debajo de la segunda tabla, y entonces eso permitirá que la cuarta tabla se mueva a la posición izquierda. Por lo que este no es el diseño deseado. Por lo que si quieres agregar más tablas dentro de esa fila, recomiendo agregar una fila completamente separada y poner tus tablas adicionales dentro de ahí porque los clientes de email más antiguos apoyarán la nueva fila de tabla antes de que soporten el etiqueta de despeje. Ahora bien, si recuerdas las cuatro tablas que teníamos en la fila de llamadas, no tenemos este problema porque no empezamos a reorganizar el diseño hasta que vayamos a las consultas de medios. Esto significa que sólo los clientes de correo electrónico más nuevos incluso verán esas reglas particulares en aquellos clientes de correo electrónico en particular apoyarán las etiquetas de borrado. Y ahora, si empiezas a buscar ideas de diseño alternas, quiero darte algunas recomendaciones sobre cómo podrías manejar algunos de estos diseños alternos . En primer lugar, si tienes un diseño como este donde tienes una barra lateral, esa va a ser toda la altura del contenido y un encabezado superior y un pie de página divididos en un par de grupos diferentes. Mi recomendación aquí es dividirlo en múltiples mesas. Esto se debe a que la fusión de múltiples celdas de tabla con diferentes mediciones en la misma tabla padre puede tener problemas de diseño. Por lo que de nuevo recomendaría romper miss en múltiples mesas. Y también, si quieres una barra lateral donde la altura de la barra lateral sea la misma altura que el área de contenido. Necesitarás una mesa con dos columnas dentro de ahí. Pero también recuerda aquí que para móvil seguirás teniendo esos datos de tabla a un lado. Por lo que o bien necesitas hacer que tu contenido sea realmente pequeño o tal vez ocultar contenido dentro de los datos de esa tabla. Ahora bien, si quieres hacer algo como esto, donde el área de encabezado y pie de página tienen celdas de tabla fusionadas, pero tienen las mismas mediciones. Puedes hacer esto dentro de una sola tabla, y esto renderizará con bastante precisión en todos los diferentes navegadores. Ahora bien, si quieres diseñar algo similar a esto, donde estás encabezando área y área de contenido son lo mismo con y tienes una estructura de columnas dentro del contenido. Puedes crear una tabla más exterior y luego pero anidadas en el interior para que puedas obtener imágenes junto a tu texto. Y esto es similar a las técnicas que utilizamos para el diseño en este curso en particular también . Y por último, ya que estás diseñando diseños alternos para tu email HTML, ten en cuenta que cuanto más simple sea tu diseño, más éxito habrás estado traduciendo tu diseño a través de todos los diferentes correos HTML 34. Dónde iría desde aquí: Ahora que has completado la creación de un correo electrónico HTML sensible, es importante que tus clientes sepan cuáles son algunas de las limitaciones que rodean. Correos electrónicos HTML. Hágales saber que el diseño no será perfecto en píxeles en todos los diferentes clientes de correo electrónico y en algunos casos, en función del diseño y lo que se soporta un cliente de email, es posible que tengas que hacer algunas concesiones de diseño. También debes conseguir que tu cliente de diseño priorice los clientes de correo electrónico HTML que necesitan para apoyar. Esto te ayudará a priorizar las concesiones HTML y CSS y de diseño que necesitas hacer en base a lo que soportaba a través de los diferentes clientes de correo electrónico. Y con sus nuevas habilidades de diseño, prueba diferentes combinaciones de HTML y CSS para crear nuevos diseños. Esto es lo que hice para lograr el diseño para este curso en particular, y luego probar y refinar tu abrigo para apoyar a todos los clientes de correo electrónico que están en tu lista. Y también querrás leer artículos y bloquear publicaciones en línea. Campaign Monitor tiene una guía gratuita a la que la mayoría de los proveedores de correo electrónico que enumeré anteriormente en este curso apuntan como un recurso de diseño para consejos de correo electrónico responsivos. Y con eso que concluye la creación de correo electrónico HTML responsive. Y de verdad aprecio que vieras mi curso