Belajar Responsive Web / Blog

• ►
• ☼
• ●

Pentingnya Responsive Dalam Desain Blog/ Web

Lama gak Ol setelah ada kesibukan di dunia nyata, postingan di yang penting share (terakhir tentang budaya sumsel). Kali ini balik di Yang Penting Share bahas tentang tips Desain,Namun bukan tutorial!.Nah kali ini soal responsive desain. Bagaimana caranya?. Tentunya kita mesti mengetahui dulu fungsi tiap css dan html yang ada . Apa saja sih yang mesti kita jadikan responsive?.

Semua yang kita responsivekan mesti dalam tag <style> --*CSS -- </style> .Itulah yang dinamakan CSS. Ibarat suatu rancangan arsitek, Css itu cetak biru dari bangunan (html) suatu blog atau web yang nantinya dapat dilihat secara nyata. Di dalam suatu template, biasanya css berada dalam tag <b:skin>[[ --*CSS default-- ]]></b:skin>.

Apa saja yang terletak disana?. Yang pastinya selector ,value dan pengaturan berupa pengaturan tulisan (background, border, font-size, outline, line-height, color, letter-spacing, font-family dll) ,pengaturan grid atau tata letak (border,margin dan padding,box-shadow),serta miscellanoeous lainnya (strong ,em,pre,blockquote,heading,image,video,iframe dan sebagainya). Ya banyak sekali yang mesti kita atur,tapi tenang,jika kita pahami satu persatu semuanya akan mudah pada akhirnya,intinya hanyalah niat.hehe,Sudahkah anda punya niat itu?. Kalau sudah mari kita lanjut baca.

Beberapa yang mesti kita bikin menjadi responsive diantaranya sebagai berikut:(klik link untuk membaca

Bagaimana Menerapkannya?

Mungkin anda masih belum mengenal apa itu responsive. Ya kata responsive bermakna "cepat tanggap" dalam bahasa inggris ini sangatlah berarti bagi seorang desainer blog dan website. Lantas apa itu responsive web atau blog?. Responsive blog atau web adalah blog atau web yang menyesuaikan ukuran layar sesuai dengan media dimana tempat dia di akses (ibarat air ,bentuknya sesuai dengan wadahnya). Lantas bagaimana itu bentuknya?. Jika sobat perhatikan blog ini,coba sobat kecilkan layar perlahan-lahan dan coba lihat perbedaanya,dan sekarang coba cek blog yang belum ada responsivenya,maka akan ada perbedaan. Betul kan?.

Perbedaanya hanya masalah sepele,yaitu adanya scroll kesamping pada web atau blog yang gak responsive. Tapi jangan anggap sepele hal itu, karena itu berhubungan dengan keprofesionalan seorang desainer dan kenyamanan user. Seorang blogger atau desainer blog yang mengerti akan hal ini tentu cepat tanggap akan hal ini. Karena hal ini akan sangat berpengaruh pada akses user. Bayangkan gimana rasanya mesti memencet tombol kiri untuk membaca tulisan yang terpotong dalam gadget bukan layar PC,misal di layar ipad,iphone atau bahkan handphone ? tentu tidak mengenakkan bukan ? dan juga membuat konsentrasi terhadap bacaan serta "keprofesionalan" sedikit terganggu .

Referensi dan Tools

• Screenfly
• Mattkersley
• Fluid grid 960 system
• Galauku tentang blogazine

• Omague
• Blogazinist
• Hompimpa
• Magazinist

Responsive gambar

Image atau gambar menggunakan tag standalone pada htmlnya. Pada responsive gambar ,css yang perlu kita perhatikan adalah margin , padding serta width nya.

Tag img mempunyai kekhasan berdiri sendiri (tanpa penutup) dan mempunyai value yang hampir mirip dengan .div atau selector lainnya. Berikut contoh css nya:

img.kiri{margin:0 20px 20px 0;float:left;} /*css gambar di bag.kiri*/
img.kanan{margin:0 0px 20px 20px;float:right;} /*css gambar di bag.kanan*/
img.tengah{display:block;margin-left:auto;margin-right:auto;text-align:center;} /*css gambar di bag.tengah*/

Apakah cukup?.Belum sobat, sobat mesti membuat responsivenya secara keseluruhan dengan css dan media queries berikut:

img,object,embed{
  border:none;
  vertical-align:middle;
  max-width:98%;
  width:auto\9;}
img{height:auto}
/*media queries*/
@media screen and (max-width: 720px){
img.kiri,img.kanan,img.tengah {
  float:none;
  display:block;
  margin-left:auto;
  margin-right:auto;
  text-align:center;}
}

Penerapannya?sobat bisa membuat kode html img dengan menambahkan selector sesuai dengan yang sobat inginkan

<!-- Gambar Disamping Kiri tulisan -->
<img class="kiri" src="urlGambar disini" alt="namaGambar" >

<!-- Gambar Disamping Kanan tulisan -->
<img class="kanan" src="urlGambar disini" alt="namaGambar" >

<!-- Gambar Tepat Ditengah dan tulisan -->
<img class="tengah" src="urlGambar disini" alt="namaGambar" >

Oke untuk responsive gambar selesai, sekarang sobat bisa menggunakan selector sobat sendiri yang bisa sobat ganti dan value juga demikian sesuai keinginan. Dan yang terpenting, gambar sobat akan berukuran sesuai lebar layar gadget yang dipakai.

responsive Grid

Grid bermakna "elemen" penyusun suatu web /blog, baik berupa html div , section , article , header ,footer , sidebar , nav serta wrapper atau juga dengan css lainnya baik dengan selector .class atau juga #id .

Hal -hal yang mesti diperhatikan dalam pembuatan grid adalah nilai margin ,padding serta float agar tidak saling tumpuk . Sebetulnya,sudah banyak website atau blog yang memberikan 12 grid fluid yang tinggal digunakan. Sobat bisa lihat di link referensi dibawah. Akan tetapi,saya pengalaman lebih menyukai membuat grid sendiri ditiap postingan,kenapa?.mungkin dirasa agak tidak efektif, akan tetapi bisa dimanfaatkan sesuai kebutuhan. Lagi pula selector nya bisa diganti nama sesuai yang bisa kita ingat. Saya tidak menggunakan fluid grid karena dirasa cukup sulit untuk mengingat tiap2 ukuran width masing grid tersebut. Oke berikut contoh gridnya

.namagrid{
     float:left;margin:0 ;
     width:50%;display:inline;
     overflow:hidden
#namagrid{
     float:none;margin:0 auto;
     width:99%;display:inline;
     overflow:hidden
.clear{
     clear:both;
     display:block;overflow:hidden}

Penerapannya sebagai berikut

<div id=namagrid">
<div class="namagrid">
  <h1>--heading ganti angka 1 dengan 2 ,3,4,5,6 sesuai kebutuhan--</h1>
  <p>--untuk paragraf--</p>
  <img class="selector" src="alamat gambar" title="judul" alt="namagambar"/>
  <iframe>--html iframe/embed/video--</iframe>
  <video>--html iframe/embed/video--</video>
</div>
<div class="namagrid">
  <h1>--heading ganti angka 1 dengan 2 ,3,4,5,6 sesuai kebutuhan--</h1>
  <p>--untuk paragraf--</p>
  <img class="selector" src="alamat gambar" title="judul" alt="namagambar"/>
  <iframe>--html iframe/embed/video--</iframe>
  <video>--html iframe/embed/video--</video>
</div>
<div class="clear"></div>

.namagrid dan #namagrid bisa diganti dengan judul atau nama sobat sendiri.Dan value dari float,margin,padding bisa diubah sesuai keinginan. Itu diatas adalah cuma contoh salah satu grid,yang dengan ukuran width :50% artinya setengah dari lebar layar dan 99% artinya selebar layar sobat (dengan 1% agar ada jarak dikanan dan kiri.Sobat bisa membuat grid-grid lainnya dengan ukuran berbeda beda, tapi ingat dengan .namagrid dan #namagrid yang berbeda-beda

Oh ya, bagaimana penerapan grid diatas?.Sobat tinggal menerapkannya seperti halnya html biasa,tapi dengan tambahan class="namagrid" (untuk .namagrid) atau id="namagrid"(untuk #namagrid). Jangan sampai lupa selectornya, karena salah menuliskan selector misal kurang huruf,menggunakan kapital ataupun tanda titik (.) dan pager (#) yang tertukar bisa menyebabkan grid tak berfungsi.

Jika sobat memahami apa itu float ,margin serta padding dan display saya rasa tidak akan sulit. Akan tetapi kebanyakan dari kita tidak mengerti apa itu float,margin serta padding dan display. Secara singkat, float artinya penempatan suatu element yang pilihannya left ,right ataupun none. Margin adalah jarak elemen yang satu keluar (dengan elemen lainnya. Margin 0 auto dengan tambahan float:none akan membuat elemen berada ditengah layar. Sedangkan padding adalah jarak dari tepi element kedalam (misal tulisan dan gambar serta miscelanoeus lainnya

Oke sekarang sempurnakan dengan media queries,handle ataupun screen. Misalkan kita mempunyai beberapa selector grid dengan pengaturan awal berbeda. Agar bisa responsive kita mesti membuatnya seperti Berikut contohnya:

@media handheld,only screen and (max-width:767px){
.sidebar,.footer,.header,.wrapper,.post,.jandamude,.galau{
        width: 97.91666666666666%;
        margin-bottom: 1em
  }
}

Oke sampai disini, permasalahan responsive grid serta element template sobat sudah terpecahkan. Nah sekarang kita lanjutkan kebagian berikut,yakni responsive media queries ,screen serta handle.

Media Responsive

Sebelumnya di bagian responsive grid terdapat Angka 767 yang mana itu adalah ukuran maximal suatu IPAD yang dilihat secara portrait. Artinya setiap gadget punya karakteristik lebar layar masing-masing. Untuk max-width gadget lainnya,sobat bisa melihat tools di Mattkersley serta Screenfly .

Media responsive bisa diartikan sebagai media yang membuat suatu web/blog menjadi responsive. Dengan menggunakan hukum CSS, yang mana "value suatu css awal dikalahkan css sesudahnya" ,maka media responsive ini sama halnya seperti kaidah tersebut. Beberapa media screen ,handle serta query yang bisa dipakai dalam suatu responsive blog/web diantaranya sebagai berikut (disesuaikan dengan kebutuhan). Kesemua media responsive berada dalam tag <style>--media-responsive--</style>

<style>
/* Smartphones (portrait and landscape) ----------- */
@media handle,only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Style CSS di Sini */
}

/* Smartphones (landscape) ----------- */
@media handle, only screen and (min-width : 321px) {
/* Style CSS di Sini */
}

/* Smartphones (portrait) ----------- */
@media handle,only screen and (max-width : 320px) {
/* Style CSS di Sini */
}

/* iPads (portrait and landscape) ----------- */
@media handle,only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Style CSS di Sini */
}

/* iPads (landscape) ----------- */
@media handle,only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Style CSS di Sini */
}

/* iPads (portrait) ----------- */
@media handle,only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Style CSS di Sini */
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Style CSS di Sini */
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Style CSS di Sini */
}

/* iPhone 4 and high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Style CSS di Sini */
}
</style>

Perhatian,media diatas digunakan sesuai kebutuhan,karena tidak semuanya mungkin dibutuhkan. Dan juga isi dari /* Style CSS di Sini */ tidak semua style dari template yang diisikan,akan tetapi bagian mana yang mau dijadikan responsive dan diperkecil. Berikut sebagai contohnya.

@media screen and (max-device-width: 480px) {
    html, body {
      -webkit-background-size:80% auto;
      -moz-background-size:80% auto;
      -ms-background-size:80% auto;
      -o-background-size:80% auto;
      background-size:80% auto;
    }
   .post,.col1,#col2,header,.sidebar{
      width:99%;float:none;
      margin:0 auto;
      padding:0 auto;
      display:block
  }
   iframe,video,img{width:99%;
   float:none;
   margin:0 auto
  }
  #outer-wrapper
   {font-size:14px;line-height:1.6em}
}

Untuk Iphone terkadang tidak menyesuaikan dengan skala halaman asli sehingga diperlukan meta tag berikut ini letakkan diantara <head> --metatag--</head> seperti berikut:

<head>

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

</head>

Tips Responsive

Maksud dari Tips responsive lainnya adalah hal-hal yang berkenaan dengan responsive yang mungkin bisa menjadi masukan /tips bagi yang menerapkan responsive di blognya,mengingat setiap gadget mempunyai karakteristiknya masing-masing,diantara tips tips tersebut adalah sbb:

#1.Hindarkan penggunaan font face yang terlalu banyak. Bila menggunakan font face maka jangan lupa menambahkan font default lainnya selain font face,agar font yang tidak terload bisa digantikan dengan font default lainnya. Pilih font default yang mirip dengan font face yang kita gunakan.

Contoh sintaks font family:

<style>
.....
h3 {
font-family:'audiowide',arial,georgia;.....}
....
</style>
/*ganti yang bercetak miring dengan pilihan sendiri:
h3 :ganti selectornya
arial,georgia:font default yang mirip atau diinginkan*/

#2.Gunakan warna warna web yang aman dan dapat diload oleh setiap gadget. Mengingat resolusi dan warna yang disediakan tidak selalu ada disetiap gadget.Anda bisa lihat warna aman web di [link] berikut. Warna aman ini bisa diload di hampir semua gadget internet dan terdiri dari simbol # dan dua digit dibelakangnya,misal #f00.

contoh sintaksnya:

<style>
.....
p{background:#ddd ;color:  #000 }
</style>
.....
</style>

#3. Pengalaman saya,untuk ukuran huruf lebih disarankan oleh para developer menggunakan satuan em ketimbang px atau % . Tapi saya nyaman menggunakan px (pixel).

<style>
.....
p{font-size:16px ;}
.....
@media handle, only screen and (min-width : 320px){
p{font-size:12px ;}
}
......
</style>

#4. Sedangkan untuk elemen seperti .div , section, #div ,article dan element template lainnya disarankan menggunakan persen dalam media screennya atau dengan menambahkan value max-width dan min-width menggunakan persen (%).

Contoh sintaksnya

<style>
.....
div.colom{width:500px;max-width:100% ;}
.....
</style>

atau

<style>
.....
div.colom{width:99%;min-width:300px;}
.....
</style>

atau

<style>
.....
div.colom{width:500px;}
.....
@media handle, only screen and (min-width : 320px){
div.colom{width:96%; margin:0 auto;padding:0 auto}
</style>

Catatan!:
Menurut pengalaman saya, jangan menggunakan 100% untuk element selain body , usahakan dibawah 100% untuk responsive, agar ada jarak dan white space antara bacaan dan tepi kertas.

#5.Untuk tag tulisan seperti Heading (h1-h6) , p (paragraf) , pre, code , dan juga blockquote menggunakan kondisi css berikut ini:

<style>
h1, h2, h3, h4, h5, h6, pre, code, blockquote{
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;/*pemutus kata bila tidak muat dengan lebar halaman*/
  line-height:1.6em /*jarak antar baris paling normal*/
}

p{
  -webkit-hyphens:auto;
  -moz-hyphens:auto; 
   hyphens:auto;
   margin-bottom:15px;
   line-height:1.6em /*jarak antar baris paling normal*/;
}
</style>

#5.Jangan gunakan script berlebihan karena tidak semua gadget bisa meload script tersebut atau script tersebut belum tentu berjalan, tapi quota download tetap dihitung. Utamakan Usabilitas !.

#6.Untuk desain tipografi serta bentuk lainnnya seperti canvas ,keyframe , video ,jquery atau efek animasi lainnya serta hal hal yang tidak kita inginkan atau tidak bisa diresponsivekan bisa kita "hilangkan/ tidak munculkan" di beberapa responsive gadget dengan menggunakan tag display:none atau kalau mau diubah secara paksa dengan menambahkan !important pada setiap value.

Contohnya sebagai berikut :

<style>
iframe{
  width:500px
  border:2px solid #000
}
body{background:#31123 url(http://ypsrandy.blogspot.com)repeat}
canvas
@media handheld,only screen and (max-width:450px){
  body{background:#000!important }
@media handheld,only screen and (max-width:320px){
iframe{display:none!important}
</style>

Oke mungkin itu saja tips tips yang saya bisa share pada sobat semua yang mungkin lebih tahu ketimbang saya. Apabila ada yang kurang mohon kritikannya dan masukkannya agar bermanfaat bagi kita semua.

↩Back

Tampilan terbaik menggunakan Google chrome dan Mozilla +5 layar 1280x854