38
4.4.7 Responsive Web Design RWD
Peningkatan akses internet melalui perangkat seluler membuat target pengguna bertambah, bukan hanya pengguna dengan perangkat stationer yang
menggunakan monitor dengan resolusi layar besar tetapi juga mencakup pengguna yang memakai perangkat mobile dengan layar medium dan kecil. Tugas seorang
perancang situs web menjadi lebih rumit karena harus membuat desain untuk ukuran layar dan resolusi yang berbeda-beda. Menurut Google 2013 terdapat
tiga jenis pendekatan yang bisa dipakai untuk membangun situs web yang dioptimasi untuk tablet atau smartphone, yaitu:
a. Menggunakan teknik responsive web design. Teknik ini memakai
URL dan HTML yang sama untuk semua perangkat, hanya memakai CSS yang berbeda untuk mengubah tampilan pada perangkat yang
berbeda.
b. Mengembangkan situs yang melayani semua jenis perangkat pada
URL yang sama tetapi secara dinamis memberikan HTML dan CSS yang berbeda tergantung pada perangkat yang mengaksesnya.
c. Situs yang memiliki URL untuk perangkat mobile dan desktop yang
terpisah. Google 2013 merekomendasikan teknik responsive web design RWD
untuk mengembangkan situs yang melayani pengguna desktop, tablet dan smartphone
. Teknik ini memungkinkan tampilan situs web beradaptasi dengan resolusi layar di berbagai perangkat tempat situs tersebut ditampilkan. Tata letak
situs web dirancang sedemikian rupa untuk menjadi cukup fleksibel dan sesuai untuk ditampilkan dalam setiap resolusi layar yang mungkin dipakai oleh
pengguna. RWD mendeteksi resolusi perangkat atau ukuran peramban yang dipakai pengguna dan menampilkan situs web dalam skala desain layout dan
konten yang pas untuk peramban pada layar.
Situs web yang responsif dibangun dengan menggunakan fitur yang terdapat dalam CSS3, yaitu media query. Fitur ini memungkinkan perancang situs web
untuk menargetkan ukuran layar tertentu dan menyesuaikan dengan CSS yang tepat. Menurut Wendweb GmbH 2013, standar perangkat dan resolusi layar
yang dipakai untuk mengakses sebuah situs dapat digolongkan menjadi tiga, yaitu:
a. mobile Phone 320px – 480px;
b. tablet 768px – 1024px; dan
c. desktop 1024px atau lebih.
Dengan demikian, untuk merancang sebuah situs web yang responsif diperlukan perancangan tiga layout desain seperti dapat dilihat pada Gambar 26.
Pendekatan jenis layout yang dipakai untuk membangun situs web yang responsif dapat berupa gabungan antara fixed dan fluid, atau murni fluid. Tampilan halaman
depan situs web pada ketiga jenis perangkat dapat dilihat dalam Gambar 27.
39
Gambar 26 Desain layout untuk perangkat desktop, tablet dan mobile phone
Gambar 27 Contoh tampilan pada ketiga jenis perangkat
4.4.8 Screen Based Control Widget
Kontrol berbasis layar screen based control atau kadang disebut widget diperlukan agar pengguna dapat berinteraksi dengan situs web. Jenis widget yang
dipakai dalam situs layanan informasi Perpustakaan BPPT adalah sebagai berikut:
a. Button tombol
Tombol umumnya berbentuk persegi empat atau elips dengan label yang menunjukkan tindakan yang harus diselesaikan di atasnya. Tombol
dipakai untuk memulai sebuah tindakan. Contoh penggunaan dalam
Kategori