20 trucos básicos de HTML y CSS para especialistas en marketing
Publicado: 2015-04-24
En el pasado (software de automatización previa al marketing), el marketing no requería demasiadas habilidades técnicas. Hoy en día se ha vuelto esencial para el experto en marketing poder crear y modificar plantillas de correo electrónico, páginas de destino o sitios web sin necesidad de acudir a un desarrollador. Las dos habilidades técnicas más utilizadas para estas tareas son HTML y CSS . La explicación más sencilla de las dos es que HTML es el código que usa para definir la funcionalidad de su sitio o plantilla y CSS es lo que usa para vestirlo y hacer que se vea bien. Desde ironspider.ca : "Puedes pensar en CSS como las instrucciones que le dicen a un navegador web cómo mostrar tu página web, mientras que HTML está destinado a proporcionar instrucciones sobre qué mostrar en tu página web".
El propósito de esta publicación no es brindarle un curso intensivo de HTML y CSS básicos. Recomiendo visitar w3schools por eso, es ideal para aprender los conceptos básicos, así como para referencias rápidas de sintaxis. Esta publicación tiene como objetivo reunir los 20 mejores consejos y trucos que probablemente necesitará a diario al crear activos de marketing.
1. Cómo ver el back-end de cualquier sitio (Chrome)
Lo primero, lo más importante que debe saber, es cómo mirar el código fuente de un sitio y cómo inspeccionar un elemento específico en una página. Esto lo ayudará a identificar y solucionar problemas y a comprender cómo se codifica un sitio.
2. Construir y comprender cómo funcionan las tablas HTML
Las tablas son los componentes básicos de sus plantillas de correo electrónico y, en general, una parte crucial de HTML que todos los especialistas en marketing deben conocer.
Aquí hay una tabla de ejemplo muy simple con 3 filas y dos columnas:
A continuación se muestra el código de la tabla anterior. Lea los comentarios en marrón para comprender cómo funciona la tabla. <!--Los comentarios están en este formato-->
3. Adición de saltos de línea <BR>
Esta simple regla me ha ayudado con los problemas de texto más difíciles. Cuando su texto simplemente no se espacia correctamente, agregar un salto de línea o <br> moverá su texto a la siguiente línea.
4. Agregar una línea horizontal <HR>
Agregar una línea horizontal es una excelente manera de separar diferentes cuadros de texto. Se usa muy comúnmente en boletines de correo electrónico o en páginas de destino donde desea separar filas.
5. Diseña una línea horizontal con CSS
La línea horizontal predeterminada <hr> generalmente se verá extraña con su diseño si no está usando las fuentes predeterminadas. Mientras creaba una página de destino recientemente, encontré este sitio útil que tiene algunos estilos diferentes de líneas horizontales con la clase CSS definida para usted: simplemente puede copiar y pegar el código que desea usar en el encabezado de su plantilla y consultarlo dentro de la plantilla.
En el siguiente ejemplo, la columna superior derecha define el estilo hr dentro de las etiquetas <head> y </head>. El de la izquierda es el html, que hace referencia al estilo hr, y el de abajo a la derecha es el resultado.
6. Identificación de colores y fuentes
Es útil saber cómo determinar el código hexadecimal de los colores que encuentra en la web. Puedes usar la extensión de cromo ColorZilla para hacer esto.
Luego puede usar el color de fuente dentro de su html o css: <font color="#82B900"> o al crear imágenes (word, powerpoint, photoshop son ejemplos de programas comunes que le permitirán colorear elementos con un código hexadecimal específico)
También es muy útil poder identificar fuentes en diferentes sitios - WhatFont es genial para esto Las fuentes predeterminadas como Verdana se pueden referenciar así: <font face="verdana" color="green">¡Esto es texto!</font>. También puede incrustar fuentes personalizadas usando fuentes gratuitas de Google. Consulte el n.º 15 sobre cómo hacerlo.
Consulte más extensiones de Chrome útiles para los especialistas en marketing en mi publicación anterior aquí)
7. Bloque Div para Gmail
Gmail a veces agrega espacio adicional a las celdas de la tabla que solo contienen una imagen. Para solucionar este problema, puede agregar a su etiqueta de imagen de esta manera: <img src="image.jpg" />. A continuación se muestra cómo se ve antes (Ejemplo de Campaign Monitor )
Después:
8. Crear y editar una URL de imagen
El siguiente ejemplo muestra cómo agregar una imagen: incluya la etiqueta alt y especifique la altura y el ancho. La etiqueta de imagen debajo de <img> especifica la fuente, una URL donde se almacena su imagen, la etiqueta alt, que es lo que se muestra en lugar de la imagen en caso de problemas técnicos.
9. Cómo Agregar Márgenes
El siguiente ejemplo muestra cómo especificar los márgenes y el resultado. En la imagen a continuación, la segunda oración a la derecha tiene un margen de 2 cm (arriba) 4 cm (derecha) 3 cm (abajo) y 4 cm (izquierda) definidos así: margen: 2 cm 4 cm 3 cm 4 cm.
10. Cómo hacer referencia a una clase CSS dentro de elementos HTML
En el siguiente ejemplo, primero definimos la clase ".center" dentro de la cabeza. A continuación, puede configurar los elementos HTML h1 y p para que sean class=center. Esto significa que ahora sus etiquetas HTML obtienen el formato CSS de la clase que definió anteriormente.
Para configurar un elemento HTML específico para usar una clase, puede ver a continuación que definí p.center como la clase. La etiqueta h1 no se verá afectada incluso si hace referencia al centro de clase dentro de la etiqueta h1. Solo cuando llame al centro de clase dentro de la etiqueta ap, seguirá las reglas definidas para la clase central.
11. Cómo Agregar Estilos CSS
Hay tres formas de insertar estilos CSS. Se puede crear una hoja de estilo en cualquier editor de texto y guardarla como un archivo .css. Cuando un navegador lee una hoja de estilo, formateará los elementos de la página como se especifica en esa hoja de estilo. La otra opción es diseñar elementos HTML individuales en línea.
A. Hoja de estilo interna
Una hoja de estilo interna es útil cuando una plantilla tiene un estilo único. Puede definir estilos internos entre las secciones <head> y </head> de su HTML dentro de las etiquetas <style>.
B. Hoja de estilo externa
Una hoja de estilo externa es ideal si desea aplicar y cambiar el estilo de muchas páginas diferentes a la vez. Puede incrustar una hoja de estilo externa en varias páginas como esta:
<head> <link rel="stylesheet" type="text/css" href="myfilename.css"> </head>
C. Estilos en línea
Al usar estilos en línea, puede agregar estilos específicos a cada elemento con su HTML. El atributo de estilo puede contener cualquier propiedad CSS. En el siguiente ejemplo, cambié el color y el margen izquierdo de un elemento h1 en línea.
12. Cómo alojar su hoja de estilo en Google Drive
Primero cargue su archivo css en Google Drive. Luego comparta el archivo y establezca el permiso en "Cualquiera en Internet puede encontrar y ver" o en la versión anterior de la unidad "Público en la web".
Tome el enlace: tendrá que modificarlo un poco. El enlace para compartir debería ser algo como:
https://docs.google.com/file/d/file_code/edit?usp=sharing
Ahora cambia el enlace a:
https://googledrive.com/host/file_code
En mi ejemplo anterior:
https://drive.google.com/file/d/0B_Fv5uvm1EqoZ04wbzkxZ0NITEk/edit?usp=sharing
se convierte en:
https://googledrive.com/host/0B_Fv5uvm1EqoZ04wbzkxZ0NITEk
Para incrustar el archivo CSS externo en su plantilla:
13. Uso de unidades escalables
Usar la unidad "em" en lugar de px para hacer que elementos como la fuente, la altura de la línea o los márgenes sean escalables en una multitud de dispositivos. El siguiente ejemplo de las escuelas W3 le muestra cómo configurar la fuente para la etiqueta H1 para que sea 2em; esto significa que la fuente que se muestra tendrá el doble del tamaño de la fuente predeterminada del navegador.
La utilidad de la unidad em no se limita a los tamaños de fuente. Cualquier longitud, incluido el relleno y los márgenes alrededor de los elementos, se puede especificar en ems. Esto hace que sus plantillas sean escalables a cualquier tamaño de dispositivo, lo cual es crucial con el rápido crecimiento de la navegación móvil.
14. Acolchado
La imagen de abajo de goer.org es una gran explicación sobre cómo funcionan el relleno y los márgenes:
La definición de las escuelas W3 le muestra cómo especificar el relleno:
15. Uso de fuentes de Google en sus estilos CSS
Las fuentes de Google son fuentes gratuitas de código abierto a las que puede hacer referencia en su CSS. Después de seleccionar las fuentes que desea de https://www.google.com/fonts puede hacer referencia a la hoja de estilo dentro de las etiquetas <head> de su código. Vea la captura de pantalla a continuación.
Luego puede hacer referencia a estas fuentes al diseñar cada elemento de su plantilla. En el ejemplo a continuación, saqué la fuente "Lato" agregando el código que Google Fonts me proporcionó y luego lo usé para definir el cuerpo, los estilos h1 y h2:
16. Ajustes básicos para hacer que su plantilla responda
Para crear una imagen de encabezado de correo electrónico HTML receptivo que sea fluida en todas las vistas en cualquier dispositivo, debe usar tablas HTML con CSS incrustado de 100% de ancho y una altura de automático. Puede ir un paso más allá y agregar consultas de medios móviles en su hoja de estilo, lo que le indica a todos los clientes de correo electrónico y navegadores móviles que muestren el contenido con el ancho de px que establezca. Este método básico se puede aplicar a todas las imágenes en su plantilla HTML, transformándolas en receptivas. (Consejo: Nigel, diseñador de SEP)
17. Creación y estilo de un formulario personalizado
Un formulario HTML se crea usando etiquetas <form>. Luego puede usar la etiqueta <input> para crear varios campos, como campos de texto, casillas de verificación, botones de radio, botones de envío, etc. Un campo de ejemplo sería, <input type="text">. Esto define un campo de entrada de una línea en el que un usuario puede ingresar texto. Puede encontrar una lista completa de los campos que puede crear aquí .
Una vez que se haya creado, querrá diseñar su formulario. Hace poco encontré este sitio web que le proporciona el código para algunos formularios con diferentes estilos. En el siguiente ejemplo, puede ver parte del código (esto es solo un fragmento) y el formulario que produce debajo de él.
En el ejemplo anterior, una vez que haya definido la clase en el encabezado, puede hacer referencia a ese estilo agregando la clase a la etiqueta HTML <form> de esta manera:
18. Cómo validar un formulario y mostrar mensajes de error en línea
Este ejemplo explicará cómo hacer que un formulario devuelva "Este campo es obligatorio" y resaltará los campos en rojo si el usuario deja alguno en blanco.
Admito que tuve que buscar este en una fuente colectiva ya que no estoy muy familiarizado con Javascript (gracias a nuestro desarrollador Scott), pero creo que es muy útil poder implementarlo.
Necesita agregar un detector de eventos al botón Enviar para que el script pueda ejecutarse antes de que se envíe el formulario. Después de esto, ejecuta un bucle para verificar los campos obligatorios para asegurarse de que todo esté completo (puede hacerlo fácilmente agregando una clase específica a cada campo que desea validar).
Si hay algún error (campos no completados), vamos a tener que establecer una bandera que diga que sí. Si ese indicador está configurado, debemos evitar que se envíe el formulario y agregar el resaltado de errores para el usuario final. ¡Si no hay errores, podemos continuar con el formulario como de costumbre!
// The ID of the submit button on the form (in our example) was 'get-quote' so we bind our listener to that
jQuery("#get-quote").click(function() {
// Declare and reset our error value each time the script runs
var error = false;
//'input-validate' is the class I would set on each of the fields I wanted to check
jQuery(".input-validate").each(function() {
// Get the value of the current item in the loop
var isSet = jQuery(this).val();
// Check to see if the variable is an empty string or a null value
if (isSet == "" || isSet == null) {
// Indicates we found an error
error = true;
}
// This adds our user-facing error highlighting
// We run this within our .each() loop so we can use jQuery's 'this' selector to modify the current item in the loop
If (error == true) {
// This adds a red border around the element with an error
jQuery(this).css("borderColor", "#ff0000");
// This changes the placeholder text of the form element
jQuery(this).attr("placeholder", "This field is required");
}
// If no errors are found we need to remove our past error highlighting
else {
// This returns our borders to their original colour
// There's no need to overwrite 'placeholder' this time because the user will have done that themselves
jQuery(this).css("borderColor", "#3c3c3c");
}
});
// If we have any errors we need to stop the form from being submitted
If (error == true) {
event.preventDefault();
}
// If there are no errors we proceed with submission
else {
jQuery("#get-quote").submit();
}
});
Los elementos del código anterior se pueden modificar para adaptarse a su caso de uso específico.
19. Alineación de imagen
Para alinear una imagen, todo lo que necesita hacer es agregar "abajo", "medio", "arriba", "derecha" o "izquierda" a la etiqueta <img>. En el siguiente ejemplo, puede ver lo que sucede cuando los usamos. Nota que estos no son compatibles con HTML 5 (W3 Schools )
20. Colspan y hileras
Colspan le permite crear datos de tablas que abarcan varias columnas. En el siguiente ejemplo, puede ver lo que sucede cuando los datos de la 4. a fila ("Ahorros totales: $200") se configuran para abarcar dos columnas.
Rowspan le permite crear datos de tabla que abarcan varias filas. En el siguiente ejemplo, creé una columna adicional llamada "Ahorro total" y establecí el valor "$200" para abarcar dos filas.
Conclusión
Esta no es de ninguna manera una lista completa de las cosas que necesita saber. Hay muchos recursos que puedes usar para aprender más, pero lo más importante es practicar. Aprendí mucho al simplemente saltar, hacer ajustes y obtener una vista previa de los resultados (asegúrese de crear una copia que pueda romper sin ninguna repercusión). JS violín es una herramienta en línea gratuita que le permite agregar HTML, CSS y Javascript y ver el resultado combinado. Lo usé para ilustrar varios ejemplos en esta publicación y recomiendo usarlo para jugar con el código.
¡Feliz construcción y destrucción!
* Trabajo de imagen a través de Kaptain Kobold , nidhug 