Bildschirmauflösung ≠ Browser Fenster

Als ich das hier getwittert und dann das hier folgte, erhielt ich Kommentare wie diesen hier. Dieser Kommentar hat einen absolut berechtigten Punkt.

Wir sprechen oft von Bildschirmauflösung, was nicht die relevante Statistik ist, wenn wir über den verfügbaren Platz für die Besucher unserer Website nachdenken. Die relevante Statistik ist die Größe des Browserfensters. Warum sprechen wir also so viel über Bildschirmauflösung? Nun, wahrscheinlich weil in der weltweit beliebtesten Analysesoftware, Google Analytics, dies die einzige Information ist, die Sie erhalten.

(Das Google Analytics-Team weiß darum)

Und was sollen wir also tun? Nun, zum einen anfangen, die Browsergröße zu messen.

Aber zuerst ein Wort.

Was, wenn wir alle möglichen Daten über die Browsergrößen unserer Besucher herausfinden würden? Was ist mit diesen Daten zu tun, wenn wir sie einmal haben? Wenn @beep uns etwas gelehrt hat, dann ist es, dass wir uns an Browser jeder Form und Größe anpassen können und sollten.

Aber trotzdem, Informationen zu haben ist niemals schlecht. Klügere Männer und Frauen als ich mögen Dinge sehen, die ich nicht sehe, und vernünftige Maßnahmen basierend auf diesen Daten ergreifen.

Daten erfassen

Da Google Analytics uns derzeit nicht helfen kann, müssen wir selbst etwas JavaScript auf der Seite ausführen, um die Daten zu erhalten. jQuery erleichtert das Messen von Größen sowie das Erstellen eines Ajax-Aufrufs, um die Daten an ein Skript zu senden, das sie speichern kann.

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

Jetzt brauchen wir nur noch das Skript savedata.php, das bereit ist, diese Daten zu empfangen und zu speichern. Zuerst brauchen wir eine Datenbank, also hier ist eine einfache Struktur dafür.

Ich bin kein MYSQL-Experte, aber das ist, was der Export der Struktur aus phpMyAdmin mir geliefert hat.

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 ;

Und jetzt mein extrem primitives Skript zum Speichern der POST-Anfragen.

<?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);

?>

Das habe ich einen Tag lang auf CSS-Tricks gemacht. Wenn Sie möchten, hier sind die gesammelten vollständigen Daten als SQL.

Ergebnisse betrachten

Denken Sie daran: Alle diese Daten wurden von css-tricks.com gesammelt. Es sind also wahrscheinlich eine Menge Designer-Nerds. Sie sind nur für diese Seite und Seiten mit sehr ähnlichen Zielgruppen relevant.

Zuerst die langweiligen Bildschirmauflösungsdaten. Ich habe sie erhalten, indem ich 500 zufällige Datenstichproben abgefragt und Divs dieser Größe übereinander gelegt habe, mit einem so hellen Grau, wie ich es machen konnte. Zufälligerweise ist es rgba(0,0,0,0.004), weil rgba(0,0,0,0.003) reines Weiß ist (seltsam).

Beachten Sie die eher harten Linien. Monitore gibt es nur in wenigen Größen. Das ist logisch. Hier ist, was passiert, wenn wir dasselbe mit Browserfenstergrößen machen.

Viel unschärfer. Auch logisch. Selbst während ich das hier schreibe, ist mein Browser in einer sehr willkürlichen Größe, wahrscheinlich etwa 80% meiner Bildschirmauflösung. Klicken Sie auf die Bilder oben, um sie größer zu sehen. Sie werden feststellen, dass, wo immer sichtbare harte Kanten in der Version der Browsergröße vorhanden sind, diese genau 20 Pixel schmaler sind als ihr Gegenstück zur Bildschirmgröße. Interessant.

Wenn wir die Bildschirmgrößen rot und die Browsergrößen grün einfärben und sie übereinander legen, erhalten wir Folgendes.

Beachten Sie an den Außenrändern bleibt die Tönung rot. Nicht viele Leute mit extrem breiten Monitoren haben ihr Browserfenster so breit geöffnet. Ich weiß, dass ich das nicht tue. Sehen wir uns die Statistiken für "Vollbild"-Browser an. Wie viele Leute browsen im Vollbildmodus oder mit ihrem Browserfenster "maximiert", sozusagen. Nun, wenn Sie nur Einträge abfragen, bei denen Fenster und Bildschirmauflösung genau gleich sind, sind es sehr wenige, weniger als 1%, aber es wird interessant.

Vollständig im Vollbildmodus	0.85%
Innerhalb von 50px vom Vollbildmodus	1.06%
Innerhalb von 100px vom Vollbildmodus	9.67%
Innerhalb von 200px vom Vollbildmodus	61.18%

Also browsen sehr wenige Leute im Vollbildmodus, aber die Mehrheit der Leute browsen ziemlich nah am Vollbildmodus. Spekulativ ist es wahrscheinlich die Windows-Leute, die im Vollbildmodus surfen, da dies auf diesem Betriebssystem ein natürlicheres Verhalten ist. Aber jetzt ist "Vollbild" eine große Sache in OS X Lion, vielleicht wird sich das auf diese Dinge auswirken.

Wenn wir diese Dinge aufschlüsseln und den gesamten Datensatz verwenden, hier ist eine Möglichkeit, ihn aufzuteilen.

Breitenbereich	Browserfenster	Bildschirmauflösung
0px – 500px	1.13%	1.02%
501px – 800px	2.01%	1.06%
801px – 1000px	2.84%	0.07%
1001px – 1200px	14.91%	6.86%
1201px – 1400px	40.65%	35.57%
1401px – 1600px	17.38%	17.17%
1601px – 2000px	20.41%	34.34%
2000px+	0.66%	3.91%

Wo ist also das Mobile in all dem? Trotz Berichten über massives Wachstum beim mobilen Surfen, was ich nicht bezweifle, hat CSS Tricks sehr wenig mobilen Traffic.

Fassen wir es mit einigen schnellen Hits zusammen.

• Die beliebteste Bildschirmauflösung ist 1680 x 1050 mit fast 13% der Besuche, bei denen ein Monitor dieser Größe vorhanden ist.
• Vorhersehbar gibt es keine Browserfenstergröße, die weit über allen anderen liegt, aber führend ist 1349 x 667 mit 0,75% der Besuche.
• Das beliebteste Seitenverhältnis für Bildschirmauflösungen ist 16:10 mit 46% der Besuche. Vielleicht, weil viel Video 16:9 ist und Monitorhersteller wollten, dass die Leute das sehen, aber immer noch Platz für etwas Betriebssystem-Chrome haben? 16:9 ist als nächstes mit 29%, 5:4 mit 12% und 4:3 mit 8%.
• Alle diese Seitenverhältnisse sind breiter als hoch. Es stellt sich heraus, dass nur 2% der Besucher Bildschirme haben, die höher als breit sind (oder zumindest so berichten).
• Tatsächliche Browserfenster sind ebenfalls tendenziell breiter als hoch, wobei nur 3% der Besuche Abmessungen aufweisen, die höher als breit sind.
• Durchschnittliche Pixel pro Bildschirm = 1.539.515
• Durchschnittliche Bildschirmauflösung = 1526 x 967
• Durchschnittliche Browserfenstergröße = 1366 x 784

Großer Dank

An Jamie Bicknell von Rentedsmile Web Design dafür, dass er mir geholfen hat, die MYSQL-Abfragen und PHP zusammenzufügen, die benötigt wurden, um sinnvolle Dinge mit den Daten zu tun.