¿A qué resolución diseñar?
Hola chicos... la verdad es que hace ya mucho tiempo que no hago nada de diseño web y me quedé en el año en que había que hacer todo para 800x600 adaptado para ver a 1024... pero ahora, partiendo de la base que uso un monitor de 21" a 1680x1050 y que la idea es que la web cubra prácticamente toda la pantalla buffff me dan un miedo terrible las 19", 21" y hasta 23" de los MACs que la vayan a ver.
La maqueta aprobada contempla la adaptación a la verticalidad de la resolución sin problemas (espero), pero en la anchura es en lo que me veo un poco "pez" y quería pediros consejo sobre si usar frames, capas, etc.
Se va a hacer en HTML, con un flash en el centro que ocupa toda la pantalla en horizontal y algo de javascript.
He visto una página (www.intimissimi.com) que consigue vencer ese obstáculo que tengo, ampliando la imagen del interior o haciéndola más pequeña... utiliza flash y podría valerme la idea. ¿Qué opináis?
Gracias
JC
oldskullnet
si te sirve de algo, yo decidí dar el salto a diseñar para 1280 en oldskull.net y lo del scroll vertical es la tendencia natural de una web con contenido si no quiere que el cliente se desespere haciendo cliks en botones... tienes que saber bien para que publico va dirigida la web... :) saludos!
xavib
webfordesigners
"Si el scroll vertical fuera un problema Facebook estaría muerto". No falla. +530 millones de usuarios y un promedio de +20 minutos diarios. El 35% de usuarios de internet en españa tiene cuenta en FB y la usa. Google es otro ejemplo de que los usuarios saben usar el scroll para llegar a la información que quieren ver. Otra cosa es que el contenido no interese.
majete
Ok, gracias por vuestros comentarios... he diseñado a 1020x600 así que bastante acertado con lo que me comentais muchos de vosotros (el tema del ancho es porque hago que no salga barra de navegación vertical así que me como los 20px). Al ser una página muy visual y con muy poco contenido de texto, exploto al máximo la fotografía ya que es una tienda de antigüedades y el objetivo es crear un ambiente similar al que tendríamos si visitamos la tienda física.
De todas formas, puede que diseñe algo paralelo a 1280 porque tengo fotos de muy buena calidad y esos 260 px que me da esa resolución son muy valiosos... quizá meta un script de detección de resolución para la presentación inicial, pero la web sea común para todas las resoluciones.
Bueno, os iré contanto!
Un saludo a todos
JC
smalonso Mod
Es cierto lo de los clientes con el scroll es bastante común, pero nosotros también tenemos el deber de educarlos digitalmente, ya que la mayoría de veces él no es el experto, y nosotros en principio tendríamos que serlo...
webfordesigners
Si, si, de acuerdo con lo que ha dicho laba y el scroll al 100%. Es curioso que el tema del scroll lo comento con diseñadores que nos contratan y muchisimas veces nos dicen que no son ellos sino el cliente el que lo quiere así, que se vea todo sin usar el scroll...
That's life...
Santi
ernexbcn
Lo que ha dicho laba, la gente ya está acostumbrada a hacer scroll, lo que quizás si podrías hacer es tratar de que lo importante al menos se vea en los primeros 600px pero hacer webs de 600px de altura no es muy útil que se diga.
Usuario desconocido
Yo, sólo pondría un pero a lo que ha dichowebfordesigner y es lo de los 600 de alto.
Yo no me volvería loco intentando dejar todo el contenido en ese número de píxeles, lo que sí que intentaría es que el menú y una parte significativa del contenido (esto ya depende del tipo de página) sí que se vea al cargar la web. Luego, si hace falta más, pues para eso está el scroll, algo superinteriorizado ya en la navegación por todo el mundo.
webfordesigners
Ah, se me olvidaba. 1000px de ancho porque la barra de desplazamiento vertical mide 20px!!
Santi
webfordesigners
Hola!
Yo te recomendaría que diseñes a 1000x600. Es de largo la resolución más común. Si, hay mucha gente que tiene una pantalla más grande, si, pero esa gente no usa el navegador a pantalla completa y si lo hace no le molesta que el diseño sea de 1000 de ancho. Si no me crees mira el ancho de domestika o de el pais, o de la vanguardia, o el sport, o el marca, o twitter, o facebook, o apple.com, o del IPAD incluso!! o del que quieras...
Y te digo 600 de alto porque los navegadores con los tabs y los botones muestran mucho menos de la resolucion total de pantalla. Alguno dirá "pero si la pantalla es grande tiene mas de 600", si, es verdad pero si no quieres descartar el 25% de los navegadores hazlo máximo 600px de alto (para que no haya scroll se entiende).
Esta es la recomendación que hacemos a los diseñadores que nos contratan (es la primera pregunta que nos hacen siempre). En el mundo del diseño parece que todo el mundo tiene imacs gigantes y que eso es lo normal pero no lo es en absoluto fuera del mundo del diseño y sino pensad en los portatiles que hay funcionando en el mundo que son una pantalla de 15".
Bueno espero haber despejado dudas. Para mi ya no las hay :)
Santi
PS: bájate si quieres este addon de firefox y puedes liarte a ver tamaños de página que usan grandes websites, de verdad que no hay más...
https://addons.mozilla.org/es-ES/firefox/addon/539/
ernexbcn
1024 de ancho en lo más razonable, ten en cuenta la barra de scroll, por lo que será un poco menos. Esto te puede servir de ayuda:
http://www.w3schools.com/browsers/browsers_display.asp
Allí dice que sólo 20% están a 1024, la gran mayoría ya están a más.
majete
Claro... la página de donde he leido el artículo es esta
http://vitaminaweb.com/estadisticas-de-resoluciones-de-pantalla-enero-2010/
y la fuente es Marketshare
http://marketshare.hitslink.com/report.aspx?qprid=17&qptimeframe=M&qpct=6
... en esta última está actualizado a Octubre 2010
bye byee
rey_maria
Majete, gracias por compartir la estadística de resolución de pantalla, ¿Te importa adjuntar la fuente/url de dónde lo has visto? así podríamos consultarlo más adelante para ver si la cosa va cambiando.
majete
Por otra parte os dejo un enlace superinteresante de "diseño líquido en flash"... realmente esto es lo que usa la página que puse en el primer post, así que tendré que estudiarlo para ver cómo puedo adaptar mi web.
http://www.diegozamora.com.ar/wordpress/?p=6
majete
chicote
Hola chicote... déjame que dude de que nadie ve las páginas a más de 1280 (seré tan raro porque el 80% de mis amigos tienen mínimo 1280??!?) Encontré este dato que pienso está bastante actualizado, y aunque es a nivel mundial y sabemos que las resoluciones pueden cambiar mucho con respecto al país, continente, etc.. creo que es basstante fiable..
Usuario desconocido
Hola. Creo que somos de la misma quinta (aquella época del 800x600`s ;) Yo probaría a darle un margin: auto en tus estilos.css para que la anchura sea adaptable. Creo que la cosa va por ahí
majete
hola de nuevo...
muchas gracias por los consejos... miraré a ver que puedo hacer con vuestra información... la página es para una tienda de antigüedades y los requisitos es que se lea todo bien grande (mucha gente mayor va a verla), se pueda localizar bien la información y navegar fácilmente... es decir que todo se lo demos bien "mascadito"...
un saludo y gracias
Usuario desconocido
Algunos tips:
1. Existe el atributo maxheight y maxwidth en CSS.
2. Para una cómoda lectura no deberías exceder las 14 palabras por renglon,
3.Apple diseña para sus computadoras y diseña a 980 de ancho.
4. Recuerda que cada vez más gente visita tu página desde un celular o desde una ipad que desde un monitor de 23''.
PD: Diseña a 960, es el estándar. http://960.gs/
majete
Muchisimas gracias antitipo por los consejos, me imaginaba a que algo hay dentro del Flash...
Usuario desconocido
Deberías hacer una web líquida (busca en google, hay mucho), definir en el actionscript las posiciones relativas al stage, y declara una función para cuando se reescala el stage (busca por stage resize) y carga las imágenes con un cargar que suavize y no se vean mal al reescalar, hay varias funciones definidas (busca por smoothImageLoader).
De esta manera no tendrás problemas de resolución puesto que se adapta a cada una de ellas.
chicote
Nadie ve las páginas a más de 1280 de ancho. Quienes tienen monitores más grandes, lo normal es que tengan dos ventanas abiertas en vez de una.
Aunque alguno raro habrá por ahí, lo más razonable es ignorarlo y hacer una vista compatible para todos.
majete
Hola rey_maria, muchas gracias por la respuesta, pero...
pienso que el flash en sí debe tener algún código de ActionScript que hace que la proporción de la foto cambie según el ancho de la pantalla... si te fijas y haces la pantalla del explorador a 1024 de ancho la foto de la chica se ve desde el hombro... y conforme se va haciendo más grande la pantalla del explorador la chica aumenta de tamaño, y eso que no estamos variando el alto también... es decir, el flash sigue siendo igual de alto, por lo que la chica debería seguir teniendo el mismo tamaño... igual me equivoco, pero pienso en que algo hay...
rey_maria
Prueba a maquetar el html en porcentajes y el tamaño del flash ponlo así también, en porcentajes.
Este es un extracto del código de carga del SWF de la web que pones como ejemplo, ¿ve que está en porcentaje?
------------------------------------------------------------------------------------------------------
<script type="text/javascript">
var flashvars = {version:2};
var params = {bgcolor:"#000000"};
var attributes = {id: "intimissimi_flash"};
swfobject.embedSWF( "runtime.swf?v="+flashvars.version, "container", "100%", "100%", "9.0.0", "", flashvars, params, attributes );
swffit.fit( "intimissimi_flash", 989, 650 );
</script>
------------------------------------------------------------------------------------------------
Pero el HTML de la página también está en porcentajes.