Lainnya

Cara Membuat Desain Web Responsif

 

Dengan semakin berkembangnya teknologi profilerasi smarphone dan tablet PC, memaksa desain website berubah dan dituntut lebih responsif, karena banyak orang yang menggunakan smarphone dan tablet untuk melakukan surfing di internet. Oleh karena itu, desain web blog Anda harus dapat mengakomodasi berbagai ukuran layar, baik layar smarphone, tablet, maupun layar komputer.

Beruntungnya, fitur canggih ponsel pintar dan tablet saat ini mampu secara otomatis memanggil pinch-zoom yang memungkinkan mengubah ukuran halaman sesuai dengan ukuran layar. Tetapi hal itu harus didukung oleh desain web yang responsif dengan mengadopsi ukuran layar ganda. Sehingga memungkinkan pengunjung untuk menjelajahi halaman web Anda lebih luas.

Desain Web Responsif

Desain web responsif adalah prinsip membuat desain ekstensif dengan menggunakan CSS3 media queries. Sebuah media yang memungkinkan Anda untuk menentukan aturan-aturan CSS tertentu berdasarkan ukuran layar pengguna. Dengan membuat beberapa aturan CSS untuk berbagai ukuran layar, Anda dapat membuat satu file HTML yang menyesuaikan sendiri secara otomatis untuk beberapa perangkat. Hal ini mengurangi kebutuhan bagi pengunjung Anda untuk menggunakan pinch-zoom dan fitur pintar lainnya, dan menyajikan konten Anda dalam format user-friendly. Selain mudah dibaca, Anda juga dapat membuat penyesuaian tata letak dan bahkan menampilkan atau menyembunyikan konten berdasarkan ukuran layar pengguna.

Berikut ini adalah tiga teknik untuk membantu mengoptimalkan pengalaman pengguna pada website Anda dan memberikan Anda kontrol lebih besar atas desain seperti menyesuaikan dengan ukuran layar ganda.

 

Menambahkan Pencitraan Dengan CSS

Ketika mengubah desain untuk perangkat yang berbeda, pertimbangkan untuk membuat beberapa versi grafis Anda. Hal ini dapat mempengaruhi kecepatan loading website Anda, di mana beban akan semakin besar jika grafis ditampilkan pada layar yang lebih kecil. Sehingga Anda harus membuat berbagai jumlah kompresi yang diterapkan pada setiap set gambar. Karena setiap layar pada perangkat ponsel maupun tablet memiliki resolusi yang berbeda. Oleh karena itu diperlukan kompresi tambahan dengan ukuran file yang lebih kecil namun tidak menurunkan kualitas gambar secara signifikan.

 

Membuat desain gambar dengan ukuran yang berbeda dapat membuat loading lebih cepat pada setiap perangkat. Perhatikan bahwa kompresi ditugaskan untuk setiap gambar hampir tidak dilihat sebagai penurunan ukuran gambar. Dalam contoh di atas, foto sidebar untuk ukuran layar besar menunjukkan bahwa gambar lebih detail, sedangkan gambar yang lebih kecil menunjukkan seolah-olah tidak terjadi penurunan ukuran.

 

Terapkan Gambar ke Halaman Web Anda dengan CSS

 

Gambar biasanya ditambahkan ke halaman web menggunakan tag gambar “img”. Kita dapat menggunakan media query untuk mengubah ukuran gambar yang ditampilkan, tapi kita tidak bisa mengubah ukuran file grafis yang sebenarnya sedang digunakan. Jadi daripada menggunakan tag static “img”, kita dapat menggunakan elemen HTML sebagai wadah – seperti tag “div” – dan menetapkan gambar ke latar belakang menggunakan CSS.

 

Dengan menambahkan tag “div” HTML, kita dapat mengubah ukuran gambar yang sebenarnya untuk ditampilkan pada ukuran layar masing-masing perangkat.

 

Mengadapatsi Navigasi untuk Smartphone

 

Saat melihat halaman web pada layar yang lebih besar, lokasi yang diharapkan dari navigasi adalah di sisi atas atau kiri layar. Karena layar yang lebih besar memungkinkan kita untuk melihat konten di samping navigasi, pengguna hanya melihat sekilas mengenai berapa banyak konten yang tersedia. Namun, pada perangkat ponsel, tombol navigasi dapat memenuhi layar jika muncul di bagian atas. Oleh karena itu, Anda harus mengadaptasi navigasi web Anda untuk ukuran layar ponsel agar muncul setelah konten, kemudian disajikan dengan pilihan navigasi tambahan. Tantangannya adalah untuk memposisikan navigasi dengan CSS tanpa perlu mengubah HTML

 

Navigasi situs di layar kecil harus dimunculkan di bagian bawah layar sehingga pengguna dapat melihat konten pertama tanpa terganggu tombol navigasi, jika dimunculkan di layar bagian atas.

 

Tentang Penulis,

Jonathan adalah seorang WEB Manager yang mengatur bagaimana web blog seharusnya, ternasuk didalamnya adalah on page dan off page SEO. Saat ini ia telah menangani salah satu situs toko online yang menjual bibit tanaman buah.