Membuat template blog responsive di tampilan Mobile

membuat template responsive

Melihat perkembangan pengguna smartphone, hp, tablet yang semakin besar bagi pemilik web/blog yang bertujuan untuk user friendly harus sangat memperhatikan blog nya di tampilan mobile. Hampir 60% pengguna mobile saat ini melebihi pengguna dekstop. Khususnya jenis-jenis template wordpress atau blogspot yang free gratisan belum tentu sudah responsive atau mobile friendly. Masalah yang saya alami setelah tampilan mobile bener-bener responsive, ternyata blog statis tidak bisa di zoom out, di zoom in.

Saya sempat bongkar pasang theme supaya theme blog bisa benar-benar responsive baik untuk cms wordpress maupun blogspot.

Apa itu responsive template
Template responsive adalah istilah yang digunakan dalam konsep memebuat design template yang memungkinkan tata letak bisa berubah tergantung pada resolusi layar saat tampil.

Misalnya bisa tampil penuh di tampilan dekstop, tapi juga bisa langsung sesuai ketika tampil di mobile. Smartphoe beda ukuran layar akan beda tampilan, itulah gunanya responsive bisa otomatis menyesuaikan.

Langkah-langkah membuat template resonsive

Cari theme responsive
Karena saat ini saya belum expert dalam hal designer theme, coding dsb mencari theme yang sudah tersedia saya rasa lebih mudah. Setelah dipasang kemudiandi cek di tampilan smartphone untuk memastikan responsive (tampilan pas tidak kekecilan, tidak kebesaran)

Supaya bisa di zoom out di tampilan mobile

cari code

meta name=”viewport” content=”width=device-width,initial-scale=1,maximum-scale=1

Jika di wordpress codenya ada di header.php

Jika di blogspot ada di edit html untuk lebih mudahnya ctrlF + maximum-scale, jika tidak ada anda bisa menambahkan meta di atas code

<meta content=’text/html;charset=UTF-8′ http-equiv=’Content-Type’/>

Selanjutanya “maximum-scale=1” diganti maximum-scale=2 atau 3 atau 4 sesuai keinginan maksimal zoom

Alhamdulillah saat ini beberapa blog saya baik engine wordpress maupun blogspot sudah responsive

Advertisements

4 thoughts on “Membuat template blog responsive di tampilan Mobile

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s