Ada beberapa alasan mengapa pengunjung bisa stay di suatu halaman kunjungan. Salah satunya karena website yang dikunjungi tersebut responsif. Selain kecepatan akses, ciri lain website responsif adalah pas di segala ukuran layar. Lantas, cara membuat website pas di segala ukuran layar seperti apa?
Di sini kita akan bagikan informasi menariknya untuk Anda terkait tutorial cara membuat website responsif yang bisa dicoba agar website lebih nyaman dan pas di akses di segala ukuran layar. So, let’s check these out!
Tutorial Membuat Website Pas di Segala Ukuran Layar
Bagi Anda yang ingin membuat website menjadi lebih responsif, hal utama dalam tutorial membuat website responsif yang perlu Anda pahami dan perhatikan adalah layout atau tata letak websitenya.
Untuk mengatur layout atau tata letak website, langkah – langkahnya sebagai berikut :
Buat layout non responsif dulu
Jadi ketika akan membuat website pas di segala ukuran layar maka Anda harus selalu mulai dengan membuat layout non responsifnya lebih dulu, baru nantinya Anda perlu memperbaiki size defaultnya.
Jika editing layout website non responsif sudah selesai, selanjutnya yang Anda perlu lakukan adalah copy code dalam gambar berikut ini :
pakai kode ini
Kode pada gambar di atas kemudian perlu Anda letakkan di antara bagian tags <head> dan <head> yang terdapat pada laman HTML website Anda.
Apa fungsi dari penyematan code pada gambar di atas?
Fungsi code yang disematkan pada HTML di atas adalah untuk mengatur view pada semua jenis layar dengan aspek rasio 1 x 1 sehingga memungkinkan pengguna untuk dapat memperbesar layoutnya dengan melakukan zoom in.
Selain itu fungsinya juga adalah menghapus fungsionalitas default dari iPhone dan perangkat seluler lain yang merender tampilan full pada suatu website sehingga tampilan akhirnya nanti akan jadi lebih baik dan fungsional.
Kalau sudah, Anda bisa tambahkan beberapa Media Quaries. Caranya bagaimana?
Cara menambahkan Media Quaries
Media Quaries pada hakikatnya terdiri atas beberapa jenis media dengan nol atau lebih ekspresi yang memeriksa kondisi features (fitur) pada media tertentu.
Melalui Media Quaries ini, presentasi yang nantinya tampil atau dimunculkan pada layar pengunjung dapat disesuaikan dengan layar device yang digunakan tanpa harus mengubah kontennya.
Atau dengan kata lain bahwa Media Quaries ini yang akan menjadikan tampilan website di semua jenis layar device menjadi lebih baik, fleksibel dan tampil sesuai keperluan. Dengan mengatur Media
Quaries, tampilan website bisa dikatakan menjadi lebih responsif.
Hanya saja mengatur Media Quaries sedikit rumit karena harus menambahkan kode – kode siap pakai pada HTML website. Contoh kode yang bisa dicoba bisa Anda saksikan dalam gambar berikut :
Kebanyakan website menggunakan kode di atas yang mana #primary merupakan tempat konten utama berada sementara #secondary merupakan sidebarnya.
Dengan menggunakan kode di atas, Anda bisa membuat website dengan dua jenis ukuran yang tampil secara fleksibel. Ukuran pertama adalah kode untuk mengoptimasi tampilan landscape pada tablet dengan lebar maksimal yang muncul sebesar 1060 pixel. Pada ukuran pertama ini, #primary menempati skala 67% dari main containernya sementara #secondary menempati skala 30% ditambah margin kiri 3%.
Kemudian untuk ukuran yang kedua didesain khusus pada tablet dengan tampilan portrait (tegak lurus) dengan ukuran yang lebih kecil. #primary width diberikan 100% sementara #secondary width diatur dengan lebar 100% juga. Adapun ukuran skalanya bisa disesuaikan sendiri berdasarkan keperluan.
Demikian informasi tutorial membuat website pas di segala ukuran layar yang bisa Anda terapkan. Semoga tutorial yang kami bagikan bermanfaat khususnya untuk Anda yang ingin membuat website responsif di semua ukuran layar.
Saya adalah pendiri LandingsPage.net, seorang ahli/ expert di bidang pembuatan landing page & website. Saya telah menekuni bidang ini selama 10+ tahun, membuat ratusan webite, dan mengelola puluhan domain. LandingsPage.net telah diliput media nasional dan kini hadir membantu UMKM & perusahaan mengingkatkan omset mereka. Instagram | Facebook | TikTok
Tinggalkan Balasan