Nueva técnicas para text-indent

Existe una técnica muy conocida en el diseño web para ocultar el texto en la página, agregando una propiedad CSS a la indentacion “text-indent” el valor negativo -9999px. Esto mueve el texto hacia el lado izquierdo de la pagina sin generar la barra de desplazamiento inferior del navegador y ocultándolo de la mirada del visitante. Como desventaja, llega a ser perjudicial para el SEO ya que se está tratando de ocultar el contenido de los visitantes del sitio.

css

Ahora, veamos un ejemplo práctico. Dentro de un diseño Web, se necesita incluir el logotipo de la empresa en el título de la pagina, para ello utilizaríamos lo siguiente:

Text_indent_01

El problema con esto es que no se tiene las palabras clave del sitio Web en el título de la página, aunque, puede añadir un título a través del atributo alt, pero no tiene tanto peso, como lo sería, tener su título en una etiqueta h1 de la página.

Pero si se utiliza una etiqueta h1 no se puede agregar una imagen en el logotipo, la única manera de lograr esto es agregar la imagen como background de la etiqueta h1 y tener el texto dentro de la etiqueta h1. Esto nos lleva a otro problema, que ahora se tendrá tanto el logotipo y el texto en el título sitio Web.

Aquí es donde la técnica text-indent:-9999px entra en acción, si se agrega esta regla al archivo CSS, entonces se puede lograr tener el logotipo de su sitio Web y el texto dentro de la etiqueta h1.

Text_indent_02

Text_indent_03

Esta técnica funciona bien, pero la desventaja es que tiene un impacto en el rendimiento del navegador. Ademas cuando la resolución es muy grande, el texto fuera de la pantalla, llegaría a verse. Se pensaría que el  incremento del valor (a más de -9999) seria la solución, pero nada más falso, ya que eso nuevamente acarrearía el inconveniente del rendimiento del navegador.

Nueva técnica

Text_indent_04

Esto coloca el texto de la página, sin importar el tamaño ni la resolución de la página. Ademas se añade la propiedad nowrap por lo que el texto siempre seguirá fluyendo fuera de la página y nos aseguramos de que cualquier desborde del texto seguirá escondido.

Una de las ventajas (diferencias) de esta técnica, es que el rendimiento aumenta porque hay menos cosas para el navegador debe interpretar.

Anuncios

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s