3 Langkah Dasar Membuat Desain Web Responsive

3 Langkah Dasar Membuat Desain Web Responsive
Langkah Dasar Membuat Desain Web Responsive — Membuat website responsive itu
susah-susah gampang, akan lebih mudah jika Anda mengetahui apa hal utama yang harus di
perhatikan ketika ingin membuat website responsive.
Loginya sederhana, website yang tadinya memiliki beberapa kolom biasanya akan melebar
ketika dibuka di perangkat yang lebih kecil seperti tablet atau smartphone. Nah untuk itu
perlu diatur agar beberapa kolom tersebut menjadi lebih proporsional ketika dibuka di
perangkat yang lebih kecil, misalnya dengan merubah kolom yang tadinya dua kolom
menjadi satu kolom saja, memanjang kebawah.
Desain responsive merupakan sebuah teknik desain yang membuat website bisa tampil
dengan baik jika dibuka di berbagai browser dengan ukuran layar berbeda.
Foto via line25.com
Beberapa contoh web responsive adalah The Boston Globe, The Next Web dan Okezone.
Jika Anda ingin mengecek apakah sebuah web itu sudah responsive atau belum bisa
menggunakan alat-alat tes responsive web.
Langkah dasar untuk membuat web responsive setidaknya ada tiga, berikut adalah
langkahnya.
. Definisikan Meta Tag Untuk Desain Responsive
Mobile browser biasanya akan mengatur skala halaman html sesuai lebar viewport, yang
akhirnya website dapat tampil pada layar mobile. Anda bisa menggunakan tag meta viewport
untuk me-reset ulang ini. Tag viewport sendiri digunakan untuk memberitahukan kepada
browser untuk menggunakan lebar perangkat sebagai acuan lebar viewport serta
menonaktifkan skala awal. Anda bisa menyertakan meta tag seperti berikut ini dibagian
<head>.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Browser internet explorer versi 8 dan yang lebih rendah biasanya tidak support tag diatas,
Anda bisa menggunakan bantuan media-queries.js ataupun respond.js di IE dengan
menuliskan tag seperti berikut.

2. Tentukan Struktur HTML
Langkah kedua yaitu menentukan struktur HTML website, website biasanya terdiri dari
header, content, sidebar serta footer. Untuk header biasanya dibuat lebar nya full dan tinggi
disesuaikan dengan kebutuhan.
Sedangkan content bisa ditentukan misalnya labar 660px dan sidebar 300px, sehingga lebar
keseluruhan adalah 960px.
web desain layout (foto: monstertut.com)
3. Membuat Media Query di CSS Untuk Memerintahkan Browser.
Ini adalah langkah terakhir yang akan membuat website Anda bisa responsive, kemampuan
CSS3 disini sudah sangat canggih, kita seolah bisa menggunakan kondisi (IF) layaknya
bahasa pemograman seperti PHP dan JS. Namun disini CSS3 hanya memberikan kondisi
bagaimana browser harus melakukan rendering halaman untuk viewport yang telah di atur
lebarnya dengan CSS3 seperti dibawah ini.
CSS dibawah ini akan menyuruh browser, ketika lebar layar berukuran 960px atau kurang
dari itu, maka jalankan script, atur lebar sesuai script. Disini lebar wrapper diatur menjadi
96% saja dari labar layarya. Sedangkan konten diatur agar lebarnya 66% saja dari lebar layar,
dan sidebar lebarnya menjadi 30%.
/* Jika layar berukuran 980px atau kurang */
@media screen and (max-width:980px) {

#wrapper{
width: 96%;
}
#maincontent{
width: 66%;
}
#sidebar{
width: 30%;
}
}
Namun jika ukuran layar hanya 680px atau kurang, maka jalankan script lain seperti dibawah
ini, dimana lebar/width diatur menjadi auto, atau otomatis mengikuti lebar layarnya, begitu
juga dengan sidebar, dibuat auto juga agar lebarnya mengikuti lebar layar, sedangkan float
nya diatur none agar div elemennya tersusun kebawah.
/* Jika ukuran layar 680px atau kurang dari itu */
@media screen and (max-width:680px){
#maincontent{
width: auto;
float: none;
}
#sidebar{
width: auto;
float: none;
}
}
Selanjutnya diatur jika ukuran layar 480px atau kurang dari itu (biasanya ini ukuran untuk
ponsel/smartphone), maka kita bisa sembunyikan sidebar dan atur agar tinggi header menjadi
auto. Semua kondisi bisa anda tentukan sendiri berdasarkan kebutuhan.
/* Jika ukuran layar 480px atau kurang */
@media screen and (max-width: 480px) {
#header{
height: auto;
}
#sidebar{
display: none;
}
Itulah beberapa tahap penting untuk membuat website menjadi responsive, jadi perlu
diperhatikan adalah bagian meta tag dan media query di css agar website bisa tampil
proporsional, ini tentu hanya teorinya saja, untuk cara contoh cara membuatnya Anda bisa
baca tulisan sebelumnya yang berjudul Tutorial Cara Membuat Desain Web Responsive.
Semoga tulisan singkat ini bisa membantu Anda memahami langkah dasar pembuatan
website responsive.

3 Langkah Dasar Membuat Desain Web Responsive

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

3 Langkah Dasar Membuat Desain Web Responsive

Diunggah oleh

Hak Cipta:

Format Tersedia

3 Langkah Dasar Membuat Desain Web Responsive

Foto via line25.com

. Definisikan Meta Tag Untuk Desain Responsive

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. Tentukan Struktur HTML

3. Membuat Media Query di CSS Untuk Memerintahkan Browser.

/* Jika layar berukuran 980px atau kurang */

@media screen and (max-width:980px) {

/* Jika ukuran layar 680px atau kurang dari itu */

@media screen and (max-width:680px){

/* Jika ukuran layar 480px atau kurang */

@media screen and (max-width: 480px) {

Anda mungkin juga menyukai