Nuestro blog

!Auxilio! Mi página se ve más pequeña con mi computadora nueva

Por Equipo Gerencial | 24 de Junio 2009

"Compramos un monitor o computadora nueva y de repente sentimos que el diseño de nuestro sitio Web se encogió". "Le sobra mucho espacio a los lados", "hay mucho espacio vacío", "nunca me había percatado del color de fondo de mi página y ahora que lo veo tanto ya no me gusta"...

Las restricciones que debe manejar un profesional al diseñar un Website en términos de resolución de pantalla y tamaño no son conocidas normalmente, de hecho, muy pocos de los clientes que se enfrentan a la experiencia de crear un Website la primera vez lo saben. Como muchas veces el cliente se percata del tamaño definitivo de su sitio Web hasta el final del proceso, pueden existir desiluciones que se pudieron prevenir con un poco de conocimiento sobre el comportamiento de estas variables. La idea de este artículo es explicar en general cómo funciona este tema y comentar algunas buenas prácticas para que las diferencias de resolución de pantalla no frustren la agradable aventura de crear un Website la primera vez, y por el contrario, se puedan aprovechar en beneficio de la calidad del producto final.

Vamos por el principio, ¿qué es resolución de pantalla?

Según la famosa Wikipedia, resolución de pantalla es "el número de píxels (o máxima resolución de imagen) que puede ser mostrada en la pantalla.". Explicado de otra forma, los monitores están formados de miles de puntitos de luz, que según lo que proyecta cada uno, forman en conjunto las imágenes que vemos. Cada uno de esos "puntitos" de luz se llama pixel. Entonces, la cantidad de pixeles que caben a lo largo y ancho de la pantalla definen la resolución.

Para medir las dimensiones de una página no podemos usar pulgadas, ni centímetros, ya que en cada monitor, el centímetro de nuestra regla va a marcar una longitud diferente según la resolución que tengamos. Como el pixel es la unidad más pequeña que forma la imágen de una pantalla, las páginas de Internet normalmente se diseñan en términos de pixeles. Hasta aquí todo va bien, hasta que nos percatamos que no todos los monitores están formados por la misma cantidad de pixeles. Puedo tener un monitor de 15 pulgadas con una resolución de 1027x768 o de 1280x800, entonces, puede ser que un elemento de 100 pixeles de ancho se vea más grande en el primer monitor y más pequeño en el otro, aunque en ambos casos midan 100 pixeles. Lo que sucede es que conforme avanza la tecnología, el tamaño de los pixeles es cada vez más pequeño, y como resultado caben cada vez más pixeles en las mismas dimensiones de pantalla que usamos. En otras palabras, cada vez cabe más información en nuestros monitores. (¿me gustaría saber si cuando compramos computadora nueva también aumenta nuestra capacidad de retener y procesar esa información extra que cabe en esos flamantes monitores?)

Para dar un ejemplo de lo anterior, tomamos algunos pantallasos de nuestro sitio Web en diferentes resoluciones:

Resolución 800x600

Resolución 1024x768

Resolución 1280x800

El ejemplo ilustra cómo el mismo sitio Web se ve más pequeño conforme aumenta la resolución de la pantalla. En bajas resoluciones se ve apenas una parte del diseño, en altas resoluciones sobra una gran cantidad de espacio.

Por todo lo explicado anteriormente, para elegir el tamaño ideal para el diseño de un sitio Web, se debe tener muy claro el público meta al que esté dirigido el mismo, y con ello tener una idea de las características generales de los equipos que se utilizan. Por ejemplo, si estamos haciendo un Website dirigido a clientes de alto poder adquisitivo en los Estados Unidos, podemos tomarnos la libertad de hacer sitios con diseños sumamente grandes. Si estamos diseñando un sitio para ser visto en zonas rurales con difícil acceso y probablamente monitores con baja capacidad, es mejor saberlo desde el principio para no abusar del tamaño y hacer el diseño lo más accesible posible para equipos con baja resolución. Cuando no sabemos bien las restricciones que tenemos en cuanto al público, lo recomendable es elegir una resolución estándar y diseñar utilizando dichas dimensiones como referencia.

Cuando comenzamos con el negocio de Internet, lo reccomendado era diseñar para resoluciones de 800x600. Hoy día, lo más utilizado es 1024x768 y probablemente no va a pasar mucho tiempo para que lo normal sea 1280x800 o superior. El siguiente gráfico muestra cómo en una muestra tomada de un sitio típico costarricense, con datos registrados durante el mes de mayo de 2009, el 38,13% de las visitas utilizaron resoluciones de 1024x768, seguido por un 22,66% que utilizaron 1280x800, 8,4% usaron 1280x1024 (wide screen) y un 7,06% visitaron el sitio desde monitores de 1440x900. El antiguo estándar de 800x600 se usó solamente en un 4,8% de las ocasiones.

 

 

 

Habiendo repasado el comportamiento del tamaño de un website y la resolución de la pantalla, hacemos una lista de conclusiones y recomendaciones:

  1. Elegir una resolución estándar según nuestro mercado meta, y diseñar con base en esas medidas para maximizar la proporción de visitantes que van a ver nuestro sitio del tamaño que queremos que lo vean. Lo anterior sabiendo que habrán personas que nos visiten desde equipos que se salgan de esas caracteríticas "estándar" y que puedan tener cierto inconveniente, aunque sea menor. Algunas veces es inevitable.
  2. Ninguna página Web se puede ver exactamente del mismo tamaño en todas las resoluciones. A pesar de que encontramos sitios Web que se acomodan exquisitamente a cualquier resolución, todavía no podemos controlar exactamente cómo se va a visualizar nuestro sitio en todas las resoluciones.
  3. Se puede disimular las diferencias utilizando técnicas como elementos que se ajustan automáticamente al 100% del monitor, diseños líquidos con ausencia de tablas que se amoldan a diferentes tamaños, fondos de pantalla llamativos o que complementen el diseño quitando la sensación de "vacío" de una manera sutíl, o bien, usando diseños con tamaños grandes, como lo vemos en los grandes sitios comerciales que visitamos todos los días, por ejemplo: youtube.com, facebook.com, cnn.com, nacion.com, etc.

Todas estas técnicas tienen sus pros y sus contras, y serán cubiertas con más detalle en otro artículo, lo importante de este era explicar cómo funciona la relación de resolución de pantalla con el tamaño de un sitio Web. Espero que haya sido de utilidad y cualquier duda o comentario no dude en hacernos la consulta.

Compartir

El equipo gerencial de Orbelink está comprometido con lograr la trascendencia en todos los niveles. El trabajo que hacemos debe trascender para que nuestro talento cambie positivamente la realidad de las empresas que atendemos, de las personas que trabajan en ellas y de los consumidores. Para eso, se requiere mucho más que trabajo de calidad. Los retos de nuestro día a día, deben propiciar el crecimiento de nuestros colaboradores, convertirlos en mejores personas, mejores profesionales. Sentirnos orgullosos de nuestro trabajo y del valor de nuestras capacidades. El crecimiento que añadimos a nuestros clientes debe hacernos crecer como empresa y así a nuestros colaboradores y socios. Eso solamente se logra con una serie de valores que perseguimos día a día. Ese ha sido y seguirá siendo el principal reto para el equipo gerencial.

Deje su comentario