Los diseñadores web y diseñadores gráficos conocen el continuo cambio de la industria que sugiere cambios, adaptaciones, desarrollo de nuevas destrezas para hacer frente al ineludible desarrollo tecnológico. En los últimos años, una de las áreas que más cambios ha sufrido debido al incremento de la demanda de usuarios de Internet, ha sido la de la telefonía móvil y la necesidad de disponer de sitios adaptados para este tipo de portabilidad y formato.

La tecnología WAP es una necesidad en crecimiento que exige de sitios webs diseñados para complacer a esa audiencia en auge. Diseñar sitios web para dispositivos moviles exige un gran desafío y requiere un enfoque estratégico del diseñador y el desarrollador.

Durante el proceso de desarrollo es esencial tener en consideración determinados aspectos para un desarrollo eficiente y ajustado a los estandares web:

• Código semántico y limpio. Lo mejor es dejar atrás los viejos códigos de gran peso basados en tablas y otros códigos engorrosos. La marcación limpia le ayudará a asegurar una correcta visualización en navegadores y móviles (crossbrowsing), sin apuros ni sobrecarga excesiva. Ajustese a las normas de la W3C.
• Separación de contenidos y presentación en CSS. Lo más importante para sus visitas es tener un acceso libre e inmediato al contenido y enlaces. La presentación lujosa es prescindible. un sitio que utiliza una marcación adecuada y eficaz es un sitio de éxito en móviles.
• Etiquetas Alt: Algunas visitas no son capaces de hacer un seguimiento de las imágenes. Las etiquetas “alt” permiten orientar sobre el tipo de contenido que hay debajo de la imágen.
• Etiquetar campos de formulario: Permiten hacer el sitio mucho más utilizable.
• Utilizar encabezamientos. utilice con intelgiencia encabezadores destacando los textos más importantes (h1, h2, h3) frente a los más secundarios.
• Evitar flotadores. Utilices fijas y no flotantes para asegurar una mayor estabilidad en la pequeña pantalla.
• Reducir márgenes y relleno. En tecnología móvil los márgenes deben ser más pequeños. Cantidades grandes de márgenes y paddings pueden hacer un fastidio a más de un internauta-móvil.
• Navegabilidad fácil. Proporcione únicamente enlaces relevantes y trate de engrosar el contenido con navegación inútil o irrelevante.
• Contrastes de color: Las pantallas móviles no tendrán la misma apariencia que un ordenador personal o portatil. Asegúrese de que los textos y colores son los adecuados para estos soportes.

Con el siguiente ejemplo de actividad y pasividad de espaciados verticales podemos comprobar la importancia de estos elementos que deben configurarse en armonía con el diseño y los espacios del diseño. El espacio en blanco sirve para crear un diseño equilibrado y armonioso a menudo con el que uno se siente cómodo en la lectura. Por tanto, es esencial, su presencia equilibrada en sitios dirigidos sobre todo a lectores habituales.

Cuando no hay configuración de los espacios verticales todo es muy estrecho y agobiante y obliga a forzar al lector su vista sobre un espacio demasiado pequeño. En definitiva, no existe comodidad visual con el diseño.

Para solucionar este y otros problemas podemos dar un estilo al diseño a través de las hojas de estilo CSS. Debemos añadir márgenes, espaciados interiores, variedad de tipografías, tamaños, alineamiento entre caracteres y espaciado vertical entre líneas. No utilizar estos parametros es insensato y puede descomponer el trabajo textual.

El espacio en blanco llamado “whitespace” crea la posibilidad de balance y equilibro y es realmente importante, quizás lo esencial en un diseño orientado a una gran cantidad de textos a utilizar en él.

Analicemos el ejemplo gráfico superior para tener una mayor comprensión sobre la estética de los elementos visuales:

• 1. En el primer ejemplo del gráfico podemos contemplar que existe una ausencia de regularización de los espacios entre textos haciendo que encabezados, subtítulos y textos descriptivos permanezcan casi juntos. El problema de esto se encuentra en que al permanecer juntos, el ojo no puede discriminar correctamente los distintos elementos y tampoco separarlos. Se trata de una falta de racionalización que radica en su falta de espaciados blancos.

• 2. En el segundo epígrafe remarcado en el gráfico podemos discernir que se trata de un encabezado. Tras él, se encuentra un subtítulo descriptivo del encabezado que nos da la sensación de que se trata de un resumen corto previo al texto introductorio.

• 3. En el tercer epígrafe podemos ver como se nos introduce con armonía en el texto y en esta ocasión podemos separarlo del encabezado. Existe suficiente espaciado entre encabezado y texto que nos ayuda a dividirlo en un esqueleto entre “cabeza” y “cuerpo”. También la separación de lineas en el texto nos facilita una mayor orientación y continuidad de lectura. Para conseguir efecto, debemos utilizar un espaciado vertical mayor al tamaño de la fuente. Personalmente, recomiendo utilizar un espaciado vertical con un tamaño doble al tamaño de la fuente, es decir, si la fuente tuviera 12px, el espaciado vertical debería ser de 24px.