Ha habido mucho debate por esta sencilla pero crucial cuestión. ¿Debe tu logo estar colocado como una imagen entre lineas, o como h1 valiéndose de CSS?
En el artÃculo que veremos a continuación, se barajan algunos argumentos de por qué es más conveniente utilizar la primera opción. ¿Será suficiente para convencerte? ¿Podrá resolver de una vez por todas este intenso debate?
Fuente original del artÃculo: CSS Wizardry
Traducción realizada por elWebmaster.com
Primero que nada, evaluemos dos ejemplos de estos usos. Primero veamos cómo utilizar una imagen:
Y ahora veremos cómo utilizar, en cambio, un h1:
-
<h1><a href="/" title="Volver a la portada">La empresa</a></h1>
-
h1 a{
-
width:;
-
height:;
-
display:block;
-
text-indent:-9999px;
-
background:url(/images/logo.gif);
-
}
Tu logo es contenido, y no estilo. El contenido, en el el sentido del término brindado por los estándares web, se refiere a la información que requiere estar presente y ser accesible, independientemente del estilo aplicado, si es que se define un estilo (estamos hablando del CSS).
Un logo, entonces, es contenido. Usemos como ejemplo el logo de tu empresa. Sin importar de que color sea el sitio, tu logo se verá siempre igual, ya que el logo es totalmente independiente del sitio en el que será utilizado y del estilo que lo rodeará.
Imagina que alguien visita tu sitio en un navegador que no soporta CSS. La presencia del logo, a pesar de no haber estilos, es necesaria.
Es por eso que tu logo es contenido, ya que es una representación visual de tu marca. Es posible que el logo haya estado allà incluso antes de que el sitio haya sido imaginado. Ahora, translada este pensamiento al diseño del sitio en cuestión, y será innegable que el logo es contenido y no estilo.
Asi que, si el logo es contenido, debe formar parte del código. Probablemente quieras colocarlo allà de esta manera:
Tan simple como eso. Sin importar como estiles tu contenido, el logo persistirá. Utiliza id="logo" para darle cualquier estilo que necesite.
Y si todavÃa no estás lo suficientemente convencido, puedes utilizar una imagen inline.
Muchas impresoras, para conservar tinta, no imprimen los fondos, lo que significa que cualquier imagen aplicada como fondo se perderá ál imprimir la página. Como mencionamos antes, una imagen inline permitirá que el logo persista, más allá de los estilos. Esto significa que que la hoja de estilo para impresión tendrá el logo incrustado en la página como una imagen que puede imprimir.
Además, una imagen inline puede ser redimensionada, lo que no podemos lograr con una imagen de fondo en un h1. Puedes alterar el tamaño de h1, pero no su fondo (al menos no sin utilizar CSS3). Esto significa que no puedes adaptar fácilmente tu logo a diferentes tamaños valiéndote sólo del CSS. Imagina tener que optimizar tu sitio para dispositivos móviles. Una porción de código muy util para un sitio mobile es:
-
img{
-
width:100%
-
max-width:100%;
-
}
Esto hará que todas imágenes llenen la pantalla del dispositivo móvil, pero a su vez que no se salgan de los márgenes. Si tu logo está insertado como una imagen de fondo, será ignorado por este código.
En definitiva, te será mucho más fácil manipular tu logo como img que como fondo.
Fuente original del artÃculo: CSS Wizardry
Traducción realizada por elWebmaster.com
Martes, 26 de Octubre de 2010 a las 10.04
Puedes declarar varios estilos dependiendo del medio, y por lo tanto tener diferentes imágenes para versiones imprimibles o de dispositivos móviles.
la cuestión también es que con el H1 añades el texto de tu marca, lo cual es indexable cara a posicionamiento más que una imagen, dado que está dentro de un encabezado de primer nivel.
Se podrÃa dar una solución global que serÃa meter dentro del H1 tanto el texto como la imagen quedando asÃ:
<h1><a href="#">Mi empresa <img src="logo.png" /></a></h1>
Y dar los siguientes estilos:
h1{text-indent: -9999px;}
h1 a{ position: relative;}
h1 a img{border: 0; position:absolute; left: 9999px;}
Asà tienes lo mejos de ambos mundos.
Miércoles, 27 de Octubre de 2010 a las 12.31
@sergiomas: ¡Gracias por tu aporte!
Jueves, 23 de Diciembre de 2010 a las 06.36
La solución de sergio más me parece muy acertada. Asà es como lo solemos hacer.
Saludos a todos/as.