Apa yang dimaksud Website Responsive, Contoh dan Bagaimana cara membuatnya

    

    Pada kesempatan kali ini saya akan membahas mengenai responsive pada website. Dalam pengertian mudahnya ketika website disebut sudah responsive berarti web tersebut akan tetap tampil rapi ketika di akses pada perangkat apapun, jika website tersebut tetap rapi ketika diakses pada perangkat mobile maka web tersebut bisa disebut juga dengan mobile frindly. 

    Website bisa disebut responsive/ mobile friendly adalah ulah dari css yang memanipulasi sebuah tampilan website berdasarkan luas dan tinggi perangkat yang digunakan untuk mengaksesnya. Breakpoint adalah salah satu element css yang bertanggung jawab dalam menangani sebuah website untuk bisa menjadi responsive, pada kenyataanya dalam pengembangan sebuah website adalah kita sudah sangat jarang bersentuhan langsung dengan element breakpoint ini dikarenakan banyaknya framework css ataupun cms yang sudah sangat populer serta dapat memudahkan kita dalam mengembangkan sebuah website. Namun cara manual tetap bisa kalian gunakan jika kalian ingin belajar fundamental responsive atau memang mengembangkan website kalian dengan css murni, cara mengatur breakpoint secara manual bisa kalian baca disini [Cara mentargetkan CSS pada Desktop, Tablet atau Mobile | Breakpoint CSS]

    Dalam pengembangan sebuah website yang responsive, kita sekarang sangat dimudahkan karena bantuan beberapa Framework CSS atau Content Manajemen System (CMS) yang gratis kita gunakan, berikut beberapa alat untuk memudahkan kita dalam membangun sebuah website yang responsive atau mobile friendly :

1. Tailwind CSS (Framework CSS)

    Tailwind CSS adalah sebuah framework CSS yang sangat memudahkan kita dalam membangun sebuah website yang responsive, kalian ketika menggunakan Tailwind CSS ini tidak perlu pergi dari halaman HTML karena ketika kita ingin memberi komponen CSS kita hanya perlu menambah class sesuai dengan apa yang dijelaskan pada dokumentasi Framework ini. Kalian hanya perlu menambah class seperti "md" "lg" pada sebuah container/ body html untuk mentarget tampilan apa yang akan kalian atur, berikut tabel breakpoint yang disediakan oleh tailwind css.

Untuk keterangan lebih lanjut mengenai Responsive website menggunakan Tailwind CSS ini bisa kalian akses pada dokumentasinya.

2. Bootstrap (Frontend Toolkit)

    Bootstrap adalah salah satu Frontend Toolkit atau lebih mudahnya bisa disebut website builder yang sangat ramah untuk pemula, karena penggunaanya yang sangat mudah dan kalian tidak perlu mengatur responsive website secara manual karena pada saat kalian menggunakan bootstrap maka si-bootstrap itu sendiri yang akan mengatur tampilan responsive nya sendiri, oleh karena itu bootsrap ini sangat disukai terlebih kepada seseorang yang memiliki keinginan untuk belajar mengembangkan sebuah website atau memang ingin mengembangkan website dengan cepat. Untuk keterangan lebih lanjut mengenai apa saja komponen pada Dokumentasi Bootsrap.

Baca Juga : Apa itu Bootsrap dan cara menggunakan bootsrap

3. Wordpress (Content Management System)

    Wordpress adalah salah satu content management system yang sangat populer karena kemudahan dalam pengaksesan nya untuk mengembangkan sebuah website serta dukungan plugin dari pihak ketiga yang sangat banyak. Ketika kalian menggunakan cms wordpress kalian cukup perlu mengganti toogle responsive yang disediakan oleh elementor jika kalian menggunakan elementor, namun jika kalian menggunakan template kalian tidak perlu mengatur responsive itu sama sekali karena developer template itu bisanya sudah mengatur responsive website itu, oleh karena itu menggunakan wordpress sangat disarankan ketika kalian ingin membuat website yang sederhana dengan waktu yang cepat. Untuk lebih lengkapnya kalian bisa melihat di dokumentasi wordpress. 

Kesimpulan

Dalam pengembangan website pada era ini sangat diperlukan apa yang disebut Responsive/ mobile friendly. Karena dalam implementasinya banyak pengguna internet pada saat ini mayoritas menggunakan handphone, oleh karena itu menurut saya responsive website dalam meningkatkan kepercayaan seorang pengguna akan website yang sedang diaksesnya. Dalam pengembangan sebuah website yang responsive kita sekarang sangat dimudahkan dengan bantuan beberapa alat seperti Tailwind, Bootsrap, Wordpress dan lainnya yang masih banyak diluar sana, namun kalian juga masih bisa membuat website kalian menjadi responsive dengan manual menggunakan css murni seperti yang dijelaskan pada artikel disini.  

Terimakasih🙏 sudah membaca artikel ini, saya sangat terbuka untuk berdiskusi lebih lanjut pada kolom komentar, namun yang sopan ya. Semoga bermanfaat