Desarrollo de correo electrónico responsivo en HTML

1. ¡Hola!: Hola, mi nombre es Vanessa Bias y te estaré enseñando desarrollo de correo electrónico responsivo. Tu proyecto de clase será tomar una plantilla estática de correo electrónico HTML y convertirla dispositivos escalables y móviles utilizando las técnicas que utilizo en mi trabajo cotidiano. Esta clase está orientada a estudiantes que entienden los conceptos básicos de HTML, y CSS. Pero voy a explicar los conceptos utilizados en esta clase a medida que avanzamos. Para una imprimación sobre el desarrollo de correos electrónicos HTML estáticos, puedes ver mi clase de escultura anterior, intro al desarrollo de correo electrónico HTML. Empecemos. Codificación feliz. 2. Paso de proyecto 1: añade las consultas de medios: Puedes descargar estos archivos de proyecto desde abajo y la clase de Skill Share. Así que como puedes ver, este archivo de correo electrónico no es responsable móvil.Así que vamos a empezar agregando las consultas de medios a este correo electrónico. Puedes agregar tantos puntos de rotura como quieras. Pero para esta clase sólo estaremos cubriendo un punto de ruptura. Por lo que dentro de las etiquetas de estilo, vamos a agregar una consulta de medios con un ancho máximo igual a 480 píxeles. Por lo general, cuando estás diseñando para web, quieres asegurarte de que estás diseñando el móvil primero y luego pasar a tus puntos de ruptura de escritorio. Pero para el correo electrónico generalmente hacemos escritorio primero y luego lo desglosamos para móviles. Entonces si quieres asegurarte de que tu consulta de medios esté funcionando, una buena prueba es cambiar el color de fondo o algo de esa naturaleza para que realmente puedas ver que la consulta de medios está ON y eso te ayudará con la solución de problemas más adelante hacia abajo la línea si tu CSS no está funcionando. Entonces vamos a hacer un color de fondo de rojo y aquí agregué el selector universal, así que va a cambiar el color de fondo de cada elemento en el correo electrónico. Entonces voy a “Guardar” eso y volver al navegador y “Refrescar”. Cuando hago más pequeño el tamaño de la pantalla, se puede ver que cambió a un color de fondo rojo. Entonces eso me dice que la consulta de medios está funcionando. Entonces ya no necesitamos eso, para que podamos borrar eso y volveré a golpear “Save”. En el siguiente video comenzaremos a descomponer este correo electrónico a un tamaño móvil. 3. Paso de proyecto 2: añade el bloque de pantalla: Ahora vamos a cambiar el CSS para hacer este diseño de tres columnas para que cada columna se apone en un tamaño de pantalla móvil. Para empezar, vamos a crear una fila para tablas, filas de tabla, y celdas de tablas y vamos a darle un ancho de 100 por ciento por lo que es escalable y vamos a darle una propiedad de visualización con el valor de bloque. Lo que esto va a hacer, esta es la clave aquí mismo para asegurarse de que todo se apone en el móvil. Entonces porque tenemos algunas imágenes que son más anchas que otras y tenemos algunas imágenes que son más anchas que el punto de ruptura, vamos a hacer que estas imágenes sean escalables dándole un ancho del 100 por ciento y nos refrescamos y cambiar el tamaño de la pantalla y se puede ver que las columnas ahora se están apilando una debajo de la otra. Pero todavía estamos consiguiendo una barra de desplazamiento de izquierda a derecha y en realidad no se están conteniendo dentro de la mesa. Lo que podemos hacer ahora es arreglar eso es agregar un selector universal, por lo que el asterisco, y vamos a darle una propiedad de dimensionamiento de caja con el valor de border-box y lo que esto hace es que incorpora el relleno y el borde al elementos ancho total. Entonces va a hacer eso por todo. Entonces volvemos atrás y golpeamos Refresh, y se puede ver que ya no tenemos una barra de desplazamiento y las imágenes ahora están contenidas dentro de la tabla. 4. Paso de proyecto 3: añadir clases de CSS: Hay elementos específicos a los que quieres apuntar usando CSS en lugar de solo apuntar a cada imagen o cada tabla individual. Entonces en este caso, tenemos la imagen se establece en 100 por ciento web, por lo que son escalables. Pero desafortunadamente, eso también apunta a los iconos de redes sociales con los que no queremos ser un 100 por ciento en la parte inferior del correo electrónico. Por lo que podemos usar una clase CSS para solucionar esto. Entonces si nos desplazamos hacia abajo hasta la parte inferior del HTML, podemos agregar una clase, y vamos a darle a esta clase un nombre que sea reconocible más adelante. Entonces vamos a hacer iconos sociales y podemos simplemente copiar eso para que no tengas que reescribirlo, y pegarlo en cada una de estas imágenes. Guarda y desplázate de nuevo hasta el CSS y el cabezal, y podemos agregar dentro de la consulta de medios esa clase con un ancho de, quiero decir que unos 30 píxeles suena bien. Queremos que todos puedan caber en una fila y guardar y luego refrescar la página, y se puede ver que las imágenes o los iconos de las redes sociales son ahora los 30 píxeles. Por lo que sólo necesitamos hacer esa regla CSS para apuntar a todos ellos. A veces no es una imagen que quieras cambiar, a veces hay otras cosas. Por ejemplo, este diseño de tres columnas aquí y este diseño de dos columnas, éste tiene, al redimensionarlo, menos relleno por debajo de las imágenes o menos de un margen por debajo las imágenes que los otros elementos de columna allí. Por lo que quiero agregar un poco de espacio por encima este subtitular para que sea consistente con cómo se ven los otros. Entonces lo que podemos hacer es, creo que deberíamos agregar un margen a esta imagen aquí para empujar hacia abajo este subtitular. Entonces si vamos a encontrarlo aquí, observatorio, y podemos darle a esto una clase de, digamos imagen observatoria y guardar. Después vuelve a subir en el CSS. Podría agregar imagen observatoria, y luego podríamos hacer un margen inferior de, digamos unos 15 píxeles y guardar y refrescar. Ahora se puede ver que el espacio por encima la subcabecera y por debajo de la imagen es consistente con las otras columnas. Pero cuando cambias el tamaño al ancho completo del escritorio, no ha habido ningún cambio. Sólo se aplica al tamaño móvil. Por lo que en el siguiente video, cubrirá el uso de display none para cuando queremos ocultar un elemento que no queremos ver en un tamaño de pantalla móvil. 5. Paso de proyecto 4: ocultar elementos no utilizados: En ocasiones, hay un elemento de tu correo electrónico que no quieres mostrar en tamaños móviles. Eso podría ser cualquier cosa de, digamos, una imagen que solo está ahí con fines decorativos en el escritorio y que ocupará demasiado espacio de pantalla en el móvil, o tal vez haya un enlace que quieras ocultar que es de un solo escritorio experiencia en la que no quieres que tus usuarios móviles hagan clic. En este caso, hay algo de espacio extra por encima del correo electrónico, encima del enlace de la vista en el navegador que es causado por algunas celdas de tabla no utilizadas aquí en el HTML. En el tamaño del escritorio, esto sí sirve para un propósito si quieres tener aquí algún texto preencabezado alineado a la izquierda o tal vez otro enlace, y luego, tener tu enlace de vista en el navegador alineado a la derecha. Ahí es donde lo colocarías en esta plantilla. Ya que necesitamos eso ahí en el tamaño del escritorio pero no en el tamaño del móvil, lo que vamos a hacer es que lo vamos a ocultar usando una propiedad display none. He nombrado mi regla display none, display none. Tiene una propiedad de display y un valor de ninguno, y lo que esto hace es decirle al navegador o al cliente de correo electrónico que oculte este elemento a la hora de este punto de ruptura. Podemos ir a esta primera celda de mesa aquí. Vamos a darle la clase de display none, y vamos a aplicar esa clase a ésta también, y guardar, y refrescar, y cambiar el tamaño. Se puede ver que ahora no hay espacio extra por encima del enlace de la vista en el navegador. 6. ¡Gracias!: Gracias por tomar esta clase. No olvides crear un proyecto en esta clase para lucir tu nuevo correo HTML responsive. Si tienes alguna pregunta sobre algún concepto cubierto en esta clase o algo que pudiera haberme perdido, deja un comentario a continuación o envíame un tweet. Como siempre, codificación feliz.