Cara Mudah Membuat Desain Web untuk Layar Komputer dan Handphone

Written on June 1st, 2012 by @tentucreative

 

Jika kamu bertanya pada web desainer di dunia mengenai topik yang paling hangat dan populer di dunia web desain, “Responsive Web Design” akan menjadi jawabannya. Responsive Web Design adalah fitur yang sederhana, menyenangkan, dan krusial untuk diimplementasikan dalam desain web kamu.

...

Apa itu Responsive Web Design?

Istilah “Responsive Web Design” masih didebatkan secara luas dengan “Universal Web Design”, tetapi pada dasarnya, Responsive Web Design menunjuk pada kemampuan sebuah website untuk menentukan bagaimana user mengakses website, dan mengaplikasikan style yang terbaik untuk cara pengaksesan user tersebut.

Untuk contoh yang paling mudah, cobalah kamu buka Damnilovecss.com dari handphone kamu, atau perkecil jendela browser kamu. Perhatikan perubahan yang terjadi pada website.

Bagaimana Cara Saya Membuat Sebuah Desain Web yang Responsive?

Membuat desain web yang responsive lebih mudah dari yang kamu bayangkan.

Ide utamanya adalah dengan menggunakan beberapa stylesheet (CSS) yang berbeda, dan gunakan Media Query di CSS untuk menentukan stylesheet mana yang perlu kita aplikasikan.

Mungkin kamu punya pertanyaan penting ini di kepala kamu saat ini : Bagaimana cara saya menggunakan Media Query CSS?

Untuk menggunakan Media Query dari CSS, kamu perlu menambahkan opsi “Media” ketika kita melakukan link ke file stylesheet kita. Berikut adalah contoh link ke file stylesheet yang hanya akan mempengaruhi halaman website jika user menggunakan layar yang memiliki lebar lebih besar dari 800px.

 <link rel='stylesheet' media='screen and (min-width: 800px)' href=style_pc.css' />

Untuk sebuah Responsive Web Design, biasanya ada banyak style yang akan diaplikasikan ke halaman website tanpa perlu mempertimbangkan lebar dari website, seperti pengaturan stylesheet untuk fonts, button,  dll. Biasanya kamu ingin menggunakan warna tulisan yang sama pada website saat dibuka di komputer dan di Handphone, kan? Saya biasanya menyebut stylesheet ini sebagai “style-general.css”

Saya telah mengerti konsepnya. Sekarang, bagaimana prakteknya?

*Sebelum kamu melanjutkan tutorial, mohon catat bahwa tutorial berikut memerlukan skill CSS untuk membuat tableless web design.

DEMO : CLICK HERE
DOWNLOAD : CLICK HERE

Untuk tutorial dasar ini, kita akan memiliki 3 stylesheet,

- 1 general stylesheet
- 1 stylesheet untuk layar besar (800px dan lebih)
- 1 stylesheet untuk layar sempit / handphone (kurang dari 800px)

Untuk mengaplikasikan ketiganya pada website kita, mari kita link stylesheet kita. Letakkan kode berikut di dalam tag <head>..

//Our General Stylesheet for fonts, colors, etc.
<link rel='stylesheet' href='style-general.css' />
//Our Stylesheet for PC/Laptop users.
<link rel='stylesheet' media='screen and (min-width: 800px)' href='style-normal.css' />
//Our Stylesheet for Mobile users.
<link rel='stylesheet' media='screen and (max-width: 800px)' href='style-mobile.css' />

Sebagai contoh, berikut adalah sebuah website 2 kolom sederhana.

<div id="wrap">
 <h1>Hello! This Web Page Is Responsive!</h1>
 <div id="left">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam facilisis augue et dui laoreet vel rutrum massa faucibus. </p>
 <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi eu orci in purus imperdiet luctus ac quis magna.</p>
 </div>
 <div id="right">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam facilisis augue et dui laoreet vel rutrum massa faucibus. Fusce nibh ligula, pretium in volutpat non, dapibus vitae libero. Nunc ac odio at ligula venenatis consectetur id ac nunc. Nulla sodales euismod augue a lobortis. Nulla vel orci odio. Sed et nisl felis. Nulla sagittis tempor fringilla. Fusce in nunc ac nisl eleifend pharetra. Nam erat ipsum, sollicitudin vitae aliquam et, mollis quis nisl. Sed fringilla condimentum scelerisque. Vivamus accumsan cursus lacus sed commodo. Nunc non risus non leo facilisis posuere sed in augue. Integer diam neque, tristique ut accumsan ac, vulputate nec velit.</p>
 <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi eu orci in purus imperdiet luctus ac quis magna. Nullam magna justo, sodales quis sodales a, dignissim nec erat. Sed quis nunc sit amet arcu gravida egestas. Sed tempor enim nisl. Sed elit velit, suscipit pellentesque ultrices nec, dictum et sem. Vivamus hendrerit nibh ultrices lorem vehicula at bibendum erat cursus. Phasellus elementum elit id lacus pharetra vitae fringilla mi consequat.</p>
 </div>
</div>

Mari kita mulai dengan mengatur warna dan ukuruan tulisan. Kita dapat mengubahnya dalam style-general.css (Karena kita menginginkan warna tulisan di layar sempit dan lebar tetap sama).

body { font-family:Arial; }
h1 { font-size:2.4em; text-align:center; color:#FF0000; }
p { color:#555555; line-height:1.5em; }

Sekarang kita memiliki 3 div : wrap, left, dan right.

Di layar yang lebar seperti laptop/komputer, kita ingin web design kita hanya menggunakan 60% dari lebar layar, dan konten akan dibagi menjadi 30% kolom kiri dan 70% kolom kanan.

Kita akan mendefinisikan style ini di style-normal.css, karena kita menginginkan kode ini untuk diaplikasikan hanya jika user mengakses website melalui layar lebar.

#wrap { width:60%; margin:auto; }
#left { width:30%; float:left; }
#right { width:70%; float:right; background:#EEEEEE; }

Di handphone atau layar lain yang lebih sempit, kita menginginkan konten kita tampil selebar mungkin, agar memudahkan user dalam membaca konten yang ada. Tata letak yang ideal adalah tata letak 1 kolom. Untuk melakukan ini, kita perlu mengubah lebar dari div yang kita miliki menjadi 100%, di style-mobile.css.

#wrap { width:100%; margin:auto; }
#left { width:100%; }
#right { width:100%; background:#EEEEEE; }

Yep, sesederhana itu. Kamu baru saja membuat sebuah desain web yang responsive dengan sangat mudah. Jika ada pertanyaan, silahkan layangkan komentar kamu.

Contoh di dalam tutorial ini mungkin terlihat sangat dasar, tetapi contoh ini telah dibuat sesederhana mungkin untuk memudahkan kamu dalam memahami konsep dasar dari Responsive Web Design.

 

*About The Author: Yohanes Steven is a Web Designer with a passion in coffee. He survived cancer in December 2010 and have intended to inspire the world ever since

About the author

Yohanes Steven is a creative entrepreneur with high interest in art, coffee, and technology. He is passionate in delivering happiness and inspirations. He survived cancer in 2010 and has intended to inspire the world ever since.


Discussion Box

  • Pingback: Press Release : DamnILoveCSS.com Hadir dalam Bahasa Indonesia! | DAMN! I Love CSS

  • Karbila Barakah Hartono

    terima kasih atas tutorialnya…. bisa saya gunakan untuk skripsi saya…

    • http://www.ysteven.com Yohanes Steven

      Sukses, mas, Skripsinya..

  • http://www.facebook.com/people/Orlandolab-Blogspot/1676881195 Orlandolab Blogspot

    nice tut and easy to understand

    • http://twitter.com/2easy4yoyo Yohanes Steven

      Thank you!

  • bagusdesain

    mantab…:D

  • bachtiar 10

    good

  • w

    ww

  • Abba Yosua

    Terima kasih, Saat bermanfaat dan bikin saya tambah mengerti mengenai web responsif :D

    • http://twitter.com/2easy4yoyo Yohanes Steven

      Sama sama, senang bisa membantu :)