Tampilkan postingan dengan label html. Tampilkan semua postingan
Tampilkan postingan dengan label html. Tampilkan semua postingan

Kamis, 26 September 2013

[Newbie Responsive WebDesign Tuts] View Port For Responsive Design.

Kamis, September 26, 2013 by UnknownNo comments
Beberapa orang yang baru belajar web design apalagi responsive web design biasanya hanya mementingkan @media maxwidth/min width pada CSS mereka.
Tapi ada tags pada html yang harus di gunakan ketika kita membuat sebuah responsive design.
Disini saya akan menjelaskan tags itu khusus para newbie web design.

Tags apa sih yang mempengaruhi responsive design? Tags pada html ini biasanya kita lihat jika kita membuka source code responsive web design milik orang lain :

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Bisa dikatakan tanpa tags ini sebuah design yang responsive tidak akan berfungsi walau kita sudah mencobanya di komputer browser dan berfungsi,tapi ketika kita lihat langsung browser handphone tidak akan berfungsi tanpa tags diatas.

Mungkin teman-teman sekalian akan melihat contohnya jika tanpa tags diatas akan menjadi seperti berikut :


Gambar diatas menjadi contoh responsive design tanpa viewport.Kenapa viewport width = 1024?
Sebenarnya kita bisa langsung menggunakan width=device-width agar langsung merespon berapa pun width atau ukuran layar dari perangkat yang kita gunakan. Diatas hanya contoh perangkat yang memiliki ukuran layar 1024 ya.

Oke sekian tulisan kali ini.Tulisan ini ber-Ide dari : http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design

Salam :)

Jumat, 12 Juli 2013

Membuat Template Responsive Dengan Css Dan Html

Jumat, Juli 12, 2013 by Unknown1 comment
Nah teman-teman sekarang saya mau sharing bagaimana caranya membuat sebuah website agar responsive.
Pasti keren website teman sekalian bisa dibuka dimana saja dan kapan saja.Nah oleh karena itu penting juga nih buat baca tutorial kali ini.
Responsive template artinya menyesuaikan keadaan monitor atau layar.
Sudah tidak asing lagi responsive template bagi para web designer advanced atau pun beginer.
Disini kita gak langsung bikin dengan gambar seperti background atau gambar lainnya :p ,biar bisa cepat dimengerti saja ya.
Oke wait,Ane upload dulu gambar desain contohnya.
1Menit kemudian.

Diatas adalah contoh dari layout yang saya bikin.Ini berbentuk full untuk desktop komputer/laptop.
Nah ini adalah Cssnya.
<style type="text/css"> 
#layout { width: 100%;}#layout .konten { margin: auto; width: 900px; background-color: #CCCCCC;}#layout .konten .header { float: left; width: 100%; height: 100px; background-color: #99CC00;}#layout .konten .menu { float: left; width: 100%; background-color: #99CCCC;}#layout .konten .body { float: left; width: 600px; background-color: #00CCFF; height: 400px; text-align: center;}#layout .konten .footer { padding: 1px; clear: both; width: 99%;}#layout .konten .side { background-color: #FF0000; float: left; height: 200px; width: 300px;} 
</style>
Script css diselipkan di antar <head></head>
Dan ini adalah bagian Htmlnya
<div id="layout">
  <div class="konten">
    <div class="header"><h1>Logo</h1></div>
    <div class="menu">Menu</div>
    <p>&nbsp;</p>
    <div class="body">Konten Website</div>
    <div class="side">Side Bar</div>
    <p>&nbsp;</p>
    <div class="footer"></div>
  </div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>

Maka akan menjadi tampilah seperti di gambar.
Jika anda menggunakan mozilla firefox.Klik Tools > Web Developers > Responsive Design View.
Maka anda tidak akan mendapati tampilan handphonenya.
Bagaimana untuk menjadikannya Responsive seperti ini?


Jawabannya adalah dengan menggunakan script css ini.
@media screen and (max-width: 980px) {#layout { width: 100%;}#layout .konten { margin: auto; width: 95%; background-color: #CCCCCC;}#layout .konten .header { float: left; width: 100%; height: 100px; background-color: #99CC00;}#layout .konten .menu { float: left; width: 100%; background-color: #99CCCC;}#layout .konten .body { float: left; width: 100%; background-color: #00CCFF; height: 400px;}#layout .konten .footer { padding: 1px; clear: both; width: 99%;}#layout .konten .side { background-color: #FF0000; float: left; height: 200px; width: 100%;}}
Script diatas digabungkan dengan script yang sudah teman sekalian selipkan.
Letakan script diatas sebelum </style> atau dibagian paling Bawah.
Lalu test di mozilla teman-teman apakah sudah responsive atau belum dengan menggunakan cara sebelumnya.

Jangan Lupa Sebelum </head> Berikan Code Ini Agar Work Di Segala Device Ya.

<meta name="viewport" content="width=device-width">

Oke sekian dari saya.
Terima kasih atas perhatiannya.
Langganan: Postingan (Atom)