25 términos de diseño web que NO deberías olvidar

En el mundo del diseño web juega un papel muy importante el nivel de conocimientos que tengamos de diseño gráfico.

Hacer una página web uno mismo puede parecer algo sencillo o que cualquiera puede llevar a cabo. En este post te explico las implicaciones que tiene y las diferencias que hay con la contratación de un profesional.

Pero en este artículo no quiero hablar de la dificultad creativa a la hora de diseñar una web. En esta ocasión te voy a hablar de la parte técnica que implica llevar a cabo el diseño de una página web.

Porque crear una web no solo es cuestión de poner imágenes, textos y unos cuantos botones.

De hecho, existe una terminología que no todo el mundo conoce y no sabe cómo utilizar, cuyo conocimiento marcará la diferencia entre un diseño del montón y un diseño bien plantao.

A continuación te voy a mostrar un glosario de términos de diseño web de los que seguramente ya has oído hablar pero que nadie se ha parado a explicarte de manera sencilla y cercana (o campechana, como diría aquel).

Aquí viene «Papá Edu» a abrirte los ojos para que nunca más vuelvas a pasar hambre… quiero decir, para que nunca más tengas que preguntarle a nuestro Señor Todopoderoso y Omnipresente Google qué coño significa «esto» o lo «otro«.

Te voy a poner al corriente ahora mismo de 25 conceptos de diseño web que te vendrá muy bien conocer a la hora de diseñar tu página web (o la de tu primo el arquitecto), y aún encima por orden alfabético… ¡ni siquiera tienes que ordenarlos tú!

¡De nada, eh! 😛

Venga, vamooooooossssss!!!!!

#1. Anchor text

El anchor text o texto ancla es una porción de texto que contiene un link, enlace o hipervínculo (¡que viene siendo lo mismo, vaya!).

A la hora de asociar un texto a un link es importante que tengamos en cuenta lo que Google pone en valor. Es importante que el link sea lo más natural posible y que tenga relación con el contenido del enlace al que hace referencia, si no lo interpretará como una mala práctica.

Por ejemplo, si ponemos un enlace en el texto «diseño de páginas web» que dirige a una página que habla del apareamiento del pingüino emperador en aguas tibias…

Pues, ¡como que no!

Para poner un link a un texto, podemos hacerlo de diferentes maneras:

• Texto sin ancla (‘Naked‘ o ‘Desnudo‘): este texto muestra el link al natural. Ejemplo: https://refrescandonegocios.com.
• Texto de marca: texto que vincula un marca al enlace de la web. Ejemplo: Refrescando Negocios.
• Texto genérico: son los textos ancla que no dicen nada sobre «lo que hay detrás». Ejemplo: «este enlace«, «haz clic aquí«, «en este post«…
• Texto con palabras clave: puedes colocar un link en un texto que te interesa posicionar como palabra clave. Ejemplo: diseñador web freelance o diseño de páginas web con WordPress.

Texto anclado a un lugar específico de una página

Existe una modalidad de anchor text que se puede utilizar para enlazar un texto con una parte concreta de una página.

Por ejemplo, imagina que este texto lleva un enlace (de hecho, lo lleva) y que al clicar en él te dirije al término «Masonry Grid» de este mismo post…

¡Prueba, prueba! Haz clic en el enlace y verás el resultado.

Bien, pues para realizar este tipo de texto ancla o anchor_text necesitaremos hacer dos cosas:

1. Crear un ID en el lugar a donde queremos llegar al hacer clic en el enlace, con la etiqueta «name«: <a name=“TEXTOANCLA”>
2. Asociar el ID al enlace que nos llevará a ese lugar: <a href= “#TEXTOANCLA”>ESTE TEXTO</a>/. Fíjate que el ID en este caso lleva una almohadilla (#) delante.

Y ya está, ya conoces el primer término de diseño web que te quiero explicar. ¡Sólo te quedan 24, jejeje!

#2. Backup

Un backup es un término anglosajón para denominar una copia de seguridad.

En todos los ámbitos de la tecnología es necesario contar con una o varias copias de seguridad o backups de todos nuestros trabajos, pues en cualquier momento se puede quemar nuestro ordenador, puede venir un hacker a tocarnos la moral o simplemente metemos la mano en algo que no debemos  y se nos va todo nuestro esfuerzo a tomar viento…

¡Ciao, bacalao!

No subestimes el poder de una copia de seguridad. Ni tú ni nadie está a salvo de sufrir un problema y perderlo todo.

Para realizar backups de tu página web en WordPress te recomiendo el plugin UpdraftPlus.

#3. Breadcrumbs

Cuando navegamos dentro de una página web, muchas veces es necesario saber en qué apartado o página nos encontramos, pues en cuanto nos ponemos a avanzar niveles en la jerarquía de la web, puede que no sepamos exactamente dónde nos encontramos.

Para que el visitante de un sitio web sepa los niveles que ha avanzado desde la raíz hasta la página donde se encuentra, se le puede orientar gracias a las migas de pan o breadcrumbs (en inglés de Inglaterra).

Si no sabes de dónde viene lo de «migas de pan», es que no has leído Pulgarcito de pequeñ@.

Además de orientar a nuestros visitantes por nuestra página web, las migas de pan se utilizan también para «decirle» a Google cómo de profunda es la web por la que bucean sus robots/arácnidos, así que tanto para el visitante como para Mr G, las migas de pan son muy útiles y además buenas para el SEO.

La estructura de las migas de pan será más o menos así: Inicio > Página de nivel 1 > Página de nivel 2 > Página de nivel 3.

¿Lo tienes claro? Pues seguimos con otro concepto…

#4. Color Hexadecimal

Existen varios modelos de color estandarizados internacionalmente para su uso en todo tipo de soportes.

Desde antes de la llegada de Internet ya existían los modelos RGB y CMYK, los cuales siguen vigentes hoy en día.

El RGB es la mezcla aditiva de tres luces de color Rojo, Verde y Azul (Red, Green y Blue), y es el estándar para medir el color en dispositivos tecnológicos cotidianos como monitores de ordenador, televisores, tablets o móviles.

La suma de estas tres luces da lugar a la luz blanca.

Por otro lado tenemos el CMYK, que es la mezcla sustractiva de tres tintas de color Cían, Magenta y Amarillo (Cyan, Magenta y Yellow), las cuales, sumadas, dan lugar a la tinta Negra (la «K» de Black).

Estas tintas son las que se usan para cualquier soporte físico, como papel, un lienzo, una pared, etc. y como son colores basados en tintas, juntos forman el modelo utilizado en las imprentas o para imprimir con nuestra impresora de la oficina o de casa.

La explicación de estos dos modelos estandarizados es necesaria para ahora explicarte el modelo de color Hexadecimal (HEX), un estándar que se utiliza básicamente para Internet, diseño de páginas web y otro tipo de soportes digitales que se vayan a ver en un navegador web.

Los colores HEX se representan con letras y números, precedidos de una almohadilla (#): #1A2B3C.

Un número hexadecimal puede tener valores del 0 al 9 y letras de la A a la F, por lo que, al contrario que un número decimal, que sólo puede coger valores del 0 al 9 (10 números en total), tendrá en total 16 posibles valores. Las letras de la A a la F tienen valor numérico del 10 al 15.

El color hexadecimal, además, no es un modelo diferente a los otros dos, ya que está basado en valores de color del RGB.

Los 6 valores que van tras la almohadilla (#) se cuentan de dos en dos, y cada uno de ellos es un valor de R (rojo), G (Verde) o B (Blue): #1A2B3C. De esta manera, el color representado nos estará diciendo qué cantidad de cada color lleva. Cuanto más altos sean los números y/o las letras, más cantidad de color hay que aplicar a la mezcla.

Este término ha sido algo más largo… buf… pero creo que era necesario explicarlo bien 🙂

¡Avanti!

#5. CSS

Si eres diseñador web (y si no lo eres, también)… habrás oído hablar millones de veces de los estilos CSS (Cascade Style Sheets o, en castellano, Hojas de Estilo en Cascada).

El CSS es un lenguaje que vino a dar vida al diseño y desarrollo web, facilitando en gran medida el poder asignar diferentes estilos a objetos de manera más o menos sencilla: colores, espacios, tamaños, etc.

Se llaman estilos en cascada porque tienen diferentes niveles jerárquicos. Un objeto puede estar cogiendo su apariencia desde diferentes niveles hasta configurar su aspecto final. Podría, por ejemplo, estar cogiendo su color desde el nivel 1, su tamaño (height y width) desde el nivel 2 y sus márgenes (padding) desde el nivel 3. ¿Lo he explicado bien?

Podría decir que el código CSS es el hermano mellizo del código HTML.

El HTML y el CSS tienen funciones diferentes, pero siempre van de la mano y ahora mismo no podrían vivir el uno sin el otro en esto del diseño de páginas web. El HTML es el que da forma y aporta la estructura a nuestra web y el CSS, el que le asigna la parte más gráfica y de estilos a los diferentes objetos.

Aquí te dejo un ejemplo de código CSS que nos está diciendo que los textos de párrafo (p) tienen que ir con tipografía ‘Verdana’ y tamaño 20px:

p {
font-family: Verdana;
font-size: 20px;
}

¿Sigues ahí??? Venga, vamos a otro término de diseño web…

#6. Drop Down menú

En diseño web se les denomina Drop Down menús a los menús desplegables.

No tiene mucha más explicación, la verdad, así que para qué enrollarse.

Cuando en un menú haces clic o te pones sobre él y se despliega una persiana con varias opciones, eso es un Drop-Down menú.

Existen diferentes tipos de Drop Down menús, desde los sencillos con varias opciones simples hasta los mega menús, que te despliegan una persiana que ni las de las ventanas del Palacio de Versalles.

#7. Encabezados (Headings)

Los encabezados HTML, comúnmente conocidos como H1, H2, H3, etc. son unas etiquetas que se utilizan para organizar y categorizar jerárquicamente los contenidos de una página web.

Estos encabezados están formados por la letra H (Heading en inglés) y tienen una jerarquía de hasta 6 niveles (H1 – H6).

Además de ser útiles para que el lector interprete mejor el contenido de lo que está leyendo, también es muy útil a nivel SEO para que Google también lo interprete de la mejor manera.

En WordPress, los encabezados HTML pueden ser utilizados directamente desde el editor.

Para seleccionar cualquiera de ellos solo debes hacer clic en el desplegable situado a la izquierda de la barra de herramientas, que por defecto aparece como «Párrafo» y seleccionar cualquiera de los llamados «Títulos» (Título 1, Título 2…)

#8. Error 404

El Error 404 es quizá el error relacionado con el estado de una página web que más nos suena a todos.

¿¿¿O debería llamarlo HORROR 404???

Este estado de página está íntimamente relacionado con un estado de horror cuando se planta frente a nosotros en la pantalla del ordenador… cuando ocurre en nuestra propia página, se me entiende. Es un código de estado HTTP que nos está diciendo que la página que queremos abrir no existe o no está disponible.

Es muy común encontrarnos con este error, de hecho debe ser el que más se repite, ya que suele estar relacionado con gambas que nosotros mismos metemos.

¡El tan famoso fallo humano!

Para evitar en la medida de lo posible los Errores 404 debemos extremar las precauciones y comprobar bien todos los enlaces de nuestra web.

#9. Favicon

El Favicon es un icono de pequeñas dimensiones que sirve para identificar fácilmente una página web cuando tenemos varias pestañas abiertas o cuando la guardamos en Favoritos. De hecho, Favicon es el acrónimo de «Favorite Icon».

El favicon, además, sirve para aportar a la pestaña de nuestra web un pequeño toque corporativo o de marca. Queda muy feo ver que la pestaña de una web tiene el icono por defecto de un folio blanco.

Vamos con el término de diseño web número 10…

#10. Iframe

Un Iframe es un recurso de código HTML que nos permite insertar en una página un documento externo, una página web, etc., para que forme parte del contenido de nuestra página.

El código básico para insertar un Iframe es el siguiente:

< iframe src="CONTENIDO AQUÍ" </iframe >

Además, como es un recurso HTML, se le pueden asignar ciertos parámetros para adaptarlo a nuestras necesidades, como son ancho, alto, etc.

IMPORTANTE: un Iframe en sí mismo no es responsive, por lo que te recomiendo que eches un ojo por Google en busca de una solución para hacerlo (¡es con código, aviso!).

#11. Javascript

El JavaScript (JS) es un lenguaje de programación que se utiliza para hacer cosas complejas en una página web.

El código JavasCript puede insertarse dentro del propio HTML de una página o guardarse externamente en archivos con extensión .js.

Se puede decir que el JavaScript es el primo hermano del HTML y el CSS.

Así como el HTML es el código con el que construimos una web y el CSS con el que le damos estilos, el JavaScript es el que permite que los objetos de una web (imágenes, textos…) tengan ciertos efectos atractivos y se muestren contenidos dinámicos (drop down menús, efectos en botones, efectos lupa…).

Como ves, el JavaScript es muy necesario para diseñar una página web atractiva.

¡¡¡¡Y vamos con el término de diseño web número 12, señoraaaaaa!!!!

#12. Landing page

Una landing page (‘Página de aterrizaje’ en castellano de Castilla) es una página creada únicamente con un fin: la captación de leads o potenciales clientes.

Al contrario que una página normal de una web, en la que tenemos muchos objetos e información con la que podemos interactuar, una landing page tiene un objetivo único, y es que el usuario nos deje sus datos para una posible venta de productos o servicios.

¡Ayyyyy, Mari Carmen!… ¡los datos, los datos!…

En una landing page no debe haber distracciones. Debemos eliminar menús, footers y enlaces de todo tipo e incluir SOLO el contenido que es relevante para el fin que se quiere conseguir.

Estructura básica de una landing page

Una landing page puede ser más o menos larga y contener más o menos información, pero lo fundamental que no debe faltar es:

• Titular potente.
• Subtitular contando brevemente el beneficio principal del contenido.
• Beneficios del producto/servicio.
• Imagen potente.
• Vídeo (esto es opcional).
• Testimonios reales de clientes reales (¡no te los inventes, Manolo!).
• Una llamada a la acción (Call to Action / CTA).
• Y LO MÁS IMPORTANTE: un formulario de suscripción (¡si no, a ver cómo te envían sus datos, Antonia!).

Con un buen diseño y estructura y teniendo un buen producto, ya puedes empezar a vender con una landing page 🙂

#13. Masonry layout

El estilo «Masonry» (o Masonry layout) es un tipo de maquetación web consistente en aprovechar los espacios en blanco que quedan entre los diferentes objetos de una página.

Este tipo de maquetación, que se puso de moda gracias a Pinterest, me recuerda un poco al Tetris, aquel juego tan famoso durante los años ’80 y ’90 (¡quién los pillara!) en el que había que colocar bloques unos sobre otros sin dejar huecos entre ellos…

El Masonry es al diseño web lo que el Tetris a los videojuegos

La traducción de «masonry» es «albañilería«, por eso de que el concepto es muy similar a crear un muro de ladrillos sin espacios entre ellos.

#14. Metadatos

En código HTML existen unas etiquetas muy importantes para facilitar información sobre nuestras páginas a los buscadores.

Estas etiquetas son los metadatos. Pequeñas porciones de datos no visibles para los usuarios en nuestra propia página, pero que repercutirán en nuestro SEO On Page y, por ende, en lo que la gente ve en los resultados de Google.

Los metadatos van entre las etiquetas <head> … </head> del código HTML.

Metadatos más importantes

Existen muchos tipos de metadatos que pueden aportar información importante sobre tu página web, pero aquí te dejo los básicos que deberías conocer:

Meta title:

Etiqueta que define el título de cada página.

Estructura: <title> TÍTULO AQUÍ </title>

Meta description:

Etiqueta con la que resumimos el contenido de la página.

Estructura: <meta name=”description” content=”DESCRIPCIÓN AQUÍ” />

Meta keywords:

Etiqueta con la que enumeramos algunas palabras clave relacionadas con el contenido de la página.

Estructura: <meta name=”keywords” content=”KEYWORD 1, KEYWORD 2...” />

Nota: aunque otros buscadores sí tienen en cuenta las meta keywords, Google ya no puntúa su uso para el SEO, por lo que no te mates demasiado en este punto.

Pasamos al concepto de diseño web número 15…

#15. NoFollow

Uno de los aspectos SEO que más puntúa Google son los enlaces externos que apuntan a una página web.

Cuántos más links señalando a la tuya haya en otras páginas, más puntos te dará Google. ¡Y estos son puntos muy, muy valiosos!

Hasta aquí la teoría.

Si, por ejemplo, alguien pone un enlace dirigido a tu web, podemos decir que está compartiendo contigo parte de su «reputación» (lo que Google llama el «Link Juice» o «Zumo de Enlace«).

Cuantos más enlaces dirigiendo a otras páginas haya en una web, más «zumo» se está compartiendo, lo que significa que estás repartiendo el peso o relevancia de tu página con otras.

¡Yo no quiero eso, mamá!

Para evitar compartir nuestro «zumo» con esas webs a las que hacemos referencia, utilizaremos una etiqueta llamada «Nofollow» a la hora de poner nuestros enlaces, que en Inglés significa «no seguir«.

Haciendo esto podremos poner links en nuestra web sin que se lleven parte de nuestra reputación.

Estructura de enlace ‘Nofollow’:

<a href=”https://refrescandonegocios.com/” rel=”nofollow”> TEXTO DEL LINK </a>

#16. NoIndex

Cuando creamos y lanzamos nuestra web al mundo, existe un momento crucial para que comience a aparecer en los buscadores como Google, y ese momento es la indexación de todas las páginas.

«¡Eh, Google, tío, que estoy aquí y este es mi contenido!»

La indexación consiste en que Google envíe a sus arañitas graciosas a leer el contenido de todas nuestras páginas y lo lleve a su índice de contenidos (Index). De esta manera comenzarán a aparecer en el buscador.

Y nosotros queremos que todas nuestras páginas sean indexadas, ¿verdad?… ¡¡¡PUES NO!!!

¡Pero qué dices, Edu, loco!

Aunque parezca una incongruencia, existen algunos de nuestros contenidos que es mejor no indexar.

Y dirás tú, ¿cómooooorrrrr?

Pues sí, amigo/amiga/amigX/amig@…

¿Qué páginas no deberías indexar?

Las páginas que yo te recomiendo no indexar para evitar que Mr G. las encuentre son:

• Páginas legales (¡para qué quieres indexarlas!).
• Landing pages asociadas a campañas que no quieres que sean «abiertas» al público.
• Páginas de confirmación.
• Páginas de gracias.

Y, ¿cómo hago para NO indexar un página?

Pues para hacer que una página no sea rastreada por las arañas de Google, existe una etiqueta llamada «Noindex« que debes colocar dentro del HEAD (<head> … </head>) del código HTML de la página en cuestión:

<meta name="robots" content="noindex">

Otra manera más sencilla de hacerlo es utilizando el plugin Yoast SEO, el cual tiene una opción que te permite no indexar cualquiera de tus páginas.

#17. Parallax

El efecto Parallax es un efecto que está muy de moda en diseño web.

La traducción de «Parallax» es «Paralaje» y la Wikipedia lo define como la «desviación angular de la posición aparente de un objeto, dependiendo del punto de vista elegido«.

¡What!

Para que me entiendas, se trata de poner un fondo en una parte de la web que, a medida que hacemos scroll, se va desplazando hacia arriba, como si estuviese en otro plano.

Es como cuando vamos en tren y el paisaje se mueve en la otra dirección.

Este efecto es muy chulo y le puede dar a nuestra web un toque moderno y elegante, pero… ¡CUIDAOOO!… no te pases abusando del efecto Parallax si no quieres que tu web parezca la Feria de Abril.

Este efecto yo lo utilizo bastante en mis diseños porque viene a dar movimiento a partes de una página que, de otra manera y desde el desuso de la tecnología Flash, serían más aburridas. Aun así, siempre intento «no pasar de la raya»…

¡Como haría Maradona!

Además, es un recurso que no come demasiados recursos (¿he repetido «recurso»?… ¡sí, pero es que a estas alturas del post no me apetece buscar un sinónimo ya!).

Más allá del peso de la propia imagen, es un efecto bastante liviano y va de pinga para poder darle algo de vidilla sobre todo a la versión móvil de nuestras webs, esa en la que el scroll a veces parece no terminar nunca.

¿Nos lanzamos al término y/o concepto del diseño web número 18?

1, 2, 3… ¡Chof!

#18. Redirección 301

Existen ocasiones en que una página de nuestra web deja de existir, le hemos cambiado la URL (aunque esto no debería ocurrir, ¡ejem!) o simplemente ha habido algún error y ha dejado de funcionar (los caprichos de la tecnología son ilimitados).

Cuando esto ocurre hay que tomar cartas en el asunto, pues el enlace a esa página nos va a generar un Error 404.

Para evitar este error, del que ya te he hablado arriba, debemos redirigir las visitas de esa página a otra, que puede ser una copia de la misma página con otra URL, una página diferente o simplemente la página de inicio de nuestra web (lo ideal es que sea la misma página que la original, para mantener la congruencia de contenido).

Básicamente se trata de decirle a Google:

«Cuando alguien llegue a la página X, envíalo a la página Y».

Y si me vas a hacer la pregunta de «¿y no se pierde el posicionamiento SEO de esa página?», ya te adelanto que NO, pues todo el posicionamiento de la vieja va a parar a la nueva 🙂

¡Esto mola, eh!

¿Cómo se hace una Redirección 301?

Pues existen dos maneras de hacer una redirección 301.

Incluyendo una directiva en el archivo .htaccess:

La opción más técnica es incluir una directiva en el archivo .htaccess de nuestra web. Pero mucho cuidado con esto!!!

¡Si haces algo mal en el archivo .htaccess te puedes cargar la web!

Estructura de la orden:

Redirect 301 / URL-ANTIGUA (OJO: SIN EL DOMINIO) / URL-NUEVA (CON EL DOMINIO)

Instalando un plugin que lo haga por ti:

La otra opción es instalar un plugin para hacerlo fácilmente.

Yo utilizo «Redirection» que funciona muy bien y está pensado para gente como yo, que no le gusta tocar los archivos importantes del tema.

Lo único que tienes que hacer en el plugin es crear una orden para decirle cuál es la URL vieja, cuál es la URL nueva que la sustituye… ¡y guardar los cambios! 🙂

#19. Responsive

Si ya tienes algunas nociones sobre diseño web, eres un emprendedor digital o simplemente te gusta leer sobre temas tecnológicos relacionados con Internet, estarás cansado/a de escuchar el término «responsive«.

Pues bien, el término responsive hace referencia a un concepto relativamente novedoso de diseño web, surgido con el boom de tablets y móviles, que busca la adaptabilidad de las páginas web a los diferentes tipos de dispositivos existentes en el mercado: ordenadores de sobremesa, portátiles, tablets, móviles e incluso televisores.

 

La base del diseño responsive es crear varias versiones diferentes de una web para que se vea correctamente en todos los dispositivos, recolocando y/o redimensionando los elementos de cara a su perfecta visualización.

Suelen diseñarse tres versiones: escritorio, tablet y móvil.

Si has decidido diseñar tu propia página web o contratar a un profesional, puedes comprobar si se adapta bien a todos los dispositivos con esta herramienta: Screenfly.

#20. Sitemap

El Sitemap es el conjunto de URL’s que quieres que sean indexadas por los robots de los buscadores para que luego aparezcan en las búsquedas.

Digamos que es un listado en el que le facilitas el trabajo a las arañitas simpáticas que vienen en busca de tus contenidos, poniéndoles todas las rutas a mano para que no se cansen buscando. Con este listado también les indicamos cuál es la jerarquía de nuestras páginas, entradas, etc.

Ese listado es un archivo de formato XML que tenemos que tener alojado en la raíz de nuestro sitio.

El plugin Yoast SEO facilita la labor de crear este archivo en su propia configuración. En mi caso, este es el resultado: https://refrescandonegocios.com/sitemap_index.xml

#21. Slider

El Slider o carrusel es un recurso de diseño web que consiste en hacer que varias imágenes (u otros elementos) se vayan desplazando horizontalmente de manera automática.

El uso más común de un Slider, y que más fácilmente podemos reconocer, es el varias imágenes grandes (muchas veces incluyen mensajes o promociones) que van pasando una tras otra en la parte superior de la página de inicio de una web.

Es un recurso que ahora está perdiendo peso en el diseño de páginas web pues come bastantes recursos, algo que penaliza la velocidad de carga de la web.

Además, si lo que buscas en tu web es hacer buen SEO y tu objetivo principal son las conversiones, no es recomendable utilizarlo.

Ten en cuenta que poca gente va a esperar a que pasen todas las imágenes; la gente llega a tu web buscando algo y si no lo encuentra rápido… ¡se pira! 🙂

#22. Squeeze page

En este punto voy a explicarte lo que significa el término de diseño web «Squeeze Page».

– Ein… ¿¿¿la página de Nesquik???

– No… ¡Squeeze Page!

– ¿Y eso qué caraj… es?…

Una Squeeze Page (que en Inglés significa Apretar, Exprimir…) es un tipo de landing page que está pensada única y exclusivamente para la captación de suscriptores.

Nada de vender. Solo captar su email (¡y, como mucho, su nombre!).

Es un tipo de página un poco más «agresiva» que una landing page normal, pues los mensajes son mucho más escuetos pero más directos, en busca de la suscripción rápida sin dejar casi tiempo a pensar.

¡Acción! ¡Impulso!

¿Suena muy agresivo? ¡Objetivo cumplido!

Una Squeeze Page suele estar vinculada a un lead magnet (algo de lo que escribiré en breve) o recurso gratuito que se ofrece en nuestra página web.

Esos popups voladores o esas cajitas colocadas por el medio de nuestros artículos ofreciéndonos un ebook, un checklist, una masterclass (todo gratuito, se entiende) tienden a estar vinculados a una squeeze page.

¿Cuáles son los elementos de una Squeeze Page?

Una buena Squeeze Page no necesita demasiados elementos, de hecho necesita menos incluso que una landing page normal. Con que tenga lo siguiente, habrás diseñado una SP genial:

• Un titular.
• Listado de 3-4 beneficios (no características, ¡que nos conocemos!).
• Imagen potente del recurso.
• Formulario de suscripción básico.

¡Ya está! ¡Ahora, a captar suscriptores!

#23. Target_blank

Cuando deseas que un enlace se abra en una pestaña nueva y mantener la página actual abierta, lo que se hace es ponerle una etiqueta para que funcione de esa manera.

Esa etiqueta es: target="_blank"

Poniendo este Tag en el código HTML que se utiliza para insertar un enlace, conseguiremos que se abra en una nueva pestaña.

La estructura de un enlace con la etiqueta es el siguiente:

<a href="https://refrescandonegocios.com" target="_blank">Abrir esta web en una pestaña nueva </a>

Resultado: Abrir esta web en una pestaña nueva

Vámonos como un rayo al penúltimo término de diseño web…

#24. URL

URL significa ‘Uniform Resource Locator‘ (en castellano: Localizador Uniforme de Recursos).

¿Te ha quedado claro?… ¡a mi tampoco!

Explicado para gente normal, la URL es una dirección que se pone en nuestro navegador web para poder ver cualquier recurso que exista en Internet.

Por ir al grano, existen una serie de protocolos para diferenciar tipos de URL’s, pero no quiero enrollarme…

¡Manda huevos con el tío… y lo dice ahora, después de casi 5000 palabras!

Aquí solo te voy a hablar del ‘Hypertext Transfer Protocol’ (‘Protocolo de Transferencia de Hipertextos’)… ¡¡¡más conocido como HTTP!!!

Te muestro cuatro ejemplos de URL’s HTTP básicas para que veas como se escriben, dependiendo del tipo de archivo (se incluye la «S» al final por la nueva directiva «Secure» para hacer las páginas más seguras):

• Páginas web: https://refrescandonegocios.com/blog
• Imágenes: https://refrescandonegocios.com/wp-content/uploads/foto.png
• Documentos:  https://refrescandonegocios.com/wp-content/uploads/documento.pdf
• Vídeos:  https://youtu.be/d71uoe0BuGA

Si tenías alguna duda (que no creo), ahora ya deberías tenerlo bien claro.

¡Y llegamos al finaaaaaaallllll! ¡Por fiiiiiinnnnn!

#25. Z-Index

Si eres diseñador de páginas web o estás diseñando tu propia web, habrás escuchado hablar en algún momento del término ‘Z-Index’.

‘Z-Index’ es un propiedad de código CSS que determina en qué orden colocamos varios elementos que están puestos unos encima de otros.

Si conoces el programa de retoque fotográfico Photoshop (¡quién no lo conozca que levante la mano!), sabrás que para trabajar con los diferentes objetos y que podamos colocarlos unos sobre otros existen las Capas, que son como el concepto del papel cebolla de cuando íbamos al colegio: colocas un papel sobre otro, pero sigues viendo lo que hay debajo.

Ejemplo práctico de uso del Z-Index:

Imagina que tenemos 3 imágenes superpuestas… La estructura de apilamiento que queremos asignar es la siguiente:

• Imagen 1: abajo del todo.
• Imagen 2: situada en el medio de Imagen 1 e Imagen 3.
• Imagen 3: arriba del todo.

Las directivas CSS utilizando ‘Z-Index’ para que se coloquen correctamente serían las siguientes:

• Imagen 1: <img src="http://tuweb.com/imagen1.jpg/" style="z-index: 1" />
• Imagen 2: <img src="http://tuweb.com/imagen2.jpg/" style="z-index: 2" />
• Imagen 3: <img src="http://tuweb.com/imagen3.jpg/" style="z-index: 3" />

IMPORTANTE: el ‘Z-Index’ se va incrementando cuanto más arriba está el objeto. A más número, más arriba estará en la jerarquía de posiciones.

Descarga la infografía en PDF

Si te apetece descargarte una infografía súper chula que me he currado con todos estos términos, haz clic aquí: DESCARGAR INFOGRAFÍA.

Conclusión

Hasta aquí esta parrafada de términos y conceptos de diseño web que te puedes encontrar en tu día a día y que deberías tener siempre en mente.

Muchos de ellos los utilizarás a diario y otros más de vez en cuando, pero es importante no olvidarlos, porque si eres un emprendedor digital, tendrás que tocar tu web recurrentemente 😉

¿Qué te ha parecido este listado? ¿Me he olvidado alguno importante? ¿Crees que con esto tienes suficiente o tendré que hacer crecer este post, jeje?

¡Venga! ¡Anímate a darme tus impresiones y aportaciones en los comentarios!

Y además, si me pones 5 estrellas en el post y lo compartes en Redes Sociales, un nuevo renacuajo en rana se convertirá 🙂