Panduan Komprehensif untuk Membetulkan Responsive Isu Reka Bentuk pada 2023

Kebanyakan laman web menggunakan responsive reka bentuk menggunakannya secara tidak betul, yang membawa kepada masalah. Pendekatan umum untuk responsive reka bentuk adalah sesuatu yang malas, dan jika anda mengambil pendekatan itu, sebahagian daripada anda responsive tapak akan berfungsi dengan sempurna, dan kebanyakannya tidak akan berfungsi. Bagi mereka yang melakukan kerja dengan sempurna, ia mungkin akan bergantung kepada nasib.

Konsep responsive reka bentuk adalah mudah, tetapi kesederhanaannya yang sangat mudah menyebabkan orang ramai melakukan kesilapan dengan begitu mudah. Pereka bentuk dengan pengalaman bertahun-tahun telah terbiasa dengan reka bentuk untuk desktop, maka mereka biasanya akan merancang reka bentuk berdasarkan a desktop susun atur.

Desktop reka letak berbeza daripada reka letak tablet dan reka letak mudah alih kerana ia biasanya berbilang lajur, biasanya merangkumi sejumlah besar ruang putih, dan semuanya "besar", kerana mahukan perkataan yang lebih baik. Jika responsive teknik reka bentuk digunakan, susun atur berbilang lajur ini sepatutnya dipecahkan kepada satu lajur.

Jika itu semua milik anda responsive reka bentuk sebenarnya berlaku apabila ia dilihat pada peranti mudah alih, anda mungkin menghadapi masalah. Berapa banyak masalah bergantung pada sikap anda, tetapi pereka yang baik mengambil berat tentang UX yang baik. Mereka lebih mengambil berat tentang UX yang buruk. Jika tapak anda mempunyai UX yang buruk dan anda ingin menjadi pereka yang baik, maka anda perlu membetulkannya.

Masalah ini dengan meruntuhkan susun atur berbilang lajur menjadi satu lajur adalah bahawa ia tidak berfungsi secara berkadar. Sekiranya anda harus mengecilkan sesuatu secara mendatar dan anda tidak membuat perubahan lain, ia pasti akan berkembang secara menegak.

Tuangkan air dari gelas lemak pendek ke dalam gelas nipis tinggi, dan airnya berbentuk gelas nipis tinggi, sementara isipadu air tetap sama. Apa yang perlu difahami oleh pereka adalah bahawa dengan laman web, kita memerlukan kelantangan untuk berubah. Biasanya bukan idea yang baik untuk mengubah bentuk tetapi menyimpan kandungannya sebenarnya sama. Sesuatu yang harus diberikan.

Seseorang yang benar-benar telah mendapat gelaran pereka akan memahami bahawa ini mewakili masalah yang perlu diselesaikan, dan perkara yang sebenarnya dilakukan oleh pereka ialah mencari penyelesaian untuk masalah. Oleh itu, tugas yang sesuai untuk anda mencari cara terbaik untuk menyampaikan kandungan teras tapak tanpa mengubah pengalaman pengguna menjadi pesta tatal yang mengecewakan. Berikut ialah beberapa perkara yang patut dipertimbangkan semasa memecahkan a desktop reka bentuk menjadi reka bentuk mudah alih:

1. "Mobile First" tidak masuk akal

Maaf, tetapi ia adalah. Semua orang membicarakan perkara ini, tetapi sebagai konsep, ia tidak begitu membantu kerana jika anda benar-benar mereka bentuk "mudah alih dahulu" maka ia akan menjadi mimpi ngeri untuk meningkatkannya semula kepada desktop reka bentuk melainkan anda kekal dengan susun atur lajur tunggal sepenuhnya.

Pendekatan terbaik adalah merancang secara fizikal sekurang-kurangnya tiga (dan hingga 11) susun atur yang berbeza. Minimum yang boleh anda pertimbangkan termasuk:

• Desktop
• Landskap Mudah Alih
• Potret Bergerak

Sekiranya anda ingin menjadi lebih teliti, anda juga harus mempertimbangkan:

• Tablet Landskap
• Tablet Potret

Dan senarai lengkapnya, jika anda mahu lengkap adalah:

• Besar Desktop
• Biasa Desktop
• Tablet Landskap Besar
• Tablet Potret Besar
• Tablet Landskap Kecil
• Tablet Potret Kecil
• Landskap Besar Bergerak
• Bergerak Potret Besar
• Landskap Kecil Mudah Alih
• Mudah Alih Potret Kecil
• Kecil / Boleh Dipakai

Dengan begitu banyak kemungkinan yang berbeza, jelas mengapa pendekatan "satu-ukuran-semua" malas sangat menggoda, tetapi juga jelas mengapa ada banyak cara untuk merosakkannya.

2. Jadikan footer halaman yang luas

. desktop reka bentuk termasuk salah satu pengaki halaman yang besar dengan banyak pautan dalaman? Hebat, itu mungkin sangat berguna pada a desktop. Pada telefon bimbit, ia kelihatan tidak masuk akal dan lebih daripada sekadar sentuhan yang menjengkelkan. Anda boleh mereka bentuk pengaki halaman yang sama sekali berbeza untuk setiap titik putus peranti. Hanya jadikan pautan pengaki tersebut tersedia dalam dialog modal dan semua orang menang.

3. Terima beberapa kebiasaan kecil pada peranti yang tidak jelas

Sekiranya peranti tertentu tidak biasa, maka tidak begitu buruk jika terdapat beberapa kebiasaan dalam reka bentuk yang hanya muncul ketika melihat pada peranti itu. Semakin popular peranti, semakin banyak anda harus berusaha untuk menghilangkan kebiasaan yang muncul di atasnya.

4. Anda boleh menyembunyikan kandungan yang tidak menyumbang kepada mesej inti

Bahagian yang paling penting dalam laman web adalah mesej utama. Ya, di beberapa laman web, bahagian yang paling penting adalah pengiklanan dan iklan tersebut hanya ada untuk menyampaikan iklan itu, tetapi jika anda harus memilih antara menunjukkan inti atau menunjukkan iklan, pilihlah pesan tersebut. Google lebih cenderung menganggap anda sebagai persona non grata jika anda menyembunyikan kandungan inti dan kemudian menayangkan banyak iklan. Ini kerana kandungan inti itulah yang diindeks oleh Google berdasarkan anda, dan apabila kandungan itu tidak ditunjukkan, Google melihatnya sebagai menipu.

Selain itu, perkara seperti gambar yang semata-mata hiasan atau estetik, tetapi tidak memberi sumbangan penting kepada mesej inti, adalah calon pengurangan atau penyembunyian sama sekali.

Sesetengah orang telah mencadangkan bahawa menyembunyikan kandungan adalah "menghukum" pengguna mudah alih, tetapi ini adalah tanggapan yang tidak masuk akal. Realitinya ialah anda menyembunyikan kandungan kerana kandungan itu ada untuk meningkatkan kandungan desktop pengalaman, tetapi tidak menyumbang secukupnya kepada mesej teras tapak untuk keperluan itu

5. Anda boleh menggunakan latar belakang alternatif

Baru-baru ini saya diberi tugas yang tidak masuk akal di mana pemilik laman web membayar latar belakang tertentu dan mahu semua kandungan disesuaikan agar sesuai dengan latar belakang tersebut. Item titik peluru mestilah bilangan aksara yang sangat tepat, jumlah baris harus tepat, dan seterusnya.

Ini semestinya merupakan amalan buruk dalam reka bentuk web, kerana anda seharusnya pernah merancang kandungan agar sesuai dengan susun atur. Susun atur harus sentiasa dirancang untuk menahan kandungannya. Sekiranya untuk beberapa sebab susun atur tidak dapat menahan konten, maka susun atur harus dirancang semula, bukan konten. Sangat mungkin untuk menggunakan latar belakang yang berbeza untuk peranti yang berbeza. Anda seorang pereka. Gunakan imaginasi anda.

Kandungan adalah darah kehidupan laman web, dan untuk mengubahnya atau menyekatnya berdasarkan batasan susun atur adalah tanda jelas amatur dari pihak pemilik laman web, dan tanda bahawa susun aturnya tidak dirancang dengan baik pada yang pertama tempat. Berpegang pada prinsip anda, kerana pelanggan itu akan menghadapi masalah jika anda bersetuju.

Pelanggan sentiasa betul, kecuali apabila pelanggan itu adalah pelanggan reka bentuk web. Pelanggan jarang mengetahui perkara yang terbaik untuk mereka, dan adalah penting untuk menegaskan diri anda sebagai pereka web yang tahu cara menyampaikan hasil yang betul untuk pelanggan. Lain-lainwise anda berisiko mencipta laman web lain kekejian.

6. Kawal urutan runtuh secara manual (atau elakkan rujukan ruang dalam kandungan)

Ini adalah masalah yang kompleks. Urutan runtuh laman web bergantung pada urutan susunan div. Anda perlu menyusun div anda mengikut urutan yang betul sehingga mereka runtuh mengikut urutan yang betul.

Salah satu masalah yang timbul dari pembangun laman web drag-n-drop WYSIWYG adalah bahawa anda tidak dapat secara normal menentukan urutan apa yang disusun oleh div, dan dalam keadaan yang sangat jarang berlaku, kerja keras anda akan dibatalkan setiap masa anda membuat pengeditan terkecil, dan anda perlu masuk semula dan menggodam kod sumbernya sekali lagi.

Sekiranya anda tidak mengawal pesanan runtuh, imej ini menerangkan dengan jelas apa yang boleh menjadi salah. Anda juga harus mengelakkan membuat rujukan spasial (seperti "di lajur ke kiri") seperti di telefon bimbit apa sahaja yang berada di kiri atau kanan boleh dialihkan ke atas atau di bawah, plus jika anda membuat pembaca menganggap cukup penting untuk menatal untuk dilihat, maka mereka perlu menatal kembali, dan itu tidak keren.

7. Anda mungkin memerlukan saiz fon yang berbeza untuk susun atur yang berbeza

Sangat mudah untuk mengawal ukuran fon dengan CSS dan anda boleh menetapkan saiz fon yang berbeza dan bahkan bentuk fon yang berbeza (jika kelihatan lebih baik) untuk ukuran paparan tertentu. Anda dapat menemukan ukuran paparan dengan pertanyaan media CSS, dan kemudian anda mengubah ukuran font atau bentuk huruf pada nilai yang akan menampilkan kandungan dengan kelebihan maksimum pada jenis perangkat yang anda targetkan.

8. Sebaiknya digunakan responsive imej

Semua imej sepatutnya responsive bila-bila boleh. Ini membawa bahawa kadangkala butiran imej boleh hilang jika ia dikecilkan terlalu banyak. Penyelesaian kepada masalah ini ialah menjadikan imej boleh diklik supaya pengguna boleh melihat versi imej yang dizum masuk berasingan daripada kandungan. Cara biasa untuk melakukan ini adalah melalui kotak dialog modal.

gambar header milik Artur Martynowski