Was ist die optimale Webseitenbreite?

Das Entwerfen einer Website und das Einstellen der Webseitenbreite auf eine optimale Breite ist ein Gespräch, das sich lohnt. Vielen von Ihnen ist aufgefallen, dass ich kürzlich die Breite des Designs meines Blogs geändert habe. Ich habe die Seitenbreite auf 1048 Pixel verschoben. Einige von Ihnen sind vielleicht nicht mit dem Umzug einverstanden - aber ich wollte einige Statistiken und Gründe mitteilen, warum ich die Themenbreite so weit verschoben habe.

1048 Pixel waren jedoch keine Zufallszahl.

Es gab zwei wichtige Einflüsse beim Erweitern meiner Seitenbreite:

  • Ändern Sie die Youtube-BreiteYoutube bietet jetzt größere Einbettungsgrößen an. Wenn Sie auf das kleine Zahnrad in der Seitenleiste der Youtube-Videoseite klicken, werden Ihnen Optionen für größere Größen sowie das Thema angeboten. Da Videos mit höherer Auflösung auf Youtube immer häufiger vorkommen, wollte ich diese Videos in mein Blog integrieren und so detailliert wie möglich anzeigen (ohne die gesamte Seitenbreite zu verbrauchen).
  • Typische Werbung gibt es in Breiten von 125, 250 und 300 Pixel. 300 Pixel scheinen immer mehr auf Websites mit Werbeeinnahmen aufzutauchen, und ich wollte sie ordentlich in meine Seitenleiste integrieren.

Und natürlich gibt es links und rechts auf der Seite, im Inhalt und in der Seitenleiste einige Auffüllungen. Die magische Zahl für mein Thema betrug also 1048 Pixel:

Optimale Website-Breite

Habe ich meine Leserstatistik überprüft?

Ja natürlich! Wenn ein Großteil meiner Besucher Bildschirme mit niedrigerer Auflösung verwenden würde, hätte ich mir definitiv Gedanken darüber gemacht, meine Seite zu erweitern. Breite und ProzentsatzNach der Ausgabe der Bildschirmauflösungen aus meinem Analytics-Paket (in Google sind es Besucher> Browserfunktionen> Bildschirmauflösungen) habe ich eine Excel-Tabelle mit den Ergebnissen erstellt und die Breite aus dem Auflösungsfeld analysiert.

Google bietet eine Auflösung von 1600 × 1200. Sie müssen also alles links vom „x“ nehmen, mit 1 multiplizieren, um ein numerisches Ergebnis zu erhalten, damit Sie absteigend danach sortieren können. Führen Sie dann eine SUMIF aus und sehen Sie, wie viele Besuche Sie durchführen sind größer oder kleiner als die Designbreite, die Sie betrachten.

= LINKS (A2, FINDEN ("x", A2,1) -1) * 1

Habe ich die 22% der Leser verlassen, die eine kleinere Auflösung verwenden? Natürlich nicht! Das Schöne an einem Layout mit Ihrem Inhalt links und Ihrer Seitenleiste rechts ist, dass Sie sicherstellen können, dass Ihr Inhalt immer noch innerhalb der Breite der meisten Browser liegt. In diesem Fall sind 99% meiner Leser mehr als 640 Pixel breit, also bin ich gut! Ich möchte nicht, dass sie die Seitenleiste komplett verpassen, aber das ist dem Inhalt untergeordnet.

9 Kommentare

  1. 1

    Ich schlage ein Hybrid-Layout und eine CSS-Containerbreite von 100% vor. Solange Sie eine feste Breite für die Seitenleiste haben, werden die Bereiche Kopfzeile, Fußzeile und Hauptinhalt an die verbleibende Breite des Bildschirms angepasst. Füllt 100% des Browserfensters aller Benutzer aus, unabhängig von der Monitorauflösung des Benutzers. Dann müssen Sie keine Pixel mehr zählen oder Benutzerstatistiken bezüglich der Monitorauflösung verfolgen.

    • 2

      Ich mag Hybrid-Layouts sehr, Bob - aber leider spielen sie manchmal nicht gut mit dem eigentlichen Inhalt. Vielleicht bin ich faul, aber es fällt mir leichter zu wissen, dass Max und Min auf meiner Website 640px sind. Stretching ist schwer vorstellbar, wenn ich die Beiträge schreibe.

      Nur eine persönliche Präferenz, denke ich!

  2. 3

    Im Wesentlichen stimme ich Ihrer Schlussfolgerung zu, aber wenn ich ein Setup mit fester Breite verwende, beschränke ich die Breite auf 960 Pixel.

    Man muss vertikale Bildlaufleisten und andere Browser-Verknüpfungsleisten berücksichtigen, die zusätzliche Breite einnehmen. Wenn Sie innerhalb von 960 Pixel bleiben, können Sie sicher sein, dass bei einer Bildschirmauflösung von 1024 Pixel kein Scrollen von links nach rechts erfolgt.

    Andy Eben

  3. 4
  4. 5
  5. 6

    Da hast du deine Bei einer Einstellung von 1048px verursacht Ihre Site horizontale Bildlaufleisten auf einem 1024-Bildschirm. Ich denke, es wäre besser gewesen, die Breite (und den Abstand) Ihrer Seitenleiste und Ihres Inhaltsbereichs um 100 Pixel zu verringern, damit sie auf eine 728 × 1024 passt. Das ist heute die beste Vorgehensweise.

    Der einzige Fall dagegen wäre, wenn die Analysenummern dies unterstützen. Da Sie diese Daten jedoch nicht in Ihrem Artikel angegeben haben, würde ich sagen, dass Ihr Seitendesign fehlerhaft ist.

  6. 7
  7. 8

    Dummkopf
    Nicht jeder nutzt jedes Fenster im Vollbildmodus - tatsächlich würde ich wetten, dass nur wenige dies tun. 

    Ich habe Ihr Blog in einem 80% Windo… und da ist es, eine horizontale Bildlaufleiste

    Und was ist nicht auf dem Bildschirm ... mal sehen ... nichts.

    Ihre Bildlaufleiste ist also sinnlos.

    Ein einfacher Weg, um Leser zu verlieren !!

    • 9

      Der Inhalt ist auf der Seite @ heenan73: disqus zentriert und bietet dem Leser genau das, was er benötigt. Wenn ich Leser verliere, weil sie sowohl den Inhalt als auch eine horizontale Bildlaufleiste sehen können, bin ich mir nicht sicher, ob sie die Leser sind, nach denen ich suche. Es gibt definitiv etwas Einzigartiges in unserem Inhalt, das es auf 1217px bringt, also werde ich das aufspüren und es beheben. Dieser Beitrag wurde tatsächlich über ein vorheriges Thema geschrieben. Vielen Dank, dass Sie mich darauf aufmerksam gemacht haben!

Was denken Sie?

Diese Seite verwendet Akismet, um Spam zu reduzieren. Erfahren Sie, wie Ihre Kommentardaten verarbeitet werden.