Panduan Komprehensif untuk Membetulkan Responsive Isu Reka Bentuk pada 2023

Jika anda melanggan perkhidmatan daripada pautan di halaman ini, Reeves and Sons Limited mungkin mendapat komisen. Lihat kami pernyataan etika.

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 segala-galanya hanya "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 dengan meruntuhkan reka letak berbilang lajur ke dalam satu lajur ialah ia tidak berfungsi secara berkadar. Jika anda perlu mengecilkan sesuatu secara mendatar dan anda tidak membuat sebarang perubahan lain, ia jelas akan berkembang secara menegak.

Tuangkan air daripada gelas lemak pendek ke dalam gelas nipis yang tinggi, dan air itu mengambil bentuk gelas nipis yang tinggi, manakala isipadu air tetap sama. Perkara yang perlu difahami oleh pereka ialah dengan tapak web, kita memerlukan volum untuk berubah. Biasanya bukan idea yang baik untuk menukar bentuk tetapi mengekalkan kandungannya sebenarnya sama. Sesuatu mesti 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 memperkatakan 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 apabila cuba 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 saiz-muat-semua" yang malas sangat menggoda, tetapi juga jelas mengapa terdapat begitu 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

Jika peranti tertentu tidak biasa, maka ia tidak begitu buruk jika terdapat beberapa keanehan dalam reka bentuk yang muncul hanya apabila melihat pada peranti itu. Semakin popular peranti, semakin banyak anda perlu berusaha untuk menyingkirkan sebarang keanehan yang muncul pada peranti itu.

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

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 teras dan kemudian menyiarkan sekumpulan iklan. Ini kerana kandungan teras itu adalah yang Google mengindeks anda berdasarkan, dan apabila kandungan itu tidak ditunjukkan, Google melihatnya sebagai mengelirukan.

Selain itu, perkara seperti imej yang hiasan atau estetik semata-mata, tetapi tidak menyumbang secara signifikan kepada mesej teras, adalah calon untuk 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 direka untuk menyimpan kandungan. Jika atas sebab tertentu reka letak tidak dapat memuatkan kandungan, maka reka letak hendaklah direka bentuk semula, bukan kandungannya. Anda boleh 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. Susunan runtuh tapak bergantung pada susunan div disusun. Anda perlu menyusun div anda dalam susunan yang betul supaya ia akan runtuh dalam susunan yang betul.

Salah satu masalah yang datang daripada pembangun laman web drag-n-drop WYSIWYG ialah anda biasanya tidak boleh menentukan susunan div yang disusun, dan dalam keadaan yang jarang berlaku di mana anda boleh melakukannya, kerja keras anda akan dibatalkan setiap kali anda membuat pengeditan terkecil, dan anda perlu masuk semula dan menggodam kod sumber sekali lagi.

Jika anda tidak mengawal tertib 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 berfikir bahawa ia cukup penting untuk menatal untuk melihat, maka mereka perlu menatal kembali semula, dan itu tidak bagus.

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

Sangat mudah untuk mengawal saiz fon dengan CSS dan anda boleh menetapkan saiz fon yang berbeza dan juga muka fon yang berbeza (jika ia akan kelihatan lebih baik) untuk saiz paparan tertentu. Anda boleh mencari saiz paparan dengan pertanyaan media CSS, dan kemudian anda mengubah suai saiz fon atau muka fon kepada nilai yang akan memaparkan kandungan untuk kelebihan maksimum pada jenis peranti yang anda sasarkan.

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

Bogdan Rancea

Bogdan adalah ahli pengasas Inspired Mag, yang telah mengumpulkan hampir 6 tahun pengalaman dalam tempoh ini. Pada masa lapang dia suka belajar muzik klasik dan mendalami seni visual. Dia juga taksub dengan fixies juga. Dia sudah memiliki 5 orang.

Komen-komen 1 Response

  1. M p berkata:

    Mudah alih pertama hanya bermaksud bahawa dalam pangkalan kod, css "lalai" adalah untuk mudah alih dan anda membina perubahan untuk lebih luas formats dari sana. Saya benar-benar tidak faham perkara pertama anda

Sila tinggalkan balasan anda

Alamat email anda tidak akan disiarkan. Ruangan yang diperlukan ditanda *

Kedudukan *

Laman web ini menggunakan Akismet untuk mengurangkan spam. Ketahui bagaimana data komen anda diproses.