Cómo hacer un banner más grande que el del formato original y 100% responsive
Si 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 😉
La dirección de esta imagen es http://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>
[smartads]
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>
[textmarker color=»FFC338″]Detalles[/textmarker]
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 http://www.socialetic.com
- descripcion del enlace y 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 http://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 y 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
Tomando nota