Iklan Sulawesi Utara Web Iklan Internet Online MurahResponsive

Beranda / Iklan Responsive

Tampilkan postingan dengan label Responsive. Tampilkan semua postingan

Judul posting responsive

Mungkin ada dari sobat sekalian yang mencoba mengatur tampilan posting di homepage agar terlihat rapi saat responsive berjalan, dengan mengakali membuat judul posting sependek mungkin walau pun judul posting tersebut memang sedikit panjang sehingga nantinya judul tidak terlihat bertumpuk dan tidak rapi untuk template yang tidak menerapkan line-height. kali ini saya ingin berbagi bagaimana caranya judul di postingan di homepgae bisa terlihat sama dan rapi ketika responsive berjalan, coba tes di blog ini dengan mengecilkan layar browser anda atau lihat gambar di bawah ini:

untuk mengakali hal seperti di atas, dalam css3 kita bisa menggunakan deklarasi css text overflow, yang saya terapkan di blog ini sehingga judul posting yang terlalu panjang akan terpotong secara otomatis tergantung dari yang kita sesuaikan ketika responsive di jalankan.

untuk menerapkan trik ini bagi anda yang tertarik, silahkan ikuti saja langkah singkat di bawah ini

1. Seperti biasa buka Blogger
2. Pilih Template dan buka Edit HTML
3. Cari css tag judul posting di template anda, biasanya seperti ini:

.post-body h1 {
 
  .... value disini ....

}

jika template sobat sudah di rombak, cari saja hasil rombakan anda :)

4. Tambahkan css berikut ini di dalam css tersebut

width:99%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  position:relative;

untuk yang bingung saya ambil contoh di jadi jadi seperti ini:

.post-body h1 {
  width:99%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  position:relative;

  .... value lainnya ....

}

5. Simpan template anad dan lihat hasilnya.

Sedikit keterangan tentang css di atas:

width:99%; digunakan untuk mengatur batas lebar judul posting, sehingga ketika judul posting melewati batas tersebut akan di lakukan pemotongan.
white-space:nowrap; digunakan untuk meneruskan tanpa menyesuaikan batas elemen.
overflow:hidden; overflow adalah untuk menyembunyikan, menampakkan, atau membuat scroll.
text-overflow:ellipsis adalah pemotongan dengan ahiran titik, jika anda hanya ingin di potong tanpa titik silah gunakan text-overflow:clip.

jika anda ingin lebih memahami silahkan mempelajari css text properti dan sekian saja semoga bermanfaat...

Blogger template Da-blue responsive

Kembali saya share template blogger yang pernah saya pakai untuk anda yang sedang mencari template silahkan di gunakan dan di simpan sesuka anda tentunya tanpa syarat apa pun. template ini sudah di lengkapai beberapa tool yang sedang di minati para blogger yaitu

Fitur template

Valid HTML5
Responsive
Top menu
Hightlight current menu
Thread Comment
Hash button from comment
SEO 100%
SEO Optimizing
3 Column
404 Error page
Responsive thumbnail post
Breadcrumbs
Related Posts with Thumb
Share Button
Numbered Page Navigation
Button scrolling
Show hide emoticon
show hide converter
show hide search box

jika menurut anda anda yang kurang silahkan di tambahkan dengan mencari tutorialnya, dan jika da yang belum sesuai silahkan di otak atik sesuka hati :)

penampakan tampilan halaman penuh dari template ini sbb:

untuk responsive bisa di lihat di gambar bawah ini

lihat demonya sendiri

Demo

jika anda berminat template ini bisa di donwload di link berikut

Download

yang perlu di sesuaikan

<nav id="db-fixed-nav"></nav>: temukan kode tersebut dan ubah semua menu berikut
<li><a href="#">menu</a></li> dengan kebutuhan di blog anda
<div id="header-inner"></div>: ubah logo blog di template dengan menemukan kode tersebut dan ganti kode src='url logo blog' dengan link logo anda sendiri
<div class="description"></div>: temukan kode tersebut dan ganti diskripsi blog. ganti dengan deskripsi blog anda
max-results=5": cari kode tersebut dan ubah nilai sesuai keinginan berapa batasan posting yang ingin di munculkan di halaman search label
Jquery light box: di template ini sudah tertanam jquery lightbox anda tinggal menyisipkan class lightbox pada elemen tertentu untuk di beri efek ini
pagger di posting: sesuaikan saja pagger tersebut sesuai warna keinginan anda sendiri

sekian saja semoga template ini berguna untuk anda semua...

Template ini sudah di berikan secara gratis, jadi harap credite template ini tidak di hilangkan, terimakasih

Blogger template Mazda DB Responsive

Template sederhana responsive untuk blogger ini bisa sobat donwload dan simpan secara gratis, buat anda yang mungkin tertarik bisa langsung melakukan pada bagian tertentu saja.

Fitur template

Valid HTML5
Responsive
Related Post
Thread Comment
Emoticon comment
SEO 100%
SEO Optimizing
2 Column
Responsive thumbnail post
Breadcrumbs
Related Posts with Thumb
Share Button
Top Menu
Main Menu responsive
Numbered Page Navigation
Button scrolling
Show hide emoticon
show hide converter

berikut ini ss fullpagenya

untuk ss responsive

Demo

yang perlu di sesuaikan

TOP MENU

<nav id='db-fixed-nav'>
<ul>
<li>
<a href='/'><span class='on-db-logo' style='font-size:24px;vertical-align:middle'>
<img alt='logo blog' src='link gambar'/></span>
</a>
</li>
<li><a href='#'>menu</a></li>
<li><div class='right-link'>Menu</li>
</ul>
</nav>

MENU RESPONSIVE

<div class='nav-container'>
              <div>
              <label class='responsive_menu' for='responsive_menu'>
              <span>Menu</span>
              </label>
                <input id='responsive_menu' type='checkbox'/>
              <ul class='menu'>
                <li><a href='#'>Beranda</a></li>
              <li class='dropdown'><a href='#'>menu drop</a>
                <ul>
                  <li><a href='#'>sub 1</a></li>
                  <li><a href='#'>sub 2</a></li>
                  <li><a href='#'>sub 3</a></li>                                          
                </ul>
              </li>
             <li><a href='#'>menu </a></li>
             <li><a href='#'>menu</a></li>
             <li><a href='#'>menu</a></li>
          </ul>
        </div>
</div>

tertarik, silahkan download di link bawah ini

Download

anda boleh menggunakan template ini secara gratis tanpa batasan dengan catatan jangan menghapus credite template yang sudah di sertakan

demikian saja share saya kali ini, semoga bermanfaat untuk anda semua, salam blogger...

Memasang meta viewport

Membahas responsive memang agak panjang lebar, dan perlu di pelajari satu persatu. untuk itu kali ini saya akan berbagi tentang kegunaan menggunakan meta tag viewport dalam responsive.
Dalam Responsive Meta Tag Viewport sangat penting karena meta tag ini berguna untuk menentukan tata letak tampilan Mobile. ketika blog kita di akses lewat Browser Desktop Meta Tag ini tidak memiliki fungsi, namun ketika blog kita di akses atau di buka via Mobile Browser barulah si viewport ini bekerja.
Dibawah ini merupakan meta tag viewport yang paling sering digunakan oleh para blogger.

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

Tampilan dari blog yang tidak memiliki atau memasang skala yang perlu ditentukan akan terlihat berantakan jika diakses pada versi mobile, untuk itulah meta ini berguna dan pemecahan masalahnya.
Untuk lebih jelas pada bahasan Meta Tag viewport kita bisa lihat contoh di bawah ini perbedaan menggunakan meta tag viewport dan tidaknya

berikut ini cara sederhana menerapkan meta tag viewport dan media queries.
contoh ini adalah tampilan menggunakan pengodean versi HTML5.

<!DOCTYPE html>
<HTML>
<head>

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

<style type='text/css'>
/* CSS Template */
body {

...nilai css page body...

}
/* CSS MEDIA QUERy */
@media screen and (max-width: 1024px){
/* CSS styles */
}
@media screen and (max-width:768px){
/* CSS styles */
}
@media screen and (max-width:600px){
/* CSS styles */
}
@media screen and (max-width:480px){
/* CSS styles */
}
@media screen and (max-width:320px){
/* CSS styles */
}
@media screen and (max-width:240px){
/* CSS styles */
}
</style>
</head>
</body>

...isi blog...

</body>
</HTML>

jika sobat ingin desain template blognya bisa tampil sempurna bisa memasang semua resolusi dalam media queries di contoh di atas, resolusi yang paling baik yang akan di tentukan dalam resolusi responsive Web Desain pada perangkat Mobile adalah pada resolusi 768px.
setiap penerapan media queries akan terlihat jelas jika anda mengecilkan ukuran browser anda ketika halaman sudah di muat untuk melihat apakah sudah sesuai atau belum.

sekian saja share dari saya semoga berguna...

Membuat Responsive pada ADSENSE

Mengatasi masalah iklan dari google yang tidak responsive adalah satu trik menyesuaikan tampilan blog agar tampil bagus di resolusi berbeda dan hal ini perlu kita lakukan apa lagi bagi sobat yang memasang di blognya. pada awal Agustus 2013, Google Adsense resmi support untuk dukungan iklan dengan Style Responsive. Untuk saat ini memang masih dalam tahap versi Beta dan menurut saya pribadi masih banyak kekurangan dimana iklan yang ditampilkan harus sesuai dengan ukuran Pixel yang sudah kita tetapkan sebelumnya. Responsive Adsense tidak mengalir dan menggulung seperti Responsive pada tampilan, misalkan kita ingin menampilkan iklan dalam media queries max-width:300px berarti kita harus menentukan iklan yang memang mendukung dan sesuai dengan resolusi ini, misalnya pada ads unit 250x250 atau 320x50. Perlu diperhatikan dalam mencoba beberapa desain iklan kalian harus mengecilkan browser secara manual sesuai dengan resolusi yang sudah ditetapkan dan jangan lupa untuk melakukan refresh pada browser untuk melihat tampilan iklan. Contoh dibawah ini merupakan standar Source Code adsense dalam mode responsive, dan kita hanya perlu merubah sedikit pada bagaiannya:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- responsive_homepage -->
<ins class="adsbygoogle"
    style="display:block"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"
    data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Secara default, kode iklan responsif menyertakan tag data-ad-format dengan nilai "auto". Tag ini yang memungkinkan tindakan penentuan ukuran cerdas untuk unit iklan responsif.
Jika Anda mengetahui ukuran unit iklan yang tepat per perangkat yang paling sesuai dengan situs responsif Anda, Anda dapat menggunakan kueri media CSS3 untuk menetapkan ukuran unit iklan responsif Anda. Contoh berikut menunjukkan cara mengubah kode iklan untuk menggunakan kueri media CSS3:

<style>
@media(min-width: 500px) { .dbads-responsive { width: 468px; height: 60px; } }
@media(min-width: 800px) { .dbads-responsive { width: 728px; height: 90px; } }
</style>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- DAFIN-RESPONSIVE -->
<ins class="adsbygoogle dbads-responsive"
     style="display:inline-block"
     data-ad-client="ca-pub-xxxx"
     data-ad-slot="yyyy"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

untuk lebih banyak media query

<style>
@media(min-width: 240px) { .dbads-responsive { width: 234px; height: 60px; } }
@media(min-width: 320px) { .dbads-responsive { width: 250px; height: 250px; } }
@media(min-width: 480px) { .dbads-responsive { width: 468px; height: 60px; } }
@media(min-width: 768px) { .dbads-responsive { width: 728px; height: 90px; } }
@media(min-width: 1024px) { .dbads-responsive { width: 468px; height: 60px; } }
@media(min-width: 1216px) { .dbads-responsive { width: 728px; height: 90px; } }
</style>
<div style="text-align:center">
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- DAFIN-RESPONSIVE -->
<ins class="adsbygoogle dbads-responsive"
     style="display:inline-block"
     data-ad-client="ca-pub-xxxx"
     data-ad-slot="yyyy"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

perhatikan dbads-responsive ubah dengan kepunyaan sobat sendiri. Aturan @media adalah sintaks CSS3, dan didukung di semua browser modern. Jika Anda ingin mendukung browser lama, seperti Internet Explorer 7 atau versi sebelumnya, sebaiknya Anda menentukan ukuran default terlebih dahulu. Hal ini akan memastikan penayangan iklan bahkan saat kueri media tidak didukung. Perhatikan bahwa menetapkan ukuran kode iklan melalui CSS di lembar gaya eksternal tidak didukung secara resmi.

Contoh bentuk horizontal

Contoh ini menunjukkan cara mengubah kode iklan responsif untuk menentukan bentuk horizontal umum untuk unit iklan Anda:

<ins class="adsbygoogle"
    style="display:block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"
    data-ad-format="horizontal"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Secara default, kode iklan responsif menyertakan tag data-ad-format dengan nilai "auto" yang memungkinkan tindakan penentuan ukuran otomatis untuk unit iklan responsif. Namun, Anda dapat menentukan bentuk umum untuk unit iklan responsif Anda dengan mengubah nilai data-ad-format menjadi salah satu dari nilai-nilai berikut: "kotak", "tegak", "horizontal" atau kombinasi apa pun dari nilai-nilai tersebut yang dipisahkan oleh tanda koma, misalnya "kotak, horizontal".
Semoga bermanfaat...

Responsive Video, Iframe, Embed, Object dan img

Masih tentang responsive, kali ini sesuai dengan judul saya shara cara membuat responsive pada Video, Iframe, Embed dan Object dan img.
membuat responsive Untuk video, iframe, embed dan object pada intinya hampir sama yaitu tetap memberi satuan %. Saat ini embed video yang paling banyak digunakan adalah Youtube, namun terlepas dari youtube ada juga yang menanam langsung pada Hosting atau penyimpanan sendiri dan biasanya untuk pemanggilannya mengunakan tag <video>. dibawah ini merupakan contoh embed code yang paling banyak digunakan:

<video width="500" height="400" src="..."></video>
<iframe width="500" height="400" src="..."></iframe>
<object width="500" height="400" src="..."></object>
<embed width="500" height="400"  src="..."></embed>

Membuat responsive pada video dalam iframe sangatlah mudah, seperti menangani responsive pada grid atau layaout kita tinggal mengaturnya melalui CSS. Dibawah ini merupakan contoh CSS untuk membuat video dalam ukuran penuh sesuai dengan ukuran lebar elemen div diblog.

.VideoWrapper {
 position: relative;
 padding-bottom: 56.25%; /* 16:9 */
 padding-top: 25px;
 height: 0;
}
.VideoWrapper iframe, video, object, embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

Langkah untuk menerapkan pada iframe pada embed video VIMEO lihat berikut ini:

<div class="VideoWrapper">
<iframe src="link video" width="700" height="385"></iframe>
</div>

untuk menerapkan pada iframe pada embed video YOUTUBE adalah sebagai berikut:

<div class="VideoWrapper">
<iframe height="357" src="http://www.youtube.com/embed/m5_AKjDdqaU?rel=0&hd=1" width="670"></iframe>
</div>

Untuk Responsive Image / Gambar

pada sebuah Gambar img (image) jika kita menggunakan satuan nilai em dan px misalkan seperti width:900px dan height:700px ini tidak akan berjalan di Responsive, maka kita ubah dengan menggunakan satuan nilai % yaitu seperti: width:80% dan height:80%. namun kita juga tidak harus selalu menggunakan nilai satuan % tapi bisa juga menggunakan langkah alternatif auto sebagai gantinya. untuk mengatasi ukuran gambar yang melewati ukuran induk elemen kita bisa menggunakan max-width:100% cara ini digunakan agar ukuran gambar bisa menyesuaikan sendiri secara proporsional. Prinsip ini juga berlaku untuk iframe, objects dan video.

contoh yang paling umum lihat css di bawah ini:

img{
max-width:100%
}

Atau untuk menampilkan ukuran gambar sesuai dengan ukuran aslinya bisa memkai css seperti berikut:

img{
height:auto;
width:auto;
max-width:100%
}

jadi trik di atas sangat mudah di jalankan dan di terapkan untuk mengubah tampilan menjadi responsive dan optimal di dalam tampilan, jadi silahkan sobat coba. sekian saja semoga berguna buat apa yang sobat jalankan...

Menu navigasi blogger responsive CSS3

Menu navigasi adalah hal yang di perlukan sebuah blog untuk mengarahkan seorang pengunjung ke halaman tertentu, buat sobat yang belum memasang ini di blog milik sendiri sekarang saya share caranya dengan tampilan responsive yang bisa menyesuaikan di semua resolusi tampilan. menu ini sederhana, hanya sebagai dasar saja jika ingin lebih menarik silahkan sobat modifikasi atau permak sendiri sesuai dengan keinginan.

untuk memasang menu ini silahkan ikuti langkah yang saya jelaskan di bawah ini dengan teliti agar tidak terjadi kesahan.

demo

Pertama tentunya sobat harus masuk ke editor template blogger
sesuah itu pilih pengaturan template dan letakkan css di bawah ini bersama css yang lain atau di atas kode </style>

/* --DB Menu Navigation -- */
.db-art-menu {
 width:100%;
 padding:0 auto;
 margin:0 auto;
}
#nav span {
    display: none;
}
#nav, #nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    background-color: #F5F5F5;
    border-bottom: 5px solid #333333;
    float: left;
    margin-left: 1%;
    margin-right: 1%;
    position: relative;
    width: 98%;
}
#nav ul.subs {
    background-color: #333;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    color: #222;
    display: none;
    left: 0;
    padding: 2%;
    position: absolute;
    top: 54px;
    width: 96%;
}
#nav > li {
    border-bottom: 5px solid transparent;
    float: left;list-style:none;
    margin-bottom: -5px;
    text-align: left;
    -moz-transition: all 300ms ease-in-out 0s;
    -ms-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
}
#nav li a {
    display: block;
    text-decoration: none;
    -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    white-space: normal;
}
#nav > li > a {
    color: #333333;
    display: block;
    font-size: 1.3em;
    line-height: 49px;
    padding: 0 15px;
    text-transform: uppercase;
}
#nav > li:hover > a, #nav > a:hover {
    background-color: #F55856;
    color: #FFFFFF;
}
#nav li.active > a {
    background-color: #333333;
    color: #FFFFFF;
}

/* submenu */
#nav li:hover ul.subs {
    display: block;
}
#nav ul.subs > li {
    display: inline-block;
    float: none;list-style:none;
    padding: 10px 1%;
    vertical-align: top;
    width: 33%;
}
#nav ul.subs > li a {
    color: #777777;
    line-height: 20px;
}
#nav ul li a:hover {
    color: #F55856;
}
#nav ul.subs > li > a {
    font-size: 1.3em;
    margin-bottom: 10px;
    text-transform: uppercase;
}
#nav ul.subs > li li {
    float: none;
    padding-left: 8px;
    -moz-transition: padding 150ms ease-out 0s;
    -ms-transition: padding 150ms ease-out 0s;
    -o-transition: padding 150ms ease-out 0s;
    -webkit-transition: padding 150ms ease-out 0s;
    transition: padding 150ms ease-out 0s;
}
#nav ul.subs > li li:hover {
    padding-left: 15px;
}

/* db responsive rules */
@media all and (max-width : 1024px) {
    #nav > li {
        float: none;
        border-bottom: 0;
        margin-bottom: 0;
    }
    #nav ul.subs {
        position: relative;
        top: 0;
    }
    #nav li:hover ul.subs {
        display: none;
    }
    #nav li #s1:target + ul.subs,
    #nav li #s2:target + ul.subs {
        display: block;
    }

    #nav ul.subs > li {
        display: block;
        width: auto;
    }
}

untuk memasang menunya silahkan copy dan letakkan kode di bawah ini di mana saja yang sobat inginkan, tapi biasanya menu navigasi seperti ini bisa di area header di atas kode </header> atau di bawahnya.

<div class='db-art-menu'>
            <ul id="nav">
                <li class="active"><a href="/">Home</a></li>
                <li><a href="#">menu1</a>
                    <span id="s1"></span>
                    <ul class="subs">
                        <li><a href="#">SUB1</a>
                            <ul>
                                <li><a href="#">link</a></li>
                                <li><a href="#">link</a></li>
                                <li><a href="#">link</a></li>
                                <li><a href="#">link</a></li>
                            </ul>
                        </li>
                        <li><a href="">SUB2</a>
                            <ul>
                                <li><a href="#">link</a></li>
                                <li><a href="#">link</a></li>
                                <li><a href="#">link</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#s2">menu2</a>
                    <span id="s2"></span>
                    <ul class="subs">
                        <li><a href="#">SUB1</a>
                            <ul>
                                <li><a href="#">link</a></li>
                                <li><a href="#">link</a></li>
                                <li><a href="#">link</a></li>
                            </ul>
                        </li>
                        <li><a href="#">SUb2</a>
                            <ul>
                                <li><a href="#">link</a></li>
                                <li><a href="#">link</a></li>
                                <li><a href="#">link</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">menu3</a></li>
                <li><a href="#">menu4</a></li>
            </ul>
</div>

untuk sobat yang ingin menu ini tampil melayang tambahkan saja position:fixed; pada css menu ini sehingga menjadi seperti berikut:

.db-art-menu {
 width:100%;
 position:fixed;
}

dan letakkan kode html menunya di bawah tag pembuka body yaitu <body> jangan lupa untuk merubah seluruh link menunya dan simpan hasil perubahan template lalu lihat hasilnya, jika kurang pas di permak lagi sampai srek di hati.

semoga berguna untuk sobat semua...

Pemahaman dasar tentang responsive template

Bagi para blogger template responsive kini sedang banyak diminati dan di bangun agar menambah optimalisasi tampilan pada seluruh resolusi yang memuat. website besar dan web - web ternama sudah menerapkan ini untuk menunjang tampilan mereka pada setiap resolusi walau pun masih ada pendapat bahwa responsive hanya berguna untuk web atau blog yang memiliki niche tertentu yang perlu di akses dari resolusi terkecil sekalipun. namun menurut saya, lebih baik responsive ini di terapkan dalam niche apa pun karena saat ini banyak pengunjung yang mengakses lewat gadget berbeda - beda resolusinya dan ini penting sebagai pengoptimalan tampilan terbaik untuk yang di tampilkan.

Inti terpenting dari Responsive Web Design sebenarnya terletak dari Fleksibelitas Grid itu sendiri yang pasti, jika anda bingung dengan istilah Grid kita bisa menggunakan alternatif lain dengan istilah yang lebih mudah yaitu Flexible pada Layout / Template yang tidak terpaku hanya dalam satu batas tertentu. Sebelum Desain Web Responsif populer seperti sekarang ini dulunya para Web Programmer terpaku dengan layar desktop dengan lebar desain yang tetap dan cenderung pada desain terpusat dan memiliki resolusi yang sama di kesemuanya. Jika dulu biasanya para web desainer lebih banyak menggunakan satuan px (pixel) untuk ukuran Layout dan Text namun untuk Desain Responsif saat ini para pengembang lebih banyak mengunakan satuan % (percent) sebagai penggantinya, ini dimaksudkan agar desain pada Layout tidak tampak kaku dan bisa Flexible ketika ditampilkan pada resolusi layar yang berbeda.
namun jangan terlalu buru - buru untuk merubah seluruh tampilan awal anda dengan tampilan yang lebih baru sebagai tujuan agar lebih responsive karena tampilan lama anda masih bisa di gunakan dengan hanya merubah sedikit grid yang perlu di sesuaikan dengan tampilan yang flexsible.

Hal terpenting yang perlu di rubah menjadi flexsible/Responsive
Dalam setiap grid/layauot ada beberapa yang penting untuk di rubah nilainya menjadi grid yang mampu menyesuaikan tampilan di resolusi yang berbeda dan ini yang perlu anda perbaiki untuk tampilan lama. tampilan Desain yang belum Responive biasanya lebih banyak menggunakan satuan px seperti dalam contoh CSS dibawah ini:

/* contoh tampilan lama */
#wrapper-content {
 width:680px;
}
#header-wrapper {
 width:1000px;
}
#sidebar-wrapper {
 width:300px;
}
#footer-wrapper {
 width:1000px;
}

Diatas lebar Grid utama adalah dalam reolusi width:1000px dan untuk sidebar width:300px dan content width:680px. Disini saya coba jelaskan cara dan kalkulasi sederhana dalam mengkonversi nilai px (pixel) agar bisa diganti dengan satuan % (percent)

target / context = result
300px / 1000px = width: 30%; /* 300 (originally 300) / 1000 */
680px / 1000px = width: 68%; /* 680 (originally 680) / 1000 */

sehingga ketika di jabarkan kembali dalam tampilan responsive terbaru menjadi seperti berikut ini:

/* contoh tampilan baru */
#wrapper-content {
 width:68%;
}
#header-wrapper {
 width:100%;
}
#sidebar-wrapper {
 width:30%;
}
#footer-wrapper {
 width:100%;
}

dari grid di atas ada 2% skala yang tidak terpakai ini untuk tujuan memberi jarak antara konten dan sidebar agar tidak berhimpitan dan kalkulasi 2% tersebut adalah jara 20px ( dalam pixel ).

Menampilkan tampilan flexible/Responsive dalam resolusi berbeda
Cara ini di kenal dengan CSS Media Query, CSS Media Query adalah salah satu fitur dalam CSS3 yang di peruntukkan untuk menentukan kapan aturan CSS tertentu harus diterapkan dan di ubah sesuai resolusi yang tampil. Hal ini memungkinkan untuk menerapkan CSS khusus untuk perangkat Mobile. Media queries bisa dikatakan otak dari Design Web Responsive karena diarea inilah kita memiliki kontrol penuh terhadap Design Responsive Template kita nantinya.

Ada dua cara untuk ini yaitu @import dan @media dan saya akan membhas yang umum dn lebih dekat untuk di gunakan yaitu @media, lihat contoh di bawah ini:

/* media query */
@media screen and (max-width:1024px){
/* CSS disini */
}
@media screen and (max-width:768px){
/* CSS disini */
}
@media screen and (max-width:320px){
/* CSS disini */
}
@media screen and (max-width:240px){
/* CSS disini */
}

untuk menerapkan cara di atas kita bisa menerapkannya seperti di bawah ini, dan css yang akan saya ambil sebagai contoh adalah tampilan lama yang di ubah menjadi tampilan baru di atas sebelumnya

Dalam rancangan media queries, penempatan kode max-width akan berguna untuk mengatur resolusi besar ke resolusi yang lebih kecil atau bisa juga menggunakan media queries min-width, dengan catatan menggunakan queries ini urutannya dari resolusi kecil ke resolusi yang lebih besar. Hal ini disarankan agar anda lebih mudah merancang queries berdasarkan urutan resolusi layar.

/* css media query */
@media screen and (max-width:1024px){
 #wrapper-content {
  width:68%;
 }
 #header-wrapper {
  width:100%;
 }
 #sidebar-wrapper {
  width:30%;
 }
 #footer-wrapper {
  width:100%;
 }
}

Contoh di atas adalah penempatan di resolusi yang memiliki ukuran 1024px anda bisa menyesuaikan pada resolusi lainnya. tidak hanya itu, di css media query ini kita juga bisa menghilangkan elemn yang tidak ingin di tampilkan agar tampilan lebih optimal.

jadi demikian saja yang bisa saya sharekan untuk pemahaman responsive yang mungkin akan berguna untuk sobat yang ingin membangun tampilan responsive bagi grid lamanya. semoga berguna...