Apakah anda sudah mengetahui apa itu Responsive Website ? Nah jika belum maka baca artikel ini sampai selesai. Karena ini merupakan hal yang paling diutamakan / dicari oleh banyak orang ketika memiliki website. Sebelumnya mari kita pelajari dulu apa itu Responsive Website.

Responsive Web adalah website yang bisa berubah – ubah bentuk sesuai dengan ukuran layar menampilkan websitenya. Itu sih definisi saya secara garis besar. Karena itu yang membuat lebih menarik dan lebih cepat ditampilkan. Selain itu nggak ingin kan tampilan website kita kecil – kecil ketika dilihat via handphone.

Responsive Website adalah sebuah teknik yang digunakan untuk membuat layout website menyesuaikan diri dengan tampilan device pengunjung, baik ukuran maupun orientasinya. Jadi tampilan yang berada di desktop komputer dengan tampilan yang diakses melalu SmartPhone misalnya, itu akan berbeda tampilannya.

Nah tentu ada kelebihan apabila website anda sudah support dengan responsive web. Salah satu kelebihannya adalah menghemat bandwith dan data yang dipergunakan untuk akses web agan sehingga selain lebih cepat juga lebih hemat data bagi pengunjung. Pengaruh lho agar pembaca website agan tidak lari / skip karena loading website agan lama.

Mungkin berikut ada tambahan dari forum sebelah untuk menampilkan website kita menjadi responsive. Berikut kode yang digunakan untuk mendeteksi layar device yang digunakan:
*Smartphones (portrait and landscape) ———– */
@media only screen
and (min-width : 320px)
and (max-width : 480px)
{ /* Styles */ }
/* Smartphones (landscape) ———– */
@media only screen
and (min-width : 321px)
{ /* Styles */ }
/* Smartphones (portrait) ———– */
@media only screen
and (max-width : 320px)
{ /* Styles */ }
/* iPads (portrait and landscape) ———– */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
{ /* Styles */ }
/* iPads (landscape) ———– */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape)
{ /* Styles */ }
/* iPads (portrait) ———– */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait)
{ /* Styles */ }
/* Desktops and laptops ———– */
@media only screen
and (min-width : 1224px)
{ /* Styles */ }
/* Large screens ———– */
@media only screen
and (min-width : 1824px)
{ /* Styles */ }
/* iPhone 4 ———– */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)
{ /* Styles */ }

Semoga artikel ini membantu, jangan lupa komentar dan share ya agar sama sama bermanfaat bagi semuanya.

TINGGALKAN KOMENTAR

Please enter your comment!
Please enter your name here