La resolución óptima de tu página web

http://www.develarte.com/2011/03/la-resolucion-optima-de-tu-pagina-web/ 

La resolución óptima de tu página web

800, 1024, 1280.

Una de las primeras preguntas que se suele hacer a los clientes a la hora de comenzar con el diseño de una página web es la resolución de pantalla para la que la web debe estar optimizada.  Empezamos mejor dejando claro lo que es la resolución:

Debemos tener claros dos conceptos:

• Tenemos una configuración de pantalla que podemos personalizar y que fija los pixels que el monitor puede mostrar tanto horizontal como verticalmente. Es fácil comprobar la resolución que tiene establecida tu monitor: si entras en panel de control >>pantalla>>configuración verás que te aparecen unas opciones como estas:  800 x 600 1024 x 768 1280 x 960 etc.   El resultado dará un numero total de pixels que el monitor podrá mostrar.
• Aparte de esto, tenemos el tamaño que físicamente tiene el monitor tanto horizontal como verticalmente: este tamaño se suele medir en pulgadas (inches) que equivalen a 2,54cm.

Por lo tanto, resumiendo, tenemos: la medida física del monitor (en pulgadas) y los pixels que el monitor puede mostrar (en número). Pues bien, la resolución de pantalla va a ser el resultado de dividir los pixels entre las pulgadas dando lugar a los famosos ppp (pixels por pulgada) o ppi (pixels per inch). El resultado de la división para las medidas horizontales te saldrá aproximadamente igual al de las medidas verticales. Evidentemente cuanto mayor sea los ppp mejor será la calidad que percibimos. Los primeros PC tenían una resolución de 72 ppp, hoy en día los nuevos iPad tienen unos maginificos 132 ppp de resolución. Si cojes una regla y consultas que configuración de pantalla tienes establecida es muy fácil que saques la resolución de pantalla de tu monitor.

LA RESOLUCIÓN DE PANTALLA Y EL ANCHO DE LA WEB

Ahora bien, en que influye todo esto a la hora de diseñar una página web. A decir verdad, la resolución no mucho. Cuanto mejor sea la resolución mejor será la calidad de imagen que tenga nuestro visitante pero eso no es algo que podamos controlar. Lo que si podemos controlar es el ancho y el alto en pixels que vamos a dar a nuestra web. Y de estos dos últimos el que nos importa es el ancho. Me explico:

Los usuarios están acostumbrados a tenerse que desplazar verticalmente dentro de una página web para ver los contenidos que no muestra completamente la pantalla, es algo habitual. Sin embargo lo que no está tan bien visto (mejor dicho, está muy mal visto) es tener que desplazarse horizontalmente para ver todo el contenido y eso es precisamente lo que ocurre cuando se navega con una configuración de pantalla inferior al tamaño en que se diseño la web. Si pruebas a poner tu monitor a los arcaicos 800 x 600 (alguno queda por ahí navegando a esa resolución) verás o mejor dicho no verás la mayoría de las páginas completamente en el navegador, tendrás que hacer scroll horizontal para ver todo el contenido.

Ahora pongámonos en el caso contrario: navegas con tu pantalla configurada a 1280 x 1024 y visualizas una web que está diseñada a 800 x 600. Bien, en este caso, lo único que ocurrirá es que veras unas bandas verticales o background correspondientes al espacio que le sobra a tu pantalla. Si bien esta situación no es ideal sí es admisible desde el punto de vista del usuario ya que prácticamente todos los navegadores tienen una opción para ampliar la página visualizada. Además, el fondo o background es fácilmente personalizable a la hora de diseñar la web por lo que puede ser incluso un elemento decorativo. Como ejemplo puedes ver esta pagina a más de 1024 y ver como el fondo puede ayudar a dar un toque distinto a tu página.

De acuerdo, hasta aquí todo bien, entonces¿que tamaño, o más bien, que ancho debe tener mi web? . Si te fijas en el gráfico a 2010 había un insignificante 1% que navegaba con anchos de800 px, una gran mayoría con anchos por encima de 1024 px pero todavía existe un 20% que tiene configurado un ancho de 1024. Es por eso que optimizar el diseño de una página a 1024 es hoy en día la práctica más habitual. Dentro de esta práctica, la realidad es que hay que dejar espacio para el scroll o barra de desplazamiento vertical del navegador y ésta, dependiendo de que navegador se trate, tiene anchos distintos. Por eso las páginas se suelen diseñar para anchos de aproximadamente 960 px dejando 64 px de espacio para la barra.; si esta es más estrecha, se verá un pequeño fragmento del fondo a los lados, lo cual no supone ningún problema.

Dicho esto, no es una ley fija que no se pueda violar: dependiendo del tipo de visitante es muy posible que el gráfico anterior no sea del todo exacto. Una web que mayoritariamente vea gente joven va a tener forzosamente un porcentaje superior de gente navegando con resoluciones altas (mejores equipos, más modernos, menos problemas de vista etc).

De igual manera, parecería estúpido optimizar una pagina al 1% decreciente de usuarios con 800 de ancho. Sin embargo, diseñar una página con 800 px bien centrada,siempre y cuando no necesite de espacio para mostrar mucho contenido puede resultar un recurso estilístico en determinadas circunstancias.

Por todo lo anterior es tan importante tener claro quienes van a ser nuestros potenciales visitantes y que perfil van a tener.

Dejamos para otra entrada las configuraciones para nuevos dispositivos: moviles, iPad, iPod, tablets etc.