Was ist die optimale Webseitenbreite?

Das Entwerfen einer Website und das Einstellen der Breite der Webseite auf eine optimale Breite ist ein Gespräch, das es wert ist, geführt zu werden. Viele von euch haben bemerkt, dass ich kürzlich die Breite des Designs meines Blogs geändert habe. Ich habe die Seitenbreite auf 1048 Pixel verschoben. Einige von euch mögen mit dem Umzug nicht einverstanden sein – aber ich wollte einige Statistiken und Gründe mitteilen, warum ich die Themenbreite so weit getrieben 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 beliebter werden, wollte ich diese Videos in meinen Blog integrieren und sie so detailliert wie möglich darstellen (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, dem Inhalt und der Seitenleiste einige Auffüllungen … also war die magische Zahl für mein Thema 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 ProzentsatzNachdem ich die Bildschirmauflösungen aus meinem Analytics-Paket ausgegeben hatte (in Google ist es Besucher > Browserfunktionen > Bildschirmauflösungen), habe ich eine Excel-Tabelle der Ergebnisse 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 aufgegeben, 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 in der Breite der meisten Browser ist. In diesem Fall sind 99% meiner Leser größer als 640 Pixel breit, also bin ich gut! Ich möchte nicht, dass sie die Seitenleiste völlig verpassen, aber das ist zweitrangig für den Inhalt.

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 Ebon

  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.