Diseño web

Diseño web

Download on the App Store

Diseño web episodes

  • Cómo hacer un calendario editorial para tu blog

    Hoy vamos hablar de cómo hacer un calendario editorial para tener programados los temas a tratar en tu blog o podcast, pero antes, un poco de autobombo!!!:

    Nuevo servicio de análisis web! Por 30€ analizo durante 15 minutos los puntos clave de tu web a nivel de marketing y diseño.
    Cuéntame cuál es el objetivo de tu web y te diré lo que debes modificar para aumentar las conversiones.
    Te enviaré el audio en un mp3 a tu email y además lo publicaré en este podcast, (con lo que obtendrás publicidad gratis!)
    Pásate ahora mismo por https://pampua.es/analisis y solicita tu análisis web.

    Criterios a tener en cuenta en un calendario editorial
    Hay ciertos criterios que debes tener en cuenta a la hora de plantearte cómo hacer un calendario editorial. Aspectos que debes incluir en el tuyo propio y no pasar por alto, que dan respuesta a las siguientes preguntas:

    ¿Por qué? Teniendo en cuenta las necesidades de tu público y tu propio proyecto, podrás determinar la razón de ser de tu blog. En ese sentido, tendrás que determinar una serie de objetivos cuantificables en términos de visitas, comentarios o conversiones de otro tipo a un número de meses vista, partiendo de un objetivo principal, como podría ser aumentar las ventas y concretando en objetivos a corto plazo medibles y realistas.
    ¿Qué? Para cumplir con tus objetivos y enganchar a la audiencia con tu estrategia de contenidos, necesitarás resolver la cuestión principal; ¿qué tipo de contenidos puedes ofrecer? Sean del tema que sean, deberán llevar un trasfondo práctico, que resuelva algún problema real en tu mercado y se ajuste a la planificación de tu calendario.
    ¿Cuándo? Debes pensar en la frecuencia de publicación. Si vas a publicar una vez a la semana, deberás estructurar su contenido en semanas. Si publicas una vez al mes, entonces estructúralo en meses. Este aspecto lo defines tú en función de tu tiempo y las necesidades de tu público.
    ¿Dónde? En función a la actividad en medios digitales de tu audiencia y la periodicidad de tus publicaciones, así te serán más prácticos unos canales de difusión de contenidos u otros. Por ejemplo, si tu público está presente en Twitter y te decides por compartir ahí tus posts, tienes que ser consciente del ritmo frenético que demanda esta red social y ser capaz de compartir información con una elevada frecuencia.
    ¿Cómo? También debes pensar en cuántas personas vais a participar en el desarrollo de los contenidos para tu blog. Si todo lo vas a gestionar tú el calendario será más sencillo, pero si es un trabajo colaborativo necesitarás estructurarlo de manera que se entienda bien quién hace cada tarea.

    Las 5 etapas para desarrollar el calendario editorial de un blog
    1. Análisis de necesidades del público
    Esto es algo similar a lo que comentamos en el episodio 23 del buyer persona o público objetivo. Te explico:
    Seguramente tendrás un perfil de lector ideal en mente, ese que quieres que te lea y muestre interés por tus contenidos, de manera que puedas obtener ciertos resultados de sus acciones. No obstante, cuando se trata de dar visibilidad a los artículos de tu blog, también tendrás que tener en cuenta a otros perfiles.
    Por ejemplo, puede que tu objetivo no sea vender cursos formativos a influencers de gran reconocimiento en tu sector, pero piensa que éstos necesitarán tus contenidos para nutrir sus perfiles sociales y aportar valor a sus grandes comunidades, quienes indirectamente pueden terminar por ser tus clientes.
    En definitiva, atender a las necesidades de contenido de diferentes “sub-públicos” te ayudará a definir temáticas relacionadas y de interés para el calendario editorial de tu blog.
    2. Definición de objetivos, canales y formatos de contenidos
    12 min
  • Cómo registrar y configurar un dominio para tu web

    Hoy vamos hablar de lo más básico para tener una web, cómo registrar y configurar un dominio, pero antes, déjame contarte algo:

    Nuevo servicio de análisis web! Por 30€ analizo durante 15 minutos los puntos clave de tu web a nivel de marketing y diseño.
    Cuéntame cuál es el objetivo de tu web y te diré lo que debes modificar para aumentar las conversiones.
    Te enviaré el audio en un mp3 a tu email y además lo publicaré en el podcast, (con lo que obtendrás publicidad gratis!)
    Pásate ahora mismo por pampua.es/analisis y solicita tu análisis web.

    ¿Qué es un dominio?
    El dominio es el nombre exclusivo que se asigna a un sitio web. Esta es la manera de identificar y traducir la dirección IP, facilitando la posibilidad de encontrarla en Internet. No obstante, para que la página web sea visible es necesario contar con otros elementos más allá del dominio. Estos son el alojamiento o hosting y la propia página web.
    Mientras que el dominio es el nombre de la web, el alojamiento es el lugar dónde se encuentra almacenada. Dominio y alojamiento son dos conceptos ligados estrechamente entre sí por lo que es importante saber diferenciarlos correctamente. Cuando vas a registrar un dominio en Internet debes tener en cuenta que necesitarás contratar un hosting para que tu sitio web sea visible en el futuro. Sin hosting, no hay web, a pesar de que tengas el mejor dominio del mundo.
    Así, a la hora de conocer cómo registrar un dominio es interesante que sepas el proceso de contratar un hosting, como ya te expliqué en el episodio 9, ya que no tiene porqué ir incluido y no todas las empresas de registro de dominios lo ofrecen.
    Por otro lado, el servidor es la máquina -ya sea física o virtual- en la que se encuentra el espacio de alojamiento, es decir, el disco duro donde se almacenan los archivos de tu web y que está en un centro de datos contactado permanentemente a internet con conexiones de altísima velocidad.
    Cómo elegir el nombre del dominio
    Hoy en día resulta difícil encontrar nombres de dominio que sean cortos, suenen bien, y estén disponibles el .com y el .es
    Si vas a ponerle un nombre a tu negocio yo te recomendaría que antes visitaras https://www.namecheckr.com/ y te aseguraras que no sólo están libres los dominios, sino también las redes sociales más importantes: Facebook, twitter e Instagram.
    Lo dicho, a ser posible, registra siempre el .es y .com
    Consejos para registrar un dominio

    Elige correctamente la terminación más adecuada para tu dominio. Dependiendo de los objetivos de la web, es más correcto elegir una terminación u otra. Si el .com y el .es no estuvieran disponibles y no fuese posible cambiar el nombre, mira que está haciendo tu sector. Si se trata de música puedes registrar el .fm o si es algo relacionado con los audiovisuales el .tv
    El nombre de dominio no debe exceder las 15 letras. Un dominio demasiado largo no será sencillo de recordar para un usuario o para un cliente potencial. Normalmente se recomienda que un dominio no exceda las 15 letras, más allá podría considerarse una locura.
    El dominio debe ser fácil de pronunciar. Además de la facilidad para recordar el nombre también es necesario que pronunciar el dominio sea sencillo. Tanto un dominio extenso como uno que no se sepa pronunciar habitualmente dar lugar a error a la hora de escribirlo. Aconsejo evitar algunas letras que puedan ser complicadas a la hora de deletrearlas o pronunciar. Es posible que no tengas pensado hacer una cuña en la radio hoy en día, pero quién sabe si en el futuro lo necesitas.
    Conocer los aspectos jurídicos.
    15 min
  • Gutenberg, el editor visual de WordPress
    Hoy vamos hablar de Gutenberg, el nuevo editor visual de WordPress que se supone que nos va a simplificar mucho la vida (especialmente si no tienes conocimientos de HTML), pero antes, demos paso al patrocinador!!!!:

    WebEmpresa, hosting especializado en WordPress.
    Es el hosting que uso y recomiendo desde hace tiempo
    En pampua.es/webempresa te dejo los 13 motivos que tienes contratarlo; échale un vistazo!
    Además te doy un cupón del 20% de descuento. Entra ahora mismo en pampua.es/webempresa y guárdate tu cupón.

    ¿Que es Gutenberg?
    Es el nuevo editor visual de WordPress. Toma el nombre de Johannes Gutenberg inventor de la imprenta con teclas móviles hace más de 500 años.
    El editor visual actual exige mucho de nosotros para utilizar los códigos de acceso y HTML para hacer que las cosas funcionen. Su meta es hacer esto más fácil, especialmente para aquellos que empiezan con WordPress, o en palabras de su creador:

    El editor creará una nueva experiencia de creación de páginas y entradas que hará que escribir publicaciones enriquecidas no conlleve esfuerzo alguno, y que tendrá “bloques” para hacer fácil lo que actualmente requiere shortcodes, HTML personalizado, o los imprevisibles incrustados automáticos. — Matt Mullenweg

    Básicamente, es una adaptación del editor clásico a un editor más potente y adaptado a las necesidades de los usuarios.
    Seguramente ahora te estén viniendo a la cabeza constructores como Elementor, Divi, Visual Composer, y te preguntarás: ¿qué diferencia hay entre Gutenberg y otros maquetadores para WordPress?
    Normalmente debemos comprar un tema o plantilla para crear una web en WordPress y luego construirlas con un maquetador, que si utilizas o has utilizado alguno como los ya nombrados, sabrás que son de arrastrar y soltar (drag&drop), y que te permiten ver el resultado al momento.
    El problema viene cuando tenemos que modificar una página en el panel de control de WordPress o con código, ya que si no tienes conocimientos avanzados es más complicado de hacer.
    Lo que puedes hacer con el editor Gutenberg es construir las páginas mediante bloques desde el propio panel de control de WordPress de una forma muy similar a los ya conocidos constructores.
    Puedes construir y ver el resultado de la página desde el propio panel de control, lo que es una gran novedad para WordPress, y que podría llegar a sustituir en un futuro la mayoría de constructores que hoy en día usamos, siendo un problema para muchos y una ventaja para otros.
    ¿Cómo funciona?
    Como te comentaba antes, el editor Guternberg funciona mediante bloques, por lo que tendrás que seleccionar el botón “+” de añadir bloque para añadir nuestras “secciones”.
    El editor permite deshacer los cambios realizados y rehacerlos de forma muy sencilla, ya que como si de un documento de Word se tratase, ha incluido dos botones para volver atrás y adelante.
    Justo al lado del botón “+” tenemos un botón de “información”, el cual te dirá la información general como el número de palabras de nuestra página, el número de encabezados, los párrafos y el número de bloques de la página que estés creando.
    Además, mostrará la jerarquía de H que tiene de forma muy sencilla y visual.
    A su derecha encontrarás las herramientas con la opción de “Vista Previa” con el que, como con otros editores, pulsándolo podrás ver los resultados de lo que vayas construyendo en la página.
    Pero ojo, aunque pulses sobre vista previa, si no haces click en “Publicar” esta página no será visible para el resto de personas que entren en tu web, por lo que quedará en borradores.
    Si te fijas a la derecha, donde están las herramientas, tienes la opción de ocultar o mostrar más opciones para personalizar mejor la pá...
    14 min
  • Básicos del diseño web: HTML

    Hoy vamos hablar de HTML, el lenguaje con el que se “programan” las páginas web (porque técnicamente no es un lenguaje de programación), os voy a contar lo que a mi me gustaría que me enseñaran si tuviera que encargarme de modificar una página web sin tener ningún conocimiento de HTML, pero antes, demos paso al patrocinador!!!!:

    WebEmpresa, hosting especializado en WordPress.
    Es el hosting que uso y recomiendo desde hace tiempo
    En pampua.es/webempresa te dejo los 13 motivos que tienes contratarlo; échale un vistazo!
    Además te doy un cupón del 20% de descuento. Entra ahora mismo en pampua.es/webempresa y guárdate tu cupón.

    ¿Que es el HTML?
    El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Los archivos con el código HTML se almacenan en el servidor y los navegadores se encargan de interpretar el código HTML, y de mostrar a los usuarios las páginas web resultantes del código interpretado.
    HTML5
    Hoy en día el estándar que se utiliza es HTML5. El HTML empezó en 1991 y ha ido evolucionando y adaptándose, añadiendo nuevas funcionalidades que nos hacen el trabajo más fácil. Toda página web hecha con Html, por complicada que parezca, se divide en dos partes bien diferentes a las que llamaremos Cabecera (head) y Cuerpo (body). Además, todas las páginas web empiezan con la palabra mágica (o etiqueta)  y terminan con la etiqueta .
    Las etiquetas
    Como acabáis de ver, HTML es un lenguaje de etiquetas
    La mayoría de las etiquetas hay que abrirlas y cerrarlas. Se cierran con la / antes del nombre de la etiqueta. Hoy no voy a hablaros de todas las etiquetas que existen, sino únicamente de las que pienso que vais a necesitar para hacer pequeños cambios en una página que ya esté hecha (en WordPress por ejemplo)
    Para escribir un párrafo, lo haremos dentro de la zona visible (el body) encerrando lo que queremos escribir entre los símbolos 

     y 

     que son las etiquetas para escribir párrafos.
    Si encerramos un texto entre  y  éste aparecerá en negrita. El tag  representa a la propiedad “bold” que significa negrita.
    Si ponemos un texto entre  y  éste aparecerá en cursiva. El tag  representa a la propiedad italic, cursiva.
    Y si encerramos un texto entre las etiquetas  y  éste aparecerá subrayados.
    Para crear un titular basta con escribir su texto y encerrarlo en este caso entre las etiquetas  y . Para mejorar el posicionamiento sólo debería haber un h1 en cada pagina.
    Existen otras etiquetas de títulos en Html5, h2, h3, h4, h5 y h6, aunque no creo que pasemos del h2 o h3 normalmente para ir creando subtítulos.
    Las imágenes son un elemento más en las páginas web y hay que añadirlas en el Html de las páginas, salvo algunas excepciones, como es el caso de las imágenes de fondo que sí que irán en el CSS.
    El código HTML5 correcto para insertar una imagen en una página web es este:
    alt="Texto Alternativo">
    Esta etiqueta es algo especial, pues así como las etiquetas de párrafo y de títulos (y las otras que hemos visto) necesitan obligatoriamente de su correspondiente etiqueta de cierre, la etiqueta de imagen no tiene etiqueta de cierre.
    Otra cosa a tener en cuenta es que el servidor ha de encontrar la imagen, por lo que es muy recomendable poner nombres a las imágenes en minúsculas, sin espacios, tildes ni caracteres especiales.
    Las dimensiones de la imagen vienen definidas por width y height (ancho y alto) y debería ser exactamente las mismas que las que tenga la imagen. Por lo que es importante preparar la imagen al tamaño que la vamos a necesitar antes de subi...
    12 min
  • Las herramientas que uso para diseñar páginas web

    Hoy vamos hablar de las herramientas que más uso para diseñar páginas web, pero antes, demos paso al patrocinador!!!!:

    WebEmpresa, hosting especializado en WordPress.
    Es el hosting que uso y recomiendo desde hace tiempo
    En pampua.es/webempresa te dejo los 13 motivos que tienes contratarlo; échale un vistazo!
    Además te doy un cupón del 20% de descuento. Entra ahora mismo en pampua.es/webempresa y guárdate tu cupón.

    Listado de herramientas que más uso:
    Editores de imagen

    Resize Expert
    Photoshop o GIMP

    Editores de texto

    Notepad++ o Sublime text
    Pages

    Productividad

    Text Expander o PhraseExpress
    Toggl

    FTP

    Filezilla

    Vídeo

    Loom
    Skype o Appear.in (Muy cómodo para que el otro usuario no tenga que instalar nada)

    Y esto ha sido todo por hoy, si hay alguna herramienta que uses habitualmente y te gustaría compartir, mándame un mail a [email protected] o pásate por Pampua.es/contacto y déjame un mensaje; estaré encantado de comentarlo contigo.
    Y si quieres que en próximos episodios hable de algún tema en concreto o tienes cualquier duda o comentario que quieras hacerme, déjamelo en Pampua.es/contacto, en los comentarios de iVoox, en twitter @pampua, o en nuestra página de Facebook: facebook.com/pampua
    Si te ha gustado este episodio compártelo al menos con una persona a la que pueda resultarle interesante. Por whatsapp, por mail, por  Facebook, twitter o incluso por SMS, como quieras, pero compártelo! Recuerda que puedes escucharlo y suscribirte en iTunes, iVoox, Spreaker, Youtube y desde la web de Pampua.es/podcast.
    Y por último estaré inmensamente agradecido si me dejas una reseña de 5 estrellas en iTunes o un me gusta y un comentario en iVoox. Puedes ver cómo dejar una reseña en www.pampua.es/resena
    Ahora en agosto voy a estar de vacaciones, así que el jueves de 6 septiembre volveré con un nuevo episodio del podcast, como la vuelta al cole!
    Muchísimas gracias por escuchar hasta el final, por comentar, por tus “Me gusta” y reseñas. Nos escuchamos en septiembre llueva, nieve o truene!
    10 min
  • Cómo instalar un mapa de calor

    Hoy vamos ver que es un mapa de calor, para que sirve y como instalarlo en nuestra web, pero antes, demos paso al patrocinador!!!!:

    WebEmpresa, hosting especializado en WordPress.
    Es el hosting que uso y recomiendo desde hace tiempo
    En pampua.es/webempresa te dejo los 13 motivos que tienes contratarlo; échale un vistazo!
    Además te doy un cupón del 20% de descuento. Entra ahora mismo en pampua.es/webempresa y guárdate tu cupón.

    Una de las cosas más importantes que debemos saber cuándo creamos una web, desde la más compleja hasta una landing page, es cuales son las partes de la misma que generan más atención. Es de vital importancia saberlo porque serán esos los sitios donde deberemos colocar todas nuestras llamadas a la acción, elementos que queramos destacar e incluso utilizarlos para colocar espacios de publicidad cercanos (si el modelo de ingresos de tu negocio se basa en la publicidad, de lo contrario nunca pongas publicidad).
    Hay muchas maneras de descubrir cuáles son esos lugares, pero uno de los más efectivos es el llamado mapa de calor o heatmap. Hoy vamos a conocer en profundidad esta herramienta para aprender a utilizarla y comenzar a aprovechar todas las ventajas de saber las partes de nuestra web que más atención reciben.
    ¿Qué es un mapa de calor?
    Un mapa de calor no es más que un gráfico que resalta mediante distintos colores las zonas de la web en las que más tiempo pasa el ratón o puntero de nuestro visitante. Para sacar dichas conclusiones básicamente sigue el puntero del visitante y también analiza el número de clics que realiza en los diferentes espacios de la página.
    Este concepto de mapa de calor proviene de algo que ya se viene utilizando habitualmente en el marketing, el eye tracking, que se dedica a descubrir donde miramos cuando nos ponen delante un texto o imagen.
    El único y gran problema que presenta esta técnica de heatmap es que necesita una muestra amplia para poder presentar unos resultados coherentes y útiles. Es decir, para que podamos fiarnos de los resultados, tendremos que tenerlos rastreando nuestras visitas durante un espacio de tiempo amplio para que consiga reconocer el comportamiento de una gran cantidad de usuarios.
    ¿Para que sirve un mapa de calor?
    El mapa de calor se puede utilizar para distintos objetivos, pero principalmente hay tres que son para los que mejor funcionan.
    Analizar los mejores sitios para poner publicidad
    No es un secreto que la mayoría de páginas web de Internet se sustentan gracias a la publicidad, de ahí que te encuentres banners de Adsense y todo tipo de afiliados en prácticamente cualquier página.
    Con los mapas de calor podremos saber exactamente donde colocar nuestra publicidad para que cada persona que entre vea nuestros banners. No es conveniente utilizar todos los determinados “puntos calientes” (lugares de mayor atención) para publicidad, ya que el usuario podría tener una percepción de que la web tan solo está formada por banners y hará pasar desapercibido nuestro contenido.
    Conocer la visibilidad de determinados elementos de la web
    Si queremos resaltar una de nuestras secciones de la web, un nuevo servicio que hemos creado o directamente hemos creado una landing y queremos que toda la atención se fije en un formulario que el usuario debe rellenar, los mapas de calor te darán toda esa información.
    Si a esto le sumamos la posibilidad de realizar los tests A/B (que vimos en los 2 episodios anteriores) estas 2 herramientas pueden llegar a formar un dúo que prácticamente te dirán dónde poner exactamente cada elemento de tu web en relación a la importancia que tengan.
    Detectar fallos en el diseño de la web
    Imagina que tras haber rastreado toda la actividad de la web...
    9 min
  • Cómo hacer un test A/B en WordPress

    Hoy vamos ver como poner en práctica un Test A/B que nos indique cómo conseguir más conversiones o menos rebote pero antes, demos paso al patrocinador!!!!:

    WebEmpresa, hosting especializado en WordPress.
    Es el hosting que uso y recomiendo desde hace tiempo
    En pampua.es/webempresa te dejo los 13 motivos que tienes contratarlo; échale un vistazo!
    Además te doy un cupón del 20% de descuento. Entra ahora mismo en pampua.es/webempresa y guárdate tu cupón.

    ¿Cómo hacer Tests A/B en WordPress?
    Existe una gran variedad de plugins para realizar tests A/B en Wordpress, con una amplia gama de funcionalidades y servicios adicionales.
    Muchos proveedores ofrecen una versión gratuita, con solo una parte de las funciones disponibles o una versión de prueba sin limitaciones pero por tiempo limitado.
    Sin embargo, si nunca hemos realizado antes tests A/B, la curva de aprendizaje con algunos de estos plugins puede distraernos de los aspectos importantes de todo el proceso.
    Por otro lado, la mayoría ofrecen también otros tipos de tests, lo que puede complicar aún más su comprensión y configuración.
    Disponemos de una mejor opción para consolidar los conceptos de los tests A/B y conocer bien su dinámica de ejecución, a través de los Experimentos de Google Analytics, dentro del menú Comportamiento de la pestaña principal de Informes:

    Puesto que estamos habituados al entorno y nomenclatura de Google Analytics, la curva de aprendizaje es muy suave y podemos centrar nuestro esfuerzo en lo que realmente importa: comprender, ejecutar y analizar los tests A/B.
    Además, al tratarse de una herramienta de Google, nos aseguramos de estar siguiendo las buenas prácticas para ejecutar Tests A/B.
    1 – Crear un experimento nuevo
    Suponiendo que sea la primera vez que hacemos un experimento, Analytics muestra un listado en blanco:

    Pulsamos entonces el botón “Crear experimento” y Google nos muestra los cuatro pasos que debemos recorrer y rellenar para configurar nuestro experimento:

    Veamos los campos que debemos rellenar en el primer paso, “Seleccionar un objetivo de experimento”:

    Nombre de este experimento

    El nombre con el que queramos identificar y reconocer este experimento en el listado correspondiente.
    Debemos procurar que el nombre sea significativo y relacionado con el objetivo del experimento, por ejemplo: “Tasa de rebote en la página de registro”.

    Objetivo de este experimento

    Seleccionar la métrica que hayamos decidido que queremos analizar después de la ejecución del test.
    Analytics nos muestra un listado de las métricas disponibles, pero podemos crear nuestros propios objetivos.

    Porcentaje del tráfico del experimento

    ¡Ojo! No confundirlo con el reparto de visitas al 50% del test A/B: no tiene nada que ver.
    Se refiere a qué porcentaje del tráfico total se dedicará a participar en el experimento.
    Es decir, si lo ponemos al 60%, el test A/B se realizará sólo sobre un 60% de las visitas.
    Lo habitual es que lo dejemos al 100%.

    Notificación por correo de cambios importantes

    Introducimos nuestra dirección de correo electrónico para que Analytics nos notifique si se produce alguna incidencia.
    Antes de continuar con el paso siguiente, debemos pulsar el enlace “Opciones avanzadas”, pues es ahí donde configuraremos que vamos a realizar un test A/B:


    Distribuir el tráfico de forma equitativa entre todas las variantes

    Debemos seleccionar “Sí”.
    En caso de seleccionar No, ya no estaríamos haciendo un test A/B tradicional, sino un test adaptativo en función de la métrica seleccionada (por si estáis interesados,
    13 min
  • Qué son y para que sirven los test A/B

    Hoy vamos ver como nos pueden ayudar los Test A/B a identificar que cambios exactos nos pueden conseguir más conversiones o menos rebote pero antes, demos paso al patrocinador!!!!:

    WebEmpresa, hosting especializado en WordPress.
    Es el hosting que uso y recomiendo desde hace tiempo
    En pampua.es/webempresa te dejo los 13 motivos que tienes contratarlo; échale un vistazo!
    Además te doy un cupón del 20% de descuento. Entra ahora mismo en pampua.es/webempresa y guárdate tu cupón.

    Si nunca has oido hablar de los test A/B este episodio te va a encantar.
    Es algo que Amazon y otras grandes tiendas hacen constantemente.
    ¿En qué consisten los Tests A/B?
    Te lo explico, como a priori, no podemos saber con certeza qué cambios de una Landing Page propiciarían un aumento de las conversiones, necesitamos experimentar para encontrar la mejor combinación, pero reduciendo el riesgo de perder beneficios u obtener resultados no concluyentes debidos a influencias externas.
    En este sentido, los tests A/B nos permiten comparar el comportamiento de dos versiones de una misma página, normalmente una Landing Page o la home, que difieran en un único elemento y cuyo objetivo es evaluar el impacto que ese elemento tiene en los usuarios visitantes, medido por la métrica que definamos, durante un determinado periodo de tiempo.
    Durante la ejecución del test, los visitantes visualizan aleatoriamente una u otra versión de la página, de forma que, al final del experimento, el total de visitantes se repartirán en partes iguales entre ambas versiones.
    Se podría ver como si, cuando un usuario solicita la página, se echara una moneda al aire y, según salga cara o cruz, se le muestra una u otra versión.
    Con este método, resolvemos dos de los problemas que aparecen si nos planteamos modificar la Landing Page sin ninguna otra consideración:

    Dado que las dos versiones de la página coexisten, eliminamos la influencia de cualquier factor externo o estacional en el análisis de los resultados, puesto que ambas son afectadas por igual.
    En caso de que el cambio afecte negativamente a la tasa de conversión, el impacto en la pérdida de nuestros beneficios queda reducido a la mitad.

    El ejemplo clásico en los tests A/B hace referencia al color de los botones en las llamadas a la acción, utilizando un color en la página original (versión “A” o página de control) y otro color en la variación (versión “B”) de la página.
    Sin embargo, no debemos limitar estos test a cambios tan simples como variaciones de colores, de tipos de letras o incluso de titulares e imágenes, sino también cambios estructurales en la disposición de diferentes elementos de la página, como la longitud de un artículo o la posición de un banner publicitario.
    No tengáis miedo de probar cualquier cambio que se os ocurra, pero siempre con la precaución de evitar modificaciones múltiples o radicales que hagan diferenciarse demasiado ambas páginas.
    De hacerlo así, no podríamos identificar qué cambio ha producido mayor beneficio o, incluso, puede suceder que los efectos positivos de un cambio sean neutralizados por los efectos negativos de otro y estemos desechando algún cambio que habría sido beneficioso.

    Cambies lo que cambies, nunca olvides la máxima de los tests A/B: dos versiones similares de una página, con un único elemento diferente entre ambas

    Para que os hagáis una idea de la importancia de ser creativos con los cambios que podemos realizar, pensad en 2 anuncios de pañales:

    La información de ambas páginas es idéntica pero, mientras que en una, el bebé nos mira de frente, en la otra mira al titular del anuncio… y cual crees que funcionó mejor? Claro, la segunda, porque los ojos del bebé nos invitan a leer el titular.
    24 min
  • Cómo configurar el TPV de Redsys para WooCommerce en un servidor compartido con certificado SSL

    Hoy vamos ver un caso de éxito, cómo conseguimos configurar el TPV de REDSYS para WOOCOMMERCE en un servidor compartido con certificado SSL. No va a ser nada técnico, así que no te preocupes, pero antes, demos paso al patrocinador!!!!:

    WebEmpresa, hosting especializado en WordPress.
    Es el hosting que uso y recomiendo desde hace tiempo
    En pampua.es/webempresa te dejo los 13 motivos que tienes contratarlo; échale un vistazo!
    Además te doy un cupón del 20% de descuento. Entra ahora mismo en pampua.es/webempresa y guárdate tu cupón.

    Hoy os voy a contar la historia de uno de nuestros clientes:
    Era medidos de abril de 2017.
    Para reforzar la confianza online y la reputación en venta de uno de nuestros clientes, establecimos unas directrices estratégicas que se deberían abordar cuanto antes donde constaba expresamente la instalación de un certificado SSL.
    Como hemos comentado, una de estas acciones era implantar un certificado de seguridad SSL en la web de venta online que permitiera al usuario sentirse más cómodo en el proceso de venta. Hasta aquí, todo perfecto. Se procedió a la compra del certificado SSL y lo configuramos sin problemas.
    ¡La web quedó muy chula!, con su candadito verde y su protocolo HTTPS bien visible. Incluso Google empezó a registrar en sus snippers de búsqueda el HTTPS. Lo que le confería un plus de garantía de compra.
    Hicimos pruebas locales para ver que todo funcionaba correctamente y, posteriormente, se instaló todo en la web del cliente.
    Los problemas con el certificado SSL no tardaron en llegar
    A la mañana siguiente de la instalación del certificado SSL, cual fue nuestra sorpresa cuando nos dimos cuenta que las compras realizadas con tarjeta de crédito no se registraban en nuestro listado de pedidos WooCommerce. Los clientes pagaban pero el comercio ni recibía aviso del pago ni siquiera se registraba el pedido. Durante las 2 primeras horas vimos que había varios pagos “fantasmas” en la cuenta bancaria del cliente. No sabíamos a quien correspondían ni qué habían comprado.
    Se activó la alarma
    Ante esta situación, tuvimos que poner en “pausa” la tienda durante una hora aproximadamente. Tiempo suficiente para darnos cuenta que el error erradicaba en el certificado SSL instalado.
    Hablamos con todo el mundo: proveedor del certificado, proveedor de hosting, soporte WooCommerce y pasarela de pago. Nadie sabía nada al respecto.
    Descubierto el error y medio-arreglado
    Finalmente, nos dimos cuenta que es la propia pasarela de pago de Redsys utilizada la que no es capaz de interpretar un certificado SSL que esté alojado en un hosting compartido. Solamente es capaz de interpretar un certificado SSL si está instalado en un hosting dedicado sobre un servidor exclusivo con una IP única.
    Al no poder resolver la petición de certificado, Redsys no mandaba a WooCommerce la orden de “pedido realizado”.
    Es sorprendente que una entidad como Redsys, que maneja una de las pasarelas de pago por tarjeta más comunes en tiendas online de pequeños negocios y que está soportada por multitud de bancos españoles no haya resuelto este problema para dar soporte a este tipo de proyectos que son los que realizan las PYMEs.
    Solución que nos propusieron
    Tanto Redsys como el banco del cliente nos propusieron la solución drástica de abandonar nuestro hosting compartido y pasar a un hosting dedicado propio: muerto el perro se acabó la rabia.
    Esta solución conllevaba un incremento excesivo de costes tanto técnicos como de personal asociado a la instalación de dicho hosting. Es decir, que nuestro cliente no se lo podía permitir.
    Este problema, evidentemente, no lo tienen grandes empresas de venta online que mantienen sus propios servidor...
    8 min
  • Porque debería definir hoy mismo mi buyer persona

    Hoy vamos a hablar de porque es importante definir nuestra buyer persona y cómo podemos hacerlo de forma sencilla, pero antes, demos paso al patrocinador!!!!:

    WebEmpresa, hosting especializado en WordPress.
    Es el hosting que uso y recomiendo desde hace tiempo
    En pampua.es/webempresa te dejo los 13 motivos que tienes contratarlo; échale un vistazo!
    Además te doy un cupón del 20% de descuento. Entra ahora mismo en pampua.es/webempresa y guárdate tu cupón.

    Quienes trabajan en marketing, publicidad o ya se han anunciado en los medios de comunicación, seguramente han respondido alguna vez quién es el público objetivo de la empresa. Entender al comprador es fundamental no sólo para el desarrollo de productos, sino también para la producción de contenido que orientará la adquisición de nuevos clientes.
    En la producción de material para el blog o para las redes sociales de una empresa, usamos un recurso interesante que facilita el direccionamiento de los temas: la creación de una Buyer Persona, es decir, la definición del cliente típico, con todas las principales características de los compradores.
    Cumplir ese reto de crear y montar una Buyer Persona, o varias Buyer Personas, puede ser más fácil cuando consigues hacer las preguntas correctas. Luego, sólo hay que usar esa información de manera productiva para que toda acción y toma de decisión se direccione hacia ese perfil.
    Como te decía antes, hoy voy a hablar sobre el concepto de Buyer Persona, mostrar su importancia para un negocio y enseñarte a crear un modelo de Buyer Persona ideal para orientar correctamente las acciones de tu empresa.
    Pero bueno, ¿qué es Buyer Persona?
    Buyer Persona es la representación ficticia de tu cliente ideal. Está basada en datos reales sobre el comportamiento y las características demográficas de tus clientes, así como en una creación de sus historias personales, motivaciones, objetivos, retos y preocupaciones.
    Una buena definición de Buyer Persona pasa justamente por el contacto con tu público objetivo, de manera que en un rápido análisis puedas identificar características comunes entre los potenciales compradores.
    Si tienes una base de clientes, ese será el lugar perfecto para empezar tus investigaciones. Aunque tengas perfiles diferentes de individuos o empresas que consumen tu producto, algunos de ellos tienden a ser ejemplos de tu Buyer Persona.
    Un consejo importante es enfocarse tanto en clientes satisfechos como insatisfechos. En ambos casos, seguramente aprenderás algo sobre la percepción de tu producto y qué desafíos tus clientes están enfrentando.
    ¿Cuál sería la diferencia entre buyer persona y público objetivo?
    Es común que haya algo de confusión en los conceptos, pero hay una cosa que podemos decir con seguridad: buyer persona y público objetivo no son sinónimos.
    Vamos a un ejemplo práctico:

    Público objetivo: Hombres y mujeres, de 31 a 46 años, casados, directivos, con ingresos promedios mensuales de 2500€ que piensan mejorar los resultados de su empresa y les gusta viajar.
    Buyer persona: Miguel tiene 42 años, es dueño de una zapatería y autónomo. Se tiene puesto un sueldo de 2500€, pero si las ventas no van bien no lo cobra entero. Tiene un iPhone X porque le encanta la tecnología. Piensa en mejorar su tienda online porque adora viajar, está casado y siempre ha querido tener que pasar menos tiempo en su tienda. Tiene 2 hijos adolescentes. Está buscando una empresa que le ayude a optimizar su página web y le elabore un plan de marketing digital para poder gestionar su negocio desde un portátil en cualquier parte del mundo.

    ¿Se entiende la diferencia? El público objetivo es, por lo general,
    15 min

About Diseño web

From the publisher's feed

Aprende a optimizar la web de tu empresa