08/10/2016

Membuat Template Responsive Material Design 2016 Terbaru Keren Dan Bagus


Template Responsive, merupakan template yang di gunakan oleh hampir seluruh website di dunia karena memungkinkan penyesuaian width yang pas dengan ukuran layar browser. Begitu juga dengan blog ini, walaupun saya bukan Blogger Design yang mempunyai ilmu tentang peng-grafisan atau pen-designan tapi saya juga berusaha merubah template blog ini menjadi full responsive dan lebih fresh.

Seperti berita akhir-akhir ini, bahwa penggunaan warna material design menjadi salah satu pilihan designer web maupun aplikasi untuk menggunakannya. Dan semua itu berawal dari google yang gencar-gencar melakukan pembaruan yang lebih terhadap interface-nya. Sudah tidak bisa dipungkiri lagi bahwa penggunaan warna material menimbulkan kesan yang segar dan lebih hidup karena menggunakan warna-warna yang cerah dan tingkat opacity yang pas.

Membuat blog menjadi full responsive itu ternyata cukup susah dilakukan oleh seorang yang awam seperti saya. Tapi alhasil dengan kerja keras dan pantang menyerah dalam berfikir akhirnya jadi juga template responsive ini. Pertama kali yang saya lakukan adalah pemilihan warna yang tepat untuk tampilan blog. Warna merupakan bagian yang penting karena langsung berhubungan dengan visual anda. Jadi anda harus memikirkan waktu lebih dalam memilih warna blog.

Sebagai acuan, mungkin anda bisa melihat blog atau template yang sudah jadi dan melihan kombinasi warna yang digunkannya. Gunakan template yang sudah jadi itu untuk bahan refrensi anda dalam membuat kombinasi warna Blog. Anda juga bisa melihat refrensi warna Material Design yang di sediakan oleh Google selaku raksasa internet yang selalu up to date.

Google telah membahas tuntas tentang cara penggunaan dan pemilihan warna hingga ke element-element dasarnya. Silakan kunjungi website resmi Google Material Design untuk refrensi lebih lengkap. Silakan anda gunakan warna yang menurut anda sesuai dengan design anda. Sara saya jangan menggunakan warna yang terlalu tajam atau terlalu gelap karena akan menggangu view atau pandangan visitor blog kita.

Silakan anda otak-atik warna-warna tersebut hingga menjadi kesatuan yang segar dan enak di pandang. Sesudah anda fix melakukan pemilihan warna kini saatnya anda untuk melakukan editing pada width di setiap element template blog sobat.

Secara default template blog dari google belum semuanya 100% responsive alias sebagian besar designer masih menggunakan width px ( pixel ) yang membuat tampilan blog tidak nyaman di lihat saat layar browser di perkecil. Dan ini tugas kedua anda untuk merubah seluruh ukuran width pada template blog sobat.

Secara garis besar width template responsive terletak pada width body yang 100% dan penentuan width content-inner juga 100%. Perlu di ingat anda harus melihat satu persatu dari nilai width yang telah di tentukan oleh pembuat template yang anda gunakan. Dan ketika anda menembukan element yang belom fix silakan rubah dan lihat hasilnya.

Oh, iya untuk merubah template menjadi responsive element-element utama dari template tersebut harus di rubah menjadi satuan persen ( % ). Jadi memungkinkan ketika browser melakukan resize windows maka ukuran dari width kita juga akan ter resize mengikuti size browser tersebut.

Gunakan @media query untuk menentukan perubahan yang di khususkan untuk max-width atau min-width. Dengan menggunakan @media tersebut maka ukuran width template anda akan melakukan perintah jika @mendia query sesuai dengan ukuran layar browser.Jadi tampilan website anda bisa lebih powerful dan tentunya ramah bagi visitor maupun google bot.

Saya rasa corat-coret tidak pentinnya saya akhiri dulu. Jujur saya hampir 5 bulan tidak menulis di blog ini karena keadaan yang membuat saya jatuh terpuruk dalah lembah kenistaan. Hehehe. Tapi mulai saat ini saya akan bangkit lagi seperti halnya tampilan blog ini dengan suasana baru, begitupun dengan saya harus semangat baru dan dengan ide-ide yang baru :)


***

No comments :

Post a Comment