Apa itu Lebar Halaman Web Optimal?

Merancang situs web dan mengatur lebar halaman web ke lebar yang optimal adalah percakapan yang berharga. Banyak dari Anda memperhatikan bahwa saya baru-baru ini mengubah lebar desain blog saya. Saya mendorong lebar halaman menjadi 1048 piksel. Beberapa dari Anda mungkin tidak setuju dengan pemindahan ini - tetapi saya ingin membagikan beberapa statistik dan alasan mengapa saya mendorong lebar tema begitu lebar.

1048 piksel bukanlah angka acak.

Ada dua pengaruh utama dalam memperluas lebar halaman saya:

  • Ubah Lebar YoutubeYoutube menawarkan ukuran sematan yang lebih besar sekarang. Jika Anda mengklik roda gigi kecil di sidebar halaman video Youtube, Anda ditawarkan opsi untuk ukuran yang lebih besar serta temanya. Karena video definisi tinggi menjadi tempat umum di Youtube, saya ingin memasukkan video tersebut ke dalam blog saya dan menampilkannya sedetail mungkin (tanpa menghabiskan seluruh lebar halaman).
  • Iklan tipikal hadir dalam lebar 125, 250, dan 300 piksel. 300 piksel tampaknya semakin banyak bermunculan di situs pendapatan iklan dan saya ingin memasukkannya dengan rapi ke sidebar saya.

Dan tentu saja, ada beberapa padding di kiri dan kanan halaman, konten, dan sidebar… jadi angka ajaibnya adalah 1048 piksel untuk tema saya:

Lebar Situs Web yang Optimal

Apakah saya memeriksa statistik pembaca saya?

Ya tentu saja! Jika mayoritas pengunjung saya menjalankan layar beresolusi rendah, saya pasti akan berubah pikiran tentang memperluas halaman saya. Lebar dan PersentaseSetelah mengeluarkan resolusi layar dari paket Analytics saya (Di Google, Pengunjung> Kemampuan Browser> Resolusi Layar), saya membuat spreadsheet Excel dari hasil dan mengurai lebar dari bidang resolusi.

Google memberikan resolusi sebagai 1600 × 1200, jadi Anda perlu mengambil semuanya dari kiri "x", mengalikannya dengan 1 untuk membuatnya menjadi hasil numerik sehingga Anda dapat mengurutkan turun, lalu melakukan SUMIF dan melihat berapa banyak kunjungan lebih besar dari atau kurang dari lebar desain yang Anda lihat.

= KIRI (A2, TEMUKAN ("x", A2,1) -1) * 1

Apakah saya mengabaikan 22% pembaca yang menjalankan resolusi yang lebih kecil? Tentu saja tidak! Hal yang menyenangkan tentang tata letak dengan konten Anda di kiri dan sidebar kanan Anda adalah Anda dapat memastikan bahwa konten Anda masih dalam lebar sebagian besar browser. Dalam kasus ini, 99% pembaca saya menjalankan lebih dari 640 piksel, jadi saya baik-baik saja! Saya tidak ingin mereka benar-benar melewatkan sidebar, tapi itu sekunder dari kontennya.

9 Komentar

  1. 1

    Saya menyarankan tata letak hybrid dan lebar wadah CSS 100%. Selama Anda memiliki lebar tetap untuk sidebar, header, footer, dan area konten utama akan menyesuaikan agar sesuai dengan lebar layar yang tersisa. Memenuhi 100% jendela browser semua orang, terlepas dari resolusi monitor pengguna. Maka Anda tidak perlu menghitung piksel lagi atau melacak statistik pengguna terkait resolusi monitor.

    • 2

      Saya sangat suka tata letak hybrid, Bob - tapi sayangnya mereka terkadang tidak cocok dengan konten yang sebenarnya. Mungkin saya malas, tapi lebih mudah bagi saya untuk mengetahui bahwa maks dan min adalah 640px di situs saya. Peregangan sulit untuk dipahami saat saya menulis postingan.

      Kurasa hanya preferensi pribadi!

  2. 3

    Pada dasarnya, saya setuju dengan kesimpulan Anda, tetapi jika saya menggunakan pengaturan lebar tetap, saya membatasi lebar menjadi 960 piksel.

    Seseorang harus memperhitungkan bilah gulir vertikal dan bilah pintasan browser lainnya yang membutuhkan lebar tambahan. Dengan tetap berada dalam 960 piksel, dipastikan bahwa tidak ada pengguliran kiri ke kanan pada resolusi layar selebar 1024 piksel.

    Andy Ebon

  3. 4
  4. 5
  5. 6

    Karena Anda sudah mendapatkan disetel ke 1048px, situs Anda menyebabkan bilah gulir horizontal pada layar 1024. Saya pikir akan lebih baik untuk skim 100px dari lebar (dan padding) sidebar dan area konten Anda sehingga cocok pada 728 × 1024. Itulah praktik terbaik hari ini.

    Satu-satunya kasus yang menentang hal ini adalah jika angka analitik mendukungnya ... tetapi karena Anda tidak memberikan data itu di artikel Anda, saya akan mengatakan bahwa desain halaman Anda cacat.

  6. 7
  7. 8

    Pria konyol
    Tidak semua orang menggunakan setiap jendela pada layar penuh - pada kenyataannya, saya yakin hanya sedikit yang melakukannya. 

    Saya memiliki blog Anda dalam 80% windo… dan itu dia, scroll bar horizontal

    Dan apa yang ada di layar… mari kita lihat… tidak ada.

    Jadi scroll bar Anda tidak ada gunanya.

    Salah satu cara mudah untuk kehilangan pembaca !!

    • 9

      Konten dipusatkan di dalam halaman @ heenan73: disqus, memberikan pembaca apa yang mereka butuhkan. Jika saya kehilangan pembaca karena mereka berdua dapat melihat konten DAN melihat scrollbar horizontal… tidak yakin mereka adalah pembaca yang saya cari. Pasti ada sesuatu yang unik dalam konten kami yang mendorongnya ke 1217px jadi saya akan melacaknya dan memperbaikinya. Posting ini sebenarnya ditulis tentang tema sebelumnya. Terima kasih telah memberitahukannya kepada saya!

Bagaimana menurut Anda?

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.