Sebenarnya ini bukanlah satu-satunya cara. Ada banyak sekali metode yang bisa anda jumpai di google. Namun cara ini adalah sebuah rangkuman dari berbagai metode yang pernah saya baca atau saya dapat dari blogwalking baik di google atau di media sosial yang membahas khusus kode HTML dan CSS.
Yuk, kita mulai...
Mengapa harus responsive?
- Kebanyakan pengunjung web menggunakan handphone untuk berselancar di internet. Ada sekitar 53% total dari website traffic.
- Desain responsive adalah berbicara tentang merancang website yang terlihat bagus diberbagai macam device (Laptop, handphone potrait, handphone lanscape, etc)
Silakan ikuti petunjuk berikut!
Meta Viewport
Tag Meta Viewport memberikan instruksi kepada browser dalam mengontrol dimensi dan skala halaman sebuah website.
Dipasang pada bagian head
Adapun kodenya adalah sebagai berikut.
<meta name="viewport" content="width=device-width, initial-scale=1"/>
Perbedaan menggunakan meta tag viewport dan tidak menggunakan.
Media Queries
Ini adalah cara bagaimana menentukan style website ketika berada pada skala halaman tertentu dan dalam device tertentu. Dalam kode media queries kita dapat menentukan atau memasukkan gaya halaman dengan mudah. Apakah posisi contentnya berada disamping atau dibawah. Contoh yang bisa kita atur disini antara lain: width, height, orientation, dan lain-lain.
Dipasang pada bagian head, tepatnya pada bagian <style> (CSS) atau diatas ]]</b:skin>
Berikut adalah rekomendasi CSS untuk media queries (breakpoint) untuk semua perangkat.
// Ekstra small devices (phone, 600px dan dibawahnya)
@media only screen and (max-width:600px){
//kode disini
}
// Small devices (potrait tablets and large phones, 600px dan diatasnya)
@media only screen and (min-width:600px){
//kode disini
}
// Medium devices (lanscape tablets, 768px dan diatasnya)
@media only screen and (min-width:768px){
//kode disini
}
// Large devices (laptop/desktop, 992px dan diatasnya)
@media only screen and (min-width:992px){
//kode disini
}
// Ekstra large devices (large laptop and desktop, 1200px dan diatasnya)
@media only screen and (min-width:1200px){
//kode disini
}
Silakan gunakan sesuai kebutuhan. Atau dipakai semua juga tidak masalah.
Layout
Ada beberapa contoh penggunaan pengkondisian layout yang bisa dipakai. Bisa block dengan menggunakan css float, dapat juga menggunakan grid, dan ada juga yang menggunakan flex. Banyak yang menyarankan menggunakan flex, namun sepanjang pengalaman saya, tergantung kebutuhan. Misal jika kita ingin membuat sebuah galeri gambar maka gunakan grid, namun jika pemposisian layout konten gunakan flex.
Contoh kode CSSnya adalah sebagai berikut.
.items {
display:flex;
justify-content:space-between;
}
Mobile First
Jika anda mendesain dengan mobile first (mengutamakan tampilan mobile), anda dapat mengoptimalkan breakpoint pada konten dan mempertahankan jumlah breakpoint sesedikit mungkin.
Relative Units
Jangan gunakan satuan ukuran pasti, seperti px, pt, cm, dan lainnya, sebagai gantinya gunakan %
.main {
width: 70%;
}
.sidebar {
width: 30%;
}
Demikian yang mungkin bisa saya bagikan mengenai langkah untuk membuat template web responsive, dan semoga bermanfaat. Terima kasih telah berkunjung ke blog Agung Jaka Nugraha. Wassalam