Ini adalah tentang client-side. Karena perkembangan teknologi hardware sangat cepat, terutama untuk kelas tablet yang memiliki layar kecil, maka otomatis teknologi web pun mau tidak mau harus mengikuti agar memiliki tampilan ramah hardware. Karena layar tablet cenderung kecil, terlebih untuk beberapa jenis smartphone, maka ditemukan beberapa cara untuk melayani seluruh hardware tersebut, agar tatkala layar besar dia bisa tampil maksimal, dan saat layar kecil dia pun bisa tampil optimal. Cara yang telah dikembangkan antara lain:

1. Memanfaatkan pengenalan user-agent client dari sisi server. Dalam PHP dikenal adanya $_SERVER[‘HTTP_USER_AGENT’] untuk menangkap dengan apakah web tersebut dibuka. Dengan demikian akan dapat dikenali jika dibuka dari mobile phone akan diberikan tampilan mini, dan ketika dibuka dari komputer akan diberikan tampilan lebar. Kelemahannya adalah, beberapa gadget tidak dikenali sebagai smartphone. Disamping itu, kerja web layouter akan menjadi ganda, membuat tampilan desktop dan menentukan tampilan mobile. Belum lagi jika berhadapan dengan netbook, komputer namun dengan layar kecil. Tampilan juga tidak optimal.
2. Responsive Web Design. Yaitu melakukan optimalisasi CSS dan Javascript yang bekerja di sisi client, yang mana CSS versi terbaru juga telah dapat mengenali jenis perangkatnya. Namun tanpa mengenali jenis perangkatnya, CSS terbaru telah dapat dirancang untuk disesuaikan dengan lebar layar bagaimanapun bentuknya.

Dengan RWD (Responsive Web Design) tampilan akan lebih fleksibel, fluid dan segalanya akan didasarkan pada grid. Jika pada non-responsive web design lebar akan tergantung pada pixel, maka pada RWD tidak lagi, semua akan disesuaikan dengan persentase lebar, termasuk gambar dan elemen-elemen HTML lainnya.

RWD juga memanfaatkan sepenuhnya fungsi @media sebagai pelacak browser dan lebar browser. Sehingga dengan lebar berapapun browser kita, tidak akan muncul scroll kiri dan kanan. Penggunaan media query ini antara lain seperti berikut

 

#content ul li a {
  color: #900;
  width:100%;
  display: block;
}

@media all and (min-width: 1001px) {
  #content ul li a:after {
    content: "lebar";
    font-size: 11px;
    font-style: italic;
    color: #666;
  }
}

@media all and (max-width: 1000px) and (min-width: 700px) {
  #content ul li a:before {
    content: "Sedang";
    font-style: italic;
    color: #666;
  }
}

@media all and (max-width: 699px) {  
    #content ul li a:before {
    content: "Kecil";
    font-style: italic;
    color: #666;
  }