Website responsif adalah website yang dirancang untuk dapat dilihat dalam berbagai kondisi dan pada segala macam perangkat modern seperti komputer, ponsel, tablet, TV, perangkat portable dan bahkan media di mobil. Responsif adalah istilah baru dalam industri situs yang berarti sebuah website yang berperilaku dan menampilkan tampilan laman yang terbaik karena dapat dalam keterbatasan kondisi dan perangkat itu dilihat pada seperti ukuran layar dan resolusi, kecepatan internet dan batas bandwidth, metode interaksi, dan bahkan orientasi fisik perangkat.
- Memahami bahwa desain responsif adalah tentang prioritas.
Karena semua situs web memiliki konten yang jauh lebih dari cukup ditampilkan pada satu layar, setiap website perlu memilih bit yang paling penting dari informasi untuk menunjukkan pada waktu tertentu. Halaman rumah, misalnya, selalu perlu menunjukkan jumlah yang tepat dari informasi yang pengunjung harus lihat pertama.
Website responsif perlu lebih berhati-hati karena prioritas pengunjung mungkin terbatas dalam segi waktu dan visual karena perangkat yang mereka gunakan yang tidak dapat diprediksi. S
- Melakukan Survey untuk mengetahui bagaimana mereka melihat website.
Meskipun Anda bisa mencoba untuk membuat website yang dapat merespon untuk semua perangkat dalam semua kondisi, ini mungkin membuang-buang waktu dan uang. Sebaliknya, menghabiskan waktu mencari tahu:
Cara pengunjung menggunakan situs web Anda, termasuk berapa banyak waktu yang mereka habiskan dalam situs web Anda, bagaimana mereka membaca dan melihat konten, seberapa jauh mereka dari layar, dan sebagainya
Apa perangkat yang mereka gunakan paling sering untuk melihat website, dan perangkat mana mereka dapat menggunakan dalam waktu dekat. Semua hal itu dapat secara sederhana dimonitor melalui Google Analytic, Webmaster dan berbagai pihak ketiga lainnya.
- Desain layout yang berbeda untuk perangkat yang berbeda.
Beberapa situs web memberikan sebagian informasi atau situs konten untuk ukuran / resolusi perangkat yang digunakan oleh mayoritas pengunjung mereka, tapi perlu diingat kita tidak boleh membeda-bedakan pengunjung situs, karena bagaimanapun mereka juga adalah pelaku kontribusi dari situs. Layout grid menyederhanakan tugas dengan memberikan nomor yang berbeda dari kolom untuk blok konten tergantung pada perangkat. Misalnya, situs web dapat menggunakan 5 kolom untuk layout pada perangkat besar, 3 kolom pada tablet, dan 1 kolom pada telepon biasa.
- Sesuaikan tata letak untuk perangkat yang berbeda.
Kombinasi CSS dan JavaScript dapat digunakan untuk mendeteksi perangkat bahwa website ini sedang digunakan, dan termasuk spesifikasi (seperti jika mendukung Flash atau versi terbaru dari HTML), dan menyesuaikan website. CSS Media Query sangat berguna untuk menentukan ukuran / resolusi perangkat.
Misalnya, Anda dapat menggunakan query media berikut untuk mengatur gaya CSS untuk website ketika dilihat oleh layar yang memiliki lebih dari 1000 piksel horizontal.
@media only screen and (min-width: 1000px) { }
- Pastikan media yang berukuran cukup.
Website Responsif biasanya mencoba untuk menampilkan gambar dan video yang lebih kecil untuk perangkat mobile seperti ponsel karena layar ponsel biasanya lebih kecil dari komputer atau layar TV, dan karena ponsel sering digunakan dengan kuota data yang terbatas dan bandwidth yang minim. Namun smartphone saat ini semakin banyak yang memiliki layar dengan resolusi yang lebih tinggi. Selain itu, browser modern sering menggunakan pre-fetching yang membuat sulit untuk mengirim gambar tertentu berukuran tinggi ke perangkat.
Di sisi berlawanan, karena semua perangkat memiliki layar resolusi yang semakin tinggi, telah menjadi perlu untuk menampilkan gambar resolusi tinggi dalam website. Pada dasarnya, Anda harus menyadari ukuran terbaik untuk media di website Anda, dan melihat keluar untuk teknologi yang memungkinkan Anda untuk memilih media yang tepat bagi pengunjung.
- Akun untuk berbagai jenis interaksi.
Pengunjung dapat berinteraksi dengan situs web menggunakan mouse, keyboard, layar sentuh, atau bahkan layar-reader. Mengingat akan hal ini, website Anda harus dapat menanggapi klik tombol mouse, tab, sign-in dan tombol lainnya, dan layar.
Sekian dari tulisan sederhana OFamni kali ini. kurang dan lebihnya mohon dimaafkan. Jika teman-teman ada pertanyaan, masukan atau mungkin ada yang kurang jelas terkait topic yang dibahas kali ini, maka silahkan saja tinggalkan jejak tersebut pada kolom komentar dibawah.