De Photoshop a HTML: guía y consejos prácticos

24-02-2010

O “Como lidiar con diseñadores, desarrollar un buen sitio y no morir en el intento”

Todos conocemos diseñadores quesque de internets que hacen sus diseños mafufos en Photoshop, se los enseñan a sus clientes y les dicen “así va a quedar, igualito, se va a ver de pelos” y luego te lo pasan para que lo transformes en un sitio funcional, accesible, utilizable y escalable.

Obviamente, lo primero que notas es que el güey no nombró sus capas lógicamente, así que no sabes que chingaos es cada cosa, lo segundo es que para “ahorrarte trabajo” le dijo al Photoshop que hiciera los cortes como se le diera la gana y ahora todo está dividido en secciones que no tienen sentido para el contenido que van a llevar.

Y esa es la tercera:
-Oye, diseñador ¿qué contenido va a llevar esto?
-¡Ay, desarrollador ¿no ves lo qué está ahí?
-Nomás veo que dice “Lorem Ipsum” no sé que madres.
-Pues eso, significa que ahí va a ir texto, nomás que ahorita no lo tenemos.
-Sí, eso ya sé, que es texto, pero ¿quién lo va a escribir? ¿se va a actualizar regularmente? ¿por quién? ¿cuál es el propósito de ese texto? ¿es contenido principal con longitud variable? ¿microcopia con longitud más o menos conocida? ¿va a llevar imágenes un día de estos?
-¡Ay, qué latoso! Cuadrado como todos los desarrolladores, usa tu imaginación.

Obvio, cuando el diseñador dice eso es porque no tiene la más mínima idea de lo que le estás hablando, que es de esperar si es el tipo de diseñador que diseña sin tener el contenido.

Te corresponde a ti echar mano de tu vastísima experiencia para hacer algunas deducciones, suposiciones educadas, y desarrollar siguiendo mejores prácticas manteniendo cierta flexibilidad y lógica que permita un mantenimiento fácil o cambio de dirección después (porque seguro a alguien se le va a ocurrir meter una imagen ahí).

Lo primero que debemos de hacer con el .psd es sacarle todos los cortes. Photoshop es buen programa pero no es inteligente. Lo segundo que debemos hacer es dividir el diseño en grandes áreas funcionalles: encabezado, laterales, contenido, pie y algunas otras que puedan estar presentes.

Si nuestro diseñador es bueno habrá nombrado las capas de manera semántica y lógica, pero si no vamos a tener que irlas activando y desactivando para separar los fondos de las imágenes decorativas, las texturas y el texto.

Cuando hayas terminado esto puedes ir creando una librería de imágenes de las texturas y fondos que vamos a utilizar, usando la función de guardar para web de photoshop.

Ya que tenemos todo más o menos arreglado y acomodado podemos comenzar a escribir nuestro código. Como somos muy modernos ponemos:

<!DOCTYPE html>

Nuestro diseñador seguramente no dejó instrucciones sobre como degradar el sitio grácilmente para que navegadores más viejos presenten un diseño aceptable mientras que los más modernos lo muestran en toda su gloria.

Afortunadamente somos desarrolladores chingones y sabemos como crear diferentes hojas de estilo para navegadores con distintas capacidades:

<link href="basic.css" rel="stylesheet" type="text/css" />
<!--[if gte IE 7]><!-->
<style type="text/css">
  @import url("advanced.css");
</style>
<!--<![endif]-->

Esto deja a IE6 con el estilo básico pero ya nos encargaremos si es necesario.

Después ponemos la estructura básica de nuestro sitio que puede ser algo así de sencillo:

<header><p>Empresota, S.A.</p></header>
<nav><li><a href="#contenido">Salta al contenido</a></li></nav>
<article></article>
<aside></aside>
<footer></footer>

Ya que tenemos la estructura básica podemos comenzar a crear nuestra hoja de estilos basico.css y poner cosas como:

header p {
  font-size: 20px;
  width: 300px;
  margin: 0 auto;
}

O sea, cosas que entienden razonablemente todos los navegadores. También podemos poner aquí algunas de las texturas y fondos que sacamos del Photoshop, pero probablemente no las imágenes decorativas, sobre todo si vamos a necesitar usar posicionamientos absolutos y esas cosas. Tampoco PNGs transparentes.

Ya que se ve más o menos bien sólo con esta hoja de estilos básica podemos abrir nuestra hoja avanzada e incluir cosas como esta:

header {
  position: relative;
  width: 100%;
  min-width: 600px;
}

header p {
  position: absolute;
  top: 20px;
  right: 30%;
}

nav, content, aside {
  display: table-cell;
}

O sea, cosas que los navegadores más modernos van a comprender pero que los más antiguos no van a saber interpretar. Aquí también vamos a poner los -moz, -webkit, -o, etc. También podemos poner las imágenes decorativas, imágenes de fondo y PNGs transparentes.

Como el inútil diseñador tampoco nos dejó instrucciones sobre como presentar el sitio en diferentes resoluciones tendremos que tomar algunas decisiones sobre si queremos presentar el sitio en ancho fijo o flexible.

Muchos diseñadores en este momento eligirán sitios de ancho fijo porque tienen problemas de retención anal además de ser gente floja y sin imaginación que no conocen lo útil que puede ser un sitio de ancho flexible. Revisa el diseño para determinar que elementos pueden tener un ancho flexible y cuales serían anchos máximos y mínimos razonables.

Si eres desarrollador maestro jedi sabrás que usando javascript y css puedes alterar la distribución completa del sitio basándote en el ancho de la pantalla del navegador, pero eso lo dejaremos para otra ocasión.

Ten en cuenta que lo más importante no es la distancia absoluta entre un elemento y otro, sino la relación que hay entre elementos. Es decir, si el elemento X mide 100px de ancho y está a 100px de distancia del elemento Y que mide 200px de ancho, lo importante es que el elemento X mide 25% del ancho total, el Y mide 50% y los separa una distancia del 25%.

Claro, el diseñador debería haber tomado estas decisiones desde el principio, así como que pasa cuando se visualiza el sitio en un celular, pero tanta flexibilidad mental es pedirles demasiado. Les da patatús saber que su “obra maestra” puede verse alterada.

Ya que se ve muy bonito todo en nuestro Safari 4 y Firefox 3.6 es hora de desempolvar Internet Explorer 8 y echarle un ojo. Hmmm…. no es lo que esperábamos.

Parte del problema es que IE8 no reconoce el DOCTYPE para html5, así que se comporta como si fuera IE5 con todos sus errores. Así que lo primero que debes hacer es poner la siguiente línea en tu sección :

<meta http-equiv=”X-UA-Compatible” content=”IE=8″>

Esto obligará a IE8 a comportarse lo mejor posible y muchos problemas pueden desaparecer, de hecho en mi experiencia casi todos los problemas desaparecen simplemente obligando a IE8 a comportarse en modo de estándares. Si quedan cosas sin resolver quiere decir que tendremos que añadir una hoja (o dos) de estilos para IE8 (o IE7). La mejora manera es usando comentarios condicionales para especificar estos navegadores.

Ok, lo que sigue es más delicado: la tipografía. Si tu diseñador tiene más o menos idea de lo que está haciendo habrá elegido una tipografía segura para usar en distintos navegadores. Si sabe lo que está haciendo te habrá pasado una pila de tipografías a usar para darle opciones al navegador.

Y si tu diseñador sí es diseñador de verdad y sí le mueve a cuestiones de internet habrá incluido las tipografías adicionales en el presupuesto y usará algo como Font Squirrel u otra herramienta para hacer tipografía utilizable en la red.

Pero lo más probable es que haya visto algo que le gustó y lo puso sin pensar. Si puedes encontrarlo pídele una pila de tipografías para usar en el sitio, pero si está muy ocupado pintándose la uñas lo que puedes hacer es analizar la tipografía y elegir sustitutos adecuados.

Entre las cosas que debes analizar están el tipo (con serif o sin serif), el peso (ancho del trazo), el ancho de cada letra (por ejemplo, que tan ancha es la m), la distancia entre letras, etc. y tratar de encontrar algo equiparable.

Puedes tratar de hacerlas aún más parecidas usando un poco de CSS pero lo más seguro es que no encuentres tipografía igual, con lo que el diseño sufrirá un poco. Pero está bien, ese es el tipo de cosas que debería ver un diseñador.

Después de todo esto tendrás en tus manos un sitio utlizable en todos los navegadores y dispositivos, accesible por cualquier persona que entre a verlo, indexable por todos los motores de búsqueda, de fácil mantenimiento por cualquier persona que necesite cambiarlo y comprensible si alguien necesita redefinirlo.

Claro, al diseñador le va a dar un vahído y te va a decir cosas como “bruto, animal, poco hombre” cuando vea que no se ve igual en todos los navegadores, que cambiaste la tipografía, que el ancho es variable y que puede utilzarse en un iPhone.

Tú simplemente recuerda que no estás haciendo algo para el diseñador, ni siquiera para los clientes del diseñador, sino para los clientes de sus clientes, o sea, los usuarios. Ellos no lo sabrán pero es a ti a quien tendrán que agradecer el poder usar un sitio sin problemas.

Roberto Baca

Escribo cosas de vez en cuando