Cómo crear una página 404 atractiva y eficiente

Un error 404 en un sitio web es lo que responde un servidor cuando se atasca al tratar de poner a nuestra disposición un recurso que no puede encontrar.

Por lo general se suele incorporar algo gracioso en estas páginas para desviar la atención del usuario. A continuación les dejamos una lista con varios consejos para que  tu página 404 no sea una completa pérdida de tiempo.

1. Debe tener concordancia con el diseño de tu sitio

Si no le especificas a tu servidor web qué debe mostrar cuando maneja errores 404, mostrará una página de error plana y genérica. Una página 404 debería lucir como una página de error, pero también debería lucir como tu sitio. Si estás utilizando un CMS probablemente ya se ha encargado de esto por ti. Pero si posees un sitio estático, puedes especificar un template 404 a través de tu archivo .htaccess.

2. Discúlpate

Nadie está tratando de llegar a tu página 404 adrede. Seguramente llegaron a ella por un mal enlace de tu propio sitio o fuera de su voluntad. Probablemente no estarán muy felices con esto, por lo que es la oportunidad de oro para pedir disculpas y esperar que el ceño fruncido de los usuarios desaparezca.

3. Búsqueda

Es posible que la página que están buscando todavía existe, y que sea sólo que la URL de la misma ha cambiado o que fue tipeada incorrectamente en algún lugar. Dado que tu sitio debería poseer búsquedas de todas formas, ésta es un buen momento para poner a disposición del usuario la caja de búsqueda para que encuentren el enlace al que estaban intentando llegar.

4. Dale a los usuarios links útiles

Quizá la página que están enlazando no está rota, sino que no existe más. Sumada a la búsqueda, puede que te convenga añadir algunos links que les puedan resultar útiles. Quizá links a la página de inicio, a la página e archivo o a otras páginas de tu sitio que sepas que son comúnmente visitadas.

5. Una forma de contacto para reportar el error

Es posible que al enfrentarse con un error 404 los usuarios se preocupen, enojen o tengan algún comentario para hacerte al respecto, por lo que puede ser buena idea incluir un formulario de contacto. Y esto también resultará bueno para tí, porque te pondrás al tanto del problema que está ocurriendo en tu sitio y lo podrás solucionar cuanto antes.

6. Reporte automático

Poner a disposición de los usuarios un formulario para que te informen del error es muy bueno, pero sólo un pequeño porcentaje de los lectores se tomará la molestia de avisarnos acerca del problema. Otra alternativa para esto es hacer que la página 404 nos reporte el error automáticamente. Una forma rápida de lograrlo sería hacer de nuestra página 404 un archivo PHP, y utilizar la función de email para enviarte un correo con la URL en la que se aterrizó.

<?php

mail(”chriscoyier@gmail.com”, “404 report”, $_SERVER['REQUEST_URI'], “From: chriscoyier@gmail.com\n”)

?>

NOTA: El código de arriba probablemente será bueno para un sitio pequeño pero no resulta práctico en sitios de mucho tráfico. En esas circunstancias será mejor escribir los errores a una base de datos.

7. Humor

Incluso los sitios más serios pueden añadir algo de humor en su página 404. Esta página es definitivamente una buena oportunidad para relajarse un poco y hacer algo gracioso.

8. ¿Redireccionar?

Podrías optar por redireccionar el error 404 a otra página. Quizá a la página de inicio que muestre un mensaje sobre el error, o a la página de búsqueda con las palabras claves de la URL que no funcionó.

9. Tamaño de archivo

Te sorprendería saber la gran cantidad de actividad maliciosa con la que debe tratar tu servidor web. Suelen haber muchos pedidos de archivos “raros”, que al no aparecer hacen que tu servidor cargue la página 404.  No es necesario aclarar que la aparición de una página completa para todas estas requests añade serios problemas de ancho de banda. Para esto tu mejor apuesta es pelear contra estos pedidos maliciosos, pero también deberías tomar en consideración el tamaño total de tu página 404 y reducirlo si el ancho de banda es una preocupación mayor.

Fuente: CSS Tricks