En que resolución diseñar una web?


En el anterior artículo debatíamos sobre la compatibilidad de navegadores que debe tener nuestra pagina web. Hoy, como no podía ser de otro modo, me meteré a fondo con otro aspecto fundamental que no puede ser pasado por alto: La resolución de pantalla que usan los navegantes.

mac-doble-pantalla

Resoluciones de pantalla mas usadas

Por supuesto, existen unas estadísticas sobre ello y, por supuesto, citaré las del W3c, aunque hay otras páginas de igual seriedad como http://www.screen-resolution.com/common-screen-resolutions.php , especializada únicamente en el tema central de esta entrada. Concretamente, esta página nos permite acceder a cualquier otra en una resolución específica (800 x 600, 1024 x 768 o 1280 x 1024). Y aquí ya tenemos la primera pista de cuales son las resoluciones mas usadas.

Resoluciones de pantalla mas usadas por años

Fecha Superior 1024×768 800×600 640×480 Desconocida
Enero 2009 57% 36% 4% 0% 3%
Enero 2008 38% 48% 8% 0% 6%
Enero 2007 26% 54% 14% 0% 6%
Enero 2006 17% 57% 20% 0% 6%
Enero 2005 12% 53% 30% 0% 5%
Enero 2004 10% 47% 37% 1% 5%
Enero 2003 6% 40% 47% 2% 5%
Enero 2002 6% 34% 52% 3% 5%
Enero 2001 5% 29% 55% 6% 5%
Enero 2000 4% 25% 56% 11% 4%

Resoluciones de pantalla de dispositivos móviles

La evolución es claramente hacia resoluciones mas grandes, aunque hoy en día con la aparición de adelantos como el iphone, la tecnología 3G, y las PDAs con Wifi, esto ha cambiado. Ya hay gran cantidad de usuarios que acceden a la red a través de estos dispositivos, cuya pantalla es mucho mas pequeña, y donde no se visualizara correctamente una web que no este pensada para estos terminales. Una de las casas que mas empeño esta poniendo en desarrollar aparatos móviles con pantallas de mayor resolución es NOKIA, que ya cuenta con su modelo N810, cuya resolución alcanza la nada despreciable cifra de 800 x 480. Aquí te dejo una relación de las resoluciones mas comunes en dispositivos móviles, extraída de http://webdebolsillo.com:

Resoluciones de pantalla más populares en móviles

  • 128×128 px. Una de las resoluciones más pequeñas y ahora anticuada.
  • 176×220 px. Popular en modelos de Sony Ericsson y algunos Nokia
  • 240×320 px. o QVGA. Popular en PDAs con Windows Mobile, Nokia N96 y otros similares.
  • 320 x 480 px. o HVGA. Anteriormente esta resolución era extraña, ahora con la llegada del iPhone se volvió muy popular, también la usa el iPod Touch, HTC Dream y el nuevo Palm Pre.
  • 640 x 320 px. Usada en el Nokia N97
  • 640 x 480 px. HTC Touch Diamond usa esta resolución, igual que el HTC Touch Pro o el HTC Advantage.
  • 800 x 480 px. Usada por el Nokia N810.

¿En que resolución diseñar?

Vamos a sacar conclusiones de las dos tablas. De la primera extraemos que no tiene ningún sentido optimizar nuestra web para una resolución de 640 x 480; no obstante, si lo tendría en la segunda tabla, donde vemos que los modelos de HTC usan dicha resolución. Que hacer entonces?

Mi opinión es que hay que analizar el público al que dirijamos la web que estamos desarrollando. No es lo mismo una web especializada para diseñadores gráficos o informáticos, que otra web dirigida al ocio personal. Si creemos que nuestros potenciales clientes podrían acceder a nuestro site vía móvil o pda, entonces debería estar optimizado para ello. De lo contrario, una resolución de 640 x 480 no sería adecuada.

Los diseños líquidos o “flexibles”

Son aquellos que sea cual sea la resolución de pantalla usada por el visitante, hará que la pagina se amolde a ella visualizándose correctamente. Como es lógico, estos diseños son mas costosos y laboriosos, y hay que ser muy cuidadoso a la hora de mimar las compatibilidades ya que cualquier error u olvido podrían hacer de nuestra pagina, una inservible hecatombe de datos e imágenes.

Conclusiones finales

En definitiva, no hay una resolución universal en la que diseñar. Si al comenzar a leer este post pensaste que encontrarías una “cifra mágica” en la que diseñar todas sus webs, estás en un error. Hay que estudiar el mercado, los clientes potenciales, el ámbito de su web, etc. Tampoco hay que olvidar que no todas las web necesitan el mismo espacio, ya que unas contienen mas información, menos imágenes, mas botones, o le dan mas importancia al diseño. Y a partir de ahí decidir que hacer.

Esta claro que la resolución mas extendida es la de 1024 x 768, utilizada comúnmente en los portátiles. La de 800 x 600 ya esta desapareciendo en pantallas de monitor, ya que las nuevas tecnologías han logrado que ya nadie disponga de un monitor de menos de 19 pulgadas en su casa, alcanzando fácilmente y a módico precio las 24 pulgadas. Por lo tanto, yo personalmente no atendería mucho a ese 4% de usuarios que sigue aferrado a sus 800 x 600.

Cosas a tener en cuenta

Para terminar, me gustaría recordar un par de puntos esenciales. Una vez elegida la resolución a la cual optimizaremos nuestro proyecto web, hay que tener en cuenta que hay que restar los píxeles que ocupan las barras de scroll vertical, los menús y barras de herramientas de los navegadores, y los marcos de estos.

La barras de scroll (o desplazamiento lateral) se permiten solo en el caso de las verticales. Las horizontales no son para nada una opción, ya que disminuyen la accesibilidad y harán que tus navegantes pierdan pronto el interés por tu pagina, ademas de hacer la navegación mas complicada. Si tu site necesita mucho espacio para mostrar mucha información, distribuyela correctamente a lo largo de la pantalla, de manera vertical. Y recuerda, que cuanto mas ordenado y limpio presentes tu producto, mejores resultados tendrás.

Lo principal de la pagina debe verse en un vistazo, la idea inicial debe ser lo que se entre por los ojos sin necesidad de desplazarse por el site. No vuelvas loco a tu visitante, y muestrale de manera clara lo que consideres mas importante.

Anuncios

Un comentario en “En que resolución diseñar una web?

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s