Resolución de pantalla

Consideraciones relativas a los distintos tipos de pantalla que pueden tener los visitantes y el espacio disponible para cada caso.
Las aplicaciones encargadas de presentar las páginas web son los navegadores (browsers), entre los que cabe destacar por su importancia y difusión Internet Explorer, Netscape Navigator y Opera.

La interfaz de un navegador, en su modo estándar, presenta al usuario una o más barras superiores (de menús, de dirección, etc.), una barra inferior (la barra de estado) y un espacio principal, la ventana, en el que son presentadas las páginas web.

La forma de esta ventana es siempre rectangular, pero su tamaño varía, dependiendo del monitor y de la tarjeta gráfica. Podemos hablar de dos tamaños de pantalla diferentes:

  • Tamaño absoluto: es el tamaño "real" de la ventana del monitor, medido generalmente en pulgadas. Depende del monitor.
  • Resolución o tamaño relativo : viene determinada por el número de pixels que se muestran en la ventana del monitor, siendo el píxel la unidad mínima de información que se puede presentar en pantalla, de forma generalmente rectangular. Depende de la tarjeta gráfica.

El tamaño absoluto se suele expresar en pulgadas de diagonal (1 pulgada = 25,4 mm). El más común en la actualidad es de 17’’ en ordenadores de sobremesa, aunque todavía quedan bastantes equipos antiguos con monitores de 15’’ y existen en el mercado bastantes de 21’’. El tamaño absoluto de los monitores de los equipos portátiles suele ser de 14-15’’.

En cuanto a la resolución, los valores más comunes son de 800x600 y de 1024 x768 pixels, aunque quedan todavía usuarios que trabajan por debajo, a 640x480, y por encima, a resoluciones de 1152x864 y 1280x960 pixels.

El tamaño absoluto y la resolución deben estar en concordancia para una visualización correcta, siendo valores aceptables los siguientes:

  • 14" - 15": Resolución máxima apreciable: 800x600
  • 17": Resolución máxima apreciable: 800x600 ó 1024x768
  • 21": A partir de 1024 x 768

Las posibles resoluciones de trabajo de un equipo dependen sobre todo de la calidad del monitor y de la tarjeta gráfica del ordenador, y se configuran, en sistemas operativos Windows, bien haciendo click con el botón derecho del ratón sobre el escritorio, seleccionando la opción Propiedades y accediendo a la pestaña Configuración, bien desde Inicio > Panel de control > Pantalla.

La importancia de la resolución de pantalla sobre la forma de ser visualizadas las páginas web en la ventana del navegador es muy importante. A mayor resolución se dispone de más puntos de información para presentar los elementos en pantalla, pero estos puntos son más pequeños, con lo que los elementos de la interfaz (textos, imágenes, objetos de formulario, etc.) se ven más pequeños.

Tamaño de página y resoluciones
Tamaño de página y resoluciones

Si diseñamos una página para una resolución dada, ocupando toda la ventana del navegador, aquellos usuarios que la visualicen a resoluciones menores no tendrán espacio en pantalla para contener toda la página, por lo que se verán obligados a usar las barras de desplazamiento del navegador. Por el contrario, aquellos usuarios que la visualicen a resoluciones mayores tendrán demasiado espacio en pantalla para tan poca página, por lo que les quedará bastante espacio vacío, sin contenidos.

Para solucionar estas diferencias, lo normal es que se diseñen las páginas web para una resolución base, generalmente la más usada en la actualidad (800x600), y se construyan internamente mediante tablas o capas de tamaños relativos, con anchuras definidas en %, con lo que se consigue que al ser visualizadas en monitores de más resolución se "abran", ocupando todo el espacio de pantalla disponible.

Las pegas que tiene este sistema son que no da soporte a los usuarios de con menores resoluciones y que, en el caso de resoluciones mayores, el diseño de la página puede verse seriamente afectado al modificar sus elementos las dimensiones originales.

Otra posibilidad es maquetar toda la página dentro de un contenedor padre (una tabla o capa) y asignar a éste una alineación centrada, con lo que la página quedará en el centro de la pantalla si se usa una resolución mayor que la de diseño.

Autor

Luciano Moreno

Consultor, diseñador y desarrollador web en ParaRedeBJS. Especialista en usabillidad y diseño centrado en el usuario.

Compartir

Comentarios

James Peter

10/7/2004
Esta bien decir que las dimensiones de un página web, tengan proximidad a las resoluciones 800x600. Pero por que no mejor invitar a los diseñadores que realicen un solo diseño cuyo unico theme sea capaz de adaptarse a cualquier resolucion, donde nosolo serian el alto por el ancho, si no tambien su contenido, ejemm: letras, imagenes, etc.
Un ejemplo de adapatacion a cualquier resolución es el sitio Web www.webnewbie.net, sin importar en que navegador se utilice, en sistema operativo, si esten activadas o no los cookies o el javascript, se adapta, mas no su contenido, sus imagenes de sus temas no se acomodan al ancho de la resolucion del visitante.
¿Pues cual es la solucion a ello?

Gabriel

12/4/2009
Resolucion de Pantalla
Buenos dias! Tengo un pequeño problema. Me compre un Monitor LCD LG de 17º, se instalo perfectamente, el unico problema es que no puedo cambiar la resolucion de la pantalla (esta en 800x600 pixeles y yo lo quiero poner en 1024x768 pixeles). Para poder ponerlo tengo que desinstalar el Controlador, reiniciar el ordenador y despues volver a instalarlo, pero cuando la reincio/apago me vuelve a pasar lo mismo y tengo que volver a desinstalar y reinciar, volver a instalar y asi suscesibamente. ¿Abra otra forma de poder solucionar este problemita?

24/5/2009
Webnewbie
Hola! El curso de Diseño Gráfico es estupendo, te enseña ciertas bases que está muy bien saber. No encuentro la página que dices (webnewbie). La adaptabilidad a la pantalla que estamos diseñando es muy importante a la hora de no "irritar" al usuario.
Aparte de la información del artículo (muy interesante), ¿hay alguna especie de manual especializado en adaptabilidad a todo tipo de plataformas?

yasmin

04/9/2009
resolucion
de nada sirve tener o querer aumentar la resolucion si el cambio no lo vas a tener a simple vista, el computador debe tener buenos drives.....

danitoxd del metroflog

07/9/2009
esta muy bueno lo que dices pero podrias explicarnos algo mas de eso
holas , todo bn espero que es tes bn ajaj ta re bien peola como explicas suert

bb

15/2/2010
formatos
Hola!!
necesito hacer el diseño de una web, tiene que ser minimalista y visualizarse des de diferentes ordenadores, sin que haya una barra de desplazamiento en ningún caso. ¿qué formato me recomendais???
muchisimas gracias!!!

ELBA

06/2/2011
URGENTE
QUE VENTAJAS Y DESVENTAJAS TIENE EL AUMENTAR O DISMINUIR LA RESOLUCION DE LA PANTALLA. ME URGE XFA

christian_hardy

26/4/2011
Tiene razón! Pero.
Al momento de realizar una pagina siempre recomiendo usar la unidad de medida en % y no px, debido a que estarás trabajando a modo de proporción, sin embargo, existen detalles en los que a veces necesitas usar tamaños en pixel, como imágenes en donde 1% resulta ser demasiado, por lo que necesitas usar la unidades de px, elli empiezan los problemas, pues todo empieza a descuadrarse, cuando vas de un monitor a otro, yo soluciono eso trabajando todo en DIVs con % en longitud, si necesito algo por px simplemente lo ingreso dentro de otra capa que este medida por % y asi mantengo mis espacios y longitudes, pero si alguien sabe un mejor metedo que me lo diga, porque es bastante trabajo, algunas medidas son em y creo que pt también, pero no los he usado nunca antes... Que recomiendan ustes para solventar el gran problema de los tamaños?

mateo

22/10/2011
tamaño de la pagina
hola a todos!! tengo un pequeño problema y me gustaria saber si alguno de ustedes puede ayudarme....he creado una pagina web con un programa bastante sencillo,ya que no entiendo de codigos html, y en este programa hay un ventana donde deja editar la resolucion, estuve mirando por internet y leí que el tamaño estandar es 1024x768,entonces es el tamaño que le di yo a la mia... mi problema esta en que cuando cargue la pagina al host desde mi pc se veia bien, pero cuando lo abro desde la empresa de mi jefe que tiene una pantalla panoramica, se me queda todo en un lado, que podria hacer sin tener que hacerlo mediante los codigos??

juanb

13/2/2012
Esto esta anticuado
Que salga este earticulo del 2003 el primero en una busqueda de Google al consultar "resolución de pantalla mas comun 2012" no es del todo lo mejor. Las cosas han cambiado muchisimo en 9 años. Igual deberíais actualizarlo o borrarlo.

Es un decir, vamos....

Juana de arco

19/3/2012
resolucion de imagen
que resolucion es recomendable para imagenes de pantalla ?????????

esteban dido

19/3/2012
PORQUE LAS PAJAROS VUELAAn
holaaaa blablaasdfghjklñ los quierooo