Adakah Laman Web Anda Responsive?

Adakah Laman Web Anda Responsive?

Responsive Web Design adalah sebuah teknik yang digunakan untuk membuat layout website menyesuaikan diri berpandukan penggunaan alat (sama ada komputer, telefon pintar atau tablet) pengunjung, baik ukuran mahupun orientasi kandungannya. Jadi layout yang berada di komputer dengan layout yang diakses melalu SmartPhone misalannya, akan berbeza layoutnya. Untuk memeriksa sama ada laman web tersebut bersifat responsive ataupun tidak, anda tidak perlu mengaksesnya melalui telefon selular, namun cukup sekadar dengan meminimakan browser Internet sahaja ke dalam ukuran telefon selular yang diinginkan. Di sini anda dapat melihat bagaimana laman web tersebut akan dilihat pada layar telefon selular.

Terbaik Untuk Enjin Carian

Sama ada anda gemar atau tidak, laman web responsive merupakan ukuran terbaru yang diambil kira untuk ranking teratas di dalam enjin carian Google. Ini kerana, jika laman web anda tidak bersifat responsive, enjin carian Google akan memberikan penalti kepada ranking laman web anda. Kesannya, laman web anda yang mungkin satu ketika dahulu di ranking teratas untuk mana-mana keyword, tetapi kini telah lenyap sama sekali di dalam enjin carian Google.

Jadi, jika anda ingin mempunyai laman web sendiri, pastikan laman web anda perlu bersifat responsive atau fleksibel.

Bagaimana Menghasilkan Laman Web Responsive?

Teknik yang digunakan adalah sama sahaja dengan kod HTML dan CSS. Namun setelah selesai membuat layout untuk desktop, anda harus membuat satu lagi file CSS untuk device lainnya. Untuk file CSS yang kedua, pembuatannya akan sedikit berbeza dengan CSS yang pertama. Ini kerana terdapat sedikit trik khusus iaitu Media Queries Boilerplate, yang digunakan untuk mendeteksi layar device yang digunakan pengguna.

Berikut adalah kod 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 */ }

Kesimpulan.

Justeru, bagi memastikan laman web anda dijumpai di enjin carian, maka laman web responsive adalah satu kemestian pada masa ini.

2016-11-21T17:04:55+00:00