iklan-surgaweb2

Di tutorial sebelumnya saya telah menjelaskan cara mendeteksi browser client yang menggunakan perangkat mobile. Silahkan dibaca disini: Cara mendeteksi mobile browser. Sekarang saya akan jelaskan perbedaan HTML untuk versi desktop dengan HTML untuk versi mobile.

Perbedaannya hanya pada meta tag:

Jadi jika anda ingin membuat halaman HTML anda menjadi versi mobile anda cukup menambahkan meta tag di atas ke header HTML anda. Misalnya:

Gampang kan?! 🙂

Nah agar tampilan web anda tidak kacau dalam artian tidak melebihi lebar layar HP/tablet maka semua element width dalam css dan html anda jangan menggunakan lebih dari 400px. Untuk leibih amannya gunakan width:100%; atau width:auto;

Jadi sebenarnya perbedaanya hanya pada skalanya. Jika halaman webnya kita buat skala maksimum pada meta tag adalah 1.0 maka halaman website kita tersebut tidak bisa diperbesar (zoom) atau diperkecil. Dia akan otomatis menyesuaikan dengan ukuran layar device yang membukanya. Tapi kalau ada terdapat misalnya gambar yang ukurannya melebihi ukuran layar smartphone pengunjung maka tampilannya akan sedikit kacau. Jadi harus diseting agar ukurannya tidak melebihi ukuran layar dengan cara yang sudah disebutkan diatas.

Baca juga: Cara membuat CSS khusus untuk tampilan web mobile

jual tool seo penyusun kata otomatis

Yang saya dijelaskan diatas ini sebenarnya teori dasarnya saja. Namun seiring perkembangan teknologi, untuk membuat website versi mobile sekarang sudah sangat banyak tools atau library yang langsung bisa kita pakai tanpa repot-repot kita membuatnya dari awal. Salah satunya anda bisa menggunakan Jquery Mobile yang dirancang khusus untuk pembuatan website versi mobile. Atau anda juga bisa menggunakan web desain framework populer seperti:

Twitter Bootstrap 3

Bootstrap

 

Foundation Framework

Foundation

Gumby Framework

Gumby

 

Yahoo Pure CSS

Pure

 

InK Interface Kit

Ink

Dengan menggunakan framework web desain ini anda sudah bisa mendapatkan website versi mobile secara otomatis karena frameword desain ini sudah auto responsive yang artinya akan otomatis mengenali apa perangkat pengunjung dan langsung menyesuaikan tampilannya. Jadi silahkan anda pelajari salah satu dari framework ini agar website anda support untuk mobile view.

 

Semoga bermanfaat.

[AdsWithin]

(Visited 60,360 times, 32 visits today)