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 .
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.
sumber
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.
sumber
display: noneuntuk menyembunyikan gambar dari pengguna seluler. Itu hanya praktik buruk.