Tips Cara Website Responsive dengan Viewport
Pada saat membuat halaman website menjadi responsive (responsif), kita bisa menggunakan teknik grid, menata layout supaya terlihat sama dan standar pada setiap device. Ketika pada saat pengembangan kita hanya menggunakan desktop untuk uji coba halaman website, dengan melebarkan dan mengecilkan jendela browser sudah bisa melihat hasil perubahan tampilan halaman web.
Setelah yakin dengan uji coba pada desktop, kemudian kita coba pada layar perangkat mobile dengan harapan hasil akan sama dengan hasil uji coba di desktop, maka kita akan mengetahui jika hasilnya ternyata tidak sama. Pada perangkat mobile nampaknya memang tidak berhasil, kita hanya melihat versi yang dikecilkan dari desain yang berukuran penuh. Mari kita bahas secara mendetail.
Membuat dan uji coba Halaman Cara Website Responsive
Untuk lebih jelas dalam memahami perbedaan tampilan antara menggunakan Meta Tag Viewport dengan yang tidak, mari kita kita buat satu halaman web untuk uji coba. Supaya cepat, ketikkan atau kopas skrip berikut ini untuk membuat halaman web yang responsive.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Tips Responsive Website dengan Viewport Meta Tag</title>
<meta name="description" content="">
<style type="text/css">
body {
font-size: 1em;
line-height: 1.5;
}
/*basic typography*/
a,
a:visited {
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
p {
font-family: Georgia, serif;
color: #3e3c3c;
}
h1 {
font-size: 2em;
line-height: 1;
letter-spacing: -0.05em;
color: #252424;
font-family: Helvetica, Arial, sans-serif;
}
/*strucutral*/
section {
width: 95%;
max-width: 50em;
margin: 0 auto;
}
footer {
width: 95%;
max-width: 50em;
padding: 4em 0;
margin: 4em auto;
border-top: 1px solid #ccc;
}
/*once the viewport reaches 35ems width, make the base font size a wee bit bigger*/
@media only screen and (min-width: 35em) {
body {
font-size: 1.5em;
}
section,
footer {
width: 80%;
}
h1 {
font-size: 3em;
color: #53bd84;
}
}
</style>
</head>
<body>
<section>
<h1>Apa Itu Nyekrip</h1>
<h4><strong>Definisi</strong></h4>
<p>Bingung istilah Nyekrip? Pernah Nyekrip? apa itu nyekrip? Mungkin rata-rata para programmer mengetahui istilah ini, tapi tidak semua programmer mengetahui apa sih Nyekrip ini.</p>
<p>Nyekrip, atau dalam bahasa bakunya adalah memprogram adalah sebuah kegiatan menggunakan bahasa pemprograman dan algoritma-algoritma yang kemudian disusun untuk menciptakan sebuah program. Nah jadi tahu deh kalau istilah nyekrip sama dengan istilah Ngoding.</p>
<p><a title="web nyekrip online tutorials" href="http://www.nyekrip.com" target="_blank">Nyekrip</a> atau Ngoding adalah istilah yang biasa disebutkan oleh programmer. Pengertian kasarnya adalah “membuat kode” dari suatu program. Atau bisa juga diartikan “menulis program pada bahasa pemrograman tertentu”. Tetapi, arti yang lebih tepat dari Nyekrip itu mengubah sintaks-sintaks algoritma dari notasi algoritmik atau pseudo-code menjadi sintaks-sintaks bahasa pemrograman tertentu agar bisa dibuat file binarinya (file EXE-pada windows).</p>
<p>Ketika seorang membuat aplikasi, dan menuliskan source code menggunakan bahasa pemrograman tertentu, maka dia disebut sedang Nyekrip.</p>
<p>Nyekrip itu asik lho. Kenapa demikian? Dengan Nyekrip, kita bisa menciptakan sesuatu. Kita bisa melihat ciptaan kita berjalan sesuai ekspektasi dan kita bisa bermain-main dengannya. Pasti temen-temen pernah merasakan kebahagian jika apa yang kita kerjakan dapat beroperasi dengan sukses. Nyekrip pun demikian. Ia bisa dikatakan sebagai seni menciptakan sesuatu walaupun tidak berbentuk fisik.</p>
<p>Selain menyenangkan, apabila kita jago Nyekrip kita bisa mengamalkannya lho. Sebut saja untuk memecahkan permasalahan-permasalahan yang ada di sekitar kita, kita bisa membuat sebuah program. Saya jadi ingat ketika bikin sebuah program kecil bernama “Pengacak Kelompok” untuk membuat kelompok belajar dan tugas. Ketika program kecil itu jadi dan dapat berjalan, saya merasakan kesenangan yang luar biasa.</p>
<p>Untuk tingkat yang lebih besar, dengan kemampuan Nyekrip kita juga punya skill lebih dan siap dalam menghadapi era globalisasi ini.</p>
<h4><strong>Belajar</strong></h4>
<p>Belajar Nyekrip adalah pelajaran logika dan cara berpikir, logika bagaimana menyelesaikan masalah. Memang adakalanya perlu untuk menghapal sintaks dan aturan penulisan dalam program, tapi itu bukan harga mutlak. Bisa “melirik” ebook atau catatan ketika lupa. Jangan kuatir, lama-kelamaan pasti kamu akan mengingat dengan sendirinya. Bisa karena biasa.</p>
<p>Jangan hanya menjadi tukang ketik aja atau lebih parah lagi menjadi tukang copy paste. Ketika belajar Nyekrip pahami setiap barus kode dan alur program. kalo sudah paham, coba tulis lagi programnya dengan versi sendiri. Sadar atau tidak hal itu telah melatih logika berfikir dan belajar menuangkan logika berfikir kedalam program.</p>
<p>Untuk lebih menunjang pembelajaran, coba bikin atau ikutan grup , kelompok Nyekrip , komunitas, millis, forum, de el el. Ketika menemui permasalahan kamu bisa saling berdiskusi untuk menyelesaikan masalah tersebut.</p>
<p>Belajar Nyekrip jangan mengadalkan tatap muka di kelas, karena kebanyakan bapak/ ibu dosen hanya member teori. Sedikit sekali yang memberikan teori atau tips Nyekrip. Cobalah untuk mengeksplorasi sendiri segala hal tentang pemrogaman . Lha itulah gunanya kelompok Nyekrip tadi. Kamu bisa berbagi tentang teknik dalam pemrogaman.</p>
</section>
<footer>
<p>www.nyekrip.com</p>
</footer>
</html>
|
Ketika kita running skrip diatas dalam browser versi desktop, maka browser akan menampilkan seperti gambar berikut ini.
Tampilan Browser Desktop
Dalam skrip diatas telah dilengkapi dengan media query agar tampilan menjadi renponsif dan belum menggunakan Meta Tag Viewport. Sekarang kita coba untuk mengubah ukuran browser, ubah ukuran browser ke ukuran yang lebih kecil dan usahakan serupa dengan ukuran tablet atau ukuran smartphone. Berikut adalah gambar dari tampilan halaman website dengan ukuran browser yang disamakan dengan layar iphone 5.
Tampilan yang diserupakan dengan Smartphone
Perhatikan gambar diatas, ada perubahan warna heading dari warna hijau ke warna hitam (perubahan ini sudah diatur dalam media query) dan tampilannya juga responsif, sejauh ini kita sudah berhasil membuat halaman website yang responsif.
Eh tunggu dulu, meskipun kita sudah berhasil mencoba halaman website supaya responsive pada browser dengan ukuran yang diserupakan dengan layar smartphone iphone 5, kita juga harus mencoba langsung pada device smartphone iphone 5. Berikut adalah gambar dari tampilan halaman website yang dibuka pada iphone 5.
Tampilan pada iPHONE 5
Perhatikan gambar diatas, ternyata hasilnya berbeda dengan hasil uji coba sebelumnya. Pada gambar diatas menunjukkan bahwa heading masih berwarna hijau dan penyempitan layout tidak sesuai seperti yang kita harapkan, dan terdapat jarak yang cukup lebar antara tulisan dengan garis jendela browser. Sebenarnya kita melihat versi halaman web yang diperkecil secara visual dan tulisannya pun ikut mengecil sehingga tidak nyaman untuk dibaca.
iOS Safari masih menganggap bahwa halaman web memiliki lebar 980px, kemudian memperkecil-nya supaya bisa muat pada lebar keseluruhan yang tersedia (iPhone 5). Hasilnya, konten menjadi kurang dapat dibaca, kecuali kita memperbesarnya.
Mengenal dan Menambahkan Meta Tag Viewport
Untuk mengatasi masalah diatas, kita bisa menambah Meta Tag Viewport pada skrip diatas, letaknya tepat didalam
elemen head. Sebelum kita mencoba untuk menambahkan, mari kita bahas secara singkat mengenai Meta Tag Viewport.
Skrip dibawah ini adalah bentuk dari Meta Tag Viewport.
1
|
<meta name="viewport" content="">
|
Di dalam atribut
content="" kita bisa memasukkan beberapa nilai (value) dengan dibatasi koma.
Untuk Sebagai contoh, jika desain kita telah dirancang pada layar di lebar
320px, kita bisa menentukan lebar viewport menjadi:
1
|
<meta name="viewport" content="width=320">
|
Supaya nilai lebar (width) bisa dinamis sesuai perangkat yang dipakai dan layout menjadi fleksibel, kita bisa memberi value seperti berikut.
1
|
<meta name="viewport" content="width=device-width">
|
Selain itu kita juga bisa mengatur tingkat optimal zoom (Pembesaran) , contohnya dengan skrip berikut.
1
|
<meta name="viewport" content="initial-scale=1">
|
Skrip diatas akan memastikan bahwa ketika halaman web terbuka, layout kita akan ditampilkan dengan baik pada skala 1:1.
Jika kita menghendaki supaya user tidak bisa melakukan pembesaran halaman web di perangkat smarphonenya, kita bisa menggunakan
maximum-scale. Contohnya Skrip dibawah ini.
1
|
<meta name="viewport" content="maximum-scale=1">
|
Tapi Sebelum menerapkan parameter
maximum-scale, pertimbangkanlah terlebih dahulu apakah kita benar-benar mencegah pengguna untuk melakukan pembesaran halaman web. Singkatnya apakah para pengguna dapat membaca semua isi website dengan baik?
Setelah memahami penggunaan dari Meta Tag Viewport, mari kita selesaikan masalah perbedaan tampilan pada uji coba sebelumnya, kita tambahkan skrip Meta Tag Viewport berikut tepat dibawah
meta tag description.
1
|
<meta name="viewport" content="initial-scale=1">
|
Sehingga hasil akhir dari skrip halaman responsif kita menjadi seperti berikut.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Tips Responsive Website dengan Viewport Meta Tag</title>
<meta name="description" content="">
<meta name="viewport" content="initial-scale=1">
<style type="text/css">
body {
font-size: 1em;
line-height: 1.5;
}
/*basic typography*/
a,
a:visited {
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
p {
font-family: Georgia, serif;
color: #3e3c3c;
}
h1 {
font-size: 2em;
line-height: 1;
letter-spacing: -0.05em;
color: #252424;
font-family: Helvetica, Arial, sans-serif;
}
/*strucutral*/
section {
width: 95%;
max-width: 50em;
margin: 0 auto;
}
footer {
width: 95%;
max-width: 50em;
padding: 4em 0;
margin: 4em auto;
border-top: 1px solid #ccc;
}
/*once the viewport reaches 35ems width, make the base font size a wee bit bigger*/
@media only screen and (min-width: 35em) {
body {
font-size: 1.5em;
}
section,
footer {
width: 80%;
}
h1 {
font-size: 3em;
color: #53bd84;
}
}
</style>
</head>
<body>
<section>
<h1>Apa Itu Nyekrip</h1>
<h4><strong>Definisi</strong></h4>
<p>Bingung istilah Nyekrip? Pernah Nyekrip? apa itu nyekrip? Mungkin rata-rata para programmer mengetahui istilah ini, tapi tidak semua programmer mengetahui apa sih Nyekrip ini.</p>
<p>Nyekrip, atau dalam bahasa bakunya adalah memprogram adalah sebuah kegiatan menggunakan bahasa pemprograman dan algoritma-algoritma yang kemudian disusun untuk menciptakan sebuah program. Nah jadi tahu deh kalau istilah nyekrip sama dengan istilah Ngoding.</p>
<p><a title="web nyekrip online tutorials" href="http://www.nyekrip.com" target="_blank">Nyekrip</a> atau Ngoding adalah istilah yang biasa disebutkan oleh programmer. Pengertian kasarnya adalah “membuat kode” dari suatu program. Atau bisa juga diartikan “menulis program pada bahasa pemrograman tertentu”. Tetapi, arti yang lebih tepat dari Nyekrip itu mengubah sintaks-sintaks algoritma dari notasi algoritmik atau pseudo-code menjadi sintaks-sintaks bahasa pemrograman tertentu agar bisa dibuat file binarinya (file EXE-pada windows).</p>
<p>Ketika seorang membuat aplikasi, dan menuliskan source code menggunakan bahasa pemrograman tertentu, maka dia disebut sedang Nyekrip.</p>
<p>Nyekrip itu asik lho. Kenapa demikian? Dengan Nyekrip, kita bisa menciptakan sesuatu. Kita bisa melihat ciptaan kita berjalan sesuai ekspektasi dan kita bisa bermain-main dengannya. Pasti temen-temen pernah merasakan kebahagian jika apa yang kita kerjakan dapat beroperasi dengan sukses. Nyekrip pun demikian. Ia bisa dikatakan sebagai seni menciptakan sesuatu walaupun tidak berbentuk fisik.</p>
<p>Selain menyenangkan, apabila kita jago Nyekrip kita bisa mengamalkannya lho. Sebut saja untuk memecahkan permasalahan-permasalahan yang ada di sekitar kita, kita bisa membuat sebuah program. Saya jadi ingat ketika bikin sebuah program kecil bernama “Pengacak Kelompok” untuk membuat kelompok belajar dan tugas. Ketika program kecil itu jadi dan dapat berjalan, saya merasakan kesenangan yang luar biasa.</p>
<p>Untuk tingkat yang lebih besar, dengan kemampuan Nyekrip kita juga punya skill lebih dan siap dalam menghadapi era globalisasi ini.</p>
<h4><strong>Belajar</strong></h4>
<p>Belajar Nyekrip adalah pelajaran logika dan cara berpikir, logika bagaimana menyelesaikan masalah. Memang adakalanya perlu untuk menghapal sintaks dan aturan penulisan dalam program, tapi itu bukan harga mutlak. Bisa “melirik” ebook atau catatan ketika lupa. Jangan kuatir, lama-kelamaan pasti kamu akan mengingat dengan sendirinya. Bisa karena biasa.</p>
<p>Jangan hanya menjadi tukang ketik aja atau lebih parah lagi menjadi tukang copy paste. Ketika belajar Nyekrip pahami setiap barus kode dan alur program. kalo sudah paham, coba tulis lagi programnya dengan versi sendiri. Sadar atau tidak hal itu telah melatih logika berfikir dan belajar menuangkan logika berfikir kedalam program.</p>
<p>Untuk lebih menunjang pembelajaran, coba bikin atau ikutan grup , kelompok Nyekrip , komunitas, millis, forum, de el el. Ketika menemui permasalahan kamu bisa saling berdiskusi untuk menyelesaikan masalah tersebut.</p>
<p>Belajar Nyekrip jangan mengadalkan tatap muka di kelas, karena kebanyakan bapak/ ibu dosen hanya member teori. Sedikit sekali yang memberikan teori atau tips Nyekrip. Cobalah untuk mengeksplorasi sendiri segala hal tentang pemrogaman . Lha itulah gunanya kelompok Nyekrip tadi. Kamu bisa berbagi tentang teknik dalam pemrogaman.</p>
</section>
<footer>
<p>www.nyekrip.com</p>
</footer>
</html>
|
Setelah itu jalankan kembali skrip diatas pada browser, maka tampilan halaman web kita akan tampak seperti gambar berikut.
Tampilan Browser di iPHONE 5 Setelah Penambahan Meta Tag
Perhatikan gambar diatas, pengecilan halaman web sudah lebih baik dan tetap pada skala yang benar. Kita bisa lihat bahwa teks sudah tidak lagi mengecil seperti sebelumnya melainkan menyesuaikan dengan luas bidang, jarak antara teks dengan batas juga tidak selebar sebelumnya, dan heading dengan warna hijau telah berganti dengan warna hitam sesuai harapan. Cukup Mudah Bukan? 🙂
Itulah Tips Cara Website Responsive dengan Meta Tag Viewport, dengan desain web yang responsif kita telah memberikan tampilan yang nyaman pada bermacam-macam perangkat yang berbeda, apalagi sekarang para pengguna internet tidak hanya menggunakan PC Desktop atau laptop dalam browsing, mereka sudah menggunakan berbagai perangkat yang memiliki bentuk layar yang berbeda-beda.
Happy Nyekrip!
Tidak ada komentar:
Posting Komentar