JMiur [E]

No es algo del otro mundo pero resizebrowser es una herramienta útil a la hora de verificar cómo se ve un sitio web en distintas resoluciones de pantalla ya que los avances que se ven en el tema monitores hacen que este sea un tema complicado. Antes era más fácil, 800x600 o 1024x640 y ahí se acababan las variantes pero hoy en día, las alternativas son múltiples y conviene verificar si lo que vemos es lo que otros verán.

Esto no significa que uno deba crear sitios para el 100% ya que sería casi imposible pero, siempre es bueno saber qué pasaría si ... y de ese modo decidir dónde estarán nuestros límites.

La herramienta funciona online y posee dos pestañas. La izquierda nos permite seleccionar las distintas resoluciones admitidas o agregar alguna personal y la superior usar un zoom y definir la proporción: 4:3, 16:10, 16:9 o móviles.


Luego, basta hacer click en cualquiera de los enlaces que se muestran de nodo gráfico, para que se abra el navegador en una nueva ventana, ya re-dimensionada y desde allí podemos navegar libremente o colocar la dirección URL del sitio que queremos verificar.

11 comentarios:

Syd  

Yo voy algo confundido con este tema de las resoluciones, claramente no se le puede dar gusto al 100% de los monitores que hay ahora, pero intentando abarcar un poco mas, instale en mi blog un script que cambia la resolucion de pantalla segun el monitor del visitante (cosa que incluso me hizo cargar la imagen de fondo mas rapido que teniendola en el css de la plantilla). Pero ahora quede confundido sobre si realmente sirve o solo es un autoengaño.

En la pagina que nos indicas aqui, luce todo bien, practicamente el fondo de mi blog luce bien en casi todas las resoluciones que nos dan a probar, pero en otras paginas que revise antes, como esta: http://viewlike.us/
Ahi me muestra mi blog solo bien en dos resoluciones, porque mas alla del 1200 el fondo de mi pagina se pierde.

¿Habria alguna otra forma de comprobar esto? aparte de ir y mirar en monitores de todos tamaños, claro :D

Gracias!

JMiur  

A diferencia de otros servicios, lo que hace resizebrowser es "re-dimensionar" la ventana del navegador por lo tanto, lo que ves es lo real. Hay otros servicios que crean capturas de pantalla y allí, el resultado dependerá del sistema que usen.

En concreto, si el blog al que te refieres es este: http://ssydd.blogspot.com/
no se ve imagen de fondo (mi resolución es 1920); se ve un fondo blanco, todo el sitio (excepto el header volcado hacia la izquierda y una barra de desplazamiento en la parte inferior). El script no se ejecuta.

Por otro lado, creo que tiene algunos errores conceptuales ya que estás poniendo que
si (screen.width == 800) ... se muestra una imagen
si (screen.width == 1024) ... se muestra otra
etc, etc

es decir, estas estableciendo tamaños exactos pero, las resoluciones de pantalla tienen muchas variantes: 1366x768, 1024x768, 1280x800, 1280x1024, 1440x900, 1920x1080, 1600x900, 1360x768, 1680x1050, 1024x600, 1152x864 ... si miro las estadísticas de Google Analitycs de este blog, veo 717 tipos de resoluciones diferentes !!!!!!!!!!

Por eso, lo razonable no sería colocar valores fijos sino rangos:
si (screen.width <= 800) ... se muestra una imagen
si (screen.width <= 1024) ... se muestra otra

Además, screen.width te da el valor de la resolución de pantalla pero ese, no es necesariamente el valor del ancho del navegador excepto, si este está maximizado. Por lo tanto, lo que debería hacerse es leer ese otro valor que no se lee del mismo modo en todos los navegadores así que hay que usar una línea de código algo confusa; por ejemplo:

screenWidth = window.innerWidth || (document.documentElement && document.documentElement.clientWidth) || document.body.clientWidth;

y si se quisiera que todo fuera perfecto, debería incluirse alguna clase de función que modifique el fondo cuando se re-dimensiona la ventana del navegador.

Moraleja: A mi juicio, mucho lio; conviene usar CSS background-size o @media aun cuando no funcionen en versiones viejas de IE.

Syd  

Tu respuesta ha sido clara y muy detallada, te agradezco.

Y si, es practicamente imposible cubrir todas las bases con la enorme variedad que hay ahora (717 resoluciones es una brutalidad que ni siquiera sabia que fuera posible). Ademas me hiciste notar el error del script, por mas tonto que suene, no habia notado que cualquier resolucion fuera de las especificadas iba a ser ignorada por el script.

Y dicho todo lo dicho, mas tu gran aclaracion, creo que ha sido el ultimo empujon para decidirme a dejar el fondo limpio, o quiza un mosaico como le mencionas a Gem@; imagenes menos a la plantilla, un script menos y mas equidad en las resoluciones visitantes.

Gracias de nuevo, saludos! :)

JMiur  

Yo tampoco imaginé 717, sabía que eran muchas pero no pensé que eran tantas :D

Lo del script se resuelve con rangos, eso es lo de menos pero, de todos modos, creo que lo mejor es no usar imágenes de fondo grandes porque, simplemente, tardan en cargarse y, en general, salvo casos muy especiales, no suman nada al diseño pero, eso último es absolutamente subjetivo :D

Syd  

Es que se vuelve casi imposible que un dia se cubran todos los huecos para poder darle gusto a tantas pantallas y monitores, 717, mas ve tu a saber cuantas mas habra...

Por lo de mi blog, ya he cambiado a un fondo css con gradiente, y todo bien, solo una cosa, en firefox me sigue apareciendo la barra de desplazamiento abajo, cosa que no me pasa ni con Chrome ni con Safari, y honestamente no tengo idea porque, alguna sugerencia?

Gracias JMiur!

JMiur  

En esta regla hay un error:

#headerwrap {
.......
margin-left: auto;
margin-right: 50px;
}

debes quitar eso de margin-right: 50px; y poner margin-right: auto; aunque en realidad, podrías eliminar ambas propiedades de margn porque carecen de uso.

También convendría que cambiaras la regla:
#wrap {
.......
margin: 40px auto 0 7px;
}

poniendo margin: 40px auto; ya que si no, el blog se ve a la derecha de la pantalla en lugar de centrado.

Syd  

¡Listo! ya esta corregido y ha quedado centrado gracias a tu anotacion :D

Te agradezco tus atenciones, JMiur, ¡saludos!

Responder
Gem@  

Hay personas que se dejan llevar por las estadísticas (yo las odio) no creo nada en ellas. Digo esto, porque hay quien se basa en la resolución que usan las visitas para adaptar la medida del blog a la misma resolución.
Parto de la idea que no se puede tener una resolución a gusto de todo el mundo por lo tanto la tengo a mi necesidad y como digamos que es la media que se van utilizando en los portátiles lo único que puede pasar es que el afortunado que tenga una resolución super pues disfrutará de los fondos que voy cambiando de vez en cuando :)

Por cierto, la herramienta está genial!

JMiur  

Es verdad que no existe ninguna posibilidad de establecer un fondo con una imagen que se vea bien en el 100% de los casos y por eso, en lo personal, creo que los fondos deben ser lisos o usarse mosaicos o cualquier cosa que "no distraiga".

Lo del ancho de los sitios también es cierto; es algo totalmente subjetivo y siempre habrá limitaciones; lo que importa es ser consciente de esas limitaciones y nada más.

Responder
Megan  

interesante, la probaré! ;P


saludos desde Odrew - juegos de mario

Responder
La hormiguita  

Muy bueno estaba justo buscando esto :)
Gracias

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR