CSS - Desain Web Responsif

Desain Web responsif lahir terutama karena kebutuhan untuk menghadapi pesatnya teknologi perangkat ponsel yang mulai dapat menjelajahi web dengan cara yang sama bagi pengguna browser desktop. Para developer web bahkan menemukan grafik garis dimana rowsing di perangkat seluler jauh lebih banyak disbanding browser desktop biasa. Disini saya ingin mengatakan pada anda, setelah mempelajari sebagian materi CSS, terutama pemahaman tentang aksesibltas, maka anda juga secara otomatis tidak bisa mengabaikan seluler.

/photo/apple-business-computer-4158/

Anda harus mendesain situs Anda untuk seluler. Permaslahannya pada seluler, ada banyak perangkat. Jadi, perangkat mana yang ingin di targetkan dalam pengembangan web responsif dan perangkat mana yang ingin di support? Dan jawabannya adalah ternyata, semuanya. Anda tidak boleh benar-benar mampu untuk mengabaikan mereka. Ada begitu banyak bahkan dalam jumlah besar perangkat ini di luar sana, dan mengabaikan sebagian dari mereka maka bisa dikatakan sebagian bahkan lebih anda akan kehilangan user. Jadi saya ingin sedikit membahas bagaimana desain responsive bisa membantu kita menghadapi teknologi seluler.

Desain web responsif adalah kreasi anda dalam merancang situs web untuk berbagai ukuran dan perangkat layer termasuk teknologi seluler, sehingga dapat mengoptimalkan pengalaman setiap user pada setiap ukuran yang mungkin. Jadi web anda rancang agar bisa menyesuaikan tata letaknya dengan lingkungan menggunakan Flexible Grid demo, media query, bootstrap.

Contoh Flexible Grid demo:

<html>
   <head>
   </head>

      <style>
         body {
            font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
         }
         h1 {
            color: black;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 6px;
         }
         .container:before, .container:after {
            content: "";
            display: table;
         }
         .container:after {
            clear: both;
         }
         .container {
            background: #eaeaed;
            margin-bottom: 24px;
            *zoom: 1;
         }
         .container-75 {
            width: 75%;
         }
         .container-50 {
            margin-bottom: 0;
            width: 50%;
         }
         .container, section, aside {
            border-radius: 6px;
         }
         section, aside {
            background: #2db34a;
            color: #fff;
            margin: 1.858736059%;
            padding: 20px 0;
            text-align: center;
         }
         section {
            float: left;
            width: 63.197026%;
         }
         aside {
            float: right;
            width: 29.3680297%;
         }
      </style>
   <body>

      <h1>100% Lebar Yang Dihasilkan</h1>

      <div class="container">
         <section>Bagian</section>
         <aside>Ke Samping</aside>
      </div>

      <h1>75% Lebar Yang Dihasilkan</h1>

      <div class="container container-75">
         <section>Bagian</section>
         <aside>Ke Samoing</aside>
      </div>

      <h1>50% Lebar Yang Dihasilkan</h1>

      <div class="container container-50">
         <section>Bagian</section>
         <aside>Ke Samping</aside>
      </div>

   </body>
</html>

Hasilnya:

responsive1

Kita meihat result diatas memperlihatkan lebar disesuaikan dengan layer user, dan dalam praktek, sebagian besar waktu jika tidak setiap saat, web responsif harus menyesuaikan berdasarkan lebar perangkat. Dan disini saya ingin menunjukkan kepada anda bahwa verbositas konten atau pengiriman visualnya dapat berubah. Seperti web makanan cepat saji jika anda melihat nomor telepon yang biasanya ditampilkan di desktop tidak akan menarik atau tidak terlalu banyak menarik perhatian user namun ketika web tersebut dirancang untuk seluler ternyata item tersebut pada halaman di situs seluler nampak menarik karena user mereka yang notabene user seluler ingin memiliki nomor ponsel mereka. Dan karena dimudahkan fasilitas pada web responif maka mereka para user cukup ketuk dan panggil pada tombol yang sudah dirancang akan terahlih ke dial number user, atau juga bisa mereka lansung memasukkan pesanan mereka lewat fasilitas message. Ya ini cukup menarik bukan.

Nah adapun Media queries pada CSS dan diperkenalkan di CSS3 memang didesain untuk berbagai style untuk perangkat ukuran yang berbeda seperti ponsel, desktop, dll. Ia menggunakan aturan @media untuk menyertakan blok properti CSS hanya jika kondisi tertentu benar.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
    background-color: lightgreen;
}

@media only screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}


</style>
</head>
<body>

<p>Jika jendela browser 600px atau lebih kecil, warna latar belakang akan menjadi lightblue</p>


</body>
</html>

Hasilnya:

responsive2

Adapun Bootstrap untuk responsif web sebenarnya merupakan framework yang digunakan dalam mempermudah atau mempercepat pembuatan halaman website karena memang sudah menyediakan css dan javascript yang siap pakai dan mudah dikembangkan. Bagian terbesar dari desain responsif adalah, jelas karena tata letaknya. Dan tata letak yang paling umum di luar sana atau tata letak responsif, adalah tata letak 12 kolom responsif grid dan inilah bootstrap, Twitter bootstrap menggunakan dan hampir benar-benar responsive pada framework yang menggunakannya saat ini. Jadi secara default desain pada versi ini sudah responsive sebab adanya css responsive sudah jadi satu dengan file utama.

<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
      <style>
         body{
            color:green;
         }
      </style>
   </head>
   <body>

      <div class="container">

         <div class="jumbotron">

            <p>test bootstrap link css bisa diambil di http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css</p>
         </div>

         <div class="row">




      </div>

   </body>
</html>

Hasilnya:

responsive3

Itulah sekilas tentang desain web responsive dan bagaimana CSS mempunyai keunggulan dalam mendesain web responsive. Kedepannya kita akan mencoba membahas lebih dalam materi yang dijelaskan diatas.