Dimensiones ideales de página web

Gracias por la multitud de sugerencias y opiniones. En principio, y después de haber leído todas las respuestas creo que voy a optar por un formato 1024X768 ya que mi web llevará un foto de fondo o varias que irán cambiando. En cuanto a la maquetación eso ya es otra historia, me tendré que buscar la vida xq no es que sea muy experto en maquetación.

Saludos Domestiker@s!!

Diseña a 780 de ancho y todo lo que de de alto.
La utopia donde todo debe verse en un solo pantallazo es pasado.
Toda las personas usan el scroll, para el correo electrónico, blogs, noticias, rss, flickr, youtube, resultados de google, TODO usa scroll.
Es mejor apostar por el scroll, que por la resolución promedio.
Sin importar si usas un Nokia de 10 euros, un iPhone 4G o una iMac de 27 pulgadas, siempre tendrás que usar el scroll.

Hoy, en el año 2010, nada es más estñandar que el scroll vertical.

Saludos!!

Lo del crossbrowser con estándares y algunos hacks (cada vez menos) se sortea fácil. Soporte para ie6, a las puertas de ie9 es un chiste, y más teniendo en cuenta que la cuota de ie6 es muy muy baja a estas alturas. Hay que perder un poco el miedo escénico, en mi opinión. Netbooks, ipads... estoy de acuerdo en que tienen cierta cuota pero depende de qué queramos conseguir con la web. Al final, como apuntáis, se trata del público objetivo.

Retomando un poco el hilo, no sé hasta qué punto son objetivas las stats de w3schools, al final lo visitan desarrolladores. Si la experiencia (en la web de una marca de ropa, se me ocurre) requiere de una resolución mayor, quizá estemos perdiendo un 25% de cuota pero lograremos mejores sensaciones en el 75% restante.

Me parece que la resolución de 1024px de ancho no está ni mucho menos desapareciendo y que más dispositivos las estan adoptando y para muestra el ipad y toda la variedad de netbooks que ha sido lo más vendido el año pasado.

Yo me reitero. Recomiendo 1000x600px sin lugar a dudas. Eso sí, el fondo ha de poder ocupar resoluciones más anchas para que no se vea mal en pantallas grandes.

Suerte con el website kywy! Ya nos contarás!

Santi

Los usuarios de ipad son un 0,03% del global? (me lo invento, no lo se, pero será ridículo el %)

Si no es un requisito inestimable de que el cliente quiera que lo vean los usuarios de Ipad, para mi eso si que es desestimable. No se va a condicionar el diseño de un site por que un posible "0,03%" de los usuarios lo vea desde un Ipad.

Tienes toda la razon. Todo depende del target. Yo digo que el target de usuario común 1024.

Eso es rotundamente falso. :( La resolucion del ipad es 1024px. Netbooks también.

Y al IE, nos guste o no, aun le quedan muchos años por delante, por suerte la version 9 parece que será buena.

El tiempo dirá.

Santi

Santi, creo que no tiene ningún sentido esa comparación entre el 25% de resolución de 1024 con el 25% de cuota de IE....

Quizás los que navegan a 1024 son con firefox... ? o quizás Opera...?

1024 se está muriendo por el avance tecnológico, al igual que le pasa a IE.

Todo depende del target de usuario... como siempre...

Hola!

Xavib creo que tienes razón pero me gustaría matizar. Cuando dije que la resolución más común es 1024 no me expliqué bien.

Es cierto que ahora hay pantallas más anchas, pero creo que el navegador no se usa mayoritariamente a pantalla completa (opinión completamente subjetiva, no he encontrado documentación sobre el tema). Sin ir más lejos en los nuevos windows están los widgets que reducen el ancho del navegador.

Además los sites más comunes tienen un espacio de menos de 1000 de ancho (youtube, facebook, twitter, y un largo etc... mirad por ahí...) y el usuario no está haciendo resize en cada website. Más de 1000px de ancho no ayuda a la lectura. Otra cosa es si quieres poner una foto de fondo. Entonces si que debería ser más ancha para que no se corte con monitores de más resolución.

Mi opinión es que la resolución es ahora más ancha pero los websites se siguen diseñando para 1000px de ancho.

Como dicen las estadísticas que comentas el 35% usa > 1024. Pero es que el 60% usa >= 1024!

una reflexión: actualmente ie7 y ie8 se llevan el 25% del pastel. Si descartamos el 25% de 1024px porque no descartar también a los ie y pasar del cross browsing? seria lo mismo?
http://www.w3schools.com/browsers/browsers_stats.asp

Yo creo que a un cliente le dices que su web la verá mal un 25% de los visitantes y contrata a otro. :(

El fondo, como comento antes debería estar preparado para >1024 por supuesto pero el contenido para 1024 que es en mi opinión es como descartas a menos usuarios. Una web diseñada a 1024 si se ve resolución mayor, si está centrado queda igualmente bien. Una resolucion mayor vista en 1024 vas a volver loco al usuario con la barra de desplazamiento horizontal.

Santi

Algunas estadísticas de interés...

Lo "standard" no es siempre lo idóneo, ya que lo standard para un proyecto web lo marcan los propios usuarios y el target de visitantes de dicho proyecto.

Es algo que se consolida con el tiempo.

Esta bien iniciar con "lo standard" pero irremediablemente mutará.

Dependiendo del proyecto, tu target marcará esas pautas puesto que dependiendo de los perfiles de usuario, se diversifican mucho las medidas y resoluciones que usan.

Por ejemplo si tu target resulta ser gente del sector web, pocos navegan con un monitor inferior a 19", eso equivale como mínimo a una resolución de 1280...

Si tu proyecto es una tienda online, tu target es mas "global" por lo cual, puedes tener resoluciones desde 1024 hasta 1900... y en este caso es cuando has de mirar estadísticas ^_^

Leí hace un par de semanas (no he logrado recuperar el artículo para ilustrarlo, juntaban las estadísticas de varias webs burras tipo ESPN de varios países) que el 1024x768 está alrededor del 25%, y que la suma de 1280x800 y 1280x1024 está alrededor del 35%. El resto son resoluciones superiores y me llamó la atención el 1 y pico % de 320x396 de los smartphones.

En mi opinión, no estamos muy lejos de descartar el 1024. Lo cual viene muy bien ahora que está todo tan entretenido con la batalla de estándares.

BuenAS:

Como te comenta albatrosland, la mejor opción, y que suele utilizarse en la mayoría de sites Flash a fullFrame es la diagramación líquida elástica. Esto no es más que definir un tamaño mínimo, por ejemplo 800x600, por debajo del cual el usuario tendrá que utilizar las barras de scroll y que a tí te da un tamaño mínimo para que no se solapen los elementos de tu interfaz (por ejemplo, que no desaparezca un trozo de menú principal, tapado por la sección de "news") y un tamaño máximo, por ejemplo 1280x1024 por encima del cual tu interfaz permanecerá centrada y con este tamaño (lo que te garantiza que, por ejemplo, el usuario no tenga que recorrer media pantalla para ir del menú principal a la sección de "news"). Entre estos valores máximos y mínimos, la interfaz se comporta de forma elástica. El ejemplo que has puesto del site Sobe puede ser un ejemplo, aunque tiene algún fallo (las dos secciones principales no tienen el mismo tamaño).

En Flash todo este rollo es bastante fácil de implementarlo. Tienes el evento RESIZE, y en su controlador de eventos compruebas el tamaño del escenario (stage.stageWidth y stage.stageHeight) y redistribuyes los elementos de tu interfaz, siempre teniendo en cuenta que rellenen un rectángulo mínimo de 800x600 y uno máximo de 1280x1024.

Otra cosa se que suele hacer es detectar la resolución del escritorio del usuario. La clase estática Capabilities te da el ancho y el alto.

Capabilities .screenResolutionX
Capabilities .screenResolutionY

y puedes redimensionar la imagen/imágenes de fondo a este tamaño (en Flash, cuando se escala una imagen es también conveniente activarle el smoothing).

Un saludo.

Hola!

Esta web está hecha con Flash y el flash sí que puede redimensionarse para adaptarse al diseño.

El scroll horizontal yo te recomendaría que no lo uses, no acostumbra a hacer buen efecto y la gente no lo ve claro. El vertical sí.

También puedes poner una imagen muy grande de fondo como en este caso. Aunque no se redimensione pues puede quedar bien. Pero tardará un pelín en cargar. Hay javascripts para redimensionar automáticamente pero no hace un efecto tan limpio como con este flash.

Santi

Gracias Santi!!

Me ha venido muy bien tu consejo, lo único es que yo quería que mi web quedara grande ya que eso simplemente lo quiero porque mola mas pero seguramente como bien dices a nivel de funcionalidad no es lo adecuado. Entonces claramente 1000x600?? Te voy a mandar un link de una web que es
a pantalla completa y es la idea de formato que yo quería pero seguramente se vea bien en mi Mac y en otras pantallas se tendrá que usar scroll. Que opinas? Esta es la página entre otras muchas que he visto: http://www.sobe.com/#

Hola Kywy!

Yo, lo que les recomiendo a los diseñadores que trabajan con nosotros es que hagan el diseño de 1000x600 px.

Por varias razones:
La resolución más común es 1024 de ancho. Si le quitas los pixeles de la barra de desplazamiento lateral te quedas en 1000px. Hay pantallas más anchas? Si, claro. Pero la mayoría tienen esa resolución y si es más ancha con centrar el contenido queda muy bien. Es cierto que hay layouts que se "expanden" para adaptarse al tamaño. Están pensados para websites con mucho contenido de texto y por columnas, al estilo periódico o blog. Si no tiene mucho texto y columnas yo de ti lo olvidaba. A nadie le gusta mover la cabeza de lado a lado para leer en una pantalla, No es funcional. Por supuesto hay excepciones de diseños que quieras que ocupen todo pero son casos muy muy específicos y artísticos diría yo y se arriesgan a que quede todo demasiado apelmazado en resluciones más estrechas.

La altura es de 600px. Si a los 768px le quitas los menus superiores del navegador y la barra inferior te quedas con 600px. Todo lo que esté a más distancia de 600px del margen superior quedará oculto si no se usa el scroll. Si quieres hacer una web que quede centrada superiormente y que sea visible al 100% (sin necesitar el scroll) no puede ser de más de 600px de alto.

Lo que has de tener en cuenta es que aunque tu diseño sea de 1000x600 habrá gente que tendrá "la pantalla más grande" y por tanto tienes que rellenar el espacio con algo. Ese algo tiene que ser o un color o una textura que se pueda repetir. Una foto de fondo no se puede usar porque las fotos de fondo no se redimensionan con CSS dependiendo de la pantalla, han de tener un tamaño fijo. Eso es importante. Por lo tanto: O color o imágen que se pueda repetir infinitamente para rellenar.

Espero que con este rollo que te he metido se entienda :)

Suerte y si necesitas ayuda con la web estamos a tu disposición :)

Santi

Entonces de alto ya es opcional no?? 768 suele ser la opción mas usada y segura no?

Gracias Albatro!!!

Dependerá de como quieras hacer el diseño, para empezar si quieres saber mirate el porcentaje de resoluciones que tienen la mayoria de usuarios, hoy en dia mínimo se diseña para 1024, luego tendras que ver como quieres tu site si es diseño líquido, elástico o fijo, depende de lo que quieras hacer.

si no entiendes esto último te dejo este link:

http://www.cool-z.com/blog/2010/diseno-hibrido-liquido-elastico-una-buena-opcion-olvidada/

Suerte y ya nos contarás

www.albatrosland.es
www.crazy-dog.es