Saat mendesain situs web Anda, penting untuk memastikannya terlihat bagus di perangkat apa pun, terlepas dari ukuran dan bentuk layarnya. Situs web responsif dirancang agar terlihat bagus di semua jenis perangkat modern seperti komputer, ponsel, tablet, TV, perangkat yang dapat dikenakan, dan bahkan layar mobil. Untuk membuat situs web responsif, Anda harus memodifikasi kode CSS dan HTML untuk secara otomatis mengubah ukuran elemennya tergantung pada kondisi tertentu. Artikel wikiHow ini akan mengajarkan kepada Anda cara merencanakan dan menerapkan desain web dasar yang responsif.
Langkah
Metode 1 dari 3: Merencanakan Desain Responsif
Langkah 1. Cari tahu bagaimana audiens Anda menggunakan situs web Anda
Saat ini, sebagian besar orang yang menjelajahi web melakukannya dari ponsel dan tablet. Agar situs responsif, Anda harus memastikan bahwa itu ditampilkan dengan benar di mana pun itu dilihat. Jika waktu dan uang sangat penting, fokuslah pada jenis perangkat yang paling populer di kalangan pengguna Anda (jika informasi ini tersedia) dan bagaimana mereka menggunakan situs Anda. Dengan menggunakan perangkat lunak analitik Anda atau bentuk penelitian lain, cari tahu:
- Jenis perangkat apa yang paling sering mereka gunakan untuk melihat situs web, memberikan perhatian khusus pada merek ponsel/tablet/komputer dan ukuran layar/resolusi.
- Browser apa yang paling populer di kalangan pengguna Anda. Sejauh menyangkut statistik global, Google Chrome adalah browser web paling populer di seluruh dunia, tetapi Safari berada di urutan kedua.
- Bagaimana pengunjung Anda menggunakan situs web Anda, seperti berapa banyak waktu yang mereka habiskan untuk melihatnya, di mana mereka melihatnya, dan konten mana yang paling populer. Ini dapat membantu Anda menentukan jenis konten mana yang penting untuk disertakan dan mana yang dapat dihilangkan.
Langkah 2. Rancang tata letak yang berbeda untuk perangkat yang berbeda
Anda dapat menggunakan kombinasi CSS dan JavaScript untuk mendeteksi perangkat pengguna, serta kemampuannya (apakah mendukung Java, Flash, dll.,) dan menampilkan versi tertentu dari situs Anda. Kueri Media CSS sangat berguna untuk menentukan ukuran/resolusi perangkat.
Langkah 3. Perhitungkan berbagai jenis interaksi
Pengunjung Anda dapat berinteraksi dengan situs web Anda menggunakan mouse, keyboard, layar sentuh, atau bahkan pembaca layar untuk orang dengan gangguan penglihatan. Mempertimbangkan hal ini, situs web Anda harus merespons klik mouse, tombol keyboard (Tab, Enter, Return, dll.,) dan sentuhan jari layar.
Efek hover-over tidak berfungsi dengan apa pun kecuali mouse. Alih-alih menggunakan efek ini, Anda dapat menggunakan mengharuskan pengunjung untuk mengklik tombol atau ikon untuk menampilkan apa pun yang sebelumnya ditampilkan pada kursor mouse
Langkah 4. Pertimbangkan untuk menggunakan Sistem Manajemen Konten (CMS)
Cara mudah untuk memastikan desain situs Anda responsif adalah dengan menggunakan CMS dengan tema responsif yang sudah dibuat sebelumnya. Menggunakan CMS seperti Joomla, Drupal, atau Wordpress memungkinkan Anda memastikan situs web Anda terlihat bagus di semua perangkat tanpa harus mengkodekan elemen responsif sendiri. Hubungi penyedia hosting web Anda untuk melihat alat CMS mana yang tersedia dengan layanan Anda.
Langkah 5. Gunakan alat online untuk menguji situs web Anda
Sekarang setelah desain web responsif semakin populer, ada berbagai alat gratis yang dapat Anda gunakan untuk menguji situs web Anda. Jika Anda telah membuat kode situs web Anda, gunakan alat ini untuk menguji tampilannya dalam berbagai kondisi sehingga Anda akan tahu di mana Anda perlu meningkatkan daya tanggap:
- Pengujian Situs Mobile-Friendly oleh Google: Memberi tahu Anda apakah situs Anda berfungsi dengan baik di perangkat seluler seperti halnya di layar komputer.
- resizeMyBrowser: Memungkinkan Anda melihat situs Anda dalam resolusi yang berbeda.
- Responsiator: Menampilkan situs Anda di layar perangkat yang berbeda dalam tata letak yang berbeda (ke samping atau ke kanan).
Metode 2 dari 3: Membuat Tata Letak Halaman Responsif
Langkah 1. Pertimbangkan kerangka lembar gaya responsif gratis
Kerangka kerja adalah kumpulan HTML, CSS, dan/atau JavaScript yang telah ditulis sebelumnya yang dapat Anda gunakan sebagai kerangka untuk situs Anda. Semua kerangka telah diuji dan dioptimalkan untuk bekerja dengan semua browser, jadi yang perlu Anda lakukan hanyalah menyisipkan konten, menambahkan preferensi media dan warna, dan memublikasikan situs Anda. Beberapa kerangka kerja populer adalah:
- Bootstrap
- Kerangka
- Dasar
Langkah 2. Atur viewport dengan meta tag
Jika Anda tidak menggunakan kerangka kerja, Anda dapat memulai dengan aspek terpenting dari pengkodean situs web responsif: Viewport. Area pandang adalah bagian dari situs web yang dapat dilihat oleh pengguna. Kunci untuk membuat situs Anda ditampilkan dengan benar terlepas dari ukuran layar adalah dengan menskalakan ukuran viewport di tag META. Untuk melakukannya, sertakan tag ini di bagian atas setiap halaman di situs:
Langkah 3. Tentukan ukuran teks dalam kaitannya dengan viewport
Setelah area pandang Anda disetel, teks pada halaman Anda akan diskalakan agar sesuai dengan layar. Namun, font mungkin ditampilkan terlalu besar atau terlalu kecil jika ukurannya tidak ditentukan dalam kaitannya dengan area pandang. Anda dapat melakukan ini dengan menentukan ukuran font sebagai persentase tertentu dari viewport dengan unit vw. Contoh ini memberi tahu header H1 untuk ditampilkan pada 10% dari lebar viewport, berapa pun ukurannya:
wikiHow
Langkah 4. Gunakan kueri media untuk menampilkan gaya yang berbeda untuk ukuran layar yang berbeda
Kueri media memungkinkan Anda memilih apakah akan menampilkan elemen CSS tertentu bergantung pada ukuran layar. Anda dapat menentukan spesifikasi kueri media Anda di file CSS Anda. Dalam contoh ini, warna latar belakang tubuh akan berubah menjadi merah jika ukuran layar pengguna 480 piksel atau lebih besar:
wikiHow
@media screen dan (min-width: 480px) { body { background-color: aqua; } }
Metode 3 dari 3: Membuat Gambar Responsif
Langkah 1. Gunakan properti lebar CSS untuk menskalakan gambar
Daripada mengatur lebar gambar ke jumlah piksel tertentu (misalnya, 500px), gunakan persentase (misalnya, 100%) sehingga gambar terlihat pada lebar induknya dan sesuaikan. Menyetel lebar gambar ke 100% akan memaksa gambar untuk diperbesar dan diperkecil tergantung pada ukuran layar pemirsa. Untuk melakukan ini sebaris:
Langkah 2. Gunakan properti max-width untuk membatasi penskalaan ukuran sebenarnya gambar
Jika Anda menggunakan properti lebar pada langkah sebelumnya untuk menskalakan gambar hingga 100%, gambar akan tumbuh atau menyusut agar sesuai dengan 100% wadahnya, apa pun ukurannya. Ini berarti bahwa jika gambar berada di sisi yang lebih kecil, itu akan ditingkatkan lebih besar dari ukuran aslinya dan terlihat kualitas yang lebih rendah. Untuk mencegah hal ini terjadi, gunakan max-width untuk mengatur ukuran penskalaan maksimum gambar menjadi 100% (ukuran sebenarnya). Berikut caranya:
Langkah 3. Gunakan elemen gambar HTML untuk menampilkan gambar yang berbeda pada ukuran layar yang berbeda
Jika Anda ingin membuat gambar berukuran khusus untuk ditampilkan pada layar dengan ukuran berbeda, Anda dapat menentukan foto mana yang akan ditampilkan dalam kode HTML Anda. Buat gambar dengan ukuran berbeda, lalu gunakan kode ini sebagai contoh untuk menentukan gambar mana yang akan digunakan pada layar lebar 600px dan 1500px:
