Cómo hacer un banner más grande que el del formato original y 100% responsive

preguntas y respuestasSi tienes un blog o una página web, quizás en alguna ocasión hayas puesto alguna publicidad de tercero O colocado algún banner tuyo para facilitar la navegación por la web, o redirigir a zonas concretas a los visitantes.

Pero, en ocasiones, el formato (ancho x alto) del banner o imagen; puede que no se correspondiera con el ancho (o alto; aunque generalmente es con el ancho) del “Espacio hábil” para colocarlo. Y sería ideal ¿Que ambos coincidieran verdad?. Veamos como hacerlo

Para hacer corresponder “imagen” y “espacio”, podemos hacerlo de 2 formas diferentes. Una a medida, y otra responsive. Es muy sencillo.

Si tenemos la imagen alojada en nuestro CMS (por ejemplo WordPress)

Si hemos incluido una imagen en nuestro CMS o gestor de contenidos, como puede ser WordPress, debemos de localizar la dirección de la imagen. Tomemos como ejemplo el siguiente banner de Geocomunicacion.com, que dicho sea de paso es el último de mis proyectos desde SOCIALetic.com 😉

geocomunicacion

La dirección de esta imagen es https://www.socialetic.com/cms/wp-content/uploads/2014/04/GEOCOMUNICACION-compra-de-productos.gif  y su formato original de diseño es 1140 x 100 px pero, como ven, arriba la ven en unas dimensiones totalmente diferentes. Exactamente 620 x 60 px.

Ustedes deben de localizar la imagen que deseen ubicar en un espacio determinado primero y su url (dirección web como la que vimos antes de la imagen superior).

Ya localizada la imagen, deben de colocar el siguiente código html:

Opcion 1 : a medida

<a href=”Dirección web a la que apunta la imagen“_blank” alt=”descripcion del enlace” title=”título del enlace” rel=’nofollow’><img src=”Dirección web de la imagen (lo que veíamos antes)” border=”0″ width=”620” height=”60” alt=”descripcion de la imagen title=”título de la imagen“></a>

buzoneo publicidad

Opción 2: Responsive

<a href=”Dirección web a la que apunta la imagen“_blank” alt=”descripcion del enlace” title=”título del enlace” rel=’nofollow’><img src=”Dirección web de la imagen (lo que veíamos antes)” border=”0″ width=”100%” height=”60” alt=”descripcion de la imagen title=”título de la imagen“></a>

Detalles

Deben de cambiar los textos que aparecen en negrita y utilizar los que correspondan:

  • Dirección web a la que apunta la imagen: sustituyan todo ese texto por la dirección a la que debe apuntar la imagen al clicarla. Un ejemplo sería https://www.socialetic.com
  • descripcion del enlace título del enlace: describan con palabras (nada de código) la página a la que apunta el enlace.
  • Dirección web de la imagen (lo que veíamos antes)… es la url de la imagen, por ejemplo https://www.socialetic.com/cms/wp-content/uploads/2014/04/GEOCOMUNICACION-compra-de-productos.gif
  • 620 y 60 para el primer ejemplo: pongan aquí las medidas deseadas. Si no las saben, pues vayan probando.
  • descripcion de la imagen título de la imagen: lo mismo que hicimos antes con el enlace, pero ahora para la imagen

Importante!!….. en la opción 2 la responsive, verán que en la indicación que corresponde al ancho de la imagen pone 100%. Esta indicación es la que indica que la imagen debe de adaptarse al ancho. Sea cual sea. No deben cambiarlo, aunque si deberán jugar con el alto (height) !!! Esta mi opción preferida, pues no debo de mirar cuando mide el espacio (ancho) en el que deseo colocar una imagen y siempre concuerda, sin alterar imágenes con movimiento tipo .gif como la que veíamos antes de Geocomunicacion.

Si les han proporcionado un código html de un anuncio, y este no tiene indicado el width=”” height=””; inclúyanlo ustedes en la misma posición que veíamos en la opción 1 y 2…y si el código es de Google Adwords, creen un anuncio en que el formato sea “adaptable” y no una medida fija tipo 468×60, 728×90, etc.

Ya por último, comentarles que en estos códigos html que veíamos antes, indico rel=”nofollow” ya que a efectos de SEO es correcto indicar a los buscadores que no sigan los anchor text (palabras clave del “alt” y “title”) incluídos en imágenes, pues es considerado algo penalizable según las indicaciones de Matt Cutts de Google.

Esperando haberles ayudado, ya saben que si necesitan alguna info. adicional de este tema me encuentran en david(arroba)socialetic.com

1 Comment

Write a comment
  1. Raul
    mayo 03, 21:17 Raul

    Tomando nota

Write a Comment

view all comments

Your e-mail address will not be published. Also other data will not be shared with third person. Required fields marked as *