Cara Mengonversi Situs Web untuk Browser Seluler

Perangkat seluler, seperti ponsel cerdas dan tablet, mencakup lebih dari setengah lalu lintas Internet. Namun, menurut penelitian yang dilakukan oleh BrightEdge pada tahun 2014, lebih dari seperempat situs web yang dikunjungi orang tidak dikonfigurasikan dengan benar untuk perangkat ini - biayanya rata-rata 68 persen kehilangan 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 memiliki desain ponsel terintegrasi. Drupal, misalnya hadir dengan tema ramah-seluler dalam pemasangan aslinya. Masing-masing platform memiliki tema seluler yang dirancang untuk dibuka segera setelah situs web Anda mendeteksi itu sedang diakses oleh peramban seluler. Tema lain sudah mobile-friendly dan akan merespon gerakan sentuh sama seperti mereka menanggapi klik mouse, tanpa secara signifikan mengubah desain atau tata letak situs web Anda di berbagai perangkat.

Menggunakan CSS dan HTML
Untuk Situs web HTML, gunakan lembar gaya berjenjang, atau file CSS, untuk menyajikan versi seluler laman Anda saat diakses oleh peramban seluler. Meskipun dimungkinkan untuk mengkode 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 yaitu hanya harus menulis kode sekali - dalam file CSS. Setiap halaman Anda hanya perlu 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 , sangat penting bagi Anda untuk mengetahui bagaimana situs web Anda akan merespons acara sentuh, tidak hanya pada peramban seluler, tetapi juga pada semakin banyak desktop layar sentuh. Dalam kebanyakan kasus, Anda harus mempertimbangkan untuk menambahkan acara sentuh dan gerakan ke kode desain Anda. Di JQuery, misalnya, setara dengan klik-mouse pada layar sentuh adalah peristiwa ketukan, dipicu ketika pengguna menyentuh dan kemudian mengangkat jari dari layar. Bergantung pada halaman Anda, Anda mungkin juga ingin menonaktifkan pengaturan default pada peramban seluler, seperti menjepit untuk memperbesar atau menyeret untuk menggulir, dengan menggunakan acara "preventDefault".

Menguji dan Memverifikasi
Cara terbaik untuk uji situs web seluler Anda yang baru adalah dengan menggunakan perangkat seluler Anda sendiri. Periksa gaya dan tata letak halaman, navigasikan dengan sentuhan dan gerakan, dan perhatikan gambar Anda dengan cermat untuk memastikan mereka terlihat segar. Anda juga dapat menggunakan browser Web komputer 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.

URL:https://komputer.whycomputer.com/Internet/101301856.html