Membuat Website Versi Mobile dengan CSS dan HTML

Dengan adanya perkembangan dunia mobile, maka menjadi sebuah keharusan oleh seorang web developer untuk menguasai cara merubah tampilan web yang bisa dibuka dengan perangkat mobile. Pada dasarnya, tampilan pada komputer desktop lebih besar, namun bagaimana caranya web yang kita buat bisa menyesuaikan tampilannya di perangkat mobile yang relative lebih kecil. Ada 3 teknik membuat tampilan web pada perangkat mobile atau web responsif, yaitu :

1. Menggunakan CSS

CSS bisa di gunakan untuk mengatur secara otomatis tampilan dari template HTML saat website kita di buka menggunakan perangkat mobile. Berikut ini script CSS sederhana untuk tampilan di mobile

mobile template

Disini letak content

Yang menjadi kunci dalam menyesuaikan tampilan web di perangkat mobile adalah max-width, dengan batasan lebar hanya sampai 700px.

Cara sederhana membuktikan apakah web kita sudah bisa menyesuaikan tampilannya di perangkat mobile atau tidak. Silahkan buka web tersebut dengan mozila firefox, kemudian tekan CTRL+SHIFT+M. Hasilanya akan terlihat seperti dibawah ini