Resolución de pantalla ≠ Ventana del navegador | Programar Plus

0

Cuando yo tuiteó esto y luego seguí con esto, recibí comentarios como este. Ese comentario tiene un punto perfectamente válido.

A menudo hablamos de resolución de pantalla, que no es la estadística relevante cuando pensamos en qué espacio tienen disponible los visitantes de nuestro sitio web. La estadística relevante es tamaño de la ventana del navegador. Entonces, ¿por qué hablamos tanto de resolución de pantalla? Bueno, probablemente porque en el software de análisis más popular del mundo, Google Analytics, son los únicos datos que obtiene.

(El equipo de Google Analytics es consciente de esto)

Entonces, ¿qué vamos a hacer? Bueno, empieza a medir el tamaño del navegador, por ejemplo.

Pero primero, una palabra.

¿Qué pasaría si averiguamos todo tipo de datos sobre el tamaño de los navegadores de nuestros visitantes? ¿Qué hacer con estos datos una vez que los tengamos? Si @bip nos ha enseñado algo, es que podemos y debemos adaptarnos a navegadores de cualquier forma y tamaño.

Pero aún así, tener información nunca es algo malo. Los hombres y mujeres más inteligentes que yo pueden ver cosas que yo no veo y pensar en acciones razonables a tomar en función de estos datos.

Obteniendo los datos

Dado que Google Analytics no puede ayudarnos actualmente, necesitaremos ejecutar algo de JavaScript en la página para obtener los datos. jQuery facilita la medición de tamaños, así como la realización y la llamada Ajax para POSTAR los datos en un script que puede guardarlos:

$.ajax({
  type: "POST",
  url: "/savedata.php",
  data: {
    width        : $(window).width(),
    height       : $(window).height(),
    screen_width : screen.width,
    screen_height: screen.height
  }
});

Ahora solo necesitamos ese guión savedata.php estar listo para aceptar y guardar esos datos. Primero necesitamos una base de datos, así que aquí hay una estructura simple para una:

No soy un experto en MYSQL, pero esto es lo que me dio la exportación de la estructura de phpMyAdmin:

CREATE TABLE `data` (
  `id` int(11) NOT NULL auto_increment,
  `width` int(11) NOT NULL,
  `height` int(11) NOT NULL,
  `screen_width` int(11) NOT NULL,
  `screen_height` int(11) NOT NULL,
  KEY `id` (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=72141 DEFAULT CHARSET=utf8 AUTO_INCREMENT=72141 ;

Y ahora mi malvado script primitivo para guardar los POST:

<?php

	$dbhost="localhost";
	$dbuser="db_user_name";
	$dbpass="db_password";
	
	$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql');
	
	$dbname="db_name";
	mysql_select_db($dbname);
		
	$width         = mysql_real_escape_string($_POST['width']);
	$height        = mysql_real_escape_string($_POST['height']);
	$screen_width  = mysql_real_escape_string($_POST['screen_width']);
	$screen_height = mysql_real_escape_string($_POST['screen_height']);
	
	$sql = "INSERT INTO data ( width,  height,  screen_width,  screen_height)
	      VALUES           ($width, $height, $screen_width, $screen_height)";
	
	if (!mysql_query($sql, $conn)) {
		die("Error:" . mysql_error());
	}
	
	echo "1 Record Added";
		
	mysql_close($conn);

?>

Eso es lo que hice en Programar Pluspor un día. Si lo desea, aquí están los datos completos que recopilé como SQL.

Mirando los resultados

Recordar: TODOS estos datos se recopilaron de css-tricks.com. Así que probablemente sean un montón de diseñadores nerds. Solo es relevante para este sitio y sitios con audiencias muy similares.

Primero, los aburridos datos de resolución de pantalla. Obtuve esto consultando 500 muestras aleatorias de datos y colocando div’s de ese tamaño uno encima del otro con la mayor cantidad de gris claro que pude. Incidentalmente, su rgba(0,0,0,0.004), porque rgba(0,0,0,0.003) es blanco puro (raro).

Observe las líneas bastante duras. Los monitores solo vienen en ciertos tamaños. Tiene sentido. Sin embargo, esto es lo que sucede cuando hacemos lo mismo con los tamaños de las ventanas del navegador:

Mucho más borroso. También tiene sentido. Incluso mientras escribo esto, mi navegador tiene un tamaño muy arbitrario, probablemente alrededor del 80% de la resolución de mi pantalla. Haga clic en esas imágenes de arriba para verlas más grandes. Notarás que, independientemente de los bordes duros visibles que haya en la versión del tamaño del navegador, son exactamente 20px más estrechos que la contraparte del tamaño de la pantalla. Interesante.

Si tinte los tamaños de pantalla de rojo y los tamaños de navegador de verde y los coloco uno encima del otro, esto es lo que obtenemos:

Observe que en los bordes exteriores el tinte permanece rojo. No muchas personas que tienen monitores extremadamente anchos tienen la ventana del navegador tan abierta. Yo se que no Veamos las estadísticas de los navegadores de “pantalla completa”. Cuántas personas navegan a pantalla completa, o con la ventana del navegador “maximizada”, por así decirlo. Bueno, si consulta solo las entradas donde la ventana y la resolución de la pantalla son exactamente iguales, muy pocas, menos del 1%, pero es interesante:

Pantalla totalmente completa 0,85%
Dentro de 50px de pantalla completa 1,06%
Dentro de 100 px de pantalla completa 9,67%
Dentro de 200 px de pantalla completa 61,18%

Muy pocas personas navegan en pantalla completa, pero la mayoría navega bastante cerca de la pantalla completa. Como especulación, es probable que la gente de Windows sea la que navegue en pantalla completa, ya que ese es un comportamiento mucho más natural en ese sistema operativo. Pero ahora “pantalla completa” es un gran problema en OS X Lion, tal vez eso comience a afectar estas cosas.

Si colocamos estas cosas en un margen y usamos el conjunto de datos completo, aquí hay una forma de desglosarlo:

Rango de ancho Ventana del navegador Resolución de la pantalla
0px – 500px 1,13% 1,02%
501px – 800px 2,01% 1,06%
801 px – 1000 px 2,84% 0,07%
1001 px – 1200 px 14,91% 6,86%
1201px – 1400px 40,65% 35,57%
1401 px – 1600 px 17,38% 17,17%
1601px – 2000px 20,41% 34,34%
2000px + 0,66% 3,91%

Entonces, ¿dónde está el móvil en todo esto? A pesar de los informes de un crecimiento masivo en la navegación móvil, que no dudo, CSS Tricks tiene muy poco tráfico móvil.

Terminemos con algunos golpes rápidos:

  • La resolución de pantalla más popular es 1680 x 1050 y casi el 13% de las visitas tiene un monitor de ese tamaño.
  • Como era de esperar, no hay un tamaño de ventana de navegador que esté muy por encima de todos los demás, pero el líder del grupo es 1349 x 667 con el 0,75% de las visitas.
  • La relación de resolución de pantalla más popular es 16:10 y el 46% de las visitas la tiene. ¿Quizás porque muchos videos son 16: 9 y los fabricantes de monitores querían que la gente lo viera, pero todavía tienen espacio para algunos sistemas operativos Chrome? 16: 9 es el siguiente con 29%, 5: 4 con 12% y 4: 3 con 8%.
  • Todas esas proporciones son más anchas que altas. Resulta que solo el 2% de los visitantes tienen pantallas que son más altas que anchas (o al menos eso informa de esa manera).
  • Las ventanas reales del navegador también tienden a ser más anchas que altas, y solo el 3% de las visitas tienen dimensiones que son más altas que anchas.
  • Número medio de píxeles por pantalla = 1,539,515
  • Resolución de pantalla promedio = 1526 x 967
  • Tamaño medio de la ventana del navegador = 1366 x 784

Muchas gracias

A Jamie Bicknell de Rentedsmile Web Design por ayudarme a lidiar con las consultas MYSQL y PHP necesarias para hacer algo útil con los datos.