Nociones básicas de Diseño Web (I)

¿Qué tiene de particular el diseño web?

En nuestros cursos relacionados con la creación de páginas web, insistimos en los conceptos de accesibilidad-usabilidad de los sitios que vayamos a diseñar. Para alguien que se inicie en el entorno web, debe saber que éste difiere del medio impreso. En este último, el diseñador puede fijar todos los aspectos de su trabajo para que se reproduzca tal como lo había planteado. Esto no se da en la Web, donde los diversos tamaños y resoluciones de pantallas o los distintos tipos y configuraciones de navegador de los visitantes, hacen que la presentación de nuestra página pueda diferir respecto al diseño que habíamos ideado.

¿Qué factores del usuario pueden afectar a nuestro diseño web?

Algunos factores que pueden hacer que el diseño de nuestra web sea visualizado por los visitantes de forma muy diferente a cómo había pensado son:

• Tamaño del monitor/pantalla del dispositivo donde se visualiza: pensemos desde un móvil navegando en Internet, pasando por un miniportatil de 10”, un portatil de 15” a un PC con pantalla de más de 22”. Incluso aunque solo diseñáramos para un tamaño de pantalla, el visitante podría estar visualizando nuestra página en una ventana no maximizada, como ocurre a veces con monitores más grandes.
• Resolución a la que está configurada la pantalla: una resolución de 1024×768, implica ver 1024 píxeles en horizontal y 768 en vertical, cada uno de ellos con una anchura de 1/1024 y una altura de 1/768 veces la pantalla. Aplicando ese cálculo, en una de 1280×1024 los píxeles serán más pequeños y más grandes en una de 800×600.
• Navegador del usuario: cada navegador presenta sus particularidades a la hora de mostrar (o renderizar) una página web en función de cómo se ajusten a lo estándares HTML y CSS (o cómo los interpreten). Aunque se ha avanzado mucho en este aspecto, siguen existiendo excepciones, con el caso más negativo del Internet Explorer de Microsoft que en casi todas sus versiones, salvo las más recientes, puede mostrar efectos muy anómalos por su mal cumplimiento de los estándares.
• Configuración del navegador: aunque tienen valores estándar por defecto, el usuario puede fijar valores de referencia mayores o menores para el tamaño de letra o de zoom, es decir, un re-escalado de imágenes y texto al mismo tiempo.

Puede haber más factores, cómo los colores de pantalla que soportan (24-bits, 32-bit…) o  que el usuario fuerce su propia presentación (fuentes, tamaños, colores…) frente a la nuestra, pero en definitiva, queda claro que no tenemos certeza de como se verá nuestra página en los equipos de nuestros visitantes.

Los efectos que perciben, según la técnica que hayamos empleado en el diseño, puede ser múltiples: páginas con márgenes demasiado grandes, o con líneas de texto muy largas o que queden cortadas y les exija hacer el molesto scroll horizontal, texto o imágenes que se ‘desbordan’ del área que tenían asignadas, títulos que se dividen en varia líneas perdiendo el efecto del diseño,…

¿Cómo podemos comprobar el diseño que realicemos?

Podemos empezar probando en nuestro propio equipo. Si vamos a crear páginas web puede ser una buena idea tener instalados los navegadores más utilizados, al menos Internet Explorer, Firefox y Google Chrome

Por supuesto, conviene que probemos con diversas configuraciones, aumentando tamaño de texto, haciendo zoom, minimizando la ventana y cambiando la resolución. Esto nos puede dar una idea rápida de como se comportan las páginas en situaciones diversas. En cualquier caso, para facilitarnos esta labor, hay servicios on-line gratuitos que realizan estas comprobaciones. Por ejemplo,  browsershots.org  o browserlab (de Adobe) nos muestran capturas de pantalla de nuestra página en multitud de configuraciones, sobre todo con distintas versiones de cada navegador, algo que puede ser más complicado de probar en nuestro equipo, o este test de resoluciones que nos muestra cualquier página web en un amplio rango de resoluciones de pantalla.

También es interesante comprobar qué configuraciones tienen los usuarios que nos visitan. Herramientas de análisis como Google Analytics  nos pueden dar información al respecto para ver cuáles son las más comunes o si hay alguna significativa que no habíamos tenido en cuenta. Si queremos conocer las resoluciones más utilizadas en general, podemos consultar servicios como screen-resolution, aunque las diferentes estadísticas pueden variar algo al estar influidas por el tipo de visitantes de los que se recogen los datos. Vemos que hay una gran variedad, con 1024×768 y 1280×800 como resoluciones más extendidas,  cada vez con más monitores de mayores resoluciones y disminuyendo mucho la de 800×600 que no hace tantos años era la más ‘estándar’.

En el próximo post hablaremos sobre las distintas técnicas de diseño (rígido, fluido,…) que se han venido empleado en el entorno web.

Nota:  estos posts reproducen nuestro documento ‘Nociones de Diseño Web‘ que puede descargarse en formato pdf en nuestra web

Credits: imagen portada by FreeFoto.com