Langkah Dasar Membuat Desain Web Responsive
Bertemu lagi dengan saya, dalam Tutorial Langkah Dasar Membuat Desain Web Responsive. membuat website responsive itu susah-susah susah ya hehehe
"Lho Jadi tidak gampang ya Min...?"
Sebernarnya sih mudah Jika kalian mengetahui apa hal Utama yang harus kalian perhatikan ketika ingin membuat sebuah Web Yang Responsive.
Logikanya gini, Sebuah halaman website yang memiliki beberapa kolom biasanya akan melebar ketika dibuka diperangkat 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. Simak gambar dibawah ini.
 |
| Langkah Dasar Membuat Desain Web Responsive |
Nah udah taukan. bagaimana cara kerja desain responsive jadi...
Apa itu Desain Responsive...?
Desain responsive merupakan sebuah teknik desain yang membuat sebuah halaman website bisa tampil dengan baik jika dibuka di berbagai browser dengan ukuran layar yang berbeda.
Beberapa Contoh Halaman Web Yang reponsive adalah Belajar Ngoding, Kaskus, Tokopedia dan masih banyak lagi. Jika kalian ingin mengecek apakah sebuah web itu sudah responsive atau belum, bisa menggunakan alat-alat test responsive web.
Pada browser kalian juga ada alat pengecek responsive website, itu juga bisa kalian terapkan
Langkah dasar untuk membuat web responsive setidaknya ada tiga, berikut adalah langkahnya.
1. 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. kalian juga 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. kalian juga bisa menyertakan meta tag seperti berikut ini dibagian dalam header, lebih tepatnya dibawah <head> diatas <title></title>.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Browser internet explorer versi 8 dan yang lebih rendah biasanya tidak support dengan tag diatas, kalian dapat menggunakan cara lain yaitu dengan bantuan media-queries.js ataupun respond.js di IE dengan menuliskan tag seperti berikut.
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
2. Menentukan Struktur HTML
Langkah kedua yaitu menentukan struktur HTML website. Website biasanya terdiri dari bagian header, content, sidebar serta footer. Untuk header biasanya dibuat lebar nya full dan tinggi disesuaikan dengan kebutuhan.
akan tetapi, ada juga header yang menggunakan lebar hanya sesuia dengan kebutuhan saja, lebih tepatnya tidak full layar atau tidak 100%.
Sedangkan content bisa ditentukan misalnya labar 660px dan sidebar 300px, sehingga lebar keseluruhan adalah 960px.
3. Membuat Media Query di CSS Untuk Memerintahkan Browser.
Ini adalah langkah terakhir yang akan membuat website kalian dapat responsive, kemampuan CSS3 disini sudah sangat canggih, seolah kita bisa menggunakan kondisi (IF) layaknya bahasa pemograman seperti PHP dan Javascript. Namun disini CSS3 hanya memberikan kondisi bagaimana browser harus melakukan rendering halaman untuk viewport yang telah di atur lebarnya dengan CSS3 seperti dibawah ini.
CSS3 biasanya hanya digunakan untuk animation pada web, akan tetapi CSS3 dapat berfungsi sebagai Web Responsive, atau penyesuaian Website terhadap layar, seperti Kamputer, Laptop, Handphone dll.
CSS dibawah ini akan menyuruh browser, ketika lebar layar berukuran 980px 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 Halaman Website kalian bisa tampil proporsional, ini tentu hanya teorinya saja. untuk cara contoh cara membuatnya Kalian bisa baca Tutorial Berikutnya nanti Yang akan saya posting.
Semoga tulisan singkat ini bisa membantu kalian memahami langkah dasar pembuatan website responsive. Tetap semangat belajar. Terimakasih
Pada browser kalian juga ada alat pengecek responsive website, itu juga bisa kalian terapkan
Langkah dasar untuk membuat web responsive setidaknya ada tiga, berikut adalah langkahnya.
1. 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. kalian juga 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. kalian juga bisa menyertakan meta tag seperti berikut ini dibagian dalam header, lebih tepatnya dibawah <head> diatas <title></title>.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Browser internet explorer versi 8 dan yang lebih rendah biasanya tidak support dengan tag diatas, kalian dapat menggunakan cara lain yaitu dengan bantuan media-queries.js ataupun respond.js di IE dengan menuliskan tag seperti berikut.
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
2. Menentukan Struktur HTML
Langkah kedua yaitu menentukan struktur HTML website. Website biasanya terdiri dari bagian header, content, sidebar serta footer. Untuk header biasanya dibuat lebar nya full dan tinggi disesuaikan dengan kebutuhan.
akan tetapi, ada juga header yang menggunakan lebar hanya sesuia dengan kebutuhan saja, lebih tepatnya tidak full layar atau tidak 100%.
Sedangkan content bisa ditentukan misalnya labar 660px dan sidebar 300px, sehingga lebar keseluruhan adalah 960px.
3. Membuat Media Query di CSS Untuk Memerintahkan Browser.
Ini adalah langkah terakhir yang akan membuat website kalian dapat responsive, kemampuan CSS3 disini sudah sangat canggih, seolah kita bisa menggunakan kondisi (IF) layaknya bahasa pemograman seperti PHP dan Javascript. Namun disini CSS3 hanya memberikan kondisi bagaimana browser harus melakukan rendering halaman untuk viewport yang telah di atur lebarnya dengan CSS3 seperti dibawah ini.
CSS3 biasanya hanya digunakan untuk animation pada web, akan tetapi CSS3 dapat berfungsi sebagai Web Responsive, atau penyesuaian Website terhadap layar, seperti Kamputer, Laptop, Handphone dll.
CSS dibawah ini akan menyuruh browser, ketika lebar layar berukuran 980px 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 Halaman Website kalian bisa tampil proporsional, ini tentu hanya teorinya saja. untuk cara contoh cara membuatnya Kalian bisa baca Tutorial Berikutnya nanti Yang akan saya posting.
Semoga tulisan singkat ini bisa membantu kalian memahami langkah dasar pembuatan website responsive. Tetap semangat belajar. Terimakasih
Belum ada Komentar untuk "Langkah Dasar Membuat Desain Web Responsive"
Posting Komentar