Desain web responsif didasarkan pada resolusi layar atau ukuran layar?


11

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?

Jangan bingung piksel virtual dengan piksel nyata.
DA01

Jawaban:


6

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.


Terima kasih untuk jodohnya. Saya sebenarnya seorang pengembang dan perancang web, saya mencoba mempersingkat pertanyaan saya, itulah sebabnya saya tidak menjelaskan secara mendalam dan metode yang saya gunakan. Anda benar, desain responsif tidak memiliki aturan dan bahwa saya selalu memberi tahu rekan tim saya dalam pekerjaan, tetapi Hanya baru-baru ini saya memperhatikan bahwa karena ponsel memiliki resolusi tinggi, maka tidak ada gunanya membuang waktu kami pada pengkodean kueri media sebesar 468 px untuk contoh? dan saya harus menargetkan resolusi, kan?
Engineeroholic

Ya, seperti yang saya sebutkan di baris terakhir, Anda harus lebih mementingkan resolusi daripada ukuran layar
Zach Saucier

Zach ... Ini sangat menyebalkan, ini bukan forum debat: o) Saya pikir sangat berbeda. Saya akan memposting jawaban saya. ; o)
Rafael

1
Setelah penelitian cepat, saya menemukan sesuatu yang kritis yang sebagian besar pengembang lewatkan .. jika <meta name = "viewport" content = "width = lebar perangkat, skala awal = 1.0> sedang digunakan, lebar browser akan sama dengan lebar perangkat, jadi pertanyaan media harus didasarkan pada ukuran layar bukan resolusi! Itu membuat perbedaan besar yang saya gagal memperhatikan untuk waktu yang lama XD
Engineeroholic

@ Engineeroholic Itulah primer desain responsif saya yang saya tautkan :)
Zach Saucier

4

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.


bagaimana dengan tinggi? dan ini adalah sesuatu yang saya temui hari ini di tempat kerja di mana pelanggan meminta situs web responsif tanpa gulir vertikal sama sekali (sangat aneh!), ini adalah sakit kepala besar untuk ditangani untuk semua resolusi dan akan menghasilkan terlalu banyak pertanyaan media! akhirnya saya menggunakan campuran desain yang cair, 1 permintaan media, dan trik CSS; di mana untuk pertama kalinya dalam hidup saya, saya melakukan footer dengan posisi absolut dan bawah = 0 untuk membuatnya tetap di bawah untuk layar panjang. (di mana saya salah mengartikannya) maka, saya hanya menggunakan kueri media untuk layar yang lebih pendek dari konten .. dengan cara ini saya hanya perlu menggunakan 1 kueri
Engineeroholic

3

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


2
Jika Anda menemukan jawaban yang membantu, Anda harus menghapusnya, maka tunjukkan demikian
Zach Saucier

Anda harus mendesain untuk resolusi layar virtual . Ukuran layar adalah keliru karena Anda tidak benar-benar merancang dimensi inci atau cm tertentu.
DA01

Selanjutnya skala awal bisa diterapkan ke halaman web yang besar. Ini kemudian hanya akan mengecilkannya agar sesuai yang tidak responsif.
DA01

@ ZachSaucier, saya akan senang untuk memperbaiki jawaban perguruan tinggi saya. sayangnya, saya tidak bisa karena reputasi saya kurang dari 15! Saya pikir larangan ini harus dihapus.
Engineeroholic

@ DA01, ya ukuran layar keliru, hanya istilah umum. Slangy mengatakan ukuran layar di sini mengacu pada dimensi layar dalam piksel (bukan sebagai resolusi layar mengatakan).
Engineeroholic

2

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.


Meskipun ini benar, saya masih berpikir hal yang penting adalah fokus pada desain responsif, bukan pada layar yang
dilihatnya

@ ZachSaucier umm ... Saya setuju? Kupikir? Saya tidak tahu Itu satu dan sama, bukan? Desain responsif adalah tentang mengakomodasi berbagai ukuran viewports. Mereka tampaknya berjalan beriringan. Ini tidak responsif jika Anda tidak juga memikirkan berbagai ukuran yang akan mengalir.
DA01

Apa yang terjadi pada 9px terakhir?
Janus Bahs Jacquet
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.