Teknik Dasar Tampilan Responsif pada Website- 

Tampilan Responsif pada Website: Mengapa Perlu? 

Kini mayoritas pengguna internet menggunakan mobile device untuk mengakses website.  Yup, seperti digambarkan grafik di bawah,  persentasenya di tingkat global terus meningkat dari tahun ke tahun. Ya wajar dong jaman now. Siapa tak punya telepon pintar? Mungkin juga saat ini kalian baca artikel ini pun, pakai  smartphone, bukan?

Hal di atas jadi alasan utama wajibnya sebuah aplikasi web menerapkan prinsip tampilan responsif (responsive layout).

Responsive layout adalah pendekatan untuk pembuatan halaman web yang memanfaatkan tata letak yang fleksibel, gambar yang fleksibel dan kueri media pada style sheet. 

Keuntungan aplikasi web yang menerapkan responsive layout adalah informasi yang ditampilkan pada website  dapat disampaikan dan diterima oleh pengunjung dengan baik, tanpa kehilangan sebagian informasi dan terlepas diakses dari perangkat mobile apapun.

Website tanpa responsive layout, terutama di moile device, akan jauh ditinggalkan pengunjung.

Ah tapi untuk apa kita tahu teknik dasar responsive layout? Kan sudah banyak framework yang sudah menanganinya? Sebutlah Bootstrap yang banyak digunakan. Ya mungkin sebagian dari kalian berpikir demikian. Tapi tak ada salahnya kita tahu dasar – dasar yang harus diterapkan pada web kita. Tujuannya agar tampilan menjadi lebih responsif di semua peranti.

Teknik Dasar Tampilan Responsif pada Website

Ketika ingin menerapkan prinsip responsif pada tampilan aplikasi web, sebaiknya kita mulai berpikir dari peranti berukuran kecil. Dengan batasan – batasan yang dimilikinya, proses membangun tampilan responsif, jadi menantang. Nah, jika kita telah  fokus pada peranti ukuran kecil,  kita dapat dengan mudahnya menerapkan tampilan responsif pada seluruh jenis ukuran layar. Keren kan?

Relative Units

Konsep terpenting dalam penerapan tampilan responsif adalah fluiditas dan proporsionalitas. Halaman harus dapat menyesuaikan setiap ukuran yang kita tampilkan pada layar peranti yang berbeda-beda. Dengan menggunakan relative units, tampilan akan dapat mudah menyesuaikan dengan keadaan layar.

Contohnya kita ingin membuat sebuah elemen div dengan lebar sesuai dengan viewport pada browser. Kita bisa saja berasumsi dengan menerapkan  lebar 1000px, misalnya, karena nilai tersebut cukup lebar untuk berbagai layar peranti. Maka kita menuliskan css seperti berikut:

Penggunaan unit PX tidaklah disarankan dalam kasus ini, karena unit PX sebaiknya digunakan untuk nilai yang tidak berubah-ubah. Jika kita ubah ukuran viewport lebih dari 1000px pada browser, maka tampilan tak seperti harapan kita.

Dengan mengubah satuan PX menjadi %, maka nilai width element div dapat menyesuaikan berdasarkan viewport yang tersedia.

Dengan begitu kita tak perlu khawatir tentang peranti apa yang akan mengakses website kita.

Typography Units

Dalam penerapan font, kita juga perlu menggunakan satuan relatif seperti em, rem, vw dan vh. Satuan tersebut dapat menyesuaikan ketika ukuran layar atau ukuran font itu sendiri diubah.

• em : Satuan relatif terhadap ukuran font sebuah elemen (2em berarti 2 kali ukuran font saat ini)
• ex: Satuan relatif terhadap tinggi font saat ini, satuan ini sangat jarang sekali digunakan.
• ch: Satuan relatif terhadap lebar dari karakter “0” nol.
• rem: Mirip seperti em, tetapi rem merupakan Satuan relatif terhadap ukuran font dari root element.
• vw:  Satuan relatif terhadap 1% lebar viewport. Contoh 1vw = 1% dari lebar viewport. Satuan ini tidak support pada IE8 ke bawah.
• vh: Satuan relatif terhadap 1% tinggi viewport. Contoh 1vh = 1% dari tinggi viewport. Satuan ini tidak support pada IE8 ke bawah.

Mari kita beri contoh penggunaan unit relative dengan vw pada font.

Berdasarkan kode di atas,  kita mengatur sebuah ukuran font element <h1> yang terdapat pada class .container dengan menggunakan satuan relatif vw. Dengan begitu ketika kita mencoba mengubah ukuran viewport, ukuran font tersebut akan menyesuaikan.

Set the Viewport

Viewport merupakan area yang dapat dilihat oleh pengguna kita pada halaman website. Ukuran viewport bervariasi berdasarkan peranti. Ukuran viewport pada sebuah peranti mobile, lebih kecil dibandingkan dengan layar komputer.

Sebelum adanya tablet ataupun handphone, halaman website didesain hanya untuk ukuran layar komputer. Dengan begitu banyak sekali website yang menerapkan tampilan dan ukuran yang static. Maka ketika halaman tersebut diakses melalui handphone atau tablet, ukuran akan terlalu besar untuk ditampilkan. Untuk mengatasi permasalahan tersebut kita perlu mengatur sebuah viewport pada halaman website kita.  

Mengatur viewport dapat melalui sebuah tag <meta> yang disisipkan pada header section berkas html.

Jika kita tidak ingin pengguna melakukan fitur zoom pada website, kita juga dapat mengaturnya dengan menuliskan viewport lebih lengkap.

Lebih jelasnya tentang gambaran fungsi penggunaan viewport, perhatikan saja dua contoh halaman berikut. Yang sebelah kiri tidak menerapkan viewport sedangkan sebelah kanan, sebaliknya. Mana yang lebih baik?

Set the Breakpoint

Dengan menetapkan sebuah breakpoint kita dapat mengatur sebuah styling element berdasarkan viewport. Maka dengan begitu konten yang kita tampilkan pada halaman dapat disesuaikan dengan berbagai peranti, baik itu tata letak ataupun ukuran font. Breakpoint dituliskan dalam styling atau CSS menggunakan @media query dan diikuti dengan ukuran viewport. Sebaiknya jangan menetapkan sebuah breakpoint berdasarkan kelas perangkat. Mendefinisikan breakpoint berdasarkan sebuah perangkat, produk atau brand tertentu akan menyulitkan kita dalam melakukan pemeliharaan (maintenance). Tentukanlah breakpoint berdasarkan lebar viewport. Tentukan nilai breakpoint untuk layar kecil, sedang dan besar.

Contohnya kita mempunyai sebuah html dengan susunan elemen seperti ini:

Kemudian pada styling/CSS kita menetapkan 3 breakpoint berdasarkan ukuran layar kecil, sedang dan besar.

Lihatlah perubahan yang terjadi ketika kita mengubah ukuran viewport.

Dalam GIF terlihat terdapat 3 perubahan tampilan.

Yang pertama ketika berada pada ukuran viewport besar, content box memiliki margin pada sebelah kiri dan kanannya, hal ini dikarenakan kita mengatur .container  untuk menerapkan margin-left dan margin-left dengan nilai auto jika min-width bernilai 800.

Yang kedua ketika berada pada ukuran viewport sedang maka tidak ada lagi margin pada content box.

Dan yang ketiga ketika viewport dalam keadaan ukuran layar kecil maka box berwarna merah dan orange akan memiliki nilai lebar 100%. Kemudian jika tampilan viewport berada pada ukuran yang tidak kita tetapkan maka tidak ada @media query yang diterapkan, sehingga seluruh warna box memiliki nilai 100%.

Untuk kalian yang ingin mencobanya, silakan clone repository di akhir artikel ini ya.

SVG for Image Resources

Mengapa image resource khususnya ikon, harus menggunakan SVG? Sebabnya, SVG merupakan sebuah Scalable Vector Graphic, gambar yang dapat dituliskan dengan menggunakan bahasa XML. Dengan begitu ukuran resource tersebut sangatlah kecil karena pada dasarnya hanya sebuah baris kode. Selain itu tujuan utamanya adalah agar gambar yang ditampilkan dapat menyesuaikan dengan beberapa ukuran tanpa mengurangi kualitas gambar itu sendiri hal ini sangatlah berbeda jika kita menggunakan format gambar pada umumnya. Kita dapat dengan Responsif memasukan SVG pada situs web dengan menggunakan tag <object>.

Di dalam body tag <object> terdapat element image yang berfungsi sebagai image fallback atau gambar alternatif yang gunakan ketika browser tidak support dalam menampilkan svg.

Lihatlah perbedaan responsif gambar yang ditampilkan ketika kita menggunakan svg dan juga format gambar umum (png).

Saat berubah ukuran, gambar yang menggunakan format png, kualitas  yang ditampilkan jadi berkurang. Sebaliknya, hal yang sama untuk gambar svg, kualitas yang ditampilkan, tidak berkurang. Apa pasal? Pada dasarnya SVG merupakan sebuah vector. Dari segi ukuran berkas pun, SVG lebih unggul.

Kesimpulan

Yang telah kita bahas hanya sebuah teknik dasar. Masih banyak lagi teknik dalam mengembangkan desain yang responsif. Salah satunya bagaimana kita mengelola sebuah resource image. Ini agaknya perlu dibahas pada artikel mendatang.

Dengan mengetahui pentingnya responsif dalam menampilkan sebuah halaman, kita jadi selalu memperhatikan hal ini dalam pengembangan aplikasi website. Salah satunya kamu dapat menggunakan CSS Framework seperti Bootstrap ataupun Foundation.

Selain tampilan responsif, perhatikan juga hal penting lainnya seperti caching, accessibility dan lifecycle. Tujuannya agar website kita lebih powerful saat diakses dengan peranti mobile.

Teknik Dasar Tampilan Responsif pada Website.

Penasaran? Materi di atas kami kupas tuntas di kelas Menjadi Progressive Web Apps di Dicoding Academy.

Tetaplah mencoba, tetaplah belajar ! Punya saran keren untuk menerapkan desain responsif? Cobalah share dengan kita ! Saya tunggu.