Desain web responsif didasarkan pada resolusi layar atau ukuran layar?

Untuk perangkat seluler, resolusinya sebenarnya besar, hanya ukuran layar yang kecil. berdasarkan hal tersebut:

• Untuk desain situs web , apakah kami menargetkan resolusi layar (mis. 1920x1080)?
• Dan untuk aplikasi seluler . apakah kita menargetkan ukuran layar?

Desain responsif tidak didasarkan pada resolusi layar atau ukuran layar. Sebaliknya, desain responsif didasarkan pada konten dan bagaimana itu dibuat yang memungkinkannya untuk memenuhi semua ukuran dan resolusi.

Cara Anda berpikir tentang desain responsif salah. Saya berasumsi Anda berasal dari latar belakang desain cetak yang lebih konvensional, ya? Merancang untuk web jauh lebih membebaskan. Situs web responsif seringkali tidak memiliki breakpoints konvensional atau ukuran / resolusi spesifik yang sama dengan yang mereka buat karena web memungkinkan lebih dari itu - memungkinkan semua ukuran layar dapat dijangkau. Dengan demikian, Anda dapat mendesain menggunakan ukuran apa pun yang tepat untuk apa yang Anda desain asalkan masuk akal.

Dengan demikian, praktik terbaik adalah merancang dengan cara mobile-first , yang benar-benar harus dinamai mobile-terpenting . Ini memaksa Anda untuk fokus pada konten yang paling penting dan mungkin dan kemudian memungkinkan Anda menambahkan lebih banyak untuk layar yang lebih besar daripada memaksa Anda untuk mulai dengan lebih banyak di layar besar kemudian menghapus hal-hal ketika merancang untuk yang lebih kecil. Anda dapat membaca lebih lanjut tentang ini di primer desain responsif saya .

Tetapi kita juga harus merancang dengan cara yang memungkinkan responsif. Praktik terbaik yang merupakan contoh langsung, baik dalam bentuk prototipe atau dalam beberapa program wireframing, bukan dokumen statis seperti PSD. Ketika datang ke sisi pengembang, kita harus menggunakan unit responsif dan menyusun kode kita dengan cara yang masuk akal.

Dengan itu, Anda harus meletakkan hal-hal dalam hal piksel, yang berarti resolusi, bukan ukuran layar.

Pertanyaan yang sangat bagus!

Jawaban panjang saya yang membingungkan: Tidak ada dan keduanya

Hanya beberapa pemikiran di sini berkomentar sedikit kontradiksi yang kita hadapi hari ini.

Teknologi tidak seperti yang seharusnya sejak usia.

Kita semua harus merancang berdasarkan unit kehidupan nyata (atau ukuran yang dipersepsi) , dengan beberapa tingkat fleksibilitas dan kebebasan untuk memungkinkan pengguna melakukan beberapa penyesuaian tambahan.

Tetapi untuk mengetahui pengukuran kehidupan nyata kita membutuhkan kedua informasi tersebut. Dimensi fisik dan Resolusi perangkat = kerapatan piksel.

Tetapi ternyata beberapa tahun yang lalu, perangkat layar mulai menyatakan kerapatan piksel. Dan beberapa tidak menyatakannya ke server, hanya membuat banyak publisitas tentang itu. (Aka Ipad, Iphone)

Resolusi layar dapat dideteksi oleh sistem operasi karena sangat penting untuk mengirim sinyal yang sesuai, tetapi untuk ukuran layar kehidupan nyata kita memerlukan database besar masing-masing model. Tidak baik.

Yang membuat kami hanya dengan resolusi layar ini bahwa itu adalah beberapa info yang bisa kita ketahui.

Tetapi sama sekali berbeda untuk mendesain monitor FullHD besar daripada resolusi yang sama pada perangkat mobil. Keduanya 1920x1080. Aduh.

Kasus khusus adalah pada proyektor, karena kami tidak memiliki petunjuk jarak proyeksi dan jarak penonton.

Solusi parsial adalah kueri media, dan elemen vektor, dll.

Jawaban singkat

Untuk desain web: Setidaknya sampai kita menemukan sesuatu yang lebih baik.

Desain cairan (persentase) dan aliran alami, bagian yang terdefinisi dengan baik.

• Lebar 1920

• dengan permintaan media mungkin pada 1280

• dan / atau pada 1024

• mungkin di 720

• dan 480.

dengan deteksi perangkat untuk dukungan tambahan.

Untuk aplikasi bawaan seluler

Karena sangat spesifik, cukup ikuti pedoman merek, tentang UI dan Ikon.

Diedit.

Mengapa memilih resolusi layar kecil pada perangkat seluler FullHD?

Sebuah smartphone memiliki resolusi FullHD yang sebenarnya tetapi biasanya mendeklarasikan resolusi kecil ke server dan browser. Anda dapat menguji googling ini https://www.google.com/search?q=what+is+my+screen+resolution sehingga pertanyaan media berfungsi.

Pertama, terima kasih atas jawaban dan pedoman yang berharga, itu pasti membantu!

Izinkan saya menambahkan kesimpulan saya:

Secara praktis, menargetkan resolusi layar ponsel bukan UX yang baik, resolusi terlalu tinggi untuk layar kecil, font akan terlalu kecil untuk dibaca, ikon akan terlalu kecil untuk diklik, dll.

Jadi, lebih baik untuk membuat desain berdasarkan ukuran viewport yang sebenarnya! Cara ini didasarkan pada apa yang dapat dilihat dan dirasakan pengguna.

Untuk mencapai itu di kehidupan nyata, kita harus menambahkan meta tag lebar viewport di dalam <head>dokumen HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ini memberi tahu browser untuk merender halaman dengan lebar sama dengan lebar layar sehingga memastikan bahwa lebar halaman HTML sama dengan lebar layar dalam hal piksel. Pengembangan kemudian dapat dengan mudah direncanakan dengan kueri media yang menargetkan ukuran viewport seluler yang berbeda (yang agak dekat satu sama lain), dan akan menghasilkan elemen yang lebih jelas secara visual.

Tolong koreksi saya jika saya salah.

Memperbarui:

Berdasarkan pengalaman saya yang sederhana, saya menyarankan langkah-langkah di bawah ini untuk pengembangan situs web yang lebih responsif:

1 - menggunakan meta view-port (lihat atas), itu juga akan meningkatkan peringkat halaman web dalam hasil pencarian mobile menurut google. http://googlewebmastercentral.blogspot.com/2015/04/faqs-april-21st-mobile-friendly.html

Setelah pengujian, tampaknya menambahkan meta port tampilan saja akan memberikan nilai situs web Anda pada alat pengujian seluler https://developers.google.com/speed/pagespeed/insights/

2 - Anda mungkin ingin mempertimbangkan untuk menerapkan pendekatan mobile-first, selalu lebih mudah untuk menjadi lebih besar dari yang lebih kecil (tergantung pada seberapa kompleks situs web Anda)

3- Terapkan sistem responsif hibrid, perpaduan antara adaptif (fluida) dan responsif (css media-queries), untuk mencapai hal ini:

• Gunakan persentase untuk lebar / margin horisontal / paddings. (margin vertikal dapat memiliki ukuran piksel tetap jika Anda suka .. bergulir tidak menjadi masalah lagi)

• Gunakan em untuk font, dengan cara ini ketika Anda mengubah ukuran font untuk body (atau html) di media-query semua elemen CSS akan beradaptasi dengan ukuran itu, menggunakan px akan membuatnya menjadi mimpi buruk karena Anda harus pergi untuk setiap kelas CSS dan ubah ukuran font-nya.

• Float div di sebelah kiri sehingga sejajar dengan ruang yang tersedia (atau kanan jika desain Anda mengharuskannya).

4- Tentukan titik istirahat , gunakan alat pengujian responsif untuk itu. Saya menggunakan tampilan desain responsif firefox, cukup mempersempit lebarnya hingga Anda mencapai titik di mana situs web menjadi rusak (misalnya 500px), yang merupakan titik istirahat tandai.

Terapkan aturan CSS baru di dalam kueri media untuk titik istirahat itu (500px),

5- ingat untuk menjaga kualitas dan kejelasan situs web! Jika elemen menjadi tidak jelas dan terlalu dekat satu sama lain, maka perluas lebar elemen untuk menempati lebar kontainer dan buat mereka menumpuk secara vertikal,

dan ingat untuk memberikan ukuran font baru untuk tubuh sehingga semua sub-elemen mewarisi font yang lebih besar dan menjadi lebih mudah dibaca.

6- Ulangi tes responsif dan tentukan break point kedua Anda, Kemungkinan besar Anda tidak akan mendapatkan banyak break point karena kami menggunakan desain cairan di sini dan di situlah menggunakan persentase akan mengembalikan!

Saya bekerja di situs web besar dengan elemen desain berat sebelumnya dan hanya membutuhkan 2 pertanyaan media :)

Semoga itu bisa membantu

Bagaimana halaman responsif reflows didasarkan pada dimensi viewport (bukan layar) dalam piksel virtual (bukan piksel nyata).

Pada desktop tradisional di mana 1 piksel virtual = 1 piksel nyata, jika browser Anda disetel dengan lebar 1000px, maka halaman akan direfleksikan agar sesuai dengan itu.

Pada iPhone 6, di mana 1 piksel virtual (Apple menyebut titik - titik ini ) = 3 piksel nyata, lebar browser adalah lebar layar dan konten akan direfleksikan agar sesuai dengan lebar 417px (meskipun itu sebenarnya 1242 piksel nyata)

Jadi agak aneh, karena dengan contoh di atas, perangkat dengan piksel nyata yang lebih sedikit sebenarnya dilihat sebagai viewport yang lebih luas dalam tata letak yang responsif.