Mengapa desain web yang “responsif” tidak menjadi pertimbangan?

Ini mungkin tampak seperti lebih dari pertanyaan desain grafis daripada pertanyaan pemrograman, tapi saya pikir itu memiliki banyak manfaat teknis / pemrograman daripada desain grafis yang sebenarnya.

Konsep desain web "responsif" berkisar menggunakan kueri media dalam CSS3 untuk mendeteksi ukuran perangkat tampilan dan menyesuaikan aturan CSS yang sesuai - pada dasarnya, CSS dinamis. Ini mengisi kekosongan pada banyak kasus penempatan - seluler, khususnya.

Saya pikir penggunaan pertanyaan media muncul secara perlahan (saya telah menemukan bahwa banyak orang tidak benar-benar mengetahuinya), tetapi saya bertanya-tanya apakah ada alasan untuk adopsi yang lambat. Apakah tidak praktis untuk aplikasi web? Apakah ada sesuatu yang saya lewatkan yang mungkin merupakan perangkap mendasar?

— Nic
sumber

Banyak orang hanya bodoh dan tidak belajar metode baru.

— Raynos

@ Raynos tetapi belajar itu sangat menyenangkan!

— Nic

"Itu karena kecepatan internet meningkat seiring berjalannya waktu dan responsif tidak lagi menjadi masalah nyata, dan upaya ini tidak dibenarkan lagi? Mungkin saya salah, karena ide ini terlihat keren!

— WinW

Bermigrasi ke webmaster.SE?

— Peter Taylor

Jawaban:

Anda harus melompati simpai agar benar-benar berfungsi. Untuk situs yang saya kembangkan, saya biasa @media (max-width:800px)mendefinisikan stylesheet untuk ponsel dan layar kecil lainnya. Tapi itu tidak digunakan oleh iPhone misalnya.

Ternyata pengembang peramban telepon berasumsi bahwa orang tidak akan mengambil layar kecil ke dalam akun sehingga mereka berbohong kepada mesin rendering (misalnya iPhone mengklaim lebih dari 900px lebar), kecuali jika Anda memasukkan meta-tag tambahan untuk memberi tahu tidak berbohong. Ketika sampai pada titik bahwa Anda melawan pelaksana browser, Anda mulai bertanya-tanya apakah itu sepadan dengan usaha.

— Peter Taylor
sumber

Jadi Zurb Foundation dan Twitter Bootstrap menangani ini dengan cukup baik. Itu memang membutuhkan sedikit JavaScript untuk menangani peralihan permintaan. Ada juga pengaturan DPI dll. Menggunakan kerangka kerja CSS semacam itu membuatnya sangat mudah. Atau setidaknya sebagian dari mereka.

— Berin Loritsch

Perlu dicatat bahwa pertanyaan dan jawaban ini berasal dari 6 tahun yang lalu, dan mungkin tidak mencerminkan tingkat adopsi saat ini.

— Peter Taylor

Ah maaf. Itu ada di feed utama kemarin untuk beberapa alasan. Tidak berpikir untuk memeriksa tanggalnya.

— Berin Loritsch

Saya tidak bisa berbicara untuk semua orang, tetapi dari pengalaman saya sendiri waktu dan uang telah menjadi faktor penentu. Rekan-rekan saya dan saya selalu melihat hal-hal terbaru, tetapi merancang dan menerapkan tata letak yang berbeda untuk perangkat dengan ukuran berbeda adalah masalah besar. Terutama mengingat bahwa pada nokia 5800 saya yang berusia 3 tahun, semua situs web kami terlihat baik - bar yang harus saya gulir untuk mendapatkan konten bilah sisi. Kami merancang dan mengimplementasikan situs web untuk perusahaan kecil dan wiraswasta.

Alasan lain yang mungkin valid adalah karena menyajikan situs web yang sepenuhnya terpisah untuk versi seluler, dengan sitemapnya sendiri yang terpisah ( http://www.google.com/support/webmasters/bin/answer.py?hl=id&answer=34648 ), adalah cara mudah dan entry-level untuk memelihara situs.

— Pelshoff
sumber

Yah, saya pikir itu pasti sulit untuk memperkenalkan desain responsif ke situs yang dikerahkan atau pertengahan siklus, tapi saya pikir akan jauh lebih mudah untuk mengimplementasikan sesuatu seperti ini daripada memiliki subdomain seluler lainnya. Untungnya, Rails mengabstraksi tugas ini sedikit dengan templat yang diwarisi.

— Nic

Yah, saya harus menambahkan bahwa dalam kasus kami, klien sebenarnya mengalihdayakan versi seluler ke pesaing :( Saya pribadi akan menggunakan templat daripada situs yang berbeda juga.

— Pelshoff

Jika Anda dapat menjamin untuk memulihkan data dengan andal, semuanya baik-baik saja.

Tapi bayangkan, seseorang memuat halaman web di browser berjendela komputer desktop. Apakah Anda memaksa mereka untuk membuka layar penuh untuk membaca semuanya, atau apakah Anda mengakomodasi ukuran ke jendela yang dikurangi dan menghadirkan banyak ruang kosong saat mereka memaksimalkannya? Anda melayani CSS satu kali, saat memuat halaman!

Bagaimana dengan browser ponsel yang mengganti mode landscape / portrait saat Anda merotasi ponsel? Bagaimana dengan browser yang hanya memiliki resolusi terlalu kecil dan orang-orang biasanya menggunakan zoom-in, tetapi Anda telah beradaptasi dengan yang dilaporkan, resolusi terlalu kecil dan halaman menjadi tidak dapat dibaca?

Cukup ikuti pedoman standar untuk membuat CSS universal yang layak dan dapat diskalakan dan biarkan peramban menangani penskalaan laman ke resolusi yang tepat.

— SF.
sumber

Ada fitur baru di CSS3 yang memungkinkan aturan dinamis untuk ukuran layar berbeda, yang berubah secara otomatis.

— Steffan Donal

@Ruirize Persis - gunakan CSS statis yang memiliki aturan yang mengadaptasi konten secara dinamis - oke. Minta CSS yang dihasilkan secara dinamis yang memiliki aturan pengaturan konten secara statis untuk ukuran layar Anda - tidak.

— SF.

OP berbicara tentang menggunakan kueri media, yang secara dinamis menyesuaikan berbagai hal berdasarkan (antara lain) ukuran layar. Tidak ada file tambahan yang dimuat.

— Travis Northcutt

@ SF: mencoba untuk mengubah ukuran jendela Kalender Google (tema merah baru, bukan yang biru yang lebih tua), itu keren bagaimana mereka menanganinya.

— Lie Ryan

@ SF: Posting asli berbicara tentang pertanyaan media, tidak menyajikan CSS berbeda berdasarkan header atau w / e.

— Pewpewarrows