Cara Menukar Laman Web untuk Penyemak Imbas Mudah Alih

Peranti mudah alih, seperti telefon pintar dan tablet, menyumbang lebih daripada separuh daripada semua lalu lintas Internet. Namun, menurut kajian yang dilakukan oleh BrightEdge pada tahun 2014, lebih daripada seperempat laman web yang dikunjungi orang tidak dikonfigurasi dengan betul untuk peranti ini - dengan kos kerugian rata-rata 68 peratus pada lalu lintas. Mengubah laman web anda dengan betul untuk penyemak imbas mudah alih memerlukan perancangan dan pengujian. Pengekodan itu sendiri, namun, biasanya tidak begitu mencabar, terutamanya jika anda sudah biasa dengan CSS. Sekiranya anda menggunakan platform seperti WordPress, anda sama sekali tidak perlu tahu kod.

Platform Biasa

Sejak munculnya iPhone, pembangun di sebalik platform laman web seperti WordPress, Joomla dan Drupal mempunyai reka bentuk mudah alih bersepadu. Drupal, contohnya dilengkapi dengan tema mesra mudah alih dalam pemasangan asalnya. Setiap platform ini mempunyai tema mudah alih yang dirancang untuk dimuat sebaik sahaja laman web anda mengesannya sedang diakses oleh penyemak imbas mudah alih. Tema lain sudah mesra telefon bimbit dan akan bertindak balas terhadap gerak isyarat sentuhan seperti yang mereka balas terhadap klik tetikus, tanpa mengubah reka bentuk atau susun atur laman web anda dengan ketara di pelbagai peranti.

Menggunakan CSS dan HTML

Untuk laman web HTML, gunakan helaian gaya lata, atau CSS, fail untuk menunjukkan versi mudah alih halaman anda ketika diakses oleh penyemak imbas mudah alih. Walaupun mungkin untuk membuat kod CSS untuk mengesan peranti tertentu, pendekatan yang lebih biasa adalah menentukan susun atur berdasarkan ukuran skrin dalam piksel. Sekiranya dikehendaki, anda boleh mempunyai satu gaya untuk skrin besar, satu untuk tablet dan satu untuk telefon bimbit. Menggunakan CSS mempunyai kelebihan tambahan hanya perlu menulis kod sekali - dalam fail CSS. Setiap halaman anda hanya memerlukan satu baris kod untuk menarik gaya dari CSS.

Ciri-ciri Interaktif Skrin Sentuh

Sekiranya anda telah mengkonfigurasi halaman Web untuk menjadi pengalaman interaktif bagi pengunjung yang menggunakan JavaScript atau HTML5, sangat penting untuk anda mengetahui bagaimana laman web anda akan bertindak balas terhadap peristiwa sentuhan, bukan hanya pada penyemak imbas mudah alih, tetapi pada desktop skrin sentuh juga semakin banyak. Dalam kebanyakan kes, anda harus mempertimbangkan untuk menambahkan peristiwa sentuhan dan gerak isyarat ke kod reka bentuk anda. Di JQuery, sebagai contoh, setara dengan klik tetikus pada skrin sentuh adalah acara ketukan, dicetuskan ketika pengguna menyentuh dan kemudian mengangkat jari dari skrin. Bergantung pada halaman anda, anda juga mungkin mahu melumpuhkan tetapan lalai pada penyemak imbas mudah alih, seperti mencubit untuk mengezum atau menyeret untuk menatal, dengan menggunakan acara "preventDefault".

Pengujian dan Pengesahan

Cara terbaik untuk menguji laman web mudah alih baru anda adalah dengan menggunakan peranti mudah alih anda sendiri. Kaji gaya dan susun atur halaman, menavigasi dengan sentuhan dan gerak isyarat, dan perhatikan gambar anda dengan teliti untuk memastikan gambarnya kelihatan tajam. Anda juga dapat menggunakan penyemak imbas Web komputer anda untuk meniru paparan mudah alih. Di Google Chrome, sebagai contoh, tekan "F12" untuk membuka Developer Console. Klik ikon "Tetapan" dan kemudian klik tab "Emulasi" untuk memilih peranti seperti Google Nexus atau Apple iPad.