Cara Membuat Web Responsive

Kalau kamu bukan seorang badui, atau dengan kata lain punya pilihan untuk memasukkan update teknologi terbaru dalam hidupmu, saya jamin kamu memiliki smartphone.

Atau.... setidaknya kamu memiliki keinginan dan rencana untuk membeli gadget semacam itu di masa akan datang. Kalau bisa di waktu dekat ini.

Hubungan yang semakin canggih antara internet dan smartphone menjadikan duniamu semakin luas, sebab.... dari smartphone itulah kamu bisa mengupdate kabar, berita, dan informasi terbaru secara mudah dimanapun dan kapanpun.

Beda, kalau dengan dulu ketika ponsel belum terintegrasikan dengan jaringan internet. Hanya komputer atau laptop yang mampu. Tentu akan rumit untuk mengupdate informasi dari internet.

Dan.... ketika kamu membuka suatu blog atau website dari smartphonemu dan tampilannya tidak sesuai ukuran layar, alias tampilannya terlalu lebar dan harus dizoom lalu discroll dulu ke samping agar bisa mengeksplore seluruh bagian.

Repot.... dan kurang memuaskan.

Begini saja, dari dua tampilan berikut sebagai pembaca yang suka instan kamu lebih memilih tampilan yang mana?

Pasti yang kiri kan?

.....Sebab, sudah secara otomatis bisa langsung dibaca.

Hal yang sama berlaku terhadap blog atau websitemu.

Sekarang.....

.....pertanyannya, bagaimana cara membuat web responsive? Bagaimana cara membuat website pas di segala ukuran layar? Mengingat ukuran layar smartphone, tablet, dan laptop (PC) bermacam-macam.

Kuncinya adalah....

Terletak pada cara membuat template responsive.

Biar nggak lama-lama, kita mulai saja cara membuat template blog responsive milikmu sendiri!

Ada tiga cara yang bisa Saya simpulkan untuk membuat web responsive.

Pertama, menggunakan template bawaan blogger dan membuat tampilan mobilenya aktif.

Caranya seperti berikut ini,centang pilihan Yes, Show mobile template on mobile device

Salah satu contoh tampilannya adalah seperti ini.

Kelebihannya, kamu tidak perlu ahli koding (terutama CSS) bahkan tanpa harus belajar sekalipun.

Kelemahannya, karena ini desain template bawaan blogger maka agak sulit untuk memodifikasi tampilannya, kecuali warna, jenis font, ukuran dan komponen mudah lainnya dan ada pada pilihan customize. Sehingga tampilannya (menurut Saya) agak kurang menarik.

Cara kedua, adalah menggunakan template responsive dari pihak ketiga.

Bagusnya kamu disajikan dengan banyak pilihan baik yang gratis maupun berbayar.

Kalau minat gratis bisa dilihat di Gooyaabi. atau mau coba template buatan saya?

Untuk template dari pihak ketiga, lakukan hal sebaliknya dibandingkan cara pertama. Kalau nggak gitu, tampilan versi mobilenya bisa tidak muncul.

jadi, pilih No, Show dekstop template on mobile device

Kelemahannya, ada link credit pembuat template, kecuali kamu membeli template premium. (Yang artinya kamu memiliki uang lebih).

Cara ketiga, berlaku untuk kamu yang ingin membuat template sendiri, ingin menjadikan template bawaan blogger jadi responsive atau memodifikasi template pihak ketiga tapi belum responsive.

Sebagai catatan, cara ketiga ini pilihannya sama seperti cara kedua agar template responsivenya bisa tampil pada mobile device.

Berdasar pengalaman saya, ada tiga tool gratis yang bisa digunakan untuk membantu membuat template blog responsive.

AmIResponisve?

Dimana tool satu ini fungsinya untuk memeriksa apakah tampilan webnya sudah responsive apa belum.

Sebenarnya, selain menggunakan tool AmIResponsive atau semacamnya kamu juga bisa hanya menggunakan layar browser untuk memeriksa templatemu sudah responsive atau belum.

Saya pribadi lebih suka menggunakan layar browser.

Kelebihannya, kamu bisa memeriksa tampilan responsive segala ukuran dengan cepat.

Sementara jika menggunakan tool, ada tool yang tidak menyediakan ukuran yang lengkap dan ada pula yang repot harus mengganti ukuran layar yang ingin diperiksa.

Kelebihan kedua, layar smartphone ada banyak macamnya dan bisa saja terus berkembang dari jaman ke jaman. Jadi, ketika menggunakan layar browser, kamu bisa membuat tampilan web responsive di segala ukuran.

Coba lihat screenshot berikut!

Untuk tool selanjutnya.... adalah Pagespeedinsights.

Lhoh, ini kan tool untuk memeriksa kecepatan blog?

Jangan salah! Tool ini juga menyajikan petunjuk apakah tampilan blog/web milikmu sudah responsive atau belum.

Tandanya adalah di bagian mobile pada kolom user experience.

Jika nilainya sudah 100, maka tampilan mobilenya sudah tidak ada masalah.

Seperti contoh berikut ini!

Tapi..... jika user experiencenya tidak sampai 100, artinya belum 100% responsive.

.....Bagusnya, ada keterangan hal-hal apa saja yang harus diperbaiki, seperti yang terlihat pada bagian di bawah skor.

Tapi, sebaiknya ini digunakan untuk pemeriksaan akhir saja.

Sekarang, kita mulai melakukan edit templatenya.

Menggunakan Meta Viewport

Fungsi Meta satu ini untuk membuat tampilan web atau blog menjadi responsive secara otomatis.

Caranya, kamu copy kode di bawah ini!

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

Lalu, letakkan di bawah <head>

Dan lihat hasilnya.

Memang sudah menjadi responsive, tapi tidak rapi. Benar kan?

....Sebab, secara detailnya memang belum diatur.

Jadi, kita harus mengaturnya secara manual dengan bantuan Media Query.

Maksudnya..... Dibantu dengan kode (Fungsinya mirip tag kondisional, hanya saja menyesuaikan kondisi lebar layar)

@media screen and (max-width:1216px){
/*  kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:1024px){
/*  kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:992px){
/*  kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:880px){
. /*  kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:768px){
/*  kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:736px){
/*  kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width: 667px){
/*  kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:600px){
/*  kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:568px){
/*  kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:480px){
/*  kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:414px){
/*  kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width: 375px){
/*  kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:320px){
/*  kode css yang ingin diubah ukurannya disini */
}
@media screen and (max-width:240px){
/*  kode css yang ingin diubah ukurannya disini */
}

Pasti.... kalau hanya Saya berikan kode macam itu kamu bingung kan, selanjutnya mau apa?

Saya dulu juga begitu....

Jadi.... Kode media queri di atas hanya sebuah kerangka untuk membuat tampilan sesuai ukuran layar.

Kamu bisa lihat angka 1216px, 1024px,.... sampai 240px? Itu adalah ukuran layar untuk menyesuaikan tampilannya.

Cara kerjanya gini, di dalam kode tersebut kamu letakkan kode css untuk elemen yang ingin dirubah tampilannya.

Misal, tampilan posting dan sidebar yang jika dikecilkan pada layar ukuran  414px, hasilnya tetap berjajar dan semakin mengecil tapi mengganggu pemandangan.

Seperti pada contoh saat menggunakan viewport saja.....

Bagusnya jika dibuat posisinya menjadi posting di atas dan sidebar di bawah, agar enak dilihat dan nyaman dibaca.

Contoh kode awalnya seperti ini

#content-wrapper{background: transparent; width:65%; float:left;border:1px solid #eaeaea;margin:10px 0;}
#sidebar-wrapper{background: transparent; width:30%; float:right;border:1px solid #eaeaea;margin:10px 0;}

Kita mengatur menjadi seperti ini! (Ingat, kode ini diletakkan di atas </style>)

@media screen and (max-width:414px){
#content-wrapper, #sidebar-wrapper {float:none; width:100%}
}

Makanya jadinya seperti ini!

Dan lihat, sidebar sudah pindah ada di bawah postingan.

Itu hanya contoh kecil, kamu bisa menyesuaikan dengan selera.

Dan untuk ukuran, saya senang menggunakan persen (%) karena menurut saya lebih responsive di segala ukuran.

Misalnya saja pada layar ukuran 414px saya menggunakan ukuran lebar (Width) dengan px (Piksel), Contohnya ukuran #content-wrapper{width:414px}

Ketika pada gadget ukuran 300px, ukuran content-wrapper akan melebar.

Ini, ketika saya menggunakan ukuran piksel.

Memang bisa menyesuaikan dengan menambah kode untuk ukuran layar 300px (dengan cara yang sama seperti di atas).

Tapi.... tentu harus membuat banyak kode untuk media query dengan berbagai ukuran layar. Kalau menurutmu itu tidak masalah, ya silahkan saja.

Memang sih, ukuran layar gadget standar adalah seperti di atas, tapi bagaimana jika ada perusahaan smartphone yang iseng membuat ukuran layar yang tidak standar. Misalnya! Siapa tahu kan?

....Jika menggunakan persen, ada satu kelebihan dimana ukurannya untuk ukuran layar yang lebih kecil akan mengikuti.

Meski begitu, bukan berarti gak ada kelemahannya. Kelemahannya ada pada widget yang kamu harapkan sama di segala ukuran. Misalnya saja Header.

Saya menghendaki Header berukuran kisaran 250px di semua ukuran layar.

Karena saya menggunakan persen, ukurannya saya buat 18% untuk ukuran layar 1400px.

Tapi apa jadinya jika dibuka pada layar dengan ukuran lebih kecil? Yah, header ikut mengecil.

Kalau 18% dari 1400px adalah 252px

Sementara 18% dari 414px adalah 74px.

......Kecil sekali kan?

Untuk mengatasinya, pada layar berukuran kecil (Jika kamu menghendaki bagian yang ukurannya besar atau sama dalam segala ukuran) ada dua cara,

Pertama menerapkan ukuran piksel, misal

#header{width:250px}

Cara kedua tetap menggunakan persen, tapi dengan persentase pembesaran seperti ini!

@media screen and (max-width:800px){
#header{width:31%}
}

@media screen and (max-width:414px){
#header{width:60%}

}

Dan seterusnya, bisa kamu sesuaikan sendiri.

Dalam mengatur tampilan website yang responsive, terkadang kita perlu menghilangkan atau memunculkan obyek.

Contohnya, saya pernah menerapkan dua menu navigasi. Satu untuk tampilan dekstop dan satu lagi untuk tampilan mobile.

Misal kodenya begini,

#menunavigasidekstop {display:block}
#menunavigasiresponsive{display:none}

@media screen and (max-width:414px){
#menunavigasidekstop {display:none}
#menunavigasiresponsive{display:block}
}

Yang artinya, ketika tampilan layar besar atau dekstop maka menunavigasidekstop yang tampil dan menunavigasi responsive tidak muncul.

Sementara itu, ketika membuka pada layar gadget ukuran 414px yang tampil adalah menunavigasiresponsive, dan menunavigasidekstop jadi tidak kelihatan.

Cara menghilangkan obyek ini bagus digunakan untuk mengurangi banyaknya obyek pada tampilan mobile. Karena ukuran layar yang lebih kecil, jadi lebih bagus kalau obyek yang tampil secukupnya saja.

[Itu hanya saran, selebihnya sesuai selera kamu saja]

Selain menggunakan piksel dan persen sebagai ukuran, bisa juga menggunakan satuan em.

....Kebanyakan.....

Satuan itu digunakan untuk ukuran font agar lebih mengikuti ukuran dari font utama. Jadi lebih simpel tidak perlu meresponsivekan secara manual font yang ada.

Misalnya saja begini,

.body{Font-size:20px}
#header{font-size:2em}

@media screen and (max-width:414px){
.body{font-size:10px}}

Maka, ukuran font header 2em (yang artinya dua kali ukuran font utama) akan mengikuti ketika membuka pada tampilan layar 414px.

Ada satu masalah yang sering dialami ketika membuat template responsive, yaitu ketika tulisan terlalu panjang tanpa spasi dan melebihi batas ukuran layar.

Pernah lihat kan?

Cara mengatasinya sangat mudah,

Tambahkan kode berikut pada elemen yang ingin diatasi

word-wrap:break-word

Misalnya,

.post{word-wrap:break-word}

Maka, secara otomatis tulisan pada postingan akan menyesuaikan ukuran layar meski panjang dan tanpa spasi sekalipun.

Dari sini ada yang bingung?

Saya rasa wajar kalau bingung, karena belum dipraktekan. Tapi, kalau sudah diterapkan akan lebih terasa mudah.

Tapi..... Kalau masih saja bingung menerapkannya dan nggak mau ganti template responsive (Ingin template yang lama)

Saya menawarkan jasa menjadikan templatenya responsive!

Hargai saja seperti Paket data AON yang 1GB. (Anggap saja ini ongkos untuk akses internetnya saja)

Tapi, kalau mau cepet jadinya mending seharga paketan telkomsel, lebih ngegas di daerah saya!

Ngomong-ngomong, ini masih satu paket dengan panduan membuat template sendiri