Responsinator, Cara Efektif Menguji Template Responsive

Responsinator, Cara Efektif Menguji Template Responsive. Tampilan template blog yang responsive tentu membuat nyaman pengunjung blog saat mereka membuka blog Anda dari berbagai perangkat. Tidak hanya tampilan situs yang sempurna jika diakses via dekstop, tapi juga sempurna saat dibuka lewat perangkat mobile seperti tablet, hp, ipad dan sebagainya. Tampilan responsive mengacu pada lebar layar perangkat yang digunakan. Jadi pembaca tidak diribetkan dengan scroll jika mereka membuka situs blog Anda dari HPnya, Andalah yang mengatur secara otomatis tampilan template tersebut untuk berbagai ukuran layar. Perlu dipertimbangkan, saat ini tidak sedikit pengunjung, yang browsing dengan menggunakan HP. Jangan sampai Anda kehilangan pelanggan hanya karena tampilan blog Anda tidak responsive.

Responsinator, Cara Efektif Menguji Template Responsive

• Setelah klik visit website silahkan masukkan url homepage / url postingan yang ingin Anda check apakah responsive jika dibuka dari berbagai perangkat.
• Lihat hasilnya
• Penampakan yang ada menggambarkan kondisi real jika blog Anda dibuka dari berbagai perangkat yang memiliki ukuran berbeda - beda

Tips membuat template blog responsive sesuai situs responsinator
Tambahkan css berikut ini pada template Anda
@media screen and (max-width: 768px) and (min-width: 761px)
{ELEMEN}

@media screen and (max-width: 760px) and (min-width: 737px)
{ELEMEN}

@media screen and (max-width: 736px) and (min-width: 735px)
{ELEMEN}

@media screen and (max-width: 734px) and (min-width: 670px)
{ELEMEN}

@media screen and (max-width: 667px) and (min-width: 605px)
{ELEMEN}

@media screen and (max-width: 600px) and (min-width: 570px)
{ELEMEN}

@media screen and (max-width: 568px) and (min-width: 485px)
{ELEMEN}

@media screen and (max-width: 480px) and (min-width: 415px)
{ELEMEN}

@media screen and (max-width: 414px) and (min-width: 385px)
{ELEMEN}

@media screen and (max-width: 384px) and (min-width: 376px)
{ELEMEN}

@media screen and (max-width: 375px) and (min-width: 325px)
{ELEMEN}

@media screen and (max-width: 320px) and (min-width: 245px)
{ELEMEN}

@media screen and (max-width: 240px)
{ELEMEN}

Contoh penerapan
@media screen and (max-width: 768px) and (min-width: 761px)
{outer-wrapper{width:90%} #header-wrapper, #content-wrapper, #sidebar-wrapper,#footer-wrapper{width:100%}}

Demikian info tentang Responsinator, Cara Efektif Menguji Template Responsive. Mudah - mudahan bermanfaat buat Anda yang membutuhkan.

Tweet