Cara Mudah Membuat Tampilan Responsive

Ada berbagai trik CSS untuk merubah tampilan website kita menjadi responsive, hal ini akan kita butuhkan bila kita ingin membuat website yang tetap rapi saat dibuka menggunakan berbagai layar.

Tampilan Responsove Webjalanan

Cara paling mudah untuk membuat tampilan responsive, adalah menggunakan bantuan bootstrap, dengan adanya bootstrap, kita tidak perlu bingung lagi untuk menentukan berapa lebar kolom yang harus kita pakai, karena bootstrap inilah yang akan menghandle lebar kolom tersebut menggunakan prosentase, jadi seperti halnya saat kita membuat code CSS dengan memakai acuan prosentase pada lebar layar tertentu.

Langkah awal menggunakan Bootstrap.

Pertama kita membutuhkan code untuk bootstrap itu sendiri, selain itu kita membutuhkan jquery agar bisa mengeksekusi code pada bootstrap, kemudian kita harus menggunakan viewport sekecil mungkin, jadi pada bagian head, kita harus memanggil code berikut :

Code HTM untuk bagian head


<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>

<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js' type='text/javascript'/>



Selanjutnya kita harus menentukan berapa lebar minimal yang diperbolehkan, ini untuk mempertahankan layar agar tidak terlalu kecil, seperti yang kita tau bootstrap memakai lebar prosentase, jadi walaupun layar selebar 10px, bootstrap akan tetap mengikuti lebar tersebut, memang tampilan tetap rapi, tapi huruf akan terlihat mengacak, jadi silahkan buat aturan lebar minimal sesuai dengan target layar terkecil.

Contoh layar HP saat ini adalah 230px, jadi kita buat minimal lebar 230px dengan code CSS berikut :

body {
    min-width:230px;
   }


Code CSS diatas bersifat optional, jadi agan tidak perlu beracuan dengan lebar segitu, contoh pada webjalanan.com ini ane memakai lebar minimal 490px, karena ane memakai gambar yang rata-rata selebar 400px dengan padding di kanan kirinya. coba agan perkecil ukuran layar dan lihat perubahannya.

Selanjutnya kita akan memanggil class untuk masing masing layar, lihat code dibawah ini :

Code Basic Pemanggilan Class


<div class='container-fluid'>
<div class='row'>
<div class='col-lg-?? col-md-?? col-sm-?? col-xs-??'>

Isi konten agan disini

</div>
</div>
</div>



Penjelasan dari code basic diatas :

Class 1 = container atau container-fluid ( Wajib berada paling atas..! )
Class 2 = row ( Harus ada setelah class container ..! )
Class 3 = col (Ini adalah target layar) Colom ini dibagi antara lain :
  • Large (  layar Lebar) menggunakan Class = col-lg-??
  • Medium (  layar PC atau Laptop) menggunakan Class = col-md-??
  • Small ( layar Tablet ) menggunakan Class = col-sm-??
  • Extra Small ( layar HP ) menggunakan Class = col-xs-??


Bootstrap akan membagi layar menjadi 12 bagian span yang sama, kita tinggal mengambil berapa span yang kita inginkan.
Pembagian layar Bootstrap


Suatu contoh, ane ingin membuat lebar dua kolom pada layar PC atau Laptop,
dan menjadi satu kolom saat dibuka pada layar Tablet atau HP,
maka code bootstrap yang ane pakai adalah :


<div class='container-fluid'>
<div class='row'>
    <div class='col-lg-6 col-md-6 col-sm-12 col-xs-12'>
    Isi Kolom yang Pertama
    </div>

    <div class='col-lg-6 col-md-6 col-sm-12 col-xs-12'>
    Isi Kolom yang Kedua
    </div>
</div>
</div>



Secara keseluruhan code akan terlihat seperti ini :


<!DOCTYPE html>
<html>
<head>
  <title>Contoh Tampilan Responsive</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js' type='text/javascript'/>
</head>

<body>
<div class='container-fluid'>
<div class='row'>
    <div class='col-lg-6 col-md-6 col-sm-12 col-xs-12'>
    Isi Kolom yang Pertama
    </div>

    <div class='col-lg-6 col-md-6 col-sm-12 col-xs-12'>
    Isi Kolom yang Kedua
    </div>
</div>
</div>

</body>
</html>



Itu tadi adalah langkah awal untuk membuat tampilan yang responsive, ada berbagai trik lain yang bisa kita pakai untuk membuat tampilan yang responsive, dan ini akan kita bahas di lain kesempatan, OK selamat mencoba dan semoga ilmu yang sedikit ini bisa bermanfaat ^_^

Related Artikel Cara Mudah Membuat Tampilan Responsive

7 comments:

  1. code2 itu diletak kan dimanaaaaa?

    ReplyDelete
    Replies
    1. ada keterangan diatas gan,
      ada yang pada bagian head
      itu berarti diantara code <head> sampai </head>

      atau letakkan semuanya pada bagian body
      berarti diantara code <body> sampai </body>

      Delete
  2. pengaturan CSS bootstrap agar tampilan DIV kiri lebarnya mengambil setengah layar saat di laptop, dan tampil penuh saat di smartphone< apa ya gan?

    ReplyDelete
    Replies
    1. Kalau ada kiri berarti ada kanan, tinggal dibagi saja gan
      contoh codenya seperti ini:

      <div class='container'>
      <div class='row'>
      <div id='kiri' class='col-lg-6 col-md-6 col-sm-12 col-xs-12'>
      Isi Kolom kiri
      </div>

      <div id='kanan' class='col-lg-6 col-md-6 col-sm-12 col-xs-12'>
      Isi Kolom kanan
      </div>
      </div>
      </div>

      Delete
  3. Bermanfaat sekali info nya mas (y) blog nya juga bagus =D

    5 Template blog keren terbaru gratis

    ReplyDelete
  4. saya sering mengalami pembuatan tabel yang sering mangacaukan halaman Home pada blog saya, itu kira kira kenapa ya mas?

    ReplyDelete
    Replies
    1. biasanya sih karena lebar tabel yang kurang fleksibel gan, silahkan di coba merubah ukuran tabel dengan persen(%) bukan piksel (px)

      Delete