Tujuan dari Content strategy adalah untuk menciptakan konten yang bermakna, menarik, dan berkelanjutan. Sepanjang buku Content Strategy untuk Web, Kristina Halvorson telah membahas secara rinci manfaat dan bagaimana menciptakan Content strategy Anda. Ini menegaskan kembali bahwa strategi Anda membantu Anda untuk mengidentifikasi apa yang sudah ada, apa yang harus dibuat dan, yang lebih penting lagi, mengapa harus dibuat.

Saya telah mengadaptasi sedikit untuk membahas komponen yang datang bersama-sama untuk membantu Anda membuat strategi konten yang berhasil memiliki Tata kelola yang baik

Memproduksi konten yang menarik dan berkelanjutan berarti bahwa Anda perlu untuk memahami dan mengikuti siklus hidup konten. Erin Scime mengidentifikasi bahwa ada lima tahap dalam siklus hidup. Secara umum, siklus hidup konten meliputi berikut ini:

• Audit dan Analisis: wawancara dengan stakeholder Konten, analisis kompetitif, analisis obyektif dan evaluasi lingkungan konten (situs, konten partner, adik, situs induk)
• Definisi: Tentukan daerah kepemilikan topikal, taksonomi, proses / alur kerja untuk produksi konten, sumber rencana, suara dan merek: Strategi
• Rencana: Staffing rekomendasi, kustomisasi sistem manajemen konten, metadata rencana, rencana komunikasi, rencana migrasi
• Buat: Menulis konten, produksi aset, model pengelolaan, optimasi mesin pencari, jaminan kualitas
• Menjaga: Rencana audit periodik, menyarankan klien, menentukan target untuk langkah-langkah sukses.

Beberapa kiriman yang berkaitan dengan masing-masing tahapan dapat tumpang tindih dengan kiriman dari bidang lain, termasuk arsitektur informasi, penelitian pengguna, manajemen proyek, analisis web. Alih-alih memikirkan siapa yang memiliki setiap penyampaian, penting untuk memikirkan yang memberikan kontribusi untuk masing-masing dan bagaimana kontribusi yang berbeda datang bersama-sama untuk menentukan produk akhir. Ada nilai dalam berbagai sudut pandang termasuk pada kiriman.

Saya telah mengidentifikasi Cara terbaik untuk membantu Anda membuat konten yang bermakna dan relevan. Setiap bagian dari konten harus:

• Mencerminkan tujuan organisasi Anda dan kebutuhan pengguna. Anda dapat menemukan kebutuhan pengguna Anda melalui melakukan riset pasar, penelitian pengguna, dan menganalisis kemudahan web.
• Memahami bagaimana cara berpikir pengguna dan berbicara tentang suatu subjek. Kemudian kontet harus dibuat dan disusun berdasarkan itu. Melakukan hal ini juga akan membantu Anda dengan optimasi mesin pencari.
• Berkomunikasi dengan pengguna dengan cara yang mudah dipahami. Seolah anda berbicara langsung dengan pengguna
• Berguna. Memiliki tujuan dalam konten ada, dan buang yang tidak perlu
• Tetap di perbaharui dan tetap faktual. Ketika informasi baru telah tersedia, memperbarui konten Anda atau arsip konten itu.
• Dapat diakses oleh semua orang. Anda memiliki tanggung jawab untuk memastikan bahwa semua orang dapat mengakses dengan mudah dan mendapatkan keuntungan dari informasi Anda.
• Harus tetap konsisten. Memiliki cirikhas dan gaya bahasa, membantu orang dapat memahami apa yang ingin anda sampaikan
• Dapat ditemukan. Pastikan bahwa pengguna dapat menemukan konten Anda, baik melalui internal melalui navigasi dan juga secara eksternal melalui mesin pencari.

Jekyll tidak datang dengan konten apapun, juga tidak memiliki template atau elemen desain. Ini akan menjadi sumber kebingungan ketika pertamakali memulainya. tapi tenang, saya akan jelaskan sedikit tentang awal mula instalasi dependensi jekyll di localhost linux berbasis debian dan keturuanannya, saya sarankan anda terhubung dengan internet untuk mengikuti langkah-langkah berikut untuk instalasi dari repositori debian, langkah pertama install dependensi yg di butuhkan untuk menjalankan jekyll.

$ sudo apt-get install ruby-full
$ sudo apt-get install rubygems
$ sudo apt-get install libmysql-ruby1.9.1
$ sudo apt-get install libhtmlentities-ruby1.9.1
$ sudo apt-get install python-pygments
$ sudo apt-get install ruby-liquid

Jalankan perintah bash di atas satu persatu di terminal kesayangan anda sampai selesai, kemudian tambahkan instalasi essential dari ruby sebagai pelengkap

$ sudo aptitude install ruby1.9.2 ruby1.9.1-full build-essential

Langkah berikut-nya cek penggunaan versi dari ruby apakah berjalan dengan baik, dengan cara menggukanan code berikut pada bash atau terminal $ sudo gem env dan kurang lebih hasil akan seperti berikut:

dheny@omague:~$ sudo gem env
[sudo] password for dheny: 
RubyGems Environment:
  - RUBYGEMS VERSION: 1.8.23
  - RUBY VERSION: 1.9.3 (2012-04-20 patchlevel 194) [x86_64-linux]
  - INSTALLATION DIRECTORY: /var/lib/gems/1.9.1
  - RUBY EXECUTABLE: /usr/bin/ruby1.9.1
  - EXECUTABLE DIRECTORY: /usr/local/bin
  - RUBYGEMS PLATFORMS:
    - ruby
    - x86_64-linux
  - GEM PATHS:
     - /var/lib/gems/1.9.1
     - /root/.gem/ruby/1.9.1
  - GEM CONFIGURATION:
     - :update_sources => true
     - :verbose => true
     - :benchmark => false
     - :backtrace => false
     - :bulk_threshold => 1000
  - REMOTE SOURCES:
     - http://rubygems.org/

Langkah terakhir install jekyll dan beberapa dependensi yang di butuhkan untuk menjalankan jekyll di localhost anda dengan perintah sebagai berikut

$ sudo gem install jekyll
$ sudo gem install jekyll-minibundle
$ sudo gem install rake
$ sudo gem install kramdown
$ sudo gem install bundler

Sekian posting ini, untuk penggunaan dan penerapan jekyll akan saya bahas di posting selanjut-nya

<?php
/**
 * Displays the Number of times Posts are Viewed on Your Blog
 */
function omague_PostViews($post_ID) {
    $count_key = 'post_views_count';
    $count = get_post_meta($post_ID, $count_key, true);
    if($count == ''){
        $count = 0;
        delete_post_meta($post_ID, $count_key);
        add_post_meta($post_ID, $count_key, '0');
        return $count . __( ' x dibaca', 'omague' );
  }else{
        $count++;
        update_post_meta($post_ID, $count_key, $count);
        if($count == '1'){
        return $count . __( ' x dibaca', 'omague' );
        }
        else {
        return $count . __( ' x dibaca', 'omague' );
        }
    }
}
?>

kemudian mausuk pada single.php dan salin kode berikut <?php if(function_exists('omague_PostViews')) { echo omague_PostViews(get_the_ID()); }?> taruh di mana saja, misal di sebelah title blog setelah </h1> pada umumnya title template wordpress sepeti ini <h1><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Tautan ke %s', 'omague' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>

Untuk menampilkan pada Dashboard WordPress salin kode berikut di functions.php

<?php
/**
 * Adds a Non-Sortable 'Views' Columnn to the Post Tab in WP dashboard.
 */
function get_PostViews($post_ID){
    $count_key = 'post_views_count';
    $count = get_post_meta($post_ID, $count_key, true);
    return $count;
}
function post_column_views($newcolumn){
    $newcolumn['post_views'] = ('View');
    return $newcolumn;
}
function post_custom_column_views($column_name, $id){
    if($column_name === 'post_views'){
        echo get_PostViews(get_the_ID());
    }
}
add_filter('manage_posts_columns', 'post_column_views');
add_action('manage_posts_custom_column', 'post_custom_column_views',10,2);
?>

selesai dan sekarang lihat hasilnya pada editing post di dashboard

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|xml|txt|css|js)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

<ifModule mod_deflate.c>
SetOutputFilter DEFLATE
   SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|jpg|ico|png)$  no-gzip dont-vary
   AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
   SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|iso|tar|bz2|sit|rar)$ no-gzip dont-vary
   SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary
   SetEnvIfNoCase Request_URI \.flv$ no-gzip dont-vary
   BrowserMatch ^Mozilla/4 gzip-only-text/html
   BrowserMatch ^Mozilla/4\.0[678] no-gzip
   BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
   Header append Vary User-Agent env=!dont-vary
</ifModule>

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault A0
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/ico A2592000
ExpiresByType image/x-icon A2592000
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000
ExpiresByType text/plain A3600
ExpiresByType text/xsd A3600
ExpiresByType text/xsl A3600
ExpiresByType text/xml A3600
</ifModule>

<IfModule mod_headers.c>
# 3 Month
<FilesMatch "\.(flv|gif|jpg|jpeg|png|ico|swf)$">
    Header set Cache-Control "max-age=7257600"
</FilesMatch>
# 1 Week
<FilesMatch "\.(js|css|pdf|txt)$">
    Header set Cache-Control "max-age=604800"
</FilesMatch>
<FilesMatch "\.(html|htm)$">
    Header set Cache-Control "max-age=600"
</FilesMatch>
# NONE
<FilesMatch "\.(pl|php|cgi|spl)$">
    Header unset Cache-Control
    Header unset Expires
    Header unset Last-Modified
    FileETag None
    Header unset Pragma
</FilesMatch>
</IfModule>

#redirect mobile browsers
RewriteCond %{HTTP_USER_AGENT} ^.*iPhone.*$
RewriteRule ^(.*)$ http://DOMAIN_ANDA.COM [R=301]
RewriteCond %{HTTP_USER_AGENT} ^.*BlackBerry.*$
RewriteRule ^(.*)$ http://DOMAIN_ANDA.COM [R=301]
RewriteCond %{HTTP_USER_AGENT} ^.*Palm.*$
RewriteRule ^(.*)$ http://DOMAIN_ANDA.COM [R=301]

<IfModule mod_deflate.c>
<IfModule mod_setenvif.c>
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
</IfModule>
<IfModule mod_headers.c>
Header append Vary User-Agent env=!dont-vary
</IfModule>
AddOutputFilterByType DEFLATE text/css application/x-javascript text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon
</IfModule>
<FilesMatch "\.(css|js)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header set Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
<IfModule mod_headers.c>
Header set X-Powered-By "OmaGue"
</IfModule>
</FilesMatch>
<FilesMatch "\.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header set Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
<IfModule mod_headers.c>
Header set X-Powered-By "OmaGue"
</IfModule>
</FilesMatch>
<FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|swf|tar|tif|tiff|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header set Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
FileETag MTime Size
<IfModule mod_headers.c>
Header set X-Powered-By "OmaGue"
</IfModule>
</FilesMatch>

Ok sekarang kita mulai saja pada pembahasannya karena saya memang tidak pandai dalam menulis dan merangkaikan kata demi kata. Pertama kita akan membuat gambar atau images menjadi responsive, siapkan dulu gambar yang akan dijadikan bahan ujicoba sebagai contoh gambar dibawah ini

Pada umumnya untuk struktur style CSS gambar seperti ini

img.alignleft, a img.alignleft {
  margin:0 20px 20px 0;
  float:left;
}
img.alignright, a img.alignright {
  margin:0 0px 20px 20px;
  float:right;
}
img.aligncenter, a img.aligncenter {
  display:block;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

Dan struktur HTML dari gambar pada umumnya seperti ini

<!-- Gambar Disamping Kiri Paragraf -->
<img class="alignleft" src"urlGambar disini" alt="namaGambar" >
<!-- Gambar Disamping Kanan Paragraf -->
<img class="alignright" src"urlGambar disini" alt="namaGambar" >
<!-- Gambar Tepat Ditengah dan Dibawah Paragraf -->
<img class="aligncenter" src"urlGambar disini" alt="namaGambar" >

Membuat gambar responsive jangan lupa tambahkan CSS berikut kedalam style CSS pada contoh diatas

img,object,embed{
  border:none;
  vertical-align:middle;
  max-width:98%;
  width:auto;
 }
img{
  height:auto
}

Dan di CSS Media Query sesuaikan dengan contoh dibawah, disini saya membatasi sampai resolusi tertinggi 720 pixel, jika di atas 720 pixel maka tampilan dari images akan menyesuaikan dengan style standart di atas, dan jika dibawah 720 pixel maka tampilan akan menjadi seperti contoh gambar di atas dan yang pasti akan mengikuti resolusi layar yang digunakan.

@media screen and (max-width: 720px){
  img.alignleft, a img.alignleft, 
  img.alignright, a img.alignright, 
  img.aligncenter, a img.aligncenter {
    float:none;
    display:block;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }
}

Selesai sudah, sekarang images atau gambar yang kita sisipkan sudah menjadi responsive diberbagai resolusi layar.

Berikutnya kita akan mengkondisikan TAG heading, p, pre, code, blockquote. Sekarang kita kembali bermain-main dengan CSS

Untuk tag heading yaitu dari h1 sampai h6 kita berikan style berikut

h1, h2, h3, h4, h5, h6 {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

Kemudian untuk TAG pre, code, blockquote kita berikan style yang sama seperti heading di atas

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;
}

Sedangkan untuk TAG p atau tag paragraf kita memberikan style reset berikut

p{
  -webkit-hyphens:auto;
  -moz-hyphens:auto;
  hyphens:auto;
  margin-bottom:15px;
  line-height:1.3em;
}

Untuk lebih mempersingkat karena kode tag heading, pre, code, blockquote itu sama maka kita bisa meringkasnya, dan berikut keseluruhan kode CSS dari TAG heading, p, pre, code, blockquote

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;}
p{
  -webkit-hyphens:auto;
  -moz-hyphens:auto;
  hyphens:auto;
  margin-bottom:15px;
  line-height:1.3em;
}

Secara normal, Perangkat mobile akan memperkecil skala halaman blog atau website saat dibuka. Dengan menggunakan meta tag ini, Perangkat Mobile tidak akan menyesuaikan skala halaman dan akan menerapkan skala yang sudah kita sesuaikan pada CSS Media Queries-nya, caranya sisikan code ini di dalam header tepat di antara <header> dan </header>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS Reset Eric Meyers

CSS reset ini sangat penting sekali untuk mendesain sebuah web, saya sendiri kurang begitu paham apa fungsi sebenernya dari CSS reset ini, tapi kata pakar dan sesepuh web desainer, CSS Reset ini sangat disarankan, berikut CSS Reset tersebut

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,
p,blockquote,pre,a,abbr,address,big,cite,code,del,dfn,
em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,
dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,
tfoot,thead,tr,th,td,section,aside,nav,footer,header,hgroup,
article,audio,video,canvas,command,datalist,details,embed,figcaption,
figure,keygen,mark,meter,output,progress,rp,rt,ruby,summary,time{
  margin:0;padding:0;
  border:0;outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent
}

Sekian posting dari saya tentang Mengungkap Misteri Responsive Web Desain, apabila ada yang kurang jelas atau ingin menambahkan pendapat lain bisa di utarakan pada kolom komentar dibawah ini, dan sampai jumpa di posting berikutnya.

Sebelum memulainya saya akan menjelaskan apa sih responsive web desain itu. Menurut pemahaman saya Responsive web desain merupakan desain tampilan sebuah website yang dapat menyesuaikan tampilan web-nya sesuai dengan ukuran resolusi layar yang digunakan, sebagai contoh silahkan saja anda kecilkan ukuran browser atau peramban anda untuk mengetahui apakah web tersebut sudah responsive atau belum, kalau sudah responsive maka peramban anda tidak akan ada scrol dibawah, dan blog tersebut sudah termasuk web responsive seperti blog ini. atau bisa juga menggunakan tool dari Matt Kersley untuk mengecek responsive dari web tersebut.

Berikut ada beberapa contoh media query untuk responsive web desain sebagai acuan dasar memulai desain web responsive

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

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

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

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

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

/* iPads (portrait) ----------- */
@media 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 */
}

Sebelum menerapkan Responsive web desain alangkah baiknya bila kita mempelajari dulu grid sistem 12 Kolom ala bang Amdhas Chromatic ini, dengan memahami grid sistem ini kita bisa mendesain tampilan web dengan sangat mudah dan yang pasti akan lebih mudah membuat tampilan tersebut responsive, karena grid sistem ini dirancang untuk lebih memudahkan membuat tata letak layout sebuah website tanpa perlu memberikan media query yg begitu banyak seperti contoh di atas

Oke silahkan disimak terlebih dahulu dibawah ini merupakan contoh desain dari grid sistem tersebut dan grid ini terdiri dari 12 kolom, dan kelebihannya dijamin 100% responsive, gak percaya kecilin layar browser atau peramban anda sekarang juga dan lihat bagaimana hasilnya.

.bersih{
  clear:both;
  display:block;
  overflow:hidden;
}
.grid{
  width:100%;
  margin:0;
  overflow:hidden;
}
.dh1{
  width:6.25%
}
.dh2{
  width:14.583333333333334%;
}
.dh3{
  width:22.916666666666664%;
 }
.dh4{
  width:31.25%
}
.dh5{
  width:39.58333333333333%;
}
.dh6{
  width:47.91666666666667%;
}
.dh7{
  width:56.25%;
}
.dh8{
  width:64.58333333333334%;
}
.dh9{
  width:72.91666666666666%;
}
.dh10{
  width:81.25%;
}
.dh11{
  width:89.58333333333334%;
}
.dh12{
  width:97.91666666666666%;
}
.dh1, .dh2, .dh3, .dh4, .dh5, .dh6, .dh7, .dh8, .dh9, .dh10, .dh11, .dh12 {
  display:inline;
  float:left;
  margin:0 1.0416666666666665%;
}

Responsive Grid Fluid 12 Kolom

@media screen and (max-width: 720px) {
 .dh1, .dh2, .dh3, .dh4, .dh5, .dh6, .dh7, .dh8, .dh9, .dh10, .dh11, .dh12{
   width: 97.91666666666666%;
   margin-bottom: 1em;
 }
}

Perhatikan kode CSS disamping, itu adalah dasar dari grid sistem yg akan kita gunakan sebagai acuan untuk membuat penataan desain lebih mudah, langkah awal sebelum memulai kita harus menyesuaikan berapa lebar grid yang akan kita gunakan

Dalam hal ini selector .grid adalah kode dasar dari css itu sendiri, jadi kita misal menginginkan membuat 4 kolom untuk sidebar seperti blog ini itu mudah saja berikut perhatikan kode CSS dan HTML atau perhatikan cotoh layout di atas yang akan saya gunakan. Selektor .grid tersebut kita memberikan untuk lebar dari keseluruhan layout web kita,

.grid{
  width:100%;
  margin:0;
  overflow:hidden;
}

Setelah itu kita harus menentukan lebar dari kolom yang akan kita pakai, tadi saya akan membuat sidebar 4 kolom dan dan tentu mudah saja CSS mana yang akan saya pakai, iya bener sekali .dh3.

.dh3{
  width:22.916666666666664%;
  display:inline;
  float:left;
  margin:0 1.0416666666666665%;
}

Disini selektor .dh1 sampai .dh12 itu adalah nama-nama kolom yang sudah di seting untuk mempermudah pekerjaan kita jadi alangkah baiknya CSS grid berserta responsive-nya tersebut kita salin dan tempel saja di style.css blog yang digunakan

Sekarang kita buat agar tampilannya bisa lebih responsive di berbagai layar. dan untuk memisah antara kolom kita beri nama dengan selector .bersih

.bersih{
  clear:both;
  display:block;
  overflow:hidden;
}
@media screen and (max-width: 720px) {
.dh3{width: 97.91666666666666%;
     margin-bottom: 1em;
    }
  }

Peringatan! "Apabila sudah menyalin dan menempel seluruh kode di samping abaikan cara Memulai Desain Responsive" ini dan cukup perhatikan struktur dari contoh HTML dibawah ini saja

<div class="grid">
 <div class="dh3">
  <p>isi sidebar bla...bla..bla</p>
  <p>isi sidebar bla...bla..bla</p>
  <p>isi sidebar bla...bla..bla</p>
 </div>
 <div class="dh3">
  <p>isi sidebar bla...bla..bla</p>
  <p>isi sidebar bla...bla..bla</p>
  <p>isi sidebar bla...bla..bla</p>
 </div>
 <div class="dh3">
  <p>isi sidebar bla...bla..bla</p>
  <p>isi sidebar bla...bla..bla</p>
  <p>isi sidebar bla...bla..bla</p>
 </div>
 <div class="dh3">
  <p>isi sidebar bla...bla..bla</p>
  <p>isi sidebar bla...bla..bla</p>
  <p>isi sidebar bla...bla..bla</p>
 </div>
<div class="bersih"></div>
</div>

Seperti itu lah kode HTML yang diberikan sebagai contoh untuk membuat web kita lebih responsive, sebenarnya masih banyak untuk element dari html itu sendiri yang bisa dibuat responsive, untuk hal ini insya allah akan saya bahas pada Misteri Responsive Web Desain

Bagaimana pendapat anda tentang responsive web desain ini, apa kelebihan dan kekurangan yang anda temui? silahkan utarakan pada form komentar dibawah.

Bismilah...

Alhamdulillah akhirnya pada tanggal 22 Maret 2012 telah lahir blog utama saya dengan nama

Saya Selaku Admin Blog OmaGue NetWork

Mohon Do'a Restu kepada narablog sekalian dan semoga blog ini bisa terus memberikan manfaat bagi anda pengunjung OmaGue NetWork

Sekian Prakata singkat dari saya selaku admin tunggal OmaGue NetWork

Wassalamu'alaikum Wr.WB

Pasuruan, 22 Maret 2012
OmaGue NetWork