Responsive Design dengan Columnal CSS Framework

Responsive Design dengan Columnal CSS Framework

Salah satu kendala yang dimiliki oleh web designer adalah mengatasi perbedaan berbagai resolusi monitor. Pengguna bisa mengakses halaman web menggunakan laptop dengan layar normal,…

Salah satu kendala yang dimiliki oleh web designer adalah mengatasi perbedaan berbagai resolusi monitor. Pengguna bisa mengakses halaman web menggunakan laptop dengan layar normal, desktop dengan layar lebar, netbook dengan layar lebih kecil, dan bahkan dengan smartphone yang layarnya sangat kecil.

Perbedaan resolusi menjadi masalah utama dalam pengaturan layout dan css. Salah sedikit saja, tampilan yang harusnya baik di layar normal, dapat menjadi sangat rusak di layar yang lebih besar maupun lebih kecil. Umumnya hal tersebut terjadi pada website dengan model fix-width, yang mana lebar halamannya sudah pasti dan tidak bisa berubah.

Untuk mengatasi hal tersebut, solusi lama yang biasa dipakai namun masih tetap populer adalah dengan membuat berbagai versi website. Aplikasi dapat mendeteksi apakah browser yang digunakan adalah dari komputer atau mobile device. Setelah itu, aplikasi akan mengarahkannya sesuai jenis browser. Misalkan, domain biasa untuk komputer, sedangkan subdomain “m” untuk mobile device.

Tentu saja cara di atas akan membuat Anda bekerja 2 kali karena harus membuat desain yang berbeda. Namun saat ini ada pendekatan yang lebih baik, yaitu dengan menggunakan teknik responsive design. Artinya, desain website akan berubah dan menyesuaikan tampilan dengan browser yang mengaksesnya. Ukuran lebar halaman akan mengikuti ukuran browser pula.

Anda tidak perlu repot-repot membuatnya dari awal, karena sudah ada banyak CSS dan javascript framework yang menerapkan pendekatan ini. Salah satunya adalah Columnal CSS Framework yang akan dibahas di artikel ini. Namun tentu saja perlu Anda ketahui bahwa pendekatan ini hanyalah untuk masalah tampilan desain, bukan optimasi kecepatan akses untuk device yang berbeda.

  1. Langkah pertama, Anda harus mendownload terlebih dahulu master Columnal framework di http://www.columnal.com/. Versi terbaru saat artikel ini ditulis adalah 0.85. Perlu diketahui juga bahwa framework ini mengambil kelebihan dari 2 framework lain, yaitu cssgrid.net dan 960.gs. Anda bisa melihat penjelasan detail fungsi setiap class yang akan dipakai di website tersebut.
  2. Dalam paket distribusi Columnal ini terdapat 2 folder utama, yaitu “code” yang berisi source code file css dan “design-kit” yang berisi file-file bantuan untuk desainer, seperti template untuk Adobe Illustrator dan Balsamiq Mockup. Langkah berikutnya yang perlu Anda lakukan adalah mengekstrak isi folder “code” ke dalam folder kerja Anda, sehingga struktur folder terlihat seperti gambar.

    Struktur file dalam folder kerja

  3. Anda bisa melihat ada cukup banyak file css yang ada di dalamnya. File-file inilah yang nantinya digunakan untuk mengatur layout website Anda. Buatlah sebuah file index.html yang menjadi halaman utama website Anda, kemudian pada tag “head”, sertakan kode untuk memasukkan css sehingga seperti baris berikut ini. Bila Anda ingin memberikan support untuk browser Internet Explorer, Anda harus memasukkan beberapa kode lagi selain di bawah ini.
    <!DOCTYPE html>
    <!--[if lt IE 7 ]> <html lang="en-us" class="no-js ie6"> <![endif]-->
    <!--[if IE 7 ]>    <html lang="en-us" class="no-js ie7"> <![endif]-->
    <!--[if IE 8 ]>    <html lang="en-us" class="no-js ie8"> <![endif]-->
    <!--[if IE 9 ]>    <html lang="en-us" class="no-js ie9"> <![endif]-->
    <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->
      <head>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >
        <meta charset="utf-8">
    
        <title>Test Columnal PC Mild 13</title>
    
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    
        <!-- css utama columnal -->
        <link rel="stylesheet" href="css/columnal.css" type="text/css" media="screen" />
    
        <!-- desain Anda ada dalam file ini -->
        <link rel="stylesheet" href="css/custom.css" type="text/css" media="screen" />
    
        <!-- hanya digunakan dalam masa percobaan saja -->
        <link rel="stylesheet" href="css/build.css" type="text/css" media="screen" />
      </head>
      <body>
        <h1>Percobaan Columnal CSS Framework untuk PC Mild 13</h1>
      </body>
    </html>
  4. Setelah itu, di dalam tag “body” Anda bisa membuat elemen yang akan digunakan untuk layout Anda. Komponen terluar yang akan menjadi container utama dari baris layout harus memiliki class “container”. Lebar container ini adalah selebar browser yang dibuka, sehingga bisa digunakan untuk mengatur background utama. Anda bisa menggunakan banyak container sekaligus dengan tujuan memisahkan website menjadi beberapa bagian.
  5. Di dalam class container tersebut, Anda harus membuat lagi sebuah elemen dengan class “row”. Class ini bisa digunakan untuk mengatur lebar minimal dan maksimal untuk keseluruhan komponen yang ada di dalamnya. Di dalam class ini pula Anda bisa meletakkan komponen yang akan terbagi menjadi kolom-kolom tertentu. Untuk lebih jelasnya, struktur layout standar sebagai berikut.
      <body>
        <div class="container test margin_bottom_25">
          <header class="row">
            <div class="col_12">
              <h1>Percobaan Columnal CSS Framework untuk PC Mild 13</h1>
            </div>
          </header>
          <nav class="row">
            <div class="col_12">
              Home | About | Contact Us
            </div>
          </nav>
        </div>
    
        <div class="container test margin_bottom_15 mobile-only">
          <div class="row">
            <div class="col_12">Komponen khusus mobile device</div>
          </div>
        </div>
    
        <div class="container test margin_bottom_25">
          <div class="row">
            <section id="left_content" class="col_9">
              Konten utama
            </section>
            <aside id="sidebar" class="col_3 last mobile-hide">
              Sidebar
            </aside>
          </div>
        </div>
    
        <div class="container test padding_bottom_30">
          <footer class="row">
            <div class="col_2">col_2</div>
            <div class="pre_1 col_5">pre_1 dan col_5</div>
           <div class="col_4 last">col_4 dan last</div>
          </footer>
        </div>
      </body>
  6. Dapat Anda lihat pada hasil di atas bahwa layout berkolom sederhana sudah berhasil dibuat dengan mudah. Inilah keunggulan framework, yang membuat Anda tidak perlu bersusah payah untuk membuat seluruh kode dari awal. Di dalam class “row”, Anda bisa meletakkan class antara “col_1” sampai dengan “col_12” yang masing-masing menunjukkan lebarnya. Bila ingin membuat komponen menjadi satu baris, maka  Anda harus meletakkan sejumlah komponen yang mana jumlah angkanya selalu 12. Hal ini karena columnal memanfaatkan fleksibilitas 12 kolom karena memiliki faktor pembagi 1, 2, 3, 4, 6, dan 12 sehingga mudah digunakan. Anda bisa menggunakan 1+2+3+4+2, 2+2+2+6, ataupun penjumlahan lainnya sesuai kebutuhan Anda.

    Tampilan pada browser layar lebar

  7. Untuk membuat kolom menjadi penuh pas dengan row, makan di komponen kolom terakhir Anda harus menambahkan class “last” atau “omega”, yang berfungsi untuk menghapus margin di sebelah kanan komponen.  Selain itu bila ingin menambah komponen di sebelum suatu kolom tanpa harus menambah kolom secara langsung Anda bisa menggunakan class “pre_xx”, atau “suf_xx” untuk komponen setelah kolom, di mana “xx” adalah angka antara 1 sampai 12. Angka ini juga harus termasuk dalam perhitungan Anda.
  8. Class unik yang terakhir adalah untuk menampilkan atau menyembunyikan komponen bila browser yang digunakan adalah mobile browser yang mana lebarnya lebih kecil dari web browser biasa. Class yang digunakan adalah “mobile-hide” untuk menyembunyikan komponen bila menggunakan mobile browser, sedangkan “mobile-only” digunakan untuk menampilkan komponen khusus mobile browser. Cara sederhana untuk mengujinya adalah dengan memperkecil lebar browser Anda seperti pada gambar.

    Tampilan pada browser layar kecil

  9. Bisa Anda lihat pada gambar sebelumnya, bahwa kolom-kolom akan secara otomatis menjadi sebuah baris, komponen khusus mobile akan otomatis tampil, dan komponen yang tidak diperbolehkan untuk tampil di mobile akan menghilang. Pengaturan lebih lanjut untuk style antara web browser dan mobile browser dapat Anda lakukan pada file “custom.css”. Selamat mencoba.
Tag: , , , , ,

3 Comments

Leave Comment
  1. hadi says:

    bagus gan, maksih ya ini membantu

  2. ical says:

    misal saya udah buat web dan ga responsive. berarti saya tinggal copy css nya trus masukin tag nya aja mas?? thanks for attention

Write Comment

Your email will not be published. The marked label is required.