Sebenarnya ada dua cara bagaimana membuat website kita memiliki desain responsif. Cara pertama adalah dengan membuat dua versi dari desain, yang untuk desktop dan mobile versi terpisah sehingga ketika pengguna ponsel datang untuk mengunjungi, layar akan diarahkan ke versi mobile tentu jauh lebih ringan dan sederhana. Adapun cara kedua adalah dengan membuat desain khusus dengan menyesuaikan ukuran font dan layar ponsel sehingga website menjadi lebih mudah untuk melakukan akses dan membaca.
Dalam tutorial ini, kita akan membahas cara kedua, yaitu untuk membuat desain website dasar yang responsif terhadap browser layar.
Pertama, tentu saja adalah untuk membuat dokumen html.
Berikut html dasar untuk tata letak situs web:
RESPONSIVE WEBSITE DESIGN
Easy Ways To Create And Build A Responsive Website Design
Actually there are two ways how to create a website we have a responsive design. The first way is to create 2 versions of the design, which is for the desktop and mobile versions separately so that when a mobile user comes to visit, the display will be redirected to the mobile version of course much lighter and simpler. As for the second way is to create a special design with adjust the size of font and mobile screen so that the website becomes easier to access and reading.
Kedua, pengaturan ukuran tata letak situs web. Sebagai
layout default, kita akan menggunakan ukuran desktop lebar 1300px,
untuk menyesuaikan panjang tata letak.Berikut css kode untuk keseluruhan tampilan website default:
#wrapper {
width:1300px;
margin:auto;
}
#header-wrapper {
width:1300px;
background:#90C;
border:solid #555;
}
#navigation {
width:1300px;
background:#36F;
border:solid #555;
margin-top:5px;
}
#content-wrapper{
width:775px;
float:left;
background:#900;
border:solid #555;
margin-top:5px;
}
#sidebar-wrapper{
margin-left:5px;
width:500px;
background:#0F6;
border:solid #555;
float:left;
margin-top:5px;
}
#footer-wrapper{
width:1300px;
border:solid #555;
float:left;
background:#F60;
margin-top:5px;
}
Berikutnya adalah membuat css kode untuk layar ponsel. Untuk
mobile dan gadget dengan layar seluas 1024px dan kurang, sebagai
berikut:/* for 1024px or less */
@media screen and (max-width: 1024px){
#wrapper {
width:100%;
float:none;
}
#header-wrapper {
width:100%;
background:#90C;
border:solid #555;
}
#navigation {
width:100%;
font-size:0.7em;
background:#30F;
border:solid #555;
}
#content-wrapper{
width:63.8%;
float:left;
background:#900;
border:solid #555;
}
#sidebar-wrapper{
margin-left:0.5%;
width:34%;
background:#0F6;
border:solid #555;
float:left;
}
#footer-wrapper{
width:100%;
border:solid #555;
float:left;
}
}
Teknik ini adalah mengubah ukuran lebar dari px awalnya persentase sehingga lebar akan berubah dari 1300px menjadi 100%. Ukuran layar browser ponsel sangat beragam, dan bahkan ada lebar ukuran 320px. Jika kita hanya menggunakan ukuran 1024px, ukuran isi dan sidebar menjadi sangat kecil. Untuk itu, konten dan sidebar akan dibuat turun dan tidak sebelah. Bagaimana melakukan? menambahkan CSS di bawah ini.
Kali ini, pengaturan layar dengan lebar 700px atau kurang.
/* for 700px or less */
@media screen and (max-width: 700px) {
#content-wrapper {
width: auto;
float: none;
}
#sidebar-wrapper {
width: auto;
float: none;
}
}
Jika kita telah mengatur lebar layout website maka jangan lupa
untuk mengatur ukuran font. Jangan lupa ketika ukuran font menjadi lebih
kecil jika dilihat melalui mobile. 1 em = 16 px -> untuk ukuran font pada paragraph (p)
1,5 em = 24 px -> untuk h1
1.25 em = 20 px -> untuk h2
dll
Jadi kode css untuk huruf yang digunakan dalam desain website responsif adalah:
h1 {
font-size:2em;
}
h2 {
font-size:1.5em;
}
p {
font-size:1em;
}
Secara keseluruhan, berikut ini adalah html dan css kode untuk membuat desain website / blog responsif.
Easy Ways To Create And Build A Responsive Website Design
Dari tata letak dasar di atas, Anda dapat membangun berbagai bentuk tampilan desain website / blog responsif. Sebagai catatan, memiliki desain website responsif seperti ini memiliki kelemahan. Jika situs Web default Anda memiliki kapasitas yang tinggi dan memiliki sidebar banyak, pengguna yang berasal dari aplikasi mobile akan tetap sulit untuk mengakses website Anda. Bila ukuran situs sangat besar, Anda harus menggunakan cara pertama yang saya sebutkan di paragraf pertama di atas. Di lain waktu saya akan membicarakannya nanti.
Saya harap tutorial ini dapat berguna bagi Anda