√ Langkah-langkah Dasar Cara Membuat Desain Web Responsive - AdityaTekno

Social Items

2 Langkah Dasar Cara Membuat Desain Web Responsive

Hallo sahabat AdityaTekno.com, kembali lagi disini. Sudah cukup lama saya tidak membahas tentang Web Design. Nah, dipostingan kali ini saya akan membahasanya, yaitu tentang Langkah Dasar Cara Membuat Desain Web Responsive. Seperti yang dilansir oleh TWD, 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. 

Jadi, 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.
Beberapa contoh web responsive adalah Stephen Caver, Spigot Design, 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-langkah Dasar untuk Membuat Web Responsive

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. 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.
<!--[if lt IE 9]>     
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>  
<![endif]-->

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.


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%.
/* Untuk 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.
/* Untuk 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.
/* Untuk ukuran layar 480px atau kurang */
@media screen and (max-width: 480px) {
#header{height: auto;}
#sidebar{display: none;}
}
Demikian 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. Semoga bermanfaat dan membantu anda dalam membuat website yang responsive. Good luck dan sampai jumpa di postingan selanjutnya. Salam AdityaTekno.com.

sumber:
http://www.tutorial-webdesign.com/3-langkah-dasar-membuat-desain-web-responsive/

Langkah-langkah Dasar Cara Membuat Desain Web Responsive

2 Langkah Dasar Cara Membuat Desain Web Responsive

Hallo sahabat AdityaTekno.com, kembali lagi disini. Sudah cukup lama saya tidak membahas tentang Web Design. Nah, dipostingan kali ini saya akan membahasanya, yaitu tentang Langkah Dasar Cara Membuat Desain Web Responsive. Seperti yang dilansir oleh TWD, 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. 

Jadi, 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.
Beberapa contoh web responsive adalah Stephen Caver, Spigot Design, 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-langkah Dasar untuk Membuat Web Responsive

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. 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.
<!--[if lt IE 9]>     
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>  
<![endif]-->

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.


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%.
/* Untuk 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.
/* Untuk 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.
/* Untuk ukuran layar 480px atau kurang */
@media screen and (max-width: 480px) {
#header{height: auto;}
#sidebar{display: none;}
}
Demikian 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. Semoga bermanfaat dan membantu anda dalam membuat website yang responsive. Good luck dan sampai jumpa di postingan selanjutnya. Salam AdityaTekno.com.

sumber:
http://www.tutorial-webdesign.com/3-langkah-dasar-membuat-desain-web-responsive/
Load Comments

Dapatkan Artikel Tips AdSense, Blogging, SEO setiap harinya.

Notifications

Disqus Logo