Trend website responsive memang menjadi primadona saat ini, tak ketinggalan hampir semua pengembang template joomla berlomba-lomba melahirkan gaya responsive versi mereka masing-masing. Sebelum penulis membahas lebih lanjut mengenai tips mempercepat website joomla responsive mari kita simak pengertian website responsive terlebih dulu.
Apa sih website responsive?
Pengertian website responsive adalah jenis website yang dapat mengakomodasi berbagai ukuran lebar layar pengaksesnya. Sederhananya website responsive adalah jenis website yang enak dibuka di berbagai jenis perangkat.
Sebuah website responsive hadir karena trend baru di dunia pengembangan website yang bernama Webdesain Responsive atau lebih dikenal dengan Responsive Webdesign.
Website Joomla Responsive
Kini hampir semua website joomla telah mendukung website responsive, sehingga anda tidak perlu lagi membuat satu tema khusus untuk versi mobile, cukup dengan satu tema website joomla anda dapat diakses dari segala jenis perangkat para pengaksesnya.
Akan tetapi dari hasil ujicoba saya pada saat menggunakan jenis tema website responsive di joomla, baik joomla versi 2.5 maupun joomla 3.x.x, ketika diakses dari perangkat mobile seperti telepon android, telepon iOS maupun telepon blackberry membutuhkan waktu yang terbilang cukup lama untuk sebuah website mobile. Ketika membandingkannya dengan website-website populer yang memiliki versi mobile, ternyata tema website responsive di joomla kalah telak pada waktu tunggu ketika awal diakses (untuk ini saya belum dapat menampilkan grafik perbandingannya :)).
Pengaturan Tampilan Joomla Responsive Pada Versi Mobile
Hampir semua tema website joomla responsive menggunakan teknologi bootstrap, di mana para pengguna dapat menambahkan kode tambahan pada pengaturan modul joomla agar modul-modul yang anda tampilkan sesuai dengan keperluan dan kebutuhannya. Sebagai catatan anda, “Semakin banyak modul yang anda gunakan, akan semakin menambah waktu tunggu website joomla anda ketika dibuka”. Dengan demikian aturlah modul-modul yang tampil sesuai dengan porsi dan kebutuhannya, dan pada versi tertentu, misalnya versi mobile tampilkan modul-modul yang diperlukan khusus untuk perangkat tersebut agar waktu tunggu website anda semakin kecil ketika diakses.
Module Class Suffix
Untuk mengaktifkan kode bootstrap pada modul joomla dengan cara menambahkan kode bootstrap pada modul joomla anda. Cari opsi “Module Class Suffix” pada pengaturan modul joomla pada halaman administrator dan tambahkan kode “hidden-phone” agar modul tersebut tidak tampil ketika dibuka pada perangkat mobile dengan lebar layar yang lebih kecil. Untuk lebih lengkap mengenai kode bootstrap yang dapat anda tambahkan pada pengaturan modul joomla berikut daftarnya :
- hidden-desktop (ukuran 768px keatas)
- hidden-tablet-landscape (ukuran 768px keatas)
- hidden-tablet-portrait (767px ke 481px)
- hidden-mobile (480px kebawah)http://player.vimeo.com/video/65638909Catatan :Jika anda menggunakan template framework tertentu, kadang pengembang templatenya juga memiliki kode tertentu untuk mengaktifkannya pada joomla modul. Tips di atas berlaku untuk semua template joomla yang menggunakan bootstrap sebagai bagian dari templatenya.
