• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

LandingsPage.net

Buat Landing Page Terbaikmu

  • Beranda
  • Daftar Isi
  • Kontak
Beranda » Tutorial Membuat Website Pas di Segala Ukuran Layar 100% Work!

Tutorial Membuat Website Pas di Segala Ukuran Layar 100% Work!

12 Maret 2023 oleh Mukhlisin

Tutorial-Membuat-Website-Pas-di-Segala-Ukuran-Layar-100-Wor

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 :

Tutorial-Membuat-Website-Pas-di-Segala-Ukuran-Layar-100-Wor

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 :

Tutorial-Membuat-Website-Pas-di-Segala-Ukuran-Layar-100-Wor

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.

Baca juga: Landing Page Bootstrap Template Paling Keren yang Bisa Kamu Pakai

Filed Under: website

Reader Interactions

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Primary Sidebar

ebook gratis tentang membuat landing page yang mudah

Artikel Terbaru

  • 2 Olahan Anggur Ninel yang Bisa Anda Coba di Rumah
  • 2 Jenis Alpukat dengan Kualitas Internasional
  • Tutorial Buat Landing Page Facebook Simple dan Mudah, 100% Work
  • Perbedaan Website Statis dan Dinamis
  • Manfaat Promosi Menggunakan Website dan SEO Google
  • 5 Kelemahan Website Builder Untuk Bisnis
  • 5 Website Koreksi Grammar Online dan Gratis
  • Fungsi Website Sebagai Media Promosi, Apa Saja? Cek Di Sini!

Copyright © 2023 · Genesis Sample on Genesis Framework · WordPress · Log in