36
Gambar 24 Sidebar
e. Footer
Footer terletak pada bagian paling bawah dan berfungsi sebagai penanda
bahwa pengguna sudah sampai pada akhir halaman situs. Pada umumnya bagian footer mengandung informasi kontak dan hak cipta.
Gambar 25 menunjukkan tampilan footer.
Gambar 25 Footer
4.4.6 Pengaturan Lebar Layout
Tidak ada standar khusus untuk menentukan lebar sebuah situs web. Dalam desain web perlu diperhatikan bahwa resolusi layar tidak identik dengan resolusi
peramban. Elemen peramban seperti taskbar, toolbar dan ekstensi dapat mengurangi ruang konten dalam peramban.Ukuran ruang konten dalam peramban
penting diketahui untuk menentukan lebar sebuah situs web.
Teknik pengaturan lebar layout halaman sebuah situs web secara umum dapat dibedakan menjadi dua jenis, yaitu fixed atau fluid. Perbandingan antara
kedua jenis pengaturan lebar layout tersebut dapat dilihat dalam Tabel 14. Desain situs layanan informasi Perpustakaan BPPT dalam penelitian ini menggunakan
gabungan antara fixed dan fluid. Lebar layout untuk desktop ditetapkan sebesar 960 pixel. Lebar 960 umum digunakan oleh perancang situs web karena
banyaknya faktor pembagi yang dimiliki angka 960 memungkinkan perancang
37 untuk memiliki banyak pilihan layout dan jumlah kolom. Lebar 960 dapat dengan
mudah dibagi menjadi 2,3,4,5,6,8 kolom dst. Tabel 14 Perbandingan antara pengaturan lebar layout fixed dan fluid
Fixed Fluid
Karakteristik
Lebar tetap memakai satuan pixel
Diatur pada posisi tetap dan tidak bergerak
Tidak terpengaruh oleh pengaturan layar atau
peramban pengguna
Lebarnya menyesuaikan dengan resolusi layar
pengguna atau lebar browser
lebar komponen layout web dinyatakan dengan prosentase
Kelebihan
Lebih mudah untuk dibuat dan memberikan jaminan
bahwa apa yang dilihat perancang sama dengan apa
yang dilihat oleh pengguna
Perancang memiliki kontrol yang lebih besar terhadap
penempatan elemen-elemen desain, konten dan navigasi
Mengurangi kerumitan layout
konten yang mempunyai lebar tetap
seperti gambar, video, formulir
lebih user friendly karena menyesuaikan dengan
pengaturan layar browser pengguna
jika dirancang dengan baik dapat menghilangkan
horizontal scroll bar untuk
tampilan di layar kecil.
Kekurangan
Dapat menimbulkan adanya “white space” yang
berlebihan pada layar dengan resolusi tinggi
sehingga mengganggu keseimbangan desain secara
keseluruhan.
Resolusi layar yang lebih kecil akan menyebabkan
keharusan pemakaian horizontal scroll bar
. perancang memiliki lebih
sedikit kontrol terhadap tampilan yang dilihat oleh
pengguna. Ada kemungkinan perancang tidak melihat
masalah yang timbul karena hasil desain web pada resolusi
layar tertentu terlihat baik- baik saja.
kurangnya konten dapat menciptakan white space yang
berlebihan dan mengurangi estetika pada layar dengan
resolusi yang sangat besar.
Konten seperti gambar, video, dan jenis konten yang
memerlukan lebar tertentu harus diatur dengan beberapa
ukuran untuk mengakomodasi resolusi layar yang berbeda
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.
Kategori