Diseño Web

¿Qué diferencia hay entre un diseñador web que cobra 150 dólares y otro que cobra 700 por el mismo trabajo? La discusión sobre precio versus calidad es tan vieja como la economía misma, pero en el ámbito del diseño web es todavía un terreno fangoso. La ausencia de parámetros claros para evaluar un trabajo y la enorme oferta existente hacen que el tema sea complejo.

La diseñadora Amber Winberg hizo una interesante experiencia: buscó profesionales y empresas que ofrecen pasar un diseño de Photoshop a HTML (PSD to HTML) a bajo costo y analizó el resultado. Se encontró con lo esperado: el código de la página web dejaba bastante que desear.

Aunque creo que que conceptualmente el diseño web es mucho más que saber escribir bien HTML y CSS el trabajo de Winberg es muy bueno por una sencilla razón: permite analizar de forma bastante objetiva los resultados. Un código mal escrito no es una cuestión de gustos o que el cliente lo pidió así: simplemente está mal escrito y punto.

Veamos entonces cuáles son los problemas más habituales que tienen los diseños web de bajo coste y qué se espera de un diseño de calidad.

1. Superpoblación de scripts

Diseño barato. La página está llena de referencias a archivos externos aunque no se sabe muy bien cuál es su utilidad. La mayor parte de estas llamadas se encuentra en el inicio de la página, lo cual hace que termine por cargar más lenta. Los archivos externos son bastante voluminosos pero están llenos de comentarios y funciones que no se utilizan.

Diseño de calidad. La carga de archivos externos ha sido optimizada para que afecte lo menos posible la performance del sitio. Los archivos solo incluyen el código necesario y se han «minificado» para que ocupen el menor tamaño posible.

2. Divs, divs, divs

Diseño barato. Los DIVs son áreas de contenido que sustituyen a las antiguas tablas. En el diseño barato proliferan DIVs de todo tipo con nombre indescifrables o confusos. Modificar una página así es una tarea que lleva muchísimo tiempo y nos hace dependientes de seguir contratando al mismo diseñador, que por suerte es barato.

Diseño de calidad. Las áreas de contenido se estructuran de manera clara y consistente. Cada DIV posee un nombre que alude al tipo de contenido que alberga y hace fácil que otro diseñador pueda continuar el trabajo. Con la llegada del HTML5 el uso de DIVs tenderá a bajar drásticamente, no obstante se seguirá usando para asegurar la compatibilidad con navegadores antiguos.

3. Tags del cajón de los recuerdos

Diseño barato. Sigue utilizando etiquetas o atributos del HTML que pasaron a la historia, especialmente los meta tags que antiguamente servían para posicionar mejor un sitio web en los buscadores. Emplea etiquetas comoFONT-FACE o STRIK, que han quedado obsoletas porque esta información se coloca en el CSS.

Diseño de calidad. Separa claramente la información de su modo de presentación. Emplea HTML para lo primero y deja de lado los tags anticuados para definir el modo de mostrar los contenidos en la hoja de estilos CSS. Todas las etiquetas usadas corresponden a la especificación del HTML 4.01 del W3C.

4. Optimizado para…

Diseño barato. La página se ve perfectamente en Internet Explorer, preferiblemente la última versión: con versiones anteriores no se sabe. En Firefox puede que el sitio se vea bien aunque algunos elementos se corren de lugar. Con Chrome, Safari u Opera directamente es como jugar a la lotería.

Diseño de calidad. La página se visualiza correctamente en los navegadores modernos. Si emplea algunas funcionalidades incompatibles con versiones anteriores se muestra la corresopndiente advertencia al usuario. Se ha codificado la página siguiendo los estándares del W3C y en el caso de ser necesario se emplean hacks para solucionar algún defecto de visualización que pudiera presentar un navegador específico.

5. Class, class, class

Diseño barato. El atributo class asocia a la etiqueta un estilo definido en el CSS. El diseño web barato repite 20 veces la misma clase en todas las etiquetas, coloca el atributo class a prácticamente todos los elementos y termina generando un código superpoblado y repetitivo. Es lo que suele ocurrir cuando se usa indiscriminadamente la vista de diseño de los editores web.

Diseño de calidad. Se usan diferentes selectores CSS de forma inteligente para minimizar el tamaño de los archivos, facilitar la posterior actualización del sitio y hacer el código más comprensible.

6. Validación

Diseño barato. Si funciona, ya está validado. Los estándares son una bonita idea pero no hay demasiado tiempo para ello porque lo importante es que el sitio se vea bien… en Internet Explorer, claro.

Diseño de calidad. Se genera el código de acuerdo con los estándares del W3C y posteriormente se valida el mismo para asegurarse que todo está correcto. Puede que se utilicen pequeños hacks o fixes por lo cual el validador detecte errores que no son tales, pero el diseñador es planamente conciente de ello y sabe que se trata de pequeños trucos utilizados para asegurar la compatibilidad con navegadores que no cumplen con los estándares como el viejo Internet Explorer 6. Si el trabajo lo requiere, también se realizan validaciones de accesibilidad.

Conclusión

El diseño web barato no es necesariamente malo. Muchas veces hay presupuestos muy ajustados o se necesitan soluciones rápidas -o peor, ambas cosas- con lo cual se cumple la vieja máxima de la economía: si hay oferta, hay demanda. Sin embargo, hay que asumir que el bajo costo se refleja en la calidad final del trabajo. Páginas excesivamente lentas o un código laberíntico que solo comprende quien lo generó, por ejemplo.

Ser capaz de crear un diseño web de calidad requiere capacidad, esfuerzo y fundamentalmente muchos años de experiencia como desarrollador o diseñador web. Es decir, cosas por las cuales la gente normalmente cobra más dinero.  Puede haber algún joven genio en algún lugar remoto que por 10 dólares la hora haga maravillas, pero eso es la excepción.