Desain Web Responsive – Penggunaan perangkat mobile yang digunakan untuk menjelajahi web terus mengalami perkembangan yang cepat dan signifikan, tapi sayangnya masih banyak website yang belum dioptimalkan untuk bisa diakses melalui perangkat mobile. Ini dikarenakan desain website yang tidak dapat menyesuaikan dengan ukuran layar dari perangkat mobile. Oleh karena itu, diperlukan situs yang memiliki desain web yang responsive.
Setiap perangkat mobile memiliki ukuran layar yang berbeda sehingga cara pendekatan dalam desainnya pun berbeda supaya konten yang tampil pada layar mobile akan terlihat dengan sempurna. Dengan jenis ukuran layar yang berbeda seperti di ponsel, smartphone, tablet, komputer pc dan laptop sehingga setiap situs yang tampil akan selalu berubah. Maka dari itu website Anda harus daapt menyesuaikan dengan berbagai ukuran layar tersebut untuk hari ini dan seterusnya.
Apalagi era sekarang, banyak orang yang mengakses internet menggunakan perangkat mobile, dimana pun mereka berada dapat mencari informasi yang dibutuhkan melalui media online internet. Berdasarkan statistik yang dikeluarkan oleh statista.com pengguna internet dengan perangkat mobile terus mengalami peningkatan setiap tahunnya.
Bahkan Statistik yang diberikan menunjukkan penetrasi mobile internet di seluruh dunia dari 2012 hingga 2017. Pada 2013, 73,4 persen dari populasi online global diakses internet dari ponsel mereka. Angka ini diperkirakan akan tumbuh 90,1 persen pada tahun 2017. Data yang lebih lengkap bisa Anda lihat di SINI.
Bahkan dilansir dari video yang saya ambil dari WhoIsHostingThis memberikan riset, kenapa desain responsive sangat penting? Ini berdasarkan riset yang diambil dari riset di Amerika Serikat terungkap bahwa.
- 45% penduduk menggunakan smartphone
- 90% pengguna smartphone menemukan barang dan jasa
- 74% pengguna smartphone meninggalkan pencarian setelah 5 detik untuk pengalaman pengguna yang lebih baik
Untuk lebih lengkapnya lihat video di bawah ini:
Definisi
Desain web responsive, pada awalnya didefinisikan oleh Ethan Marcotte di A List Apart menanggapi akan kebutuhan pengguna dan perangkat yang mereka gunakan. Perubahan Layout berdasarkan ukuran dan kemampuan perangkat. Misalnya, pada ponsel, pengguna akan melihat konten yang ditampilkan dalam tampilan kolom tunggal, untuk tablet mungkin menunjukkan konten yang sama dalam dua kolom.
Dia mengkonsolidasikan tiga teknik yang sudah ada (layout fleksibel grid, gambar fleksibel, media dan media queries) menjadi satu pendekatan terpadu dan menamakannya desain web responsive. Istilah ini sering digunakan untuk menyimpulkan makna yang sama dengan sejumlah deskripsi lainnya seperti desain fluid, layout elastis, layout rubber (karet), desain liquid, layout adaptif, desain lintas perangkat, dan desain fleksibel.
Fluid Grid
Kunci ide pertama kali di balik desain web responsive adalah penggunaan apa yang dikenal sebagai fluid grid. Dalam waktu belakangan, menciptakan sebuah layout liquid yang mengembangkan dengan halaman belum cukup sepopuler membuat layout dengan lebar tetap; desain halaman yang tetap jumlah pixel keseluruhan, dan kemudian di tengah halaman. Namun, bila kita menganggap jumlah besar resolusi layar ada saat ini, manfaat dari layout liquid terlalu besar untuk diabaikan.
Fluid Grid maju beberapa langkah di luar layout liquid lama. Malahan desain layout berdasarkan pixel yang kaku atau nilai persentase terbatas, fluid grid dirancang lebih hati-hati dalam hal proporsi. Dengan cara ini, ketika sebuah layout diterapkan ke perangkat mobile kecil atau membentang di layar besar, semua elemen dalam layout akan mengubah ukuran lebarnya dalam kaitannya dengan satu sama lain.
Media Queries
Bagian kedua dari desain web responsive adalah CSS3 media queries, yang saat ini memiliki dukungan di semua browser modern. Jika Anda tidak terbiasa dengan media queries CSS3, pada dasarnya memungkinkan Anda untuk mengumpulkan data tentang pengunjung situs dan menggunakannya untuk secara kondisional menerapkan style CSS. Untuk tujuan, terutama tertarik pada fitur media lebar minimum, yang memungkinkan kita untuk menerapkan style CSS tertentu jika jendela browser turun di bawah lebar tertentu yang bisa kita tentukan. Jika kita ingin menerapkan beberapa styling ke ponsel, media query akan terlihat seperti berikut ini.
@media screen and (min-width: 480px) { .content { float: left; } .social_icons { display: none } // dan selanjutnya... }
Menggunakan sejumlah media queries seperti ini, ada beberapa resolusi layar yang biasa dipergunakan. Kumpulan lebar pixel yang disarankan sebagai berikut:
- 320px
- 480px
- 600px
- 768px
- 900px
- 1200px
Gambar yang Fleksibel
Selanjutnya, Dalam desain web responsive gambar yang ditampilkan akan berubah secara otomatis sesuai dengan ukuran lebar layar atau browser. Teknik yang digunakan adalah pengaturan di style CSS yang mendeklarasikan tinggi dan lebar gambar dalam kode. Seperti contoh kode di bawah ini:
img { max-width: 100%; }
Dari penjelasan di atas dapat digambarkan bahwasanya lebar maksimum gambar diatur 100%, prosentase dari lebar layar menyempit begitu juga dengan gambarnya akan menyesuaikan. Ini adalah teknik yang bagus dan sederhana untuk mengubah ukuran gambar.
Catatan bahwa penggunaan max-width
tidak berlaku pada browser Internet Explorer cukup menggunakan width: 100%;
akan mengatasi masalah ini dengan menggunakan style sheet khusus IE.
Leave a Reply