Apakah ada ukuran standar untuk lebar situs web di mockup? Berapa ukurannya? Mengapa?

Saya memulai sebagian besar mockup saya pada lebar 1200px meskipun saya sedang merancang untuk resolusi 1024px. Saya mengatur panduan dalam mockup untuk 1000px. Tingginya bisa bervariasi. Alasan saya membuat file mockup saya lebih luas adalah untuk melihat bagaimana rasanya desain dengan ruang bernapas di sekitarnya. Sebagian besar orang menggunakan lebih tinggi dari 1024px hari ini.

Apakah ada lebar standar untuk merancang maket halaman web?

Ya Tidak mungkin?

Sekali waktu (lihat di bawah) desain web sebagian besar berusaha untuk membuat tampilan tunggal yang akan cukup cocok di sebagian besar layar. Dalam lima tahun terakhir, itu telah berubah secara drastis dengan adopsi Responsive Web Design (RWD).

RWD adalah prinsip desain untuk membuat desain dengan cara yang memungkinkannya cocok dengan baik pada perangkat apa pun terlepas dari ukuran perangkat.

Dalam pengembangan web, kueri media sering digunakan untuk menerapkan serangkaian gaya yang berbeda pada halaman web tergantung pada sejumlah faktor. Beberapa faktor umum meliputi:

• lebar layar saat ini
• tinggi layar saat ini
• lebar perangkat
• tinggi perangkat
• orientasi perangkat

Karena gaya dapat ditargetkan ke ukuran layar tertentu, tidak jarang membuat beberapa set desain yang menargetkan rentang tertentu.

Agar jelas, tidak ada "standar" yang ditetapkan. Tidak ada badan atau organisasi yang mengatur yang mengatakan "desainer harus membuat desain mengikuti pedoman ukuran ini", karena pada akhirnya itu adalah penilaian.

Dengan demikian, industri pengembangan web telah secara organik menghasilkan serangkaian breakpoint umum yang terjadi berulang kali.

Breakpoints umum adalah untuk lebar layar saat ini, dan umumnya:

_{unit dalam px}

• 320
• 480
• 768
• 1024
• 1200
• 1600

Alasan angka-angka spesifik ini cukup biasa. IPhone asli memiliki layar dengan dimensi 320 × 480; iPad asli memiliki layar dengan dimensi 768 × 1024; 1600 × 1200 umum untuk resolusi layar yang lebih besar.

Walaupun umum untuk melihat maket di beberapa atau semua breakpoints itu, juga umum untuk memberikan beberapa rendering pada halaman tertentu yang menunjukkan titik infleksi desain menengah.

Comp cairan-lebar yang menunjukkan item bertumpuk pada lebar 768px mungkin perlu menyertakan desain untuk 900px di mana item telah beralih ke dua kolom. Jika Anda menemukan bahwa Anda perlu menyediakan banyak set desain untuk breakpoint perantara ini, saya akan sangat menyarankan mendesain komponen individual dan menunjukkan breakpoints di mana komponen berubah berdasarkan per komponen, tanpa menyertakan sisa halaman di mockup.

Ini juga membantu untuk menghindari perangkap desain umum di mana komponen UI tertentu hilang atau tidak kongruen antara breakpoints.

Berikut ini adalah versi lama dari jawaban ini yang saya simpan demi anak cucu, tetapi belum relevan untuk beberapa waktu

Saya terkejut belum ada yang menyebutkan ini:

Google memiliki alat pengembangan yang bagus yang disebut

Ukuran Browser

Seharusnya cukup banyak menjawab pertanyaan Anda sendiri.

Saya punya beberapa catatan tentang tren saat ini:

Saat ini sebagian besar pengguna memiliki resolusi 1024x600 (tablet / netbook) atau lebih besar. Anda harus ingat untuk menghapus tentang 24pxbilah gulir, yang menyisakan lebar bahkan 1000px bagus. Adapun ketinggian: pengguna web sangat pandai menggulir secara vertikal, karena mereka sudah terbiasa menggulirkan roda pada tikus. Ketinggian awal sebagian besar penting untuk tayangan pertama.

Pengguna tidak cukup baik dalam menggulir secara horizontal, sehingga membuat tata letak yang lebih lebar dari 1000px tidak disarankan.

Juga banyak pengguna dengan layar yang lebih besar tidak menggunakan seluruh layar mereka untuk browser web mereka. Apalagi sekarang bahwa Windows 7 menyertakan fungsionalitas drag-n-dock sederhana untuk menjatuhkan jendela pada setengah layar.

Singkatnya:

• hindari lebar statis lebih dari 1000px
• pastikan kesan pertama Anda terlihat bagus di 1024x600
• jangan takut untuk menjatuhkan konten di bawah flip.

Jawaban singkat: 775x400 untuk 800x600, dan untuk 1024x768 gunakan 1000x500.

Jawaban panjang: Anda tidak dapat memastikan bahwa presentasi Anda akan terlihat dengan benar di komputer klien Anda (bisa memiliki sistem operasi yang berbeda, browser, monitor yang dikalibrasi yang berbeda, atau resolusi yang lebih rendah dengan font besar yang diatur untuk membaca lebih baik). Untuk alasan ini saya cenderung selalu menampilkan presentasi di komputer saya jika saya bisa.

Jika saya tidak dapat menampilkannya di komputer saya tentang masalah ukuran saya menggunakan aturan pribadi saya (Jangan menganggap pengukuran saya sebagai sesuatu yang suci, setiap orang memiliki miliknya sendiri):

Sebagai ukuran yang aman itu baik untuk mengoptimalkan 800x600 (menghapus scrollbard dan topbar saya menggunakan 775x400 sebagai "di atas garis"). Tetapi sekarang dengan layar yang lebih murah dengan standar yang lebih luas, saya mulai mendesain untuk 1024x768 (1000x500)

Yang penting adalah untuk mengoptimalkan bukan untuk ketinggian tetapi untuk lebar. Tinggi itu dapat dipecahkan dengan gulir mouse sederhana, dengan lebar jika Anda tidak memiliki mouse mac Anda tidak dapat menggulir secara horizontal untuk melihat informasi lebih lanjut. Adalah baik untuk mengetahui di mana lebih atau kurang dapat diposisikan garis bawah layar, bahkan jika tidak mungkin untuk menentukan secara tepat.

CATATAN: Saya menggunakan ketinggian rendah bahkan pada 1000px karena orang cenderung memiliki banyak scrollbar tambahan pada browser dasar (seperti GoogleRank misalnya atau bookmark, dan banyak lainnya), jadi saya selalu ingin merancang untuk situasi terburuk yang mungkin terjadi.

Ps maaf untuk bahasa Inggris saya yang buruk :)

Kami memiliki program pelacakan yang memberi tahu kami informasi tentang pengguna kami. Lebih dari setengahnya berada di 1024x768. Jadi saya menggunakannya sebagai ukuran monitor "standar".

Namun, itu bukan area langsung Anda untuk situs Anda - orang memiliki sidebars, mereka tidak selalu membuka jendela browser dengan lebar, dll.

Saya suka sistem grid 960 . Jumlahnya fleksibel dan situs web menyediakan banyak templat untuk diunduh. Saya menggunakannya untuk maket saya, dan semua orang sudah cukup senang sejauh ini.

Saya harus mencari statistik untuk mendukung saya (seperti posting blog SO ini ), tetapi 1024x768 telah mengambil atau mengambil alih sebagai penyebut umum standar untuk resolusi layar. Saya mendesain maket web untuk pemirsa umum dengan lebar 1000 px untuk memperhitungkan bilah gulir dan batas jendela dengan resolusi dengan lebar 1024 px. Untuk khalayak yang lebih spesifik, Pekka benar dalam komentarnya. Cari tahu apa normanya untuk audiens target.

Ukuran browser saat ini adalah pertanyaan yang sulit karena orang menggunakan dua jenis perangkat, komputer dengan resolusi yang lebih tinggi dan lebih tinggi dan ponsel dengan resolusi yang relatif rendah.

Jika Anda membuat situs menjadi situs daripada kebanyakan komputer saat ini (sebagian besar 90% atau lebih) memiliki resolusi minimum 1024. Jika Anda menginginkan komputer yang sedikit lebih sedikit tetapi masih persentase yang baik dari 1.200 juga berada dalam kisaran itu.

Jika Anda membuat situs seluler, sebagian besar ponsel maksimal 480px untuk menjelajah horizontal, tetapi kebanyakan dari mereka juga memiliki semacam sistem rendering untuk situs yang lebih besar.

Pertanyaan untuk ukuran adalah tentang audiens Anda sendiri, jika target Anda adalah sekelompok desainer, Anda dapat memiliki situs yang lebih besar, jika itu orang paruh baya yang mencari asuransi mobil baru daripada Anda harus bekerja sedikit lebih kecil, dan jika itu untuk telepon pengguna untuk melihat saat di ponsel mereka, bahkan lebih kecil lagi.

Ini benar-benar tergantung pada situs web Anda, sebagai aturan, saya cenderung untuk tidak pergi lebih dari 1000 untuk klien-klien pada mesin lama. Namun penelitian sekarang menunjukkan bahwa mendesain untuk 1200 sekarang dapat diterima di dunia desain, jadi itu adalah bahan untuk dipikirkan.

Rencana Anda harus mencapai penyebut umum terendah dan jika itu adalah Joe Dinosaur pada mesin Windows 95 800x600 maka itulah yang harus Anda penuhi.

Juga sangat tergantung pada desain situs web Anda. Saat ini saya sedang mendesain situs web untuk agensi saya dan akan menjadi 800 lebar, itu untuk preferensi, bukan untuk memenuhi siapa pun yang spesifik.

Sayangnya tidak ada ukuran standar karena halaman web sekarang diakses di sejumlah tampilan. Meskipun berada di sisi yang lebih aman, silakan meneliti resolusi paling populer (Misalnya, 1024x768) dan desain berdasarkan popularitas.

Jawabannya adalah: Tidak, tidak ada 'standar'.

Saya sarankan untuk menggunakan 960px untuk lebar templat Anda, karena sebagian besar resolusi layar 1028px, sehingga bilah gulir tidak akan muncul dan Anda akan melihat latar belakang yang Anda gunakan juga.

Saya akan menyarankan Anda untuk menggunakan 1024px untuk lebar standar. Karena, jumlah maksimum pc yang dibangun dengan monitor crt dan resolusi monitor ini adalah 1024 * 768px.