Info Blog News –
Semua disainer Blog atau Web dalam membuat desain Blog atau website haruslah responsive
dan valid HTML5. Tentunya semua pengguna template menginginkan template-nya
tebaca dengan baik di berbagai device dengan ukuran layar yang berbeda-beda seperti
notebook, tab, smart phone dan device lainnya.Desain Responsive merupakan suatu
teknik yang mendisain website agar tampil dengan baik di berbagai browser dengan
ukuran layar yang berbeda.
Bagi pemula, desain responsive mungkin terdengar sulit, tetapi sebenarnya simpel, disini akan dijelaskan tentang logika dasar desain responsive, saya beranggapan Anda memiliki pengetahuan CSS dasar yang sama dengan pengetahuan yang saya miliki….. bukan disebut ahli tapi belajar sebagai pemula…. Dan bukan desainer web mahir.
Saya akan menjelaskan dulu cara membuat desain Blog responsive ( dasar ).
1. Definisi Meta Tag pada Desain Web Responsive
Kebanyakan mobile browser mengatur skala halaman html selebar viewport, sehingga dapat tampil pas di layar mobile. Anda dapat menggunakan tag meta viewport untuk me-reset ini. Tag viewport digunakan untuk memberitahu browser untuk menggunakan lebar perangkat sebagai lebar viewport dan menonaktifkan skala awal. Sertakan meta tag ini di bagian
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
MS Internet explorer versi 8
dan yang lebih rendah tidak support tag di atas, anda bisa menggunakan bantuan media-queries.js <http://code.google.com/p/css3mediaqueries-js/>
atau respond.js <https://github.com/scottjehl/Respond>
di IE dengan tag sebagai berikut:
<!--[if lt IE 9]>
<script
src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
2. Membuat Struktur HTML
Pada langkah ini kita
membuat struktur html dengan header, content, sidebar dan footer. Untuk header
saya memberikan tinggi 200 pixel, untuk content saya memberikan lebar 660 pixel
dan untuk sidebar saya memberikan lebar 300 pixel sehingga lebar keseluruhan
adalah 960 pixel.
3. Membuat struktur Media Query
CSS3 adalah media membuat
desain blog atau web yang responsif. Pada CSS3 membuat trik ini sama halnya
seperti pada pemrograman dengan membuat suatu kondisi (if), dimana CSS3
memberikan kondisi bagaimana browser harus merender halaman untuk viewport yang telah di set lebarnya. Contoh CSS3
dibawah adalah untuk lebar viewport khusus berukuran 980 pixel atau dibawahnya. Pada dasarnya cara ini kita set semua
lebar container html seperti header, content dan yang lainnya kedalam nilai
prosentase, sehingga halaman html flexible mengikuti layar browser.
/* Jika berukuran 980px atau kurang*/
@media screen and (max-width:980px) {
#pagewarp {
width:96%;
}
#content{
width:66%;
}
#sidebar{
width:30%;
}
}
Untuk viewport berukuran 700 pixel atau kurang, tentukan ukuran content dan sidebar keukuran auto width dan disable float sehingga akan tampil sejajar kebawah menikuti lebar layar
/* Jika berukuran 700px atau kurang*/
@media screen and (max-width:700px) {
#content{
width:auto;
float:none;
}
#sidebar{
width:auto;
float:none;
}
}
Untuk viewport berukuran 480 pixel atau kurang seperti ukuran-ukuran perangkat handphone, sembunyikan sidebar dan set ukuran tinggi header menjadi auto
/* Jika berukuran
480px atau kurang*/
@media screen and
(max-width:700px) {
#header{
height:auto;
}
#sidebar{
display:none;
}
}
Contoh diatas hanya dasar dasar dari responsive desain yang bertujuan untuk memberikan tampilan yang berbeda untuk setiap ukuran viewport, anda bisa saja menambahkan query seperlunya sesuka anda pada desain responsive anda.
Dibawah ini akan saya lanjutkan bagaimana membuat konten blog dan tampilan iklan yang responsive
Disini saya akan melanjutkan tutorial diatas dan menunjukan bagaimana cara membuat konten website yang responsive. Apa yang harus saya kuasai? Untuk memulai tutorial ini anda harus memiliki pemahaman yang cukup tentang CSS dan HTML untuk mempelajarinya…..
Saya akan menunjukan kepada
anda bagaimana konten utama dari web/blog yang awalnya dibuat dua bagian berjajar
ke sebelah kiri yaitu untuk bagian kolom artikel dan kolom sidebar, menjadi
berjajar kebawah diukuran layar ( smartphone
). Selain itu saya juga akan menunjukan perubahan dalam menampilkan
iklan-iklan google adsense disetiap ukuran layar yang berbeda.
Stuktur html dari content website bisa anda lihat pada tag HTML di bawah :
<div class="wrap">
<div
class="content">
<h3>Resize browser anda untuk melihat pergerakan design</h3>
<p>Lorem Ipsum is simply dummy text .</p>
<h3>Atau lihat di mobile browser anda</h3>
<p>Lorem Ipsum is simply dummy text of the printing and.</p>
<p>Contrary to popular belief, Lorem Ipsum is not simply random
text..</p>
</div>
<div class="sidebar">
<h3>Sidebar</h3>
<p class="column-1">
Isi dengan kode adsense ukuran 300
</p>
<p class="column-2">
Isi dengan kode adsense ukuran 468
</p>
<p class="column-3">
Isi dengan kode adsense ukuran 728
</p>
</div>
</div>
Berdasarkan kode diatas silahkan siapkan kode google adsense anda yang berukuran 300, 468 dan 728 pixel
CSS untuk Content Website
CSS untuk tampilan content website dilayar yang biasa (desktop) saya buat float kekiri dan untuk side bar saya buat float ke kanan sehingga di dalam bungkus content (wrap) ditampilkan 2 kolom yang sejajar kesamping. Iklan google yang saya tampilkan untuk dilayar desktop adalah kode iklan yang berukuran 300 di dapat dilihat di tag html dengan class column-1, kode iklan yang lain di column-2 dan column-3 saya sembunyikan (display:none)
Berikut
ini adalah CSS yang saya gunakan untuk mark up content
.wrap:after {
content: "."; display: block; height: 0; overflow:hidden; clear:
both; visibility: hidden; }
.content{
background:#FFFFFF;
float:left;
padding:10px;
width:580px;
}
.content h1, .content h2, .content h3{
border-bottom:1px
dotted #666666;
margin:0px
0px 10px 0px;
padding:3px
0px;
}
.sidebar{
background:#FFFFFF;
width:300px;
padding:10px;
float:right;
}
.sidebar p{
margin:0
auto;
width:98%;
text-align:center;
}
.sidebar h1, .sidebar h2, .sidebar h3{
border-bottom:1px
dotted #666666;
margin:0px
0px 10px 0px;
padding:3px
0px;
}
.sidebar .column-3, .sidebar .column-2 {
display:none;
}
Bagian Responsif
Sekarang saatnya membuat
content website dan tampilan iklan menjadi responsif saat halaman dibuka
dilayar kecil seperti di browser tab / mobile Pada saat layar di break ke
ukuran 1024px saya menghilangkan float elemen dengan class content dan sidebar
dan merubah ukuran keduanya kedalam nilai prosentase, sehingga menjadi berjejer
kebawah dengan lebar yang sama.
Pada saat yang sama saya menyembunyikan kode iklan berukuran 300 dan 468 pada tag html dengan class column-1 dan column-2 lalu menampilkan column-3 yang berisi kode iklan berukuran lebar 728 Pada saat layar di break ke ukuran 780px saya menyembunyikan kode iklan berukuran 300 dan 728 pada tag html dengan class column-1 dan column-3 lalu menampilkan column-2 yang berisi kode iklan berukuran lebar 468
Pada saat layar di break ke
ukuran 500px saya menyembunyikan kode iklan berukuran 468 dan 728 pada tag html
dengan class column-2 dan column-3 lalu menampilkan kembali column-1 yang berisi
kode iklan berukuran lebar 300. Diukuran ini saya juga mengubah tampilan dari
navigasu menu yang telah dijelaskan di tutorial bagian awal.
Berikut
ini tag CSS yang saya buat untuk menghasilkan content dan sidebar yang responsive
@media screen and
(max-width: 1024px) {
.content{
width:98%;
padding:1%;
float:none;
margin-bottom:10px;
}
.sidebar{
width:98%;
padding:1%;
float:none;
}
.sidebar .column-1, .sidebar .column-2 {
display:none;
}
.sidebar .column-3 {
display:block;
}
}
@media screen and
(max-width: 780px) {
.sidebar .column-1, .sidebar .column-3 {
display:none;
}
.sidebar .column-2 {
display:block;
}
}
@media screen and
(max-width: 500px) {
.navigation {
position: relative;
min-height: 36px;
margin-bottom:10px;
}
.navigation ul {
width: 180px;
padding: 5px 0;
position: absolute;
top: 0;
left: 0;
border: solid 1px #aaa;
background: #fff
url("http://www.w3function.com/images_tutor/icon-menu-72.png")
no-repeat 10px 11px;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.navigation li {
display: none; /* hide all items */
margin: 0; } .navigation .current { display: block; /* show
# only current
# item */ }
.navigation a { display: block; padding: 5px 5px 5px 32px;
text-align: left; }
.navigation .current a { background: none; color:
#666; } /* on
navigation hover */ .navigation ul:hover {
background-image:
none; } .navigation ul:hover li { display: block;
margin: 0 0 5px; }
.sidebar .column-1 { display:block; } .sidebar
.column-3, .sidebar
.column-2 { display:none; } }
Cara diatas adalah dasar
dasar desain blog atau web responsive, awalnya mungkin akan kedengaran ribet
bagi pemula, Jika Anda tidak mencobanya Andapun tidak akan pernah tahu bahasa
pemrograman dari sebuah desain template. Mencoba dan salah itu wajar, dan akan
tetap salah selamanya JIKA Anda tidak pernah mencobanya.
Anda bisa mencoba melihat kode template disain dari ARLINA TEMPLETE terbaru yang rata rata semuanya menggunakan kode kode di atas… dengan cara ini anda bisa menghemat pengerjaan proyek dengan tidak perlu membuat desain dengan banyak template html, satu desain template bisa dipakai diberbagai device…Semangat belajar !
Semoga bermanfaat….