¿Pierdes demasiado tiempo en las redes sociales? A mí también me pasaba, pero ya no. Nelio Content me permite ahorrar tiempo desde el primer día. ¡Compruébalo por ti mismo!
En Nelio hemos lanzado una nueva sección en nuestra web, Nelio Academy, para que aprendas cosas nuevas de WordPress con nuestros cursos online.
Creación de contenidos con el editor de bloques Gutenberg
Este editor, también conocido como Gutenberg, viene instalado por defecto desde la versión 5.0 de WordPress. Es un editor que cambia radicalmente la confección de entradas y páginas de una web siendo mucho más cercano a otros editores visuales. Ahora, una entrada o página se compone por bloques de contenidos. Tienes bloques para párrafos, para imágenes, para encabezados, para citas, y mucho más.
Este curso no pretende ser un manual de usuario de Gutenberg. Lo que busca es que de una forma práctica y eficiente aprendas a crear nuevas entradas y páginas de tu web. Y es por eso que a lo largo de más de 2 horas de vídeos, divididos en 20 lecciones, aprenderás a dominar el entorno del editor de WordPress. Pero también conocerás muchos detalles del proceso que seguimos en Nelio cuando escribimos una nueva entrada o confeccionamos una nueva página.
Verás como, gracias a las posibilidades que te ofrece este editor, podrás diseñar gran cantidad de elementos o secciones que puedes encontrar en nuestras páginas de esta web o cualquier otra web profesional. Ya no necesitas ser un diseñador para maquetar tus contenidos con destreza y estilo. Tú mismo puedes hacerlo con el catálogo de bloques de contenido que WordPress incluye por defecto.
El curso se divide en 3 partes:
Introducción,
Escribiendo entradas,
Diseñando páginas
Introducción
En la primera parte veremos las novedades que nos trae este editor y las diferencias entre el editor clásico y el de bloques. De esta forma podrás empezar a conocer este nuevo entorno, su interfaz y donde encontrar las distintas barras de herramientas, así como información y propiedades de los distintos bloques que puedes usar.
Escribiendo una entrada
A continuación veremos el proceso de escritura de una entrada, a la que le añadiremos los elementos más comunes de las entradas de un blog: títulos, imágenes, párrafos, listas, citas, versos o vídeos. También conocerás trucos para dominar el editor y ganar en eficiencia.
Además, como ya sabes, antes de publicar cualquier entrada debes asegurarte de que no te olvidas la información necesaria para mejorar el posicionamiento en los buscadores y su promoción en las redes sociales. Por ese motivo, también te explicamos cómo se integra el nuevo editor con los plugins de Yoast y Nelio. Y así te familiarizas con la integración de cualquier plugin con el editor.
Diseño de páginas
En las lecciones de diseño de páginas, aprenderás el proceso básico que debes seguir antes de empezar a crear cualquier página de tu web. Y continuaremos viendo otro conjunto nuevo de bloques que son particularmente útiles en el diseño de páginas: el bloque fondo, de medios y texto, columnas, elementos de diseño, galería de imágenes y widgets. Para cada uno de ellos, verás ejemplos prácticos y reales que te servirán de idea para crear nuevas secciones en tus páginas web. E incluso aprenderás a combinar bloques de una forma que nadie te había explicado antes, abriendo así un nuevo abanico de posibilidades de diseño.
Sección de página web creada en el curso con los bloques que ofrece Gutenberg por defecto.
Y por supuesto, acabaremos el diseño de las páginas aprendiendo a crear y a usar los bloques reutilizables, de gran utilidad para ganar eficiencia en el diseño de nuevas páginas.
Lecciones
Aquí tienes la lista de lecciones que compone el curso:
Si eres como yo, estoy segura de que no quieres perder tu tiempo promocionando entradas en Twitter, Facebook, LinkedIn… ¡Utiliza Nelio Content y deja que trabaje por ti! ¡Échale un vistazo!
Odiado por unos y amado por otros, está claro que el nuevo editor de bloques de WordPress no deja indiferente. Ya hace más de un mes que está entre nosotros y cada vez más plugins y temas son compatibles con él.
Como desarrollador de plugins, he de decir que adaptar nuestros productos a Gutenberg no ha sido algo que se haga en un par de días. En Nelio llevamos bastante tiempo siguiendo la evolución y desarrollo del nuevo editor de bloques para poder mantener las mismas funcionalidades de nuestros plugins sin prácticamente cambios.
Uno de los puntos clave para poder adaptar Nelio Content a Gutenberg era poder añadir botones en los bloques de texto para seguir haciendo lo mismo que ya hacíamos con TinyMCE (el editor clásico). Te recuerdo que una de las funciones más interesantes de Nelio Content es permitir seleccionar frases dentro del contenido para compartirlas en tus redes sociales directamente, o bien para marcarlas y que luego nuestro algoritmo se encargue de seleccionar las más relevantes y monte una serie de mensajes de promoción automáticos. Ya te lo expliqué anteriormente en esta otra entrada.
Con el botón de Social Automations, puedes seleccionar cualquier fragmento del texto y marcarlo para auto-compartir. Así de fácil es hacerlo en el editor clásico de WordPress.
Para añadir botones adicionales en TinyMCE, WordPress tiene una documentación bastante completa al respecto aquí. Pero, ¿y en Gutenberg cómo lo hacemos? ¿Se puede? ¿Cómo añadimos un botón en Gutenberg?
Está claro que mantener esta funcionalidad es clave para seguir proporcionando un producto de la calidad de Nelio Content, no sólo para nuestros clientes sino también para nosotros mismos, ya que somos los primeros interesados en seguir utilizando la funcionalidad de marcado de frases en Gutenberg.
Por este motivo, me decidí a abrir un issue en el GitHub del proyecto Gutenberg explicando la problemática y pidiendo ayuda al respecto en enero del 2018 (hace casi un año, en el momento de publicar esta entrada). Allí pregunté por la posibilidad de añadir botones a los bloques de texto de Gutenberg para poder trabajar con el texto seleccionado en tales bloques.
La evolución del issue fue positiva y finalmente se añadió tal funcionalidad gracias a los Format Types de Gutenberg. Y como a día de hoy (mientras escribo esta entrada) la documentación al respecto todavía es bastante pobre, voy a explicarte cómo añadir un botón personalizado a los bloques de texto del editor de bloques, para que así no pierdas el tiempo y lo tengas más fácil que yo.
Tienes todo el código del plugin que añade un botón al editor en este repositorio de GitHub. Aunque es bastante sencillo, voy a explicar con más detalle las partes más importantes de este proyecto.
El archivo clave del proyecto es el que encontrarás en /src/js/gutenberg.js y que tienes a continuación:
La función registerFormatType es propia del core de WordPress y es la que te permite añadir un nuevo tipo de formato, junto al botón que lanza la acción. Como parámetros le pasas un nombre ('nelio/button') y un objeto JavaScript con argumentos. Entre esos argumentos, tienes el método edit, que es el que retorna un Element de React que en nuestro caso será el botón que queremos meter en el bloque.
Este botón, es un RichTextToolbarButton, que no es más que un componente React del propio editor Gutenberg que puedes encontrar definido aquí. A ese componente le pasamos un icono (que es un archivo SVG con el logo de Nelio, en este caso), el título del botón, y una función que se ejecutará cuando se hace clic en el botón.
Tal función acaba llamando a la función doTheJob, donde se coge el texto seleccionado y se pinta por consola. Ahí es donde tú puedes añadir el código JavaScript que quieras para tratar esa selección de texto.
En el atributo icon de RichTextToolbarButton se puede poner un string con el nombre de un Dashicon de WordPress en vez del SVG. Para que el SVG funcione, ten en cuenta que utilizamos el paquete svg-react-loader que convierte los archivos SVGs en elementos de React que se pueden usar tal y como has visto en el código anterior.
El código utiliza la sintaxis ES6+ para que sea más fácil de entender, pero para que funcione hay que transpilarlo con Babel, y para ello tenemos la configuración en webpack:
No entraré en detalle de para qué sirve cada línea del archivo de configuración de webpack anterior, pero si te fijas verás que usamos el loader de svg-react-loader para los archivos SVG y el loader de babel-loader para transpilar el JavaScript y convertirlo en código que funcione en cualquier navegador. Ya hablé anteriormente de todas estas cosas modernas en esta entrada.
El resultado es el archivo JavaScript gutenberg.js que aparece en /dist/js. Ahora lo que tenemos que hacer es cargar este archivo en la página de edición de WordPress para que se ejecute allí. Esto lo hacemos como siempre hemos hecho en WordPress, con un wp_enqueue_script.
Fíjate que el encolado del script lo hacemos en el hook de enqueue_block_editor_assets, que es el que nos asegura que se meterá el script solo en el editor de bloques de WordPress.
Si quieres probar el código, descárgate el proyecto de GitHub y mueve la carpeta a tu WordPress dentro de /wp-content/plugins. Allí, abre un terminal y ejecuta npm install. Tendrás que tener NodeJS instalado para que todo funcione y se instalen las dependencias necesarias para que nuestro código funcione.
Cuando tengas las dependencias y todo haya terminado correctamente, ejecuta en el terminal npm run build para que se genere el código definitivo (transpilando el JavaScript y demás). Ahora ya podrás ir a tu WordPress y activar el plugin que acabamos de meter. ¡Y a probarlo!
Si todo ha ido bien, aparecerá el botón nuevo en los bloques de texto.
Al abrir una entrada para editar, verás que en los bloques de texto aparece el nuevo botón. Si seleccionas un trozo de texto y haces clic en el botón, verás que en la consola del navegador aparece el texto seleccionado. Esto ya es lo que esperábamos que sucediera tal y como vimos en el código anterior.
Para saber más…
Esto es sólo un ejemplo mínimo para meter un botón en un bloque de texto. Si quieres que el texto seleccionado se modifique al hacer clic en el botón, te animo a revisar el código de este plugin donde se añaden varios botones con diferentes formatos más complejos.
Por otro lado, para aquellos de vosotros que quieran todavía profundizar más en la materia, recomiendo que miréis el código del plugin GhostKit, que modifica la interfaz por defecto de Gutenberg añadiendo diferentes elementos adicionales. Además, es un código que está muy bien estructurado y que se entiendo con cierta facilidad.
En algún momento tendremos una documentación oficial y detallada sobre todos los aspectos tratados en esta entrada, pero por el momento nos toca leer código para aprender a implementar este tipo de modificaciones del editor de bloques de WordPress. ¡Ánimo!
Estaba tan cansada de promocionar mis entradas en redes sociales… hasta que creamos Nelio Content, un plugin para WordPress que hace que sea taaaan fácil ¡que ni me lo creo! ¡Échale un vistazo, anda!
Nos encanta saber qué hacen los visitantes cuando entran en nuestra web. ¿Leen todo el contenido de las páginas o sólo una parte? ¿Ven el botón que lleva a la página de precios? Nos hacemos miles de preguntas cuya respuesta nos podría ayudar a mejorar la web y, por tanto, los objetivos que nos planteamos con esta. Objetivos que directa o indirectamente querremos convertir en dinero para nuestros bolsillos 🤑.
Gracias a la analítica web tenemos mucha parte del trabajo hecha. Si eres un lector habitual de nuestro blog sabrás que Google Analytics puede darte mucha información sobre el comportamiento de tus visitantes. Y además es una herramienta gratuita cuya instalación es de lo más sencilla. Pero esto es sólo una parte de lo que podemos llegar a averiguar sobre nuestra web. Existen otras técnicas para entender el comportamiento de los visitantes. Y hoy nos centraremos en los heatmaps.
El porqué de los heatmaps
Cuando hablamos de usabilidad en software una de las pruebas más habituales es la de analizar el comportamiento real de los usuarios. Esto se hace en un laboratorio preparado para ello en el que a un usuario se le plantean ejercicios a realizar delante del ordenador mientras se graba todo lo que hace.
La parte más curiosa suele ser la grabación del seguimiento de la mirada con una cámara que apunta a los ojos directamente (se conoce como eye-tracking). De este modo podemos saber exactamente las coordenadas a las que el usuario apunta la mirada y así ver qué capta su atención y cómo reacciona a la interfaz de usuario que se le presenta.
Analizar el seguimiento de la mirada es algo que se utiliza en infinidad de campos, incluso en supermercados para ver qué productos captan más atención.
Esta actividad te da información precisa del comportamiento del usuario, pero tiene algunos inconvenientes. El problema principal de este tipo de pruebas es que el coste es elevado (necesitas un laboratorio especial con el equipamiento adecuado), analizar los datos es complejo (convertir coordenadas en conocimiento útil es difícil si no lo has hecho antes) y además es poco eficiente (hacerle la prueba a cada usuario es lento, tiene que estar presente físicamente en el laboratorio y necesitarás una muestra más o menos representativa de estos para que los datos tengan sentido).
Un heatmap o mapa de calor es una representación visual en la que observamos diferentes colores indicando la relevancia de los distintos elementos o zonas que conforman la web. Los colores más cálidos indican una mayor interacción en la zona mientras que los más fríos muestran lo contrario. En la siguiente captura puedes ver que la parte central, dónde se define el plan de compra medio, capta más la atención.
En este heatmap podemos ver qué zonas reciben más atención en una página de precios de ejemplo.
Los heatmaps son la versión low-cost de los análisis de usabilidad convencionales. Te explicaré porqué. El primer punto es que no necesitas un laboratorio complejo; cualquier visitante de tu web puede participar en la prueba de forma anónima y sin enterarse. Por otro lado, el coste es bajo ya que en vez de hacer seguimiento del ojo lo haces del cursor del ratón. Y sí, esto es menos preciso que lo primero, pero funciona bastante bien y tiene su base científica.
Por tanto, los heatmaps son la alternativa perfecta para que puedas comprender cómo interactúan tus visitantes con la web sin tener que necesitar un complejo laboratorio de usabilidad. Además, existen otras variantes como los clickmaps, donde sólo se tienen en cuenta los clics y no el movimiento del cursor, o los scrollmaps, que marcan la profundidad a la que llegan los visitantes desplazándose verticalmente hacia abajo de la web.
Script para simular un heatmap en tu web
Si quieres probar cómo hacer un heatmap de tu comportamiento en tu web, estás de suerte porque te voy a explicar cómo hacerlo de forma sencilla. No necesitas tener conocimientos de programación, sólo saber copiar y pegar.
Lo primero que has de hacer es abrir en tu navegador la página web donde desees simular el heatmap. Una vez allí, has de abrir la consola JavaScript del navegador. Esto se hace de forma diferente dependiendo del navegador y el sistema operativo que utilices. Descubre cómo hacerlo en tu caso aquí.
En mi caso concreto, donde utilizo Google Chrome en un sistema Mac OS X, sólo tengo que ir al menú Ver » Opciones para desarrolladores » Consola JavaScript o pulsar Alt+Comando+I directamente. Esto abrirá una vista donde tienes acceso a una especia de terminal en el navegador donde puedes pegar código JavaScript para su ejecución.
Una vez has hecho esto, copia el siguiente fragmento de código (que también puedes encontrar en mi GitHub aquí):
El código que acabas de copiar hace uso de heatmap.js, una librería JavaScript que te permite crear heatmaps de forma rápida en tu web. Ahora lo pegas en la consola JavaScript del navegador que tienes abierta y pulsas intro para ejecutarlo. Si todo ha ido bien y no te salta ningún error, ya puedes cerrar la consola JavaScript. Ahora en cuanto muevas el ratón o hagas clic en la página verás cómo va apareciendo el heatmap con el seguimiento del movimiento y los clics.
Esto sólo ha sido un juego, pero es divertido, ¿verdad? Ten en cuenta que, para que el experimento tenga validez, es obvio que lo idóneo es que lo hagas de forma transparente (sin que tus visitantes vean el halo que van dejando) y agregando los datos de seguimiento del cursor de todos tus visitantes. De esto modo los datos serían reales y las conclusiones que podrías tomar sobre esto, válidas.
Si dominas JavaScript podrías montarte tú mismo un sistema que hiciera el seguimiento y enviara los datos al servidor donde después puedas agregarlos y dar la visualización final. Pero si no es tu caso, hay muchas herramientas de heatmaps ahí fuera, y la que te recomendamos para WordPress es Nelio A/B Testing, dónde podrás crear heatmaps de forma muy sencilla y además tienes la confianza de que ha sido creada por nosotros mismos, aquí en Nelio.
Si te animas, no dudes en dejarme un comentario al respecto con tu experiencia. Seguro que la información que extraes te es de mucha utilidad para entender mejor a tus visitantes y actuar en consecuencia.
¿Eres un fan de WordPress? Apuesto a que sí, por lo que tienes que probar nuestro nuevo plugin: Nelio Content. Hay tantas cosas que podrás hacer sin salir de WordPress… ¡Descúbrelas todas!
La mejor manera de aprender algo en esta vida es poniéndolo en práctica. Si eres de los que quieres aprender a dominar Google Analytics, por mucho que leas artículos tan buenos como los que encontrarás en esta web o hagas alguno de los miles de cursos al respecto que encontrarás en Internet, lo mejor es probarlo tu mismo en tu web.
El problema principal de esto es que tardarás un tiempo en capturar datos para poder empezar a extraer conclusiones interesantes revisando los informes de Google Analytics. Y si encima tu web tiene poco tráfico, aún será más desesperante poder empezar a poner en práctica todo lo aprendido.
Por suerte para ti, existe una solución para que no tengas que esperar y puedas tener una cuenta de Google Analytics repleta de datos y lista para trabajar sobre ella y así convertirte en un as de esta herramienta de analítica web. Pero antes de ir a ella, permíteme que te hable un poco de la tienda de merchandising de Google 😇.
La tienda de merchandising de Google
Es posible que no lo supieras (yo no lo sabía), pero Google tiene una tienda de merchandising donde vende toda una serie de productos variados con su marca y las de sus demás sitios web estrella, como por ejemplo Youtube. Para poder entrar en esta tienda, sólo tienes que ir aquí.
En la Google Merchandise Store puedes comprar productos de Google, YouTube o Android.
Lo primero que puedes llegar a pensar al ver esta tienda es si habrá mucha gente que compre este tipo de productos. ¿Realmente hay un mercado para vender camisetas, polos, vasos, pegatinas y demás cositas varias con la marca de Google, YouTube, Android y demás? ¿Cuánto gana Google cada mes vendiendo estos productos?
En la tienda de merchandising de Google puedes adquirir un montón de productos.
¿Y si te dijera que puedes ver estos datos sin soltar ni un solo euro? ¿Te gustaría acceder a la cuenta de Google Analytics de la tienda de merchandising de Google? Pues sigue leyendo…
Aprende experimentando con los datos de Google Merchandise Store
Google Analytics proporciona una cuenta de demostración para que puedas probar todas las características que esta herramienta de analítica web ofrece. Y los datos de esta cuenta vienen directamente desde la tienda de merchandising de Google. Un ejercicio de transparencia curioso que desde aquí aplaudimos.
Google Analytics proporciona los datos de una cuenta de demostración para que puedas jugar con ella.
Para acceder a esta cuenta de demostración simplemente visita este enlace. Allí encontrarás toda la explicación de la cuenta de demostración y podrás incluirla en tu cuenta de Google, como si de un sitio web más de los que controlas en Google Analytics se tratase. Recuerda que necesitarás tener una cuenta de Google Analytics, algo obvio para poder ver todo esto.
La página principal de la cuenta de demo de Google Analytics ya nos enseña muchos datos sobre la Google Merchandising Store.
Los datos de la cuenta de demostración de Google Analytics se corresponden con los que podrías encontrar en un sitio web convencional dedicado al comercio electrónico (una tienda online, vamos) e incluyen los tipos de información siguientes:
Datos de fuentes de tráfico: información sobre la procedencia de los visitantes del sitio web. Incluye datos sobre tráfico orgánico, tráfico de publicidad en buscadores, tráfico de display, etc.
Datos de contenido: información sobre el comportamiento de los usuarios en el sitio web. Incluye las URL de las páginas que ven, cómo interactúan con el contenido, etc.
Datos de transacciones: información sobre las transacciones que se realizan en el sitio web de Google Merchandise Store (compras de productos, básicamente).
¿Quieres ver cuánta gente accede a la Google Merchandising Store en este preciso momento?
Todos los usuarios a la cuenta de demostración de Google Analytics tienen acceso de lectura y análisis; es decir, pueden ver los datos de configuración y de los informes, trabajar con los datos de estos (p. ej., filtrar una tabla, añadir una dimensión secundaria o crear un segmento), pero no pueden modificar la configuración de la cuenta ni de los objetivos definidos. Esto es normal, ya que como hemos dicho antes, el acceso es de solo lectura.
Puedes conocer toda la información sobre la audiencia que entra a la Google Merchandising Store.
En la siguiente captura de pantalla de la cuenta de demostración de Google Analytics puedes ver incluso el embudo de ventas de los productos de la tienda de merchandising de Google. Y recuerda, todos estos datos que ves aquí son datos reales sacados de la propia tienda online. ¿Quién sabe?, si les propones alguna mejora a la web que pueda hacer que vendan más es posible que incluso te contraten en Google 😉.
La cuenta de demo de Google Analytics te permite ver el funnel de ventas de productos de la Google Merchandising Store.
Y si quieres saber qué producto es el que más se ha vendido en los últimos 30 días o en cualquier periodo temporal, sólo has de consultarlo en la sección correspondiente de la cuenta de demostración de Google Analytics. Es curioso que cuando estoy escribiendo esto lo que más beneficios dio a Google fue una cámara de seguridad para exteriores 🧐.
La cuenta de demo de Google Analytics te permite saber cuánto dinero gana Google por cada producto que vende en la Google Merchandising Store.
No pierdas ni un minuto más y ve corriendo a mirar todo lo que puedes descubrir con la cuenta de demostración de Google Analytics. Tener un ejemplo real de analítica de una tienda online seguro que te sirve para aprender un montón al respecto.
Resumen final
Has descubierto las posibilidades que Google Analytics te proporciona de la mano de la cuenta de demostración de la Google Merchandise Store. En esta cuenta de Google Analytics tienes los datos reales de una web con un número de visitas interesante, además de poder investigar las analíticas completas de un sistema de comercio electrónico real.
Este recurso es muy interesante si estás empezando a familiarizarte con Google Analytics pero aun le tienes un poco de miedo o no dispones de una web decente en la que instalar un código de seguimiento y empezar a recolectar datos. Podrás tocar y mirar todo lo que quieras sin miedo a romper nada, ya que estás ante un entorno de demostración seguro. ¡El sueño de todo alumno!
Te animo a echarle un vistazo y empezar a trastear con esta cuenta de demostración. Seguro que aprendes mucho sobre Google Analytics que podrás acabar aplicando a tu propia web en un futuro próximo.
¿Quieres tener más tráfico en tu web? ¡Nosotros también! Es por eso que hemos creado Nelio Content, un nuevo plugin que automatiza la promoción de contenidos en redes sociales. ¿Quieres saber más?
Cuando hablamos de campañas de marketing seguramente estarás pensando en poner un anuncio por aquí, publicar en tus redes sociales por allá, lanzar alguna que otra landing page específica… Lamentablemente, esta forma de proceder cada vez funciona menos.
En este artículo, estudiaremos cómo crear una campaña de marketing exitosa para tu negocio en cinco sencillos pasos.
1. Establece los objetivos de tu campaña
Antes de empezar a gastar dinero en publicidad o tiempo y esfuerzo en acciones sin sentido, piensa cuál es el objetivo que quieres conseguir con tu campaña de marketing. Si no sabes qué es lo que quieres conseguir con tu campaña, difícilmente sabrás valorar si esta ha sido un éxito o un fracaso estrepitoso. La clave aquí es que los objetivos que definas, además de realistas con tu situación actual han de poder ser medibles.
Definir objetivos realistas y fácilmente medibles no es sencillo en una campaña de marketing. Foto de reubenarmstrong vía Giphy.
Por ejemplo, decir «quiero más visitas» no sirve. Estudia cuántas visitas tienes en un periodo concreto de tiempo y estima el porcentaje de crecimiento que quieres conseguir en el periodo siguiente. De esta forma cuando pase el tiempo podrás evaluar claramente si tu campaña de marketing ha dado o no sus frutos.
Y ahora viene cuando la realidad te abofetea la cara sin piedad… Definir los objetivos de una campaña de marketing de forma realista no es nada fácil. Puede parecer que sí lo es, pero tendrás que ser consciente de que en marketing nada es sencillo.
2. Decide el presupuesto que vas a dedicar a tu campaña
La cantidad de dinero que puedes gastar afectará directamente al tipo de acciones que podrás realizar en tu campaña de marketing. No es lo mismo tener miles de euros para gastar en anuncios de televisión que disponer de cifras más modestas que sólo te van a permitir poner un anuncio en otra web.
Esto no quiere decir que las campañas de marketing de bajo coste no puedan tener el mismo resultado que las que queman dinero a paladas. Pero está claro que como en todo, el dinero ayuda.
Quemar dinero en una campaña de marketing por que sí no es demasiado inteligente. Fuente: Giphy.
Siempre piensa primero: ¿es esta la mejor/más efectiva/más convincente manera de llegar a mi cliente? De esta forma es posible que te ahorres dinero en lanzar acciones que de poco o nada van a servir en tu campaña de marketing.
Recuerda, no necesariamente tienes que gastar mucho, pero seguramente sí tendrás que gastar un poco.
3. Elige el medio para lanzar tu campaña
Ahora que conoces tus objetivos y el presupuesto que tienes para conseguir cumplirlos con tu campaña de marketing, ¿qué medio vas a utilizar? ¿Correo electrónico? ¿Redes sociales? ¿Llamadas telefónicas? ¿Anuncios en televisión?
Ten en cuenta que algunos canales de comunicación van a ser más adecuados para tu mercado objetivo que otros. Por ejemplo, poner anuncios de radio puede ser una completa pérdida de dinero si tu mercado objetivo no escucha regularmente la radio.
El canal que escojas para lanzar tu campaña de marketing ha de ser acertado para evitar este tipo de situaciones. Fuente: Giphy.
Piensa en los lugares y hábitos de tu mercado objetivo cuando elijas los canales para llegar a ellos. ¿Dónde pasan su tiempo? ¿Dónde es más probable que vean u oigan y presten atención a la información sobre tus productos y/o servicios? ¿En una revista? ¿En una parada de autobús? ¿En su teléfono móvil?
4. Planifica las acciones a realizar y hazlas
Escribe exactamente qué vas a hacer y cuándo. No tiene que ser elaborado, pero escribir qué acciones vas a llevar a cabo aumentará en gran medida las posibilidades de que sigas adelante y te servirá como registro para usar cuando vayas a evaluar el éxito de tu campaña de marketing.
Tener claras las acciones a realizar en tu campaña de marketing es primordial. Fuente: Giphy.
Por ejemplo, si tu campaña de marketing consiste en escribir una serie de entradas en tu blog con una cierta temática relacionada para obtener más visitantes interesados en esta, tu plan de acción podría ser tal que así:
Pensar los contenidos que hay que escribir en la web.
Definir los títulos de los contenidos y convertirlos en entradas del blog.
Revisar las entradas y programarlas para su publicación automática.
Planificar la promoción en redes sociales de los contenidos para los próximos meses (aquí Nelio Content te puede ayudar mucho).
Este es un ejemplo de campaña sencilla que puedes llevar a cabo fácilmente. Recuerda que cuanto más simple, mejor.
Cada vez que completes una acción vuelve a tu lista y márcala escribiendo la fecha en que la completaste. Así te mantendrás organizado y te encantará la sensación de progreso que irás consiguiendo.
5. Mide los resultados, mejora y vuelve a empezar
Cuando la campaña termine, es hora de ver el éxito que tuvo. Vuelve a tu objetivo de marketing, mide lo que habías decidido medir para determinar el éxito de la campaña y así verás lo que ha pasado. Una vez que hayas medido los resultados de tu campaña de marketing podrás tomar decisiones sobre las estrategias de marketing que has utilizado y las futuras campañas a realizar.
Los resultados obtenidos en tu campaña de marketing pueden ser sorprendentes. Mide, estudia, mejora y repite. Fuente: Giphy.
Si la inversión que has hecho en anuncios en Adwords no ha servido de nada y todas tus nuevas visitas han venido de tus redes sociales, potencia eso en la siguiente campaña. Mejora o elimina aquello que no funciona en tus campañas de marketing y potencia lo que te ha reportado mayores beneficios. Y, sobretodo, repite el proceso una y otra vez. Esta es la única fórmula que funciona para conseguir campañas de marketing de éxito.
Ejemplos de campañas de marketing de éxito
Cualquier campaña de marketing es mejor que no hacer ninguna. De este modo por lo menos tus esfuerzos para atraer clientes tendrán una base y seguirán una estrategia con cara y ojos. Siempre es mejor esto que ir de aquí para allá como pollo sin cabeza.
De todas formas, que tu campaña de marketing sea un éxito de masas es algo difícil de conseguir, pero no imposible. Por esto es importante aprender de los demás. Así que me gustaría acabar este artículo mostrándote algunas campañas que en su día fueron todo un éxito, consiguiendo superar con creces los objetivos que tenían establecidos.
The Man Your Man Could Smell Like (Old Spice)
La marca de productos de belleza y cuidado corporal para hombres Old Spice saltó a la fama mundial en Febrero de 2010 gracias al siguiente vídeo (si no lo viste en su día, no dudes en darle al play ya mismo):
Divertido, ¿verdad? El vídeo se hizo viral (en el momento de escribir este artículo tiene 55 millones de reproducciones) por ser muy diferente a lo que uno espera de una marca de este tipo. Pero la campaña de marketing de Old Spice no quedó ahí. Aprovechando el tirón del vídeo, en Junio lanzaron otro con el mismo actor y además crearon casi 200 videos cortos como respuesta a los comentarios que recibían en redes sociales como Twitter o Facebook. Gracias a esto la marca consiguió 29.000 nuevos fans en Facebook y 58.000 seguidores más en Twitter.
Lección: hacer una campaña de marketing totalmente diferente a lo que esperan de ti o de tu marca puede ser una buena manera de destacar. Si además aprovechas el tirón y eres proactivo respondiendo al feedback que recibes, tienes el éxito asegurado.
Get a Mac (Apple)
Las campañas comerciales de Apple nunca han tenido desperdicio, pero Get a Mac marcó un antes y un después en el nicho de mercado dominado por la empresa de la manzana.
Mucha gente descubrió una alternativa al PC gracias a esta campaña de marketing. La compañía experimentó un crecimiento de su cuota de mercado del 42% en el primer año gracias a la ayuda de esta serie de vídeos. Estos anuncios explican a la audiencia de Apple todo lo que necesitan saber sobre el producto de manera sencilla e inteligente.
Lección: Explicar las bondades de tu producto de forma simple y clara es clave para que tu campaña de marketing funcione. Si además eres capaz de compararte con tu competencia destacando tus ventajas, mejor que mejor.
Ice Bucket Challenge (ALS Association)
En verano de 2014, la ALS Association (que lucha para conseguir medios para investigar la esclerosis lateral amiotrófica) pidió a sus seguidores que hicieran una de estas dos cosas: hacer una donación o echarse un cubo de agua helada por la cabeza.
Este reto se conoció como el Ice Bucket Challenge. Si lo aceptabas, además tenías que nominar a otros para que lo hicieran. La idea es simple, o bien consigues una donación, o bien recomiendas a otros a que participen. De esta forma, poco a poco el reto se hizo viral en Internet y multitud de famosos se sumaron a la causa. La campaña consiguió recaudar 115 millones de dólares, además de la exposición en todos los medios a nivel global.
Lección: Explorar otros medios además de los tradicionales para lanzar tu campaña de marketing puede ser una muy buena alternativa. Buscar que sean tus clientes los que hagan la publicidad por ti o te ayuden a encontrar a otros posibles clientes es genial.
Obama O’s y Cap’n McCain’s (AirBnb)
En enero de 2008 los fundadores de Airbnb, Brian Chesky y Joe Gebbla, habían exprimido al máximo sus ahorros y sus tarjetas de crédito estaban en números rojos. No les quedaba otra que hacer algo a la desesperada para poder financiarse y seguir con el proyecto. Aprovechando la campaña electoral en la que pugnaban Obama y McCain pensaron que podrían promocionar Airbnb regalando unas originales cajas de cereales a blogueros y periodistas: crearon 500 cajas de cereales personalizadas con la caricatura de Obama, en color azul, y 500 con la de McCain, en rojo.
Las cajas de cereales con las que AirBnb consiguió salir del pozo.
Además de enviarlas a la prensa, vendieron las cajas de cereales a $40, llegando a obtener unos beneficios de $20.000 que les permitieron continuar con su aventura. Todo un ejemplo de cómo la creatividad puede encontrar soluciones a problemas reales.
Lección: A veces las campañas de marketing que pueden parecer una locura a priori no lo son tanto al final. ¡Hay que pensar más allá del problema que tenemos delante!
Fortnite Battle Royale (Epic Games)
El videojuego de moda actualmente es Fortnite (seguramente esto habrá cambiado si estás leyendo el artículo lejos de la fecha de su publicación 😅). Se trata de un videojuego gratuito (con compras dentro del juego) cuyo modo Battle Royale es un éxito mundial.
Lo curioso del tema es que Epic Games lanzó el juego sin este modo concreto en 2017. Pero supo ver el éxito del videojuego PlayerUnknown’s Battlegrounds (PUBG) y copió los mecanismos de este juego en Fortnite, lanzando el modo Battle Royale que hemos mencionado antes. Al principio pocos se lo tomaron en serio, pero poco a poco y corrigiendo los fallos del original, además de tener muy en cuenta el feedback de la comunidad de jugadores (algo que al parecer PUBG no hizo), se ha convertido en el dominador del mercado.
Lección: Copiar a tu competencia puede ser una campaña de marketing perfecta si evitas las cosas que ellos hacen mal y potencias tus fortalezas.
¿Pierdes demasiado tiempo en las redes sociales? A mí también me pasaba, pero ya no. Nelio Content me permite ahorrar tiempo desde el primer día. ¡Compruébalo por ti mismo!
Todos deberíamos tener nuestra propia Marca Personal. Sobre todo con la enorme competencia que hay hoy en día en prácticamente todos los sectores laborales. Cuanto más te diferencies, destaques y te posiciones como un buen profesional, mucho mejor.
La marca personal es la percepción que los demás tienen de ti sobre lo que eres y tu nivel de experiencia en un ámbito concreto, para así diferenciarte de los demás y conseguir un mayor éxito en las relaciones sociales y profesionales.
Aprender a posicionarte como un experto en algo, como un referente de algún sector es clave para crecer personal y profesionalmente. Si consigues labrarte un nombre y trabajas tu marca personal será más fácil que tus clientes te encuentren y te elijan, dejarás huella en la mente de las personas y serás reconocido.
Espejito, espejito, ¿quién es el profesional más adecuado para mi necesidad? Fuente: Giphy.
Puede parecer una tontería, pero la mayoría de las personas buscamos obtener confianza como una de las cualidades más importantes cuando hacemos la compra de un producto o contratamos un servicio. Por esto elegimos antes a alguien que nos dé esa confianza, muchas veces obtenida a través de la marca personal que potencia.
Así que lo quieras o no, lo que piensan de ti los demás es primordial y has de trabajarlo para mejorar y ampliar tus contactos y lo que estos te reportan.
Ejemplos de branding personal de éxito
Labrarte una reputación online no es sencillo y te va a llevar tiempo y esfuerzo. Afortunadamente, tienes muchos ejemplos de otras personas que han logrado llevar su marca personal a niveles de éxito. Como aprender de la experiencia de otros siempre es interesante, hoy te presento 8 casos de éxito con los que podrás tomar ejemplos para evolucionar tu marca personal y conseguir tus objetivos. ¡A por ello!
Michelle Obama
Muchas veces tendemos a pensar que la pareja del (o la) presidente de un país suele ser un florero que poco o nada aporta. El caso de Michelle Obama es todo lo contrario, ya que supo encontrar su espacio y ganarse una imagen pública envidiable.
Michelle Obama ha construido una marca personal con base en una serie de valores, como la educación, la salud y el apoyo a causas feministas y contra la discriminación racial. Todo desde la naturalidad, sin aparentar estar forzado y dando una imagen de mujer fuerte e independiente, algo bastante difícil dado el cargo que le tocó desempeñar (y más aún viendo las maneras de su sucesora, Melania Trump). Está claro que su carisma le ayudó.
Moraleja: La naturalidad ha de ser la base de tu marca personal. Si haces algo sólo por aparentar ante los demás, se acabará notando y te verás perjudicado.
Seth Godin
Conocido como ‘el padrino’ del marketing moderno, Seth Godin es uno de los expertos en marketing más influyentes hoy en día. Es el autor de de un montón de best-sellers sobre marketing, liderazgo y cambio, y su blog es de los más populares de Internet.
A diferencia de otros especialistas en marketing, Seth no es conocido por haber inventado ningún método concreto. Simplemente observa para comprender los problemas más comunes a los que se enfrenta la gente, experimenta para averiguar qué es lo que funciona y lo pone a disposición del mundo para que se beneficie de sus conocimientos.
Seth a conseguido saber sacar partido de su marca personal en sus negocios. El ejemplo más claro es el de su libro The Icarus Deception, que lanzó a través de la plataforma de crowdfunding KickStarter. Su objetivo era alcanzar 40.000 dólares, que consiguió en sólo tres horas, para llegar finalmente a multiplicar por 7 la cantidad inicial. Todo un éxito, como puedes comprobar.
Moraleja: No hace falta ser el mejor ni el más innovador desde el minuto uno. Haz las cosas de diferente forma, en vez de hacer cosas diferentes.
Tim Ferriss
Tim Ferriss es el autor del conocido libro La semana laboral de 4 horas, un best-seller con millones de ventas en todo el mundo. Hoy su blog en fourhourworkweek.com recibe más de 2,4 millones de visitantes al mes y sus podcasts The Tim Ferriss Show reciben más de 100 millones de descargas.
La marca personal que Tim ha creado desde que lanzó este libro le ha permitido crecer y ser una referencia en todo lo relacionado con productividad, gestión del tiempo, crecimiento personal y emprendimiento.
Moraleja: Sácale partido a tus puntos fuertes y tus habilidades. Gestionar correctamente el éxito puede ser la mejor gasolina para hacer crecer tu marca personal.
Joost de Valk – Yoast SEO
Si estás en el mundo WordPress seguro que sabes quién es Joost de Valk, o por lo menos conocerás a su producto estrella Yoast, el plugin de SEO más popular. Además, Joost es una de las voces más respetadas de la comunidad WordPress.
Joost supo aprovechar la oportunidad y democratizar el SEO haciéndolo accesible a todo el mundo a través de una interfaz sencilla y amigable. Si habéis probado otros plugins de SEO, seguro que habéis visto que son mucho más complejos. Muchas veces lo sencillo triunfa exactamente por eso, su sencillez. Y este es el caso de Yoast.
Las caricaturas del equipo de Yoast han conseguido que su producto sea mucho más cercano.
Además, hay que destacar también que supo dar una imagen de cercanía gracias a las divertidas caricaturas que invadían su web y sus plugins. Todo esto ayudaba a crear esa imagen de marca personal alegre y divertida que tanta falta hacía en el mundo SEO dentro de WordPress.
El equipo de Yoast está formado actualmente por unas 75 personas. Yoast SEO está actualmente disponible para cuatro plataformas de código abierto y activo en casi 8 millones de sitios web. Todo un éxito.
Moraleja: Estar en el momento adecuado en el lugar correcto no es fácil. Aprovechar las oportunidades tampoco. Por eso, cuando los astros se alinean y te ponen en una situación así, lánzate y por lo menos inténtalo.
Neil Patel
Neil Patel es cofundador de cuatro compañías multimillonarias: HelloBar, CrazyEgg, QuickSprout y Kissmetrics. Si estás metido en el mundo del marketing online estoy seguro de que lo conoces, ya que sus artículos son muy populares sobretodo para los que están empezando a adentrarse en la materia.
Neil Patel en un Ferrari.
Quizás una de las entradas de Neil más relacionadas con marca personal es esta donde explica cómo comprarse un Ferrari le consiguió un millón de dólares. Más allá de la espectacularidad, vale la pena leerla para ver que muchas veces aparentar puede ayudarte a conseguir tus objetivos. No obstante, cuidado con hacer demasiada ostentación, ya que puede ser contraproducente para tus intereses dependiendo de a quién te dirijas.
Moraleja: La técnica del pez globo (aparentar ser más de lo que eres) puede ayudarte a hacer crecer tu marca personal, pero ten cuidado con no pasarte. Es un arma de doble filo.
Chris Lema
Chris Lema es un reputado experto en todos los temas relacionados con negocio y WordPress. Ayuda a empresas a conseguir definir mejor sus productos y a alcanzar su público, además de trabajar habitualmente con membership sites, ecommerce y SAAS. Además, es un fan de los puros y de su jacuzzi (sólo tienes que seguirlo en Twitter para hacerte a la idea).
Chris Lema con su camiseta de «Hope is not a strategy» en la YoastCon.
La marca personal de Chris se basa en el storytelling. En todas las charlas que he podido ver de él, así como en las entradas que escribe en su blog (que, por cierto, te animo a visitar), conecta con la audiencia a través de contar historias que ayudan a entender mejor el mensaje que quiere transmitir. Y en esto Chris es un experto.
Se nota que tras sus palabras hay mucha preparación y una larga experiencia detrás de lo que dice. Además es divertido como usa apoyos visuales en forma de camisetas con el mensaje que quiere que acabe calando, tal y como hizo en la primera YoastCon.
Moraleja: Basa tu marca personal en historias que conecten con tu audiencia. Si cuando comunicas transmites sentimientos, llegarás más lejos y serás recordado más fácilmente.
Joan Boluda – Consultor de Marketing Online
Joan Boluda es una de las personas más conocidas en el mundo del marketing online en España. Seguramente habrás escuchado alguno de sus podcasts de marketing online o habrás visto alguno de sus late shows entrevistando a personas de muchos ámbitos diferentes (incluso Ruth tuvo el placer de participar en uno de sus programas).
Joan Boluda, ponente en la WordCamp Europe 2015 en Sevilla.
No hay ninguna duda del gran trabajo que hace Joan para hacer crecer su marca personal. Detrás de su apariencia hipster-vintage (la gorra y el chaleco son lo más) hay muchísimo trabajo y mucha constancia para sacar adelante todos los proyectos en los que se embarca.
Su plataforma de cursos online es una de las más reconocidas, con un equipo grande detrás dando soporte a todo esto. Entre grabaciones de programas de vídeo, podcasts, cursos, consultoría y otras muchas acciones más, hay mucho esfuerzo puesto. Y este esfuerzo y dedicación tienen recompensa, como pudimos ver con la guía del emprendedor, su último crowdfunding.
Moraleja: El trabajo duro y la constancia son claves para conseguir llevar tu marca personal al éxito. ¡No desistas!
Nelio Software
En Nelio creemos que la marca personal es importante, por eso intentamos desde el principio trabajar en ella. Habitualmente lo hacemos a través del soporte que damos a nuestros usuarios. Es en este momento cuando intentamos darlo todo para dejarlos satisfechos y dar una imagen profesional tanto individual como de empresa.
David también se ha subido a un Ferrari (a lo Neil Patel), aunque ahora sea más de Tesla. Creo que le hemos sacado poco partido a esta foto en Nelio, así que aprovecho para colarla en esta entrada 😁.
Una de las últimas acciones que hemos hecho ha sido sacar unos Wapuus (la mascota cada vez más oficial de WordPress) con nuestros rasgos. La verdad es que ha sido muy divertido. La cuestión es ser original y mantenerse fresco.
Mira que Wapuus más guapos que hemos hecho para el equipo de Nelio.
Moraleja final: Trabaja la marca personal cada día. Con tus clientes, para que hablen bien de ti. Con tus compañeros, para que trabajen a gusto contigo. Con todo el mundo, un poquito cada día. Verás los resultados poco a poco, te lo aseguro.
¿Pierdes demasiado tiempo en las redes sociales? A mí también me pasaba, pero ya no. Nelio Content me permite ahorrar tiempo desde el primer día. ¡Compruébalo por ti mismo!
De la misma forma que al desarrollar un plugin de WordPress has de tener en cuenta sus funcionalidades y sus interfaces con el usuario, cuando llega el momento en el que has de diseñar tu web, empieza un buen quebradero de cabeza. Si encima la web que tienes que diseñar es una web personal en la que quieres mostrar tu trabajo, describir quién eres y a qué te dedicas, escribir sobre tus temas de interés, etc., aparece aquí un componente de subjetividad que complica todavía más el diseño de la misma.
En general, las webs personales pueden tener diseños bastante distintos dependiendo de qué objetivos buscan:
Curriculum: web cuyo principal objetivo es presentarte a ti mismo para conseguir trabajo,
Marca personal: para ser más conocido o famoso y conseguir así más oportunidades,
Porfolio: web en la que quieres dar a conocer tus increíbles trabajos,
Blog: para compartir con los demás la temática que te apasiona y, en algunos casos, tener ingresos mediante publicidad,
Tienda online: el propósito principal es puramente comercial, vender tus productos, trabajos, etc.
Y como el objetivo puede ser múltiple, los diseños de las webs personales pueden ser muy variados, incorporando elementos muy distintos en su diseño.
Un muy buen ejemplo de web personal cuyo objetivo principal es compartir una temática de estudio o interés conjuntamente con la de aumentar la reputación del autor es el blog de:
Enrique Dans, Profesor de Innovación en IE Business School desde el año 1990, mantiene uno de los blogs personales con más reputación en innovación en el mundo de las startups. Su objetivo es:
Es una página puramente personal, que escribo únicamente yo, y que utilizo fundamentalmente para dos cosas: para mantener un repositorio ordenado de toda mi actividad, y para recibir una para mí valiosísima retroalimentación permanente sobre temas que, en muchos casos, acabo incorporando después a mis clases, conferencias o artículos de prensa. (Enrique Dans, fuente: https://www.enriquedans.com/acercade)
Captura de pantalla del blog de Enrique Dans
Su web está diseñada por Blogestudio en la que destacaría su absoluta sobriedad y sencillez, claramente acorde con la imagen esperada de un profesor del IE Business School. Y por supuesto sin ningún tipo de publicidad que moleste a la lectura de los artículos. La página principal es el propio blog y lo que se quiere resaltar en esta web no es tanto un diseño original de la misma si no la calidad del contenido de sus entradas. En su web en castellano incorpora una nube de etiquetas para buscar sobre cualquier tema. Me parece una manera muy práctica para buscar cualquier artículo en su blog.
Así que si tu objetivo de web personal y la imagen que quieres dar son parecidos a los de Enrique, te recomiendo que no te compliques mucho más la vida. Eso sí, en este caso recuerda que para conseguir su reputación, lo más importante es escribir artículos de calidad.
Pero si buscas algo más rompedor y necesitas un diseño original en tu web para mostrar mejor tu faceta innovadora y artística, a continuación tienes una selección de webs personales de WordPress que creo que te podrán servir para inspirarte. Todas ellas no son nada convencionales y en muchas de ellas hay mucho trabajo de diseño detrás. Así que, vamos allá:
Phil Casabon es un gran experto con un prestigio reconocido en Freeskiing, un tipo específico de esquí alpino, que incluye trucos, saltos y otras pericias en distintos tipos de obstáculo. Es una forma de esquiar resultado del crecimiento del snowboard combinado con la progresión del esquí freestyle.
Captura de la web de Phil Casabon.
Su web ha sido desarrollada por Pier-Luc Cossette, un diseñador de Quebec. El diseño de la web transmite perfectamente que el freeskiing es apasionante y el enamoramiento de Phil Casabon por el freeskiing. Como cita en su propia web:
Coraline Colasse es una directora de arte parisina. Y su web ha sido diseñada por Fabio Carretti.
Captura de pantalla de la web de Coraline Colasse
Esta web tiene la originalidad y llama la atención en que la navegación en la página principal se realiza seleccionando y arrastrando el ratón. De esta forma se visualizan los distintos proyectos de la autora. Aunque personalmente no me ha parecido esta funcionalidad muy intuitiva al principio, le da un toque artístico único a la web.
Alexander Engzell es un diseñador web sueco que se ha diseñado su propia web. En la misma describe muy bien cuál es el objetivo de su web:
This isn’t a portfolio about design. I’m not trying to tell people “Hey, this is how you design.” Instead, this portfolio is designed to communicate what design means to me as a person. Alexander Engzell
Captura de pantalla de la web de Alexander Engzell.
Su web incluye video, sonido y todo un conjunto de animaciones que consigue crearte la impresión de que estás viendo una película en vez de una página web.
Jony Guedj es un freelance de dirección y realización de películas, anuncios, vídeos musicales, cortometrajes y, como buen italiano, hace muy buena pasta. Su web ha sido diseñada por Benjamin Guedj.
Captura de pantalla de web de Jony Guedj.
Lo que más llama la atención del diseño es la visualización del portfolio del autor en una galería deslizante horizontal. Una forma bien distinta a la convencional.
Anna Morosini es una fotógrafa italiana licenciada en Literatura Moderna y tiene un Master en Imagen Contemporánea de Alto Nivel en la Fundación de Fotografía de Módena. Su web ha sido diseñada por Gusto Ids.
Captura de pantalla de la web de Anna Morosini.
El diseño con animaciones y a su vez minimalista invitan a disfrutar de la visualización del trabajo fotográfico increíble y sensual de Anna. Un diseño perfectamente alineado con el trabajo de la autora.
Emanuele Papale es un diseñador web de Pisa trabajando actualmente en Amsterdam. El objetivo de su web es mostrar su capacidad de diseño junto con algunos proyectos. El menú es vertical y la visualización del portfolio con animaciones es original.
Supongo que no hace falta que presente a la reina del pop, Katy Perry. Su web de WordPress es un sitio limpio y atrevido, que logra combinar la imagen personal pop de la artista con un funcionalidad de estilo revista, fácil de usar.
Captura de pantalla de Katy Perry.
El sitio web de Perry demuestra que puedes tener un montón de personalidad utilizando sólo un fondo blanco simple y enlaces fácilmente navegables, dando a sus fans la opción de escuchar, ver y aprender fácilmente como les convenga.
Girl With a Camera es el blog de fotografía de Ashley Baxter en el comparte fotos de su vida y de su obra por encargo. La web de Ashley ha sido diseñada por Matt Brett.
Captura de pantalla de la web Girl With a Camera.
Destaca de su diseño la forma en que se puede cambiar el diseño y el color de fondo de cada post para que se adapte mejor al contenido.
Ben Pearce es un escultor que se licenció en Bellas Artes en 2003, especializándose en escultura en Whanganui Quay School of Fine Arts y ha expuesto regularmente en Nueva Zelanda y Australia desde entonces.
Captura de pantalla de la web de Ben Pearce.
El diseño de su web, por Nick de Jardine es totalmente minimalista y la navegación para ir mostrando sus distintas esculturas invita a ir continuando navegando para ir viendo su trabajo.
Tyler Fink es un diseñador gráfico de Ithaca, Nueva York. Su fantástica web la ha diseñado él mismo.
Captura de pantalla de la web de Tyler Fink.
Me encanta el diseño de página principal que te permite escribir directamente encima de cada diseño de tipografía el texto que quieras y así probar si te gusta como queda cada tipo de letra. Alcanza perfectamente el objetivo que quiere conseguir con su web.
Tobias Van Schneider es un diseñador alemán con gran reconocimiento en el mundo del diseño. En su web, diseñada por él, descubrirás sus fuentes de inspiración, sus secretos para el éxito y varios consejos de su carrera profesional, junto con muchas otras ideas de este sector.
Captura de pantalla de la web de Tobias Van Schneider
El diseño y el contenido de su web pueden ser de gran inspiración si estás pensando en un diseño original para tu web.
El blog del cantante granadino Fran Fernández cuenta con un diseño gráfico muy expresivo y ligeramente carismático, que refleja la pasión y personalidad del músico.
David Blum es un diseñador web suizo que ha diseñado una web minimalista para mostrar alguno de sus trabajos de diseño, y que puedas leer algún artículo y ver su curriculum.
Captura de pantalla de la web de David Blum.
Me gusta en el diseño de esta web que tiene claro qué objetivo persigue y lo consigue con lo mínimo, de una forma nítida y sencilla.
Como ves, mi selección ha sido bastante variada en cuanto a elementos de diseño, siendo algunas de estas páginas muy novedosas. No tienen porqué ser todas ellas de tu estilo, pero creo que tienen en común que ilustran bien la personalidad y creatividad del autor de su web. Y ese debería ser una de los principales objetivos que debería conseguir el diseño de cualquier web.
¿A que esperas para añadir tu web personal de WordPress en los comentarios y así vemos diseños alternativos?
Ojalá tuviera un calendario donde poder planificar todas mis entradas… espera un momento, ¡si ya lo tengo! ¡Si es que incluso me ayuda a promocionarlas en las redes sociales! ¡Descúbrelo!
Si eres emprendedor, imagino que analizaste bien a tu competencia como paso previo inexcusable antes de crear tu nueva empresa o negocio. Es parte del estudio de mercado para:
Saber dónde y con quién compites realmente: identificar bien a tus competidores más reseñables y conocer quién está haciendo las cosas bien, quién no y cuáles son las tendencias del mercado.
Detectar en qué diferenciarte y nuevas oportunidades de negocio: si entras en un mercado donde ya están otros competidores tienes que ofrecer algo diferente e innovador para que sus clientes decidan irse contigo. Además, quizás incluso llegues a identificar un nicho de mercado que tu competencia no está atendiendo.
Prever el futuro en el mercado: analizar si tus competidores están realizando rondas de inversión o si la creación de tu negocio les puede provocar alguna reacción son convenientes para anticiparte y ver cómo vas a contrarrestar su impacto y tu encaje en los cambios en el mercado.
De hecho, este último punto ha sido en nuestro caso el precursor clave en la creación de nuestros productos Nelio A/B Testing y Nelio Content. Saber que existían empresas muy nuevas con ya buenos productos en el mercado (pero mejorables desde nuestro punto de vista), con una previsión increíble de crecimiento (debido a grandes rondas de inversión recientes) y otra información adicional que podíamos observar, nos sirvió para validar que (1) hay mercado y (2) nuestra competencia empezaba a enfocarse a las grandes empresas. Y aquí es donde vimos que nosotros podíamos encajar proporcionando plugins de WordPress que fueran muy fáciles de usar sin necesidad de conocimientos técnicos y que pudieran ser útiles y prácticos para cualquier blogger o empresa con el objetivo de mejorar su web y aumentar su audiencia con pocos recursos.
El análisis de tu competencia no sólo lo realizas cuando quieres montar tu propia empresa o debes decidir qué productos crear, sino que es un proceso continuo que debes realizar a lo largo de la vida de tu empresa. Para analizar cómo va evolucionando tu competencia tienes varias alternativas: desde convertirte en un cliente, hasta utilizar herramientas que te permiten «espiar» cómo funcionan, bien sea dónde se anuncian, qué palabras clave usan, su popularidad de enlaces y vínculos externos, su ranking web, sus menciones en Internet o redes sociales, etc. Pero la información que no te proporciona ninguna de estas herramientas es qué hacen para optimizar el ratio de conversión en su web.
Optimización del ratio de conversión
Como bien sabes, que una web tenga muchas visitas no es garantía de que tenga más ventas. Optimizar el ratio de conversión y la experiencia de usuario es igual o más importante que incrementar las visitas a tu web. Recuerda que el ratio de conversión es la métrica que te indica el porcentaje de visitantes a tu web que acaban realizando una cierta acción o alcanzando un objetivo (es decir, «que convierten»); por ejemplo, los que acaban comprando un producto, se subscriben a tu boletín de noticias, hacen clic en un anuncio, etc.
Seguramente ya sabes que las técnicas más conocidas para optimizar el ratio de conversión (CRO en inglés, de Conversion Rate Optimization) de tu web son los heatmaps y los tests A/B.
El bebé se está llevando toda la antención. Con el heatmap lo puedes ver.
Los heatmaps te ayudan a detectar las flaquezas del diseño de tu web. Como ves en la imagen anterior, el niño es tan mono que se lleva toda la atención y, posiblemente, este no era el objetivo de esa web. Por otro lado, los tests A/B te permiten tener dos versiones de una página de tu web simultáneamente (por ejemplo una de ellas, la versión A, muestra un título, y otra, la versión B, muestra un título distinto) para que la mitad de tus visitantes vean una, la otra mitad, la otra y así puedas evaluar qué versión está funcionando mejor.
Funcionamiento del Test A/B
Como ya sabes, nuestro plugin Nelio A/B Testing para WordPress te permite crear heatmaps y tests A/B de páginas, entradas, temas, widgets, productos, tipos de contenido personalizados, titulares y menús de forma muy fácil y poder ver los resultados en el propio escritorio de WordPress. Pues bien, a continuación te muestro algunos de los tests que mejor les están funcionando a nuestros clientes para optimizar sus webs. Estoy segura de que te pueden servir de inspiración para mejorar la tuya.
Heatmaps
Todos, y sí, he dicho todos nuestros clientes de Nelio A/B Testing realizan experimentos de heatmaps. Pero ¿qué información les proporcionan los heatmaps? Lo más importante es que permiten ver dónde los lectores ponen el foco de atención, así como ver en qué zonas de la web hacen clic. La mayoría de clientes tiene experimentos de heatmaps en la página principal y en la página de precios. Algunos, también los usan en el blog, pero son minoría.
Test A/B
¿Qué tipo de tests A/B realizan? Y, sobretodo, ¿qué experimentos les están dando mejores resultados? A continuación te he seleccionado algunos de los que más impacto han tenido.
Test de páginas
El test A/B de páginas te permite crear dos o más versiones distintas de cualquier página de tu web para analizar qué funciona mejor. Este tipo de test es el más popular entre nuestros clientes.
¿Qué han probado que les ha funcionado?
Título de la página: comprobado por nuestros clientes; hay títulos mucho más atractivos que otros. Por ejemplo, una empresa de seguridad con un titular «Don’t leave your digital doors unlocked» (No dejes las puertas digitales abiertas) conseguía una conversión de un 21% respecto a un 3,75% de la alternativa «How hackable is your family?» (¿Cómo de hackeable es tu familia?).
Cambio de imágenes: en la página principal, probar cómo varia la conversión si se cambia la imagen de fondo o cualquier otra imagen de alguna sección es un test habitual. Una empresa hizo cuatro veces este tipo de experimento, cambiando imágenes (una se mostraba un grupo de gente, en otra una oficina, en otra un mesa de despacho), en los tres primeros no obtuvo resultados de mejora que fueran estadísticamente significativos. Pero la cuarta vez, una imagen en la que se ve un equipo simpático de tres jóvenes trabajando resultó ganadora de forma abrumadora. ¿Quiere decir que eso funciona mejor siempre? No; otra empresa con un experimento parecido tuvo como clara ganadora la imagen en que se mostraba, sencillamente, la pantalla del ordenador con la imagen del software. ¡Hay que probarlo todo siempre!
Cambios en el texto descriptivo: algún cliente, tras sólo cambiar el texto de la descripción del servicio que ofrecía, consiguió una mejora de un 7% de conversión a un 11%.
Cambiar el texto de llamada a la acción: una empresa de alquiler de coches consiguió una conversión de casi un 5% con «Signup in 30 seconds» (apúntate en 30 segundos) respecto a la 2,5% con «Request a call back» (Pide que te llamemos) .
Posición del botón de llamada a la acción: un cliente consiguió mejorar un ratio de conversión de 6,25% a un 50% sólo por el hecho de posicionar el botón de «Get Access Now» (Consigue acceso ya) casi al principio de la página.
Cambiar el color del botón de la llamada a la acción: ¿de qué color prefieren tus clientes un botón? Nuestros tests los han visto de todos los colores. Si pensabas que el naranja era el mejor, uno de nuestros clientes, con una empresa de seguros, descubrió que sus visitantes los prefieren azules con una confianza estadística de más del 99%.
Posición del vídeo del producto: a uno de nuestros clientes, el posicionar el vídeo al principio de la página principal le supuso doblar la conversión respecto a mostrar el vídeo más abajo.
Orden en que se muestran los productos: empresas que ofrecen 2 o tres planes hacen continuamente tests para establecer en qué orden mostrarlos. Los heatmaps muestran como la gente tiene tendencia a focalizarse en el que se encuentra más a la izquierda, pero no es necesariamente el que acaba generando más conversión. Ordenarlos de menor a mayor es el que hemos observado que acaba teniendo más éxito.
Cómo se muestran los precios: este es un clásico de muchos clientes (incluso nosotros mismos lo hemos hecho varias veces). Por ejemplo una empresa que ofrece servicios por horas, la versión en que indicaba que el precio del servicio empieza a partir de un precio tuvo una conversión tres veces superior a la que indicaba el coste por hora. Otros clientes, especialmente en casos de suscripciones, experimentan qué precio mostrar por defecto, si el precio mensual o el anual.
Incluir o no una sección o un slider: en la página principal se realizan otros muchos tipos de experimentos, como el de añadir o no una sección con información adicional o incluir un slider que muestre las principales características de un producto. Algunos clientes obtienen mejoras de más de un 5% en la conversión con este tipo de cambios en el diseño.
Pasos para rellenar un formulario y realizar el pago: un cliente que ofrece servicios de obtención de documentación para registro de barcos, comprobó que rellenar el formulario y pagar en la misma página suponía un 5% de conversión, comparado con la escasa conversión que tenía el formulario paginado.
Test de titulares de entradas
Este tipo de test te permite probar el titular (es decir, el título, el extracto y la imagen destacada) de una entrada de forma que se ve siempre el mismo titular a lo largo de toda la web: en la entrada, en la búsqueda de entradas, en la lista de entradas etc, y analizar cuál genera más clics. Lo usan principalmente las webs de noticias y los resultados que obtienen son de lo más variopintos (es divertido ver cómo su intuición sobre qué es mejor/peor no siempre acierta). A veces no ves que haya ningún título o imagen ganadora y otras veces das con el título que realmente lo peta. Si necesitas algún consejo, lo que hemos observado es que los experimento que prueban titulares muy parecidos no suelen dar claros ganadores; en cambio, titulares dispares y variados consiguen que uno se posicione por delante de los demás (descubrir cuál es cosa tuya 😉).
Test de Widgets
Este tipo de test es también, junto con el de páginas, uno de los favoritos de muchos de nuestros clientes. ¿Por qué? Pues porque te permite probar de forma homogénea widgets a lo largo de toda la web. ¿Qué tipos de test son los más frecuentes?
Algunos clientes, tal y como comenta Hamilton Kiah III, prueban formularios que aparecen por un lateral o diferentes tipos de ventanas modales. Y aquí volvemos a encontrarnos una gran variedad de tests entre nuestros clientes: prueban distintos órdenes, tamaños o posiciones de los anuncios, distintas imágenes, colores y diseños de botones o contenido del texto. También prueban alternativas de menús secundarios o pies de página.
La gran ventaja de este tipo de test es que es un test que se prueba globalmente en toda la web y, depende de cuál sea la mejora, puede suponer un gran impacto. Por ejemplo, un cliente probó dos versiones distintas de color y diseño del texto que aparece en el pie de página para suscribirse a su producto. La alternativa le supuso doblar el número de suscripciones.
Conclusiones
Analizando los experimentos que realizan nuestros clientes, confirmamos algunas hipótesis que ya teníamos. La primera es que el impacto que tiene la conversión de una web es mucho más importante que el número de visitas recibidas. Hemos visto que efectivamente, hay diseños que no generan ninguna conversión, pero que con pequeños cambios consiguen unos resultados impresionantes.
La segunda es que nuestra intuición o hipótesis sobre los resultados que se van a obtener ante un test A/B deja mucho que desear en una gran mayoría de los casos. Hasta que no lo haces el experimento, no sabes lo que ocurrirá.
El tercero, y siento comunicar estas malas noticias: lo que le funciona a uno no tiene por qué funcionar al resto del mundo. A unos les funciona el botón naranja pero a otros les funciona mejor el azul. Quizá no es el color y es el texto, o quizá es el diseño. Quizá es que el público es distinto. ¿Quién sabe? Demasiadas variables a tener en cuenta para poder sacar conclusiones universales… así que realiza tus propios tests y saca tus propias conclusiones. Cuanto más tests hagas, más posibilidades tendrás de mejorar tu web. Y de hecho, también hemos podido observar que son precisamente los clientes que más cantidad de tests hacen los que consiguen unos incrementos de conversión más relevantes. Así que, ¿a qué estás esperando para hacer tests A/B? 😉
Estaba tan cansada de promocionar mis entradas en redes sociales… hasta que creamos Nelio Content, un plugin para WordPress que hace que sea taaaan fácil ¡que ni me lo creo! ¡Échale un vistazo, anda!
Cada año, en Estados Unidos se publica la lista Inc. 5000 con las primeras 5.000 empresas que han tenido un crecimiento más rápido en los últimos tres años. Este estudio nos brinda una fantástica oportunidad para comprobar cuál es el nivel de popularidad de WordPress en estas empresas y contrastarlo con el uso general de WordPress en el mundo, tal y como ya hicimos en años anteriores:
Por un lado, según BuiltWith, el uso de WordPress en 2017 de las 10 mil mejores webs es de un 30%. No está nada mal, ¿eh?
Uso de WordPress entre las 10 mil mejores webs (Fuente: BuiltWith)
Por otro lado, este año 2017 hay 54 empresas de las 100 primeras de @inc5000 que tienen sus webs en WordPress. Es decir, más del 50% de las empresas con más crecimiento en los últimos tres años usan WordPress. ¡Genial!
Para que veas un poco qué tipo de negocios tienen las mejores empresas y el aspecto de sus webs, te resumo las 16 webs WordPress del top 30. Con un poco de suerte, encontrarás la inspiración necesaria para montar una de las empresas que saldrán en el informe de 2018 😉.
Ranking en Inc. 5000: #1 Crecimiento en los últimos 3 años: 50.058% Ingresos en 2016: $54,2 M
La empresa que ha tenido un crecimiento más rápido en Estados Unidos es el fenómeno de los deportes electrónicos Skillz. La plataforma de streaming y competición de juegos para móviles proporciona un espacio para que los jugadores participen en torneos y para que los fans interaccionen. Fue fundada por Andrew Paradise, fanático de e-sports, en 2012. Y ha tenido un asombroso crecimiento de 50% de los ingresos en tres años, alcanzando los 54,2 millones de dólares en 2016.
Ranking en Inc. 5000: #2 Crecimiento en los últimos 3 años: 30.065% Ingresos en 2016: $37,4 M
EnviroSolar Power instala y gestiona servicios de energía solar para particulares y comercios. Fundada en 2012, la empresa de Fort Worth ofrece una evaluación de lo que supondría una instalación solar y, si se ajusta al presupuesto del cliente, realiza la instalación y mantenimiento del sistema. EnviroSolar registró ingresos de $37,4 millones en el año 2016.
Ranking en Inc. 5000: #9 Crecimiento en los últimos 3 años: 14.429% Ingresos en 2016: $41,7 M
Web de Greensprire
Greenspire fue fundada en 2012 con el objetivo de convertir casas tradicionales en casas más ecológicas («green house» en inglés). La empresa instala placas solares y mejores aislamientos y rediseña los sistemas de agua para reducir su gasto. También instalan sistemas inteligentes que controlan el gasto eléctrico cuando no hay nadie en casa.
Ranking en Inc. 5000: #24 Crecimiento en los últimos 3 años: 9.507% Ingresos en 2016: $65,7 M
Ion Solar es un proveedor de energía solar que ofrece soluciones solares integrales y asequibles que permiten a sus clientes disfrutar de los beneficios de la energía solar con poco o ningún coste inicial. Su servicio completo incluye el diseño del sistema, todos los permisos necesarios, la instalación y la inspección y el mantenimiento del sistema.
Web de Ion Solar
En Ion Solar utilizan un tema personalizado, Ion Solar WordPress Theme, desarrollado por Adduco.
Ranking en Inc. 5000: #27 Crecimiento en los últimos 3 años: 9.222% Ingresos en 2016: $29,8 M
Legend Solar es una empresa fundada en 2011 que ofrece servicios de diseño, instalación y mantenimiento de energía solar para que sus clientes puedan producir la electricidad que necesitan en sus casas.
Web de Legend Solar
Su web utiliza un tema personalizado desarrollado por Rumor Advertising.
Ranking en Inc. 5000: #4 Crecimiento en los últimos 3 años: 21.319% Ingresos en 2016: $26,8 M
Club Pilates es una franquicia que no para de crecer; esperan conseguir tener 932 estudios abiertos a principios del próximo año. La compañía con sede en Costa Mesa, California, registró unos ingresos de 26,8 millones de dólares en 2016, una subida de 21,32% desde 2013.
Ranking en Inc. 5000: #22 Crecimiento en los últimos 3 años: 9.934% Ingresos en 2016: $29,3 M
GrowthPlay ofrece servicios de consultoría empresarial en las áreas de selección de personal, mensajería y coaching para ayudar a las empresas a aumentar sus ingresos.
Ranking en Inc. 5000: #8 Crecimiento en los últimos 3 años: 16.980% Ingresos en 2016: $59,6 M
Liftoff ofrece un software que automatiza la creación y compra de anuncios en aplicaciones de móvil. Su modelo de negocio se alinea con los clientes de forma que sólo se paga si se obtienen resultados.
Web de Liftoff
La web de Liftoff usa un tema hijo de Runway Framework cuyo autor es Andy Wilkerson de Parallelus, Inc.
Ranking en Inc. 5000: #10 Crecimiento en los últimos 3 años: 13.926% Ingresos en 2016: $17,2 M
FormulaFolios es un plataforma de software, administradora de inversiones, para asesores financieros independientes. Fundada por el asesor financiero Jason Wenk, dispone de un algoritmo que reequilibra automáticamente carteras y realiza operaciones de acuerdo con el análisis de mercado y los objetivos de inversión del cliente.
Web de FormulaFolios
FormulaFolios tiene una web basada en un tema personalizado desarrollado por la agencia digital Impact .
Ranking en Inc. 5000: #15 Crecimiento en los últimos 3 años: 12.893% Ingresos en 2016: $28,3 M
Forward Financing es una empresa financiera de Boston que ofrece financiación alternativa a pequeños negocios para que puedan tener un crecimiento más rápido. Con un modelo de negocio probado y liderado por un equipo ejecutivo experimentado, han financiado a más de 3.000 pequeñas empresas.
Ranking en Inc. 5000: #12 Crecimiento en los últimos 3 años: 13.665% Ingresos en 2016: $13,1 M
ShipHawk es una empresa que ofrece un sistema software de logística y transporte fundada en 2012 por Jeremy Bodenhammer y Aaron Freeman. Jeremy tenía una tienda de paquetería y estaba frustrado con el software que tenía para estimar los precios de transporte. Su objetivo era proveer a clientes, fabricantes y proveedores grandes y pequeños, B2B y B2C, con herramientas potentes y ágiles para la logística y el transporte de paquetes.
Ranking en Inc. 5000: #16 Crecimiento en los últimos 3 años: 12.503% Ingresos en 2016: $59,2 M
Solera Specialty Pharmacy fue fundada en 2013 con el objetivo de dar servicios farmacéuticos especializados centrados en tratamientos individualizados de pacientes para asegurar resultados óptimos.
Web de Solera Specialty Pharmacy
El tema usado en esta web es totalmente personalizado.
¿Quieres tener más tráfico en tu web? ¡Nosotros también! Es por eso que hemos creado Nelio Content, un nuevo plugin que automatiza la promoción de contenidos en redes sociales. ¿Quieres saber más?
Ejemplo de composición de un cartel publicitario en HTML y CSS, usando la funcionalidad CSS Grid que, por fin, tenemos disponible en nuestro navegadores. Bonito, ¿verdad?
La funcionalidad que robó mi corazón, y de la que te voy a hablar hoy, son las CSS Grid. Recuerdo que cuando asistí a la SmashingConf hace unos escasos 6 meses, ésta funcionalidad todavía estaba en desarrollo y ninguna versión estable de ningún navegador la soportaba. Pero Jen dijo «creo que para el verano del 2017, prácticamente todas las versiones estables de todos los navegadores soportarán esta feature» y… bueno, parece que tenía razón.
Sin Grid no hay CSS Grid
Antes de hablar de CSS Grid, quizás deberíamos dedicar un par de minutos a hablar del diseño en parrilla de páginas web. Básicamente, una parrilla no es más que la estructura sobre la cual posicionarás los elementos de tu composición. Las parrillas consisten en un conjunto de líneas invisibles (columnas y filas, de hecho) que sirven de soporte para la maquetación. Esto que suena bastante abstracto se ve muy claro en la siguiente imagen:
Parrilla de 12 columnas de la web de la BBC. (Fuente).
Como puedes ver, la web presenta dos filas claramente diferenciadas: un bloque de bienvenida y otro con noticias. Los dos bloques se apoyan en un diseño de 12 columnas, pero lo hacen de forma diferente. Así, el primer bloque se divide en dos mitades: en la mitad izquierda destaca una noticia en concreto y en la mitad derecha presenta cuatro noticias. Por otro lado, el segundo bloque se divide en tres columnas del mismo tamaño.
Si has usado frameworks de maquetación web como Bootstrap de Twitter o Foundation, probablemente ya estés familiarizado con esta estructura de 12 columnas. El motivo de usar exactamente 12 columnas y no 10, por ejemplo, es la versatilidad que ofrece el número 12, porque tiene muchos factores (es divisible entre 1, 2, 3, 4, 6 y 12), así que podemos maquetar casi cualquier cosa con cierta facilidad.
En esencia, todo lo que necesitas saber sobre el diseño en parrilla es lo que te acabo de contar 🙌 Pero como sé que eres una persona con mucha curiosidad, te dejo una muy buena introducción al tema de Ed Wassermann. ¡Ah! Y si eres un diseñador o maquetador web con experiencia, ya estás familiarizado con el diseño en parrillla y quieres aportar tu granito de arena y/o corregirme, te invito a que lo hagas en los comentarios; estoy seguro de que nuestros lectores te lo agradecerán 😜
¿Cómo hacíamos las parrillas hasta ahora?
Las parrillas no son algo que hayamos inventado recientemente; llevan con nosotros muchísimos años. Pero si hablamos del mundo web, creo que es seguro afirmar que el auge de la maquetación con parrillas (¡y encima responsive!) llegó con los frameworks que te comentaba antes (Bootstrap y similares). Y, por lo tanto, tiene sentido ver cómo se diseña una web con parrilla usando alguno de estos frameworks.
Por ejemplo, si intentáramos maquetar la página de la BBC que hemos visto más arriba, el código HTML en Bootstrap sería parecido a este:
dando como resultado esto:
Resultado de la maquetación de la página de la BBC usando Bootstrap.
Como puedes ver, el código HTML que hemos escrito refleja claramente nuestra intención de montar una parrilla. De hecho, se parece mucho a lo que se hacía hace muchos años, cuando se maquetaban las webs usando tablas 😱, cosa que en teoría se pretendía evitar con el combo HTML y CSS.
Por ejemplo, si nos centramos en el primer bloque vemos que tenemos un div dividido en tres columnas. Luego llenamos cada una de las columnas, pero tenemos que tener en cuenta que el elemento de la primera columna tiene que ser más alto que los demás, así que necesitamos especificar una altura concreta para ese elemento… Bastante engorroso, la verdad.
Un vistazo a CSS Grid
La solución al problema anterior se llama CSS Grid. CSS Grid es el sistema de maquetación más potente que hay disponible. Se trata de un sistema en 2D que nos permite definir filas y columnas (a diferencia de, por ejemplo, flexbox, el cual funciona en una única dimensión).
Para entender un poco mejor cómo funciona CSS Grid, lo mejor que podemos hacer es repetir el ejemplo de la BBC que acabamos de ver:
Como puedes ver, el código HTML se ha simplificado muchísimo respecto al que habíamos creado antes. Ahora, cada una de las secciones tiene una sencilla lista de noticias; no hay nada que indique cuál es la maquetación de la página. Si renderizáramos esta página «pelada», lo que veríamos es lo siguiente:
Página de la BBC sin estilos de maquetación.
¿Cómo conseguimos darle el estilo que queremos? ¡Pues saltando al mundo del CSS, claro! Para poder definir la parrilla con CSS Grid, deberemos aplicar estilos al elemento contenedor (el cual definirá la «parrilla» en si) y a los elementos hijo (los cuales se convertirán en los items de la parrilla):
lo cual genera el siguiente resultado:
Página de la BBC maquetada con CSS Grid, cuando todavía no hemos especificado que la primera noticia ocupa dos celdas.
El código CSS que acabamos de crear especifica la parrilla sobre la que se montará la página. Sin hacer nada más, el propio navegador posiciona de forma automática cada uno de los elementos hijo (las noticias de la BBC) en su correspondiente celda. ¡Increíble! Aunque, bueno, el resultado que conseguimos es casi el que queríamos. ¿Qué ha fallado?
El primer bloque lo hemos dividido en tres columnas y dos filas (lo cual ha generado 6 celdas). El problema es que la primera noticia debía ocupar dos celdas (la primera columna de la primera fila y la primera columna de la segunda fila). Como no hemos especificado este requisito en ningún lado, la maquetación por defecto que ha salido no es exactamente lo que queríamos.
Arreglémoslo añadiendo una nueva regla para que el primer elemento de la sección header ocupe dos celdas:
con lo que, ahora sí, tenemos lo que queríamos:
Página de la BBC perfectamente maquetada con CSS Grid.
Voilà! Ya tenemos una copia de lo que teníamos al principio, pero con una sencillez y elegancia brutales. CSS Grid nos ha permitido definir un código HTML super limpio y completamente independiente de la maquetación final. Fantástico, ¿no crees?
Recursos para aprender CSS Grid
Para empezar, te recomiendo que pruebes el juego CSS Grid Garden de Thomas H. Park. A lo largo de sus 28 niveles aprenderás todas las funcionalidades básicas (y no tan básicas) de CSS Grid de una forma divertida y amena:
Aprende CSS Grid con este juego interactivo.
Otros recursos (más completos y exhaustivos) para dominar el futuro de la web son:
Guía completa de CSS Grid en CSS Tricks. No creo que esta web necesite muchas presentaciones… Aquí encontrarás todas las propiedades de CSS Grid, explicaciones detalladas sobre cada una de ellas y ejemplos de cómo usarlas. La web divide el contenido en dos columnas: las reglas que aplican al padre (la «parrilla») y las reglas que aplican a los hijos (los items).
CSS Grid Layout en Mozilla. Aunque un poco menos completo que el recurso anterior, su sencillez te permite encontrar rápidamente el nombre de la propiedad que te interesa.
Ejemplos de Grid. Una variada colección de ejemplos de parrillas. Si no sabes por dónde empezar, tener estos ejemplos puede ser muy útil 😋
Conclusión
¡Por fin podemos separar la maquetación del contenido! Sin ninguna duda, CSS Grid va a revolucionar la forma en la que montas las páginas web. La potencia de esta herramienta es brutal y supera con creces todo lo que hemos estado haciendo hasta ahora. Te recomiendo que te familiarices cuanto antes con CSS Grid y que empieces a aplicarlo a tus proyectos.
Esta web usa cookies operativas propias que tienen una pura finalidad funcional y cookies de terceros que nos ayudan a entender cómo interactúan los visitantes con la web mediante la recopilación y presentación de información de forma anónima. Si continuas navegando, aceptas su uso pero puedes desactivarlas si lo deseas. Más información…
