Desain Web Reponsive: Apakah ia mengunduh jumlah data yang sama pada setiap perangkat?


11

Saya ingin mendesain ulang blog dan situs web saya di wordpress untuk mengakomodasi pengguna seluler dan pengguna tablet yang semakin meningkat.

Saya juga mendengar tentang desain responsif. Saya ingin tahu apakah desain web responsif mengunduh jumlah data yang sama pada layar komputer dan juga perangkat seluler?

Saya juga melihat banyak perusahaan pemasaran besar belum berinvestasi dalam desain web yang responsif dan masih mencari situs web terpisah yang dioptimalkan untuk seluler. Jadi apa yang harus saya pilih, desain web responsif atau situs web terpisah yang dioptimalkan untuk seluler?

Jawaban:


8

Seperti yang didefinisikan oleh Ethan Marcotte dalam ALA 306 , istilah "desain responsif" mengacu pada teknik penerapan aturan gaya yang berbeda untuk HTML Anda tergantung pada ukuran layar pengguna. Untuk penjelasan lebih lanjut tentang desain responsif, inilah dek yang bagus dari Mike Bollinger .

Dalam model ini, Anda mengirim HTML yang sama persis kepada klien apakah layarnya kecil atau besar. Namun, jika sumber daya (terutama gambar) yang dirujuk dalam CSS tidak ditampilkan untuk resolusi layar tertentu, mereka mungkin tidak diunduh. Misalnya, untuk layar besar yang dapat Anda gunakan high-res.pngdi CSS dan layar kecil low-res.png- klien web dapat memilih untuk hanya mengunduh gambar dalam gaya aktif. (Lihat @ DBUK's komentar untuk setidaknya satu klien penting yang saat ini mengunduh keduanya! Semoga klien akan semakin pintar!)

Teknik ini mungkin masuk akal dalam kasus Anda, atau mungkin lebih masuk akal untuk membuat situs seluler terpisah.

Perangkat yang berbeda dapat menyiratkan konteks penggunaan yang berbeda. Ponsel selalu ada di saku Anda - bagaimana pengguna akan menggunakan situs Anda di toko bahan makanan? Apakah Anda ingin mengirim mereka seluruh situs? Atau hanya beberapa fitur? Atau fitur yang sama sekali berbeda? Bagaimana jika mereka ada di sofa dengan TV menyala dengan santai membaca iPad mereka?

Perangkat seluler cenderung memiliki prosesor yang lebih lambat, lebih sedikit memori, dan tingkat koneksi yang lebih lambat (semua "kebenaran" itu menjadi kurang benar setiap tahun, btw) - Anda mungkin ingin mengirim situs seluler yang terpisah hanya karena alasan kinerja.

Saya berani katakan bahwa, secara umum, semakin statis, tekstual, dan konten-didorong situs (yaitu blog), semakin besar peluang ada untuk menggunakan HTML yang ada dan desain responsif. Semakin interaktif, multi-media, dan situs yang digerakkan pengguna (yaitu toko), semakin besar peluang Anda untuk menyesuaikan situs yang terpisah untuk masing-masing jenis perangkat.

Juga, jangan lupa bahwa di zaman sekarang ini, ada juga pertanyaan apakah pengalaman seluler harus berupa situs atau aplikasi .


Saya pikir, yang mengganggu, gambar masih akan diunduh. Pengujian oleh cloudfour menjadi contoh - cloudfour.com/examples/mediaqueries/image-test .
DBUK

@ DBUK Terima kasih atas koreksinya - Saya ragu-ragu menyatakan "tidak akan mengunduh" vs. "tidak boleh mengunduh" di suntingan sebelumnya untuk posting ini. Memperbarui jawaban saya menjadi lebih akurat.
peteorpeter

Ini baru bagi saya jadi tidak yakin apakah itu hanya iPhone. Mengapa tidak ada yang sederhana dengan web :(
DBUK

1
@ DBUK Memang. Menurut pengujian itu, ketika kedua aturan gaya latar belakang berada di belakang kueri media, hanya res rendah yang diunduh, itu hanya ketika res tinggi adalah aturan gaya default dan kemudian ditimpa oleh kueri media yang keduanya diunduh. Pada dasarnya, ini rumit!
peteorpeter

Jadi pendekatan mobile pertama akan mengatasi masalah ini misalnya gaya default untuk resolusi terendah dan menggunakan pertanyaan media untuk semua yang lebih besar plus desktop?
DBUK

1

Desain responsif seharusnya tidak mengunduh jumlah data yang sama di setiap perangkat karena tidak semua perangkat memiliki persyaratan multimedia yang sama. Situs seluler harus menggunakan gambar lo-res dan sifatnya kurang grafis daripada situs untuk desktop / laptop / tablet. Dan jika Anda ingin menggabungkan situs seluler dan situs biasa, maka Anda harus mempertimbangkannya, jika tidak, situs Anda tidak terlalu responsif, bukan?

Slidingeck peteorpeter menghubungkan ke menyebutkan skrip Responsif Gambar oleh Grup Filament, yang memungkinkan Anda untuk menyajikan gambar berukuran tepat untuk perangkat yang sesuai menggunakan JavaScript, idealnya tanpa mengunduh lebih dari satu versi. Untuk tata letak aset gambar, ini biasanya dilakukan melalui kueri media yang menentukan gaya berbeda untuk resolusi layar yang berbeda.


1

Saya pikir banyak perusahaan akan membutuhkan waktu lama untuk memperbarui situs mereka, sih, masih ada beberapa yang menggunakan tabel. Responsif, dan pendekatan pertama yang mobile, jelas merupakan kata kunci saat ini.

Seperti yang disebutkan poster di atas, Anda harus menggunakan gambar lo-res untuk ponsel Anda / perangkat beresolusi lebih rendah. Kueri media akan membantu Anda menargetkan semua resolusi yang lebih rendah. Namun, saya mendengar bahwa safari seluler akan mengabaikan tampilan: tidak ada aturan dan mengunduh versi desktop dari gambar juga. Juga, jika Anda turun rute gambar responsif itu membuat banyak tekanan pada pemroses seluler - 3bytes per 1pixel ... saya pikir. Ada banyak solusi untuk menyiasati konten tambahan yang diunduh - beberapa cukup rumit - https://docs.google.com/spreadsheet/ccc?key=0AisdYBkuKzZ9dHpzSmd6ZTdhbDdoN21YZ29WRVdlckE&hl=id_ID#gid=0

Untuk beberapa informasi tentang kelemahan desain web responsif, lihat http://www.webdesignshock.com/responsive-design-problems/ . Jangan biarkan posting blog itu membuat Anda kesal. A Book Apart menulis buku yang fantastis tentang subjek ini - http://www.abookapart.com/products/responsive-web-design . Sudah pasti layak meraih versi e-book.


Bisakah Anda menguraikan pernyataan 3kb per 1px? Saya tidak melihat bagaimana menggunakan JavaScript untuk mengambil gambar ukuran penuh hanya jika resolusi layar lebih besar dari 480px akan memiliki efek itu. Selain itu, Anda tidak boleh menggunakan display: noneuntuk menyembunyikan gambar dari pengguna seluler. Itu hanya praktik buruk.
Lèse majesté

"Beberapa operator jaringan, misalnya, mengkompres gambar sebelum mereka dikirimkan melalui udara ke perangkat mobile" - w3.org/TR/mobile-bp Itu berarti ponsel perlu mengompres mereka (?) Dengan biaya 3bytes per pixel (@ 24 bit RGB misalnya JPG)? Ups, aku meletakkan kb di atas, sial. Ini murni dari sudut pandang CSS, dengan ponsel mengunduh semua gambar..mobile dan desktop, dan tidak mempertimbangkan solusi javascript akun.
DBUK
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.