Cara Membangun Situs Web Responsif Multi-Halaman

Mendefinisikan apa itu situs web responsif, dan bagaimana Anda dapat membangunnya dengan Dazzly.


Pembaruan - 07/12/2022 -

Kami sekarang telah menyusun sumber daya video tambahan berjudul "Situs Web Layanan - Halaman Layanan Tunggal (Di Bawah 10 Menit) [2022]" yang merupakan tutorial langkah demi langkah tentang cara membangun situs web responsif multi-halaman, silakan temukan sumber daya ini di bawah:



Kami berharap Anda menemukan video ini berguna sebagai sumber daya inti dalam perjalanan Anda untuk belajar cara membangun situs web responsif multi-halaman. Kami mendorong Anda untuk membagikannya dengan siapa pun yang tertarik.


Apa itu situs web responsif?

Belakangan ini, ketika Anda perlu membuat situs web, mungkin mengejutkan bahwa Anda memerlukan jaminan tentang bagaimana tampilannya dan fungsinya di berbagai perangkat komputer. Seperti yang Anda ketahui, situs web perlu fleksibel dan mampu menyesuaikan tampilannya agar sesuai dengan perangkat yang digunakan pengunjung. Jika Anda menggunakan layar perangkat seluler yang sangat kecil, maka situs web Anda perlu dapat menampilkan tampilan ringkas dari judul, gambar, dan tetap memiliki jalur yang jelas ke halaman dalam yang lebih informatif. Jadi ketika Anda ingin membuat situs web atau mencari desainer situs web, maka Anda perlu memastikan bahwa yang Anda dapatkan adalah situs web responsif – atau situs web yang akan merespons berbagai ukuran layar dan model perangkat komputer atau seluler.

Merriam-Webster mendefinisikan responsif sebagai – “memberikan respons: merupakan respons” definisi ini kemungkinan mendahului kebutuhan modern untuk desain situs web responsif, tetapi mereka juga menambahkan “cepat merespons atau bereaksi dengan tepat atau simpatik” dan “menggunakan respons” yang tampaknya akurat dalam konteks ini [1].

Ukuran layar tipikal untuk komputer desktop adalah 1920x1080, sering kali dengan desktop rumah dan bisnis memiliki beberapa monitor (untungnya sesuatu yang tidak perlu sering dipertimbangkan, untuk saat ini). Dengan tablet, Anda dapat mengharapkan resolusi layar seperti 768x1024 dan dengan perangkat seluler lainnya Anda dapat mendapatkan resolusi sekecil 414x896 [2]

Metodologi desain situs web responsif didefinisikan sebagai menggabungkan pengetahuan dan pengalaman berbasis responsif ke dalam keputusan desain situs web utama sejak awal proses. Hasilnya adalah desain situs web yang komprehensif dan adaptif yang akan merespons dan mengakomodasi sebagian besar perangkat seluler yang mungkin digunakan pengunjung situs web Anda.

Ketika menetapkan halaman arahan (halaman utama), setiap elemen harus dipertimbangkan – bagaimana elemen tersebut akan ditata di layar PC besar dan bagaimana kita dapat membuat versi minimal dari elemen ini yang tetap berfungsi di layar seluler. Elemen apa yang tidak perlu langsung terlihat? Elemen apa yang dapat kita pindahkan ke menu untuk menghemat ruang layar yang berharga? Ini adalah jenis pertanyaan yang diajukan oleh desainer antarmuka pengguna (UI) profesional dan juga yang diajukan oleh desainer perangkat lunak dan situs web.

Ketika Anda membuat bagian baru di situs web, Anda mungkin memiliki fungsi rapi yang akan bagus untuk pengguna desktop, tetapi jika itu bergantung pada elemen antarmuka seperti elemen seret-dan-lepas, ini tidak akan berfungsi di perangkat seluler. Jadi, sejak awal Anda perlu mempertimbangkan apakah Anda dapat menggunakan elemen alternatif untuk mencapai pengalaman yang sama tetapi juga berfungsi di semua perangkat umum.


Mengapa Anda ingin memastikan situs web Anda merespons dan berfungsi di banyak perangkat?

Alasannya sederhana – Anda ingin lebih banyak orang memiliki pengalaman pengguna (UX) yang menyenangkan di situs web Anda dan Anda ingin mereka kembali dan idealnya menghubungi Anda terkait layanan Anda atau membeli produk. Semakin banyak orang yang dapat mengakses situs web Anda, berkat responsivitasnya, semakin besar potensi pesanan langsung ke konsumen yang dapat Anda layani. Secara tradisional, para ahli berpengalaman yang tahu cara membangun situs web responsif multi-halaman harus menjaga pertimbangan di atas di garis depan pikiran mereka untuk memastikan semuanya berfungsi dengan benar dan memberikan pengalaman pengguna yang hebat. Namun, seperti yang akan Anda lihat sekarang, ada beberapa pembangun situs web responsif yang tersedia untuk mengambil semua pengetahuan teknis dan kerumitan ini dari tangan Anda.


Apakah Anda memerlukan situs web responsif untuk bersaing secara online pada tahun 2022?

Terlepas dari tingkat persaingan di pasar yang Anda layani, Anda akan memerlukan perangkat lunak pembangun situs web responsif untuk membuat situs web responsif agar Anda unggul. Tidak diragukan lagi bahwa mendapatkan visibilitas, tayangan, dan klik untuk situs web Anda di area lokal Anda selalu menjadi tantangan di zaman modern, tetapi dengan menggunakan Dazzly, Anda memastikan bahwa situs web Anda sudah dibuat sebelumnya dan terus diperbarui untuk memastikan situs web tersebut merespons sebagian besar perangkat konsumen di seluruh dunia.

Perkiraan saat ini menunjukkan bahwa sebagian besar pengguna situs web di Selandia Baru menjelajah menggunakan perangkat seluler mereka [2], oleh karena itu sangat penting bahwa situs web Anda dapat merespons semua ukuran layar yang mungkin digunakan pengunjung. Baru-baru ini pada tahun 2021, survei Pew Research Centre menunjukkan bahwa 15% dari semua orang tidak memiliki internet broadband di rumah dan menggunakan perangkat seluler mereka sebagai gantinya [3]. Kami menduga bahwa orang-orang di rumah tinggal akan memiliki opsi internet broadband dan seluler, terutama di apartemen atau kondominium.

 

8 Langkah untuk Membangun Situs Web Responsif Multi-Halaman

Untuk penjelasan lebih rinci tentang langkah-langkah meluncurkan situs web responsif multi-halaman, silakan merujuk ke panduan pembangun situs web seluler kami.

 

1.      Daftar untuk uji coba gratis Dazzly

2.      Pilih template situs web ‘Service Warrior 2’

3.      Masukkan logo dan warna merek Anda

4.      Masukkan beberapa foto

a.      Ini dapat dilakukan langsung dari perangkat seluler Android atau iPhone Anda untuk kenyamanan tambahan.

5.      Ketik sedikit teks

6.      Klik ‘Publikasikan’

7.      Tunggu & lihat ‘Situs Web Pratinjau’ Anda

8.      Muat URL Situs Web Pratinjau Anda di PC Desktop, Laptop, dan perangkat seluler Anda.

a.      Pastikan situs web terlihat OK secara visual di semua perangkat

b.      Pastikan elemen kontak utama masih terlihat/mudah diakses

c.      Uji beberapa hal untuk memastikan (pemeriksaan kewarasan)


Jika Anda tidak ingin melakukan langkah-langkah ini segera, silakan lanjutkan membaca untuk contoh tangkapan layar yang menunjukkan kemampuan responsif situs web ini.


Seperti yang Anda lihat pada gambar berikut, pengetahuan tentang cara membangun situs web responsif multi-halaman telah ditangkap dan disematkan ke dalam sistem pembuatan situs web Dazzly sehingga Anda dapat secara otomatis menikmati manfaatnya tanpa perlu menginvestasikan pengalaman bertahun-tahun untuk mempelajari kesulitan teknis dan nuansa. Dazzly sangat bangga dengan fakta ini dan ingin menggunakan perangkat lunak ini untuk membantu sebanyak mungkin bisnis di Selandia Baru!


Gambar #1 - Contoh menunjukkan situs web konstruksi yang dibangun di Dazzly – ditampilkan untuk resolusi PC/Desktop

 

Gambar #2 - Situs web konstruksi yang sama ditampilkan di Tablet (iPad Air). Perhatikan bagaimana elemen merespons perubahan resolusi layar

 

Gambar #3 - Situs web konstruksi yang sama ditampilkan di Perangkat Seluler (iPhone SE)

a.      Perhatikan properti responsif situs web dan bagaimana beberapa elemen disembunyikan dari tampilan langsung untuk melestarikan dan memanfaatkan sebaik-baiknya jumlah piksel yang tersedia di layar.

b.      Perhatikan respons tambahan dari situs web dalam mengubah beberapa fungsi seperti menonaktifkan prompt ajakan bertindak overlay yang akan sangat mengganggu, akan menutupi ruang situs web yang dapat digunakan sebelumnya, dan akan secara signifikan mengurangi pengalaman pengguna dari menikmati situs web ini.


Ini akan menunjukkan kepada Anda bahwa, dalam hitungan menit, Anda dapat membangun situs web multi-halaman yang merespons berbagai layar perangkat seluler dengan solusi pembuat situs web tanpa kode kami. Tidak peduli apakah Anda membutuhkan situs web e-niaga atau situs web layanan multi-halaman untuk menyoroti berbagai pekerjaan yang dapat Anda lakukan, sekarang ada opsi pembangun situs web responsif yang tersedia.


Kesimpulannya, di mana pun Anda berada di Selandia Baru, Anda pantas mendapatkan situs web yang fantastis, dan sekarang Anda dapat memiliki kepercayaan diri bahwa Anda tahu cara membangun situs web responsif multi-halaman. Dazzly adalah pembangun situs web responsif terbaik – setiap template dioptimalkan dan diperbarui secara teratur untuk merespons ukuran layar perangkat terbaru di pasar. Jika Anda kebetulan menemukan bahwa situs web Anda tidak berfungsi untuk perangkat tertentu, kami mendorong Anda untuk melaporkannya ke support@dazzly.co dan kami akan merilis pembaruan dalam waktu dekat untuk meningkatkan responsivitas situs web. Tim pengembangan kami sangat serius dan waspada terhadap pembaruan semacam itu.


Referensi


[1]        Merriam-Webster – ‘Definisi & Arti Responsif’ (https://www.merriam-webster.com/dictionary/responsive).


[2]        statcounter –‘Statistik Resolusi Layar Desktop Amerika Serikat’ – ‘Mei 2021 - Mei 2022’ (https://gs.statcounter.com/screen-resolution-stats/desktop/united-states-of-america).


[3]        Pew Research Centre – ‘Lembar Fakta Seluler’ (https://www.pewresearch.org/internet/fact-sheet/mobile/).   Diterbitkan 7th April 2021. Diakses 18th Juni 2022.