Una técnica CSS muy extendida, casi básica, es la de reemplazar un texto por una imagen usando text-indent. Con esta técnica podemos transformar un enlace en un botón, o un aburrido título en un título con fuentes especiales o con un bonito diseño. Esto último es cada vez menos necesario ya que podemos usar fuentes propias con CSS3, pero para muchas otras situaciones el reemplazar texto por imagen sigue siendo una labor del día a día.

Hasta ahora usábamos la identación negativa del texto, a la vez que dábamos una imagen de fondo al elemento; así, conseguimos que se muestre la imagen pero el texto se desplaza fuera de la pantalla, siendo "invisible":

background: url("../images/boton.png") 0 0 no-repeat;
text-indent: -9999px;

Esto conlleva dos pequeños detalles, uno de rendimiento y otro de diseño:

1. El navegador debe "dibujar entre bastidores" una caja de 9999 píxels cuadrados, o dicho más fácilmente, una caja inmensa. Esto consume memoria, y si en una misma página usamos varias veces esta técnica (varios botones, por ejemplo) el problema se multiplica.
2. Al hacer clic en elementos con texto oculto aparecen esas horribles líneas (outlines, las "líneas de enlace") desde la izquierda de la página. Estas líneas se podrían ocultar con outline: 0; pero eso está prohibido si queremos que nuestra página sea accesible a personas con deficiencia visual.

La nueva solución

Un nuevo planteamiento para resolver esta situación, propuesto por Scott Kellum en Zeldman.com, identa el texto al mismo tamaño que la caja contenedora, pero al no hacer wrapping y esconder el overflow, el texto no aparece ni cambia el tamaño de la caja:

text-indent: 100%;
white-space: nowrap;
overflow: hidden;

Esta solución evita los dos problemas del clásico -9999px, siendo una solución mucho más elegante y limpia.

En muchas webs encontramos cajas de texto con limitación de caracteres. Esto suele ser debido a limitación en el tamaño de datos que la web quiere soportar, o a limitación de espacio en pantalla. Cada desarrollador elige lo que cree más conveniente. Pero cuando esta limitación interfiere con la usabilidad del sitio web ya entramos en el ámbito del fallo, por no hablar de chapuza.

Esto viene a raíz de que hace un rato me he estado registrando en un nuevo servicio web de proyectos y servicios freelance, cuyo nombre mantendré en la intimidad. En el momento de introducir mi descripción, me aparece una caja de texto. Escribo una descripción que considero adecuada y... error, máximo 500 caracteres. Problemas de usabilidad:

1. En ningún momento se indica que exista esta limitación, sólo aparece el mensaje de error al tratar de enviar un texto de más de 500 caracteres. Esto implica que alguien puede perder mucho tiempo redactando un texto que luego no podrá guardar.
2. No hay un contador de caracteres, de forma que la única forma de saber si el texto ya es correcto o si aún es demasiado largo es pulsando una y otra vez el botón de Guardar y recibiendo, una y otra vez, el mensaje de error.

Estos dos problemas derivan en una experiencia de uso nefasta. El buen trabajo hecho en el resto del diseño del portal se va al traste cuando se trata de rellenar un apartado tan importante como es la descripción del usuario del servicio y te encuentras con esta... desfuncionalidad. Una de las reglas de oro de la usabilidad es no sorprender nunca al usuario. No se le puede pedir al usuario que rellene un texto y darle la sorpresa de que hay un límite de tamaño del que no se le ha informado previamente. Ni tampoco se puede pedir al usuario que vaya contando caracteres uno a uno.

Además, es un error tan fácilmente subsanable que confío en que lo arreglen cuanto antes mientras este servicio aún luzca el cansino cartel de Beta en su logo. Para arreglar este problema de usabilidad basta con poner un mensaje al mostrar la caja de texto, indicando el tamaño máximo del texto a introducir, y poner un contador de caracteres que de feedback al usuario de la longitud del texto que lleva escrito (hace más de un año que liberé maxlen, un plugin jQuery para dotar de esta funcionalidad -y más- a un textarea).

Una de las partes más aburridas de cualquier web son los contenidos de ayuda o de términos de uso. Suelen ser bloques de texto intragable, con un índice en la parte de arriba si hay suerte. No se puede hacer mucho para mejorar esto, ya que tanto la ayuda como sobre todo los términos de uso, políticas legales, etc. requieren de mucho texto.

Lo que sí podemos hacer es tratar de que la experiencia de usuario sea más agradable a la hora de leer estos contenidos. Y lo podemos hacer usando únicamente CSS, gracias al nuevo selector target de CSS3.

Cuando estamos haciendo un boceto de web o diseñando una nueva web pero aún no tenemos material del cliente solemos usar imágenes de stock para rellenar los huecos, lo que se llaman placeholder images. Pero hay una forma más cómoda: usar servicios de imágenes automáticas, basta con poner el src de la img apuntando a uno de estos servicios para tener imágenes aleatorias acordes a nuestro diseño. Conozco dos servicios así:

Lorem Pixum

Con un nombre que recuerda al conocido Lorem Ipsum, Lorem Pixum nos devuelve una imagen aleatoria del tamaño indicado, con la ventaja de que podemos pedir además una temática concreta. Por ejemplo:

src="http://lorempixum.com/400/200/sports/1/Texto de la imagen"

La sintaxis de la ULR es:

http://lorempixum.com/ANCHO/ALTO/CATEGORÍA/ID/TEXTO 

siendo todos los parámetros opcionales. En categorías, podemos elegir entre abstract, animals, city, food, nightlife, fashion, people, nature, sports, technics y transport.

Placehold

La otra opción es más simple pero también muy útil. Placehold.it nos permite insertar una imagen plana con el tamaño escrito en ella. Si Lorem Pixum es ideal para diseño terminados a falta de material por parte del cliente, Placehold.it es perfecto para bocetos. Basta con llamar a la URL pasándole el tamaño deseado:

src="http://placehold.it/350x309"

La sintaxis de la URL es:

http://placehold.it/TAMAÑO/COLORFONDO/COLORTEXTO.TIPO&text=TEXTO

Siendo todos opcionales excepto el tamaño. El tamaño puede ser de la forma ANCHOXALTO o sólo ANCHO, en cuyo caso la imagen será un cuadrado. Los colores de fondo y texto van en hexadecimal, por ejemplo, 99FF99. El texto debe ponerse siempre al final de la URL y los espacios cambiarse por el símbolo '+'. El tipo puede ser .jpg, .gif o .png (por defecto es GIF) y puede ponerse detrás de cualquier otro parámetro aunque por claridad es mejor ponerlo al final. Un ejemplo más elaborado sería:

src="http://placehold.it/430x285/99FF99/22CC00.jpg&text=Probando+Placehold.it"

Conclusión

Con estos dos servicios de imágenes de relleno podemos acelerar el trabajo con bocetos y diseños de webs al no tener que andar buscando imágenes, recortando... ya que nos permiten insertar imágenes de cualquier tamaño sin salir de nuestro editor de código favorito.