Jaman sekarang penggunaan telpon seluler atau smartphone semakin marak dibelahan dunia manapun. Banyak industri smartphone seperti Xiaomi, Samsung, maupun Iphone saling berlomba-lomba mengeluarkan Smartphone dengan fitur yang lebih canggih. Simpel dan bisa dibawa kemanapun menjadi alasan utama mengapa device yang satu ini banyak diminati. Hampir semua orang didunia pasti memiliki smartphone mereka sendiri. Membuat website responsive untuk layar tablet atau smartphone menjadi poin penting yang wajib ada di website anda dan harus anda kuasai.

Pada artikel kali ini, kita akan mengupas lebih dalam tentang cara membuat website responsive dengan 3 langkah mudah. Bagaimana caranya ? Mari kita simak dibawah ini.

1. Layout atau Tata letak Website

Ketika akan membuat website yang responsive, atau membuat website yang sudah ada menjadi responsive, hal utama yang dilihat adalah layout atau tata letak website nya.

Ketika saya membuat website yang responsive, saya selalu mulai dengan membuat Layout non-responsive nya terlebih dahulu, baru memperbaiki size defaultnya. Contohnya, pada website CatsWhoCode.com memiliki lebar (width) 1100px (pixel).

Ketika saya puas dengan desain non-responsivenya, barulah saya menambahkan Media Quaries dan merubah CSS nya untuk agar website terlihat responsive. Bicara mengenai desain web, jauh lebih mudah dan simpel jika anda hanya fokus pada 1 bagian saja di satu waktu.

Begitu anda selesai mengedit layout website non-responsive anda, hal utama yang dilakukan selanjutnya ialah meng-copy code dibawah ini dan meletakannya di antara bagian tags dan di laman HTML anda. 

Fungsi code diatas adalah untuk mengatur view pada semua jenis layar pada aspect ratio 1x1 dan hapus fungsionalitas default dari iPhone dan perangkat seluler lainnya yang merender tampilan full pada website serta memungkinkan pengguna memperbesar layout dengan zoom-in.

Baca Juga : Definisi On Page SEO dan Faktor - Faktor Yang Mempengaruhinya

Jika sudah, kini waktunya kita menambahkan beberapa Media Quaries. Menurut situs W3C, Media Quaries terdiri dari jenis media dan nol atau lebih ekspresi yang memeriksa kondisi fitur media tertentu. Dengan menggunakan media queries, presentasi dapat disesuaikan dengan layar device yang digunakan tanpa mengubah kontennya.

Dengan kata lain, Media Quaries membuat website anda terlihat baik atau responsive disemua jenis layar device, mulai dari layar smartphone hingga layar berukura besar. Dan inilah yang disebut Desain web yang responsive

Media Queries diatur berdasarkan layout website anda, jadi mungkin agak rumit untuk memberikan code yang siap pakai. Namun, Code dibawah ini bisa menjadi titik awal untuk kebanyakan website. Contohnya  #primary  adalah area konten utamanya, dan   #secondary  adalah sidebarnya.

Pada contoh code diatas, bisa anda lihat bahwa saya mendefiniskan 2 jenis ukuran. Yang pertama digunakan untuk mengoptimasi tampilan landscape pada tablet dengan lebar maksimal (max width) 1060px. #primary  menempati 67% dari main container nya, #secondary menempati 30%, dan ditambah margin kiri 3%.

Ukuran yang kedua di desain khusus untuk tablet tampilan portrait (tegak lurus) dengan ukuran yang lebih kecil. Karena ukuran layar smartphone yang kecil, saya memutuskan untuk memberi #primary width 100%. #secondary juga memiliki lebar 100%, dan akan ditampilkan di bawah #primary. 

Jika sudah, anda bisa melihat hasilnya pada layout website anda. Dibawah ini adalah contoh website responsive pada layar desktop :

Tampilan Fullscreen

Tampilan jika di minimize

2. Media 

Tata letak atau layout responsif adalah langkah pertama dalam membuat situs web yang sepenuhnya responsif. Sekarang, mari kita fokus pada aspek yang tidak kalah penting yaitu media seperti video atau gambar.

Kode CSS di bawah ini akan memastikan bahwa gambar Anda tidak akan pernah lebih besar dari parent container nya. Anda tidak perlu khawatir, code nya sangat sederhana  kok dan berfungsi untuk sebagian besar situs web yang responsif. Agar berfungsi dengan benar, snippet kode ini harus dimasukkan ke dalam stylesheet CSS Anda.

Meskipun teknik di atas terbilang efisien, terkadang Anda mungkin perlu menyisipkan scritp code tambahan untuk gambar dan menampilkan gambar yang berbeda sesuai dengan ukuran tampilan pengguna smartphone.

Berikut ini adalah Tehnik HTML yang dikembangkan oleh Nicolas Gallagher yang bisa anda tiru :

Seperti yang Anda lihat, saya menggunakan atribut data-* untuk menyimpan url gambar pengganti. Sekarang, mari kita gunakan kecanggihan dari CSS3 untuk mengganti gambar default dengan salah satu gambar pengganti yang ditentukan jika kondisi min-device-width  cocok

Bagaimana ? mengesankan bukan ?. Sekarang kita lanjut ke cara membuat media seperti video agar tampak responsif pada website anda

Berikut ini adalah tehnik HTML yang dikembangkan oleh Nick La yang bisa anda terapkan sendiri :

Dan untuk CSS nya :

Setelah Anda menerapkan kode ini ke website Anda, video yang ada sekarang menjadi responsif. 

3. Typography

Terakhir namun tidak kalah penting, typography sering kali diabaikan oleh kebanyakan developer website ketika membangun website yang responsif.

Sampai saat ini, sebagian besar pengembang menggunakan piksel untuk menentukan ukuran font. Meskipun piksel saat ini masih baik-baik saja ketika situs web Anda memiliki Fixed Width, situs web yang responsif harus memiliki font yang responsif pula. Ukuran font situs Anda harus terkait dengan lebar parent containernya, sehingga dapat beradaptasi dengan layar pengguna dan mudah dibaca pada perangkat seluler.

Dapatkan Diskon 20% Kursus SEO Terbaik Sekarang Juga

Spesifikasi CSS3 mencakup fitur baru bernama rems. Rems bekerja hampir identik dengan unit em , tetapi relatif terhadap elemen html, yang membuatnya jauh lebih mudah digunakan daripada ems.

Karena rems relatif terhadap elemen html, jangan lupa untuk mengatur ulang ukuran font html anda :

Jika sudah selesai, Anda dapat menentukan ukuran font responsif seperti yang ditunjukkan di bawah ini:

Itulah 3 langkah mudah untuk membuat website anda tampil responsif. Perhatikan kembali dengan teliti HTML dan CSS anda agar tidak terjadi error. Selamat Mencoba ?

Sumber : catswhocode.com