Berapa lebar standar untuk situs web dalam piksel atau di mana statistik?

Tidak ada standar, meskipun sebagian besar pengembang menganggap 1024x768 sebagai standar.

Ada sistem grid CSS bernama 960grid yang menganggap lebar tubuh sebagai 960px, kemudian memecah kolom dalam 96 kolom dengan 10px, atau 80 dengan 12px.

Masalahnya adalah: Layar PC semakin besar dan lebih besar selalu, lambat di beberapa daerah tetapi sedang.

Di sisi lain, di puncak teknologi, Anda memiliki layar yang lebih kecil di perangkat seluler dan netbook.

Menghadapi kenyataan ini bisa menyakitkan. Ada Permintaan Media CSS untuk menyelamatkan. Atau, Anda dapat menggunakan tautan tag (dengan rel genggam) untuk memberikan versi alternatif ke perangkat seluler.

Ikuti beberapa tautan referensi untuk Anda

• http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
• http://www.alistapart.com/articles/responsive-web-design/
• http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#rel-alternate
• http://dev.w3.org/csswg/css3-mediaqueries/

Berapa lebar standar untuk situs web dalam piksel?

Angka apa pun yang lebih besar dari 0 dan kurang dari tak terbatas.

Praktik terbaik saat ini untuk Desain Web Responsif (RWD) adalah untuk mendukung setiap perangkat terlepas dari lebar pikselnya. Biasanya ini melibatkan penggunaan kueri media untuk memberikan gaya yang berbeda untuk rentang ukuran layar yang berbeda. Rentang sebenarnya menggunakan materi kurang dari desain yang konsisten di seluruh ukuran, dan situs mempertahankan fungsi di seluruh ukuran.

Pengguna sangat mungkin melihat ukuran layar yang berbeda tanpa berpikir banyak tentang hal itu, jadi Anda ingin meminimalkan jumlah kejutan ketika mereka menyeret jendela untuk berlabuh di setengah layar mereka, atau kebetulan memiringkan ponsel mereka.

Beberapa rentang lebar yang umum digunakan adalah:

• ekstra kecil : 0-480
• kecil : 480- 768
• sedang : 768-1024
• besar : 1024-1200
• ekstra besar : 1200+

Rentang ini sangat umum sehingga saya bisa mengatakan mereka praktis standar. Tidak semua rentang perlu digunakan, misalnya situs mungkin lebar fluida untuk apa pun di bawah 768 dan kemudian tetap lebar dan dipusatkan untuk 768+.

Dengan semua itu, perlu diketahui bahwa angka yang Anda gunakan tidak terlalu penting selama situs itu berfungsi pada perangkat apa pun yang dipilih pengguna untuk melihatnya.

di mana statistik?

Sekarang untuk bagian yang rumit, data aktual. Jika Anda mendesain ulang situs, satu-satunya data yang penting adalah milik Anda. Apa Wikipedia atau Stack Overflow, atau Google, atau-lain-besar-situs-yang-kekuatan-daftar-analisis-data yang mengatakan tidak relevan untuk Anda data untuk Anda situs.

Jika statistik Anda menunjukkan sebagian besar pengguna terutama menggunakan rentang lebar perangkat tertentu, Anda mungkin harus fokus melayani pengguna tersebut terlebih dahulu. Itu semua mengatakan, Jika desain Anda responsif dengan benar Anda tidak perlu fokus pada ukuran tertentu sama sekali.

Untuk situs web atau situs baru yang sebelumnya tidak memiliki analitik, pertimbangkan untuk menggunakan pendekatan mobile-first, dan pastikan untuk menggunakan analitik sehingga Anda dapat beradaptasi dengan baik dengan basis pengguna Anda.

Versi Pra-RWD Tua dan Kadaluarsa untuk Sake Posterity

Saya terkejut bahwa tidak ada orang lain yang berpikir untuk menyebutkan ukuran browser oleh google .

Adapun standar:

80% pemirsa dapat menangani hingga 1000px lebar, tetapi yang dapat menangani lebih dari 1000px sering tidak. Dengan monitor layar lebar banyak orang akan menyelaraskan jendela mereka ke setengah layar. Sekarang Win7 mendukung drag-n-dock, kemungkinan itu akan menjadi lebih populer.

Adapun ketinggian: kesan pertama Anda kepada pengguna adalah di bagian atas halaman hingga sekitar ~ 600px. Namun, sebagian besar pengguna tahu dan berharap konten akan jatuh "di bawah flip" dan bersedia dan dapat menggulir.

Jika Anda ingin lebih lebar dari 1000px, saya sangat merekomendasikan tata letak yang lancar sehingga pengguna di netbook dan layar yang lebih kecil masih dapat melihat konten dengan benar.

~ 960px cenderung menjadi lebar standar, tetapi sebenarnya tergantung pada konten dan gaya.

Saya membuat tes kecil tahun lalu menggunakan Google Analytics untuk mengetahui apa yang rata - rata lebar dan tinggi browser dalam (apa yang sebenarnya dilihat pengguna).

Seperti yang orang lain katakan, tidak ada standar untuk hal semacam ini. Meskipun demikian, berikut adalah beberapa tips yang akan membuat atau mengerem situs web Anda:

Saya selalu menggunakan persentase atau versi skenario terburuk: resolusi layar terkecil yang biasa Anda temui adalah 800x600, dan bahkan itu jarang terjadi. Apa pun di bawah ini yang mungkin ada di perangkat seluler. Lebar 775px adalah media yang baik untuk digunakan, atau hanya 80% jika Anda tahu pasti situs web Anda masih akan memiliki daya tarik ketika ditingkatkan ke layar yang lebih besar. Masalah paling umum adalah bahwa konten teks (Ketika diperkecil ke lebar 1600px) tampak kosong dan pendek. Memiliki situs web Anda dengan lebar 775px akan memperbaikinya, namun mungkin tidak terlihat bagus dengan ruang terbuka besar di kedua sisi.

JANGAN PERNAH membuat pengguna Anda menggulir ke kiri atau kanan. Memotong konten pihak adalah cara tercepat untuk kehilangan pelanggan potensial atau pembaca.

Miliki navigasi Anda di suatu tempat dekat bagian atas atau di tempat di mana pengguna tidak perlu menggulir untuk menemukannya.

Dan hanya tip konten; baik memiliki grafis tinggi / informasi rendah atau informasi tinggi / grafis rendah. Mencoba menggabungkan keduanya selalu terlihat mengerikan.

Standarnya adalah "selebar / setinggi mungkin". Itu tergantung pada layar pengguna:

http://www.w3schools.com/browsers/browsers_display.asp

Sangat membantu untuk mengetahui bagaimana resolusi layar populer dan kemudian mendasarkan templat Anda berdasarkan pada penggunaan umum oleh mayoritas ... Secara pribadi saya sarankan menggunakan Desain Responsif - dengan cara itu situs Anda berfungsi untuk semua perangkat dan semua resolusi.

Mulai Januari 2013.

1. 1366x768 25,4%

2. 1920x1080 11.0%

3. 1280x1024 9,7%

4. 1440x900 7,3%

5. 1280x800 8,2%

6. 1680x1050 5,7%

7. 1600x900 5.0%

8. 1920x1200 2,9%

9. 1360x768 2.1%

10. 2560x1440 1.1%

11. Lainnya 11,6%

Google Analytics mencatat resolusi layar pengunjung. Anda dapat dengan mudah membuat laporan khusus untuk memeriksa berapa ukuran layar umum pengunjung Anda . Berikut ini adalah statistik (15 teratas) untuk situs web saya untuk Mei 2013:

Rank     Resolution    % of Visits
----     ----------    -----------
   1     1366x768            23.0%
   2     1920x1080           17.7%
   3     1440x900             8.4%
   4     1280x1024            8.4%
   5     1680x1050            7.1%
   6     1280x800             6.9%
   7     1600x900             6.0%
   8     1920x1200            4.7%
   9     1024x768             4.4%
  10     2560x1440            2.3%
  11     1360x768             2.1%
  12     1280x768             1.0%
  13     1600x1200            0.7%
  14     1280x720             0.7%
  15     1152x864             0.5%

Statistik bervariasi dari situs ke situs tergantung pada jenis lalu lintas yang diterima sehingga desain sesuai. Saya sendiri lebih suka desain fluid dengan prosentase lebar, 1000px min-widthdan masuk akal max-width.

Sebenarnya tidak ada yang namanya standar, dan statistik sepenuhnya tergantung pada demografi target. Bertujuan untuk orang-orang teknis umumnya akan menghasilkan perangkat keras yang lebih baik dan resolusi yang lebih tinggi, kurang teknis sebaliknya. Tetapi kemudian ada telepon, netbook dll yang memiliki resolusi lebih rendah secara signifikan daripada norma dalam kebanyakan kasus.

Untuk referensi, saya biasanya mengasumsikan minimum 1024x768 sekarang.

Dalam beberapa kasus berikut adalah beberapa: http://www.w3schools.com/browsers/browsers_display.asp http://www.w3counter.com/globalstats.php

Saya pikir, itu tergantung pada konten situs web.

Misalnya jika Anda tidak memerlukan bilah sisi apa pun, dll, dan jika Anda menyukai desain minimal, Anda dapat mengatur lebar halaman web menjadi 500px.

Jadi, saya tidak percaya (dan tidak suka) standar tentang ukuran tata letak web.

960 piksel adalah yang paling aman, karena bekerja pada layar 1024x768 dan menyisakan ruang untuk bilah gulir, dan juga bekerja pada iPhone dalam mode lansekap (karena piksel menggandakan layar 480x320 menjadi 960x640 yang efektif, dan tidak memiliki scroll bar).

Mengingat bahwa sebagian besar monitor layar lebar saat ini memiliki resolusi "1440x900" atau lebih lebar, saya akan berpikir bahwa lebar 1280-pixel menjadi lebih "standar" terutama ketika datang untuk menampilkan gambar.

CATATAN: Lebar 1280-piksel adalah lebar dari banyak rasio 4: 3 yang lebih tua, layar 17 inci dan 19 inci.

960 piksel adalah lebar terbaik untuk situs