Cara Mengonversi Situs Web untuk Peramban Seluler

Perangkat seluler, seperti ponsel cerdas dan tablet, menyumbang lebih dari setengah dari semua lalu lintas Internet. Namun, menurut penelitian yang dilakukan oleh BrightEdge pada tahun 2014, lebih dari seperempat situs web yang dikunjungi orang tidak dikonfigurasi dengan benar untuk perangkat ini -- membuat mereka kehilangan rata-rata 68 persen lalu lintas. Memodifikasi situs web Anda sendiri dengan benar untuk peramban seluler memang memerlukan perencanaan dan pengujian. Pengkodean itu sendiri, bagaimanapun, biasanya tidak terlalu menantang, terutama jika Anda sudah terbiasa dengan CSS. Jika Anda menggunakan platform seperti WordPress, Anda tidak perlu tahu kode sama sekali.

Platform Umum

Sejak munculnya iPhone, pengembang di balik platform situs web seperti WordPress, Joomla, dan Drupal telah mengintegrasikan desain seluler. Drupal, misalnya, hadir dengan tema ramah seluler dalam instalasi aslinya. Masing-masing platform ini memiliki tema seluler yang dirancang untuk digunakan segera setelah situs web Anda mendeteksi sedang diakses oleh browser seluler. Tema lain sudah ramah seluler dan akan merespons gerakan sentuh seperti halnya merespons klik mouse, tanpa mengubah desain atau tata letak situs web Anda secara signifikan di berbagai perangkat.

Menggunakan CSS dan HTML

Untuk situs web HTML, gunakan file cascading style sheet, atau CSS, untuk menampilkan versi seluler halaman Anda saat diakses oleh browser seluler. Meskipun dimungkinkan untuk membuat kode CSS untuk mendeteksi perangkat tertentu, pendekatan yang lebih umum adalah menentukan tata letak berdasarkan ukuran layar dalam piksel. Jika diinginkan, Anda dapat memiliki satu gaya untuk layar besar, satu untuk tablet dan satu untuk ponsel. Menggunakan CSS memiliki keuntungan tambahan karena hanya perlu menulis kode sekali -- dalam file CSS. Setiap halaman Anda kemudian hanya membutuhkan satu baris kode untuk menggambar gayanya dari CSS.

Fitur Interaktif Layar Sentuh

Jika Anda telah mengonfigurasi halaman Web untuk menjadi pengalaman interaktif bagi pengunjung yang menggunakan JavaScript atau HTML5, penting bagi Anda untuk mengetahui bagaimana situs web Anda akan merespons peristiwa sentuh, tidak hanya pada browser seluler, tetapi juga pada desktop layar sentuh yang jumlahnya terus bertambah. . Dalam kebanyakan kasus, Anda harus mempertimbangkan untuk menambahkan peristiwa sentuhan dan gerakan ke kode desain Anda. Di JQuery, misalnya, yang setara dengan klik mouse pada layar sentuh adalah peristiwa ketuk, yang dipicu saat pengguna menyentuh dan kemudian mengangkat jari dari layar. Bergantung pada halaman Anda, Anda mungkin juga ingin menonaktifkan pengaturan default pada browser seluler, seperti mencubit untuk memperbesar atau menyeret untuk menggulir, dengan menggunakan peristiwa "preventDefault".

Pengujian dan Verifikasi

Cara terbaik untuk menguji situs web seluler baru Anda adalah dengan menggunakan perangkat seluler Anda sendiri. Periksa gaya dan tata letak halaman, navigasi dengan sentuhan dan gestur, dan perhatikan gambar Anda dengan cermat untuk memastikannya terlihat tajam. Anda juga dapat menggunakan browser Web komputer Anda untuk meniru tampilan seluler. Di Google Chrome, misalnya, tekan "F12" untuk membuka Konsol Pengembang. Klik ikon "Pengaturan" dan kemudian klik tab "Emulasi" untuk memilih perangkat seperti Google Nexus atau Apple iPad.