Sebelum membuat web secara profesional, tugas penting
sebagai
seorang pengembang web adalah memberikan ide dan gagasan
tentang point apa saja yang akan ditampilkan dalam sebuah
halaman
web. Dengan demikian, seorang pengembang web juga perlu
berkonsultasi dengan pemilik web itu sendiri agar segala
sesuatu
yang menjadi tujuan pemilik web dapat terpenuhi.
Lain halnya dengan seorang pengembang web (web developer)
yang
diberikan kebebasan dalam membuat sebuah web. Pemiliki
web
umumnya mempercayakan sepenuhnya kepada pengembang web
(web developer). Nah, jika demikian maka sebagai seorang
pengembang web harus benar-benar membuktikan
keterampilannya
dalam membuat web secara profesional agar para pemiliki
web tidak
kecewa dengan karya yang telah dibuat.
Untuk menjadi seorang pengembang web profesional tidaklah
mudah
karena harus memadukan antara bahasa pemrograman web
dengan
nilai seni yang terdapat dalam setiap halaman web.
Keduanya harus
dimiliiki, jika salah satu saja maka belum bisa disebut
sebagai
seorang pengembang web profesional. Meskipun pintar
bahasa php
dalam membuat web, tapi jika tidak didukung oleh jiwa
seni maka
hasilnya kurang maksimal. Begitu pula sebaliknya, jika
hanya pandai
membuat tampilan halaman web tapi tidak didukung oleh
pengetahuan tentang bahasa pemrograman web maka hal itu
akan
sia-sia saja.
Sebagai seorang pengembang web pemula, tidak perlu
berkecil hati
jika ingin menjadi seorang pengembang web profesional.
Yang
terpenting adalah adanya kemauan untuk terus belajar dan
belajar
lagi agar wawasan tentang pengembangan web terus
bertambah.
Ada beberapa hal yang perlu diketahui oleh para
pengembang web
pemula ketika pertama kali ingin membangun sebuah web
dari awal.
Agar web yang dibuat nampak profesional perlu memahami
beberapa
konsep dasar dalam mengolah web, mulai dari tool yang
digunakan,
format gambar yang sesuai, hingga pemilihan warna teks
dan latar
belakang sebuah halaman web.
Berikut ini terdapat beberapa aspek yang perlu
diperhatikan dalam
membuat sebuah website.
DAPAT DIGUNAKAN (USABILITY)
Usabilitas merupakan hal yang sangat penting dalam
merancang web
(web design). Memang sangat baik jika memiliki sebuah
website
dinamis yang nampak profesional dan bagus , namun jika
perlu waktu
yang sangat lama untuk mendownload sebuah artikal atau
penggunaan navigasinya sangat rumit maka tidak heran jika
pengguna akan “hengkang” dari website Anda dan tidak akan
kembali
lagi. Perlu diketahui, umumnya pengguna (user)
ingin mendapatkan
informasi secara cepat meskipun tampilan website-nya
biasa saja.
Jika terlalu lama saat mencari informasi maka para
pengguna akan
langsung menutup halaman web tersebut. Ingat, jangan
mengorbankan aspek usabilitas dalam mendesain website.
NAVIGASI (NAVIGATION)
Navigasi juga menjadi hal yang sangat penting dalam
sebuah website
yang berfungsi untuk membantu pengguna (user)
dalam menjelajah
website kita untuk mencari informasi yang diinginkan
secara mudah.
Navigasi yang bagus mencerminkan struktur website yang
sangat
baik.
Kadangkala ditemukan beberapa format navigasi,
diantaranya:
- Papan Navigasi (Navigation Panel)
o Bisanya dalam bentuk menu-menu yang tersusun rapi.
o Sebaiknya diatur link pada bagian kiri (dari tangan
Anda) atau di bagian atas dari sebuah halaman web.
o Dapat berupa teks maupun grafik.
o Harus mengambil ruang yang tidak terlalu banyak.
o Posisi navigasi sebaiknya konsisten pada setiap
halamannya. Jika terpaksa menggunakan warna yang
berbeda, pastikan bagian tersebut masih merupakan
satu kesatuan.
10
Gambar Papan Navigasi
- Tombol Home (Home Button) :
o Tombol ini sangat familiar di kalangan pengembang web.
Fungsi utama tombol ini adalah untuk kembali ke
halaman utama (homepage).
o Tombol home dapat ditempatkan pada setiap halaman
web kecuali halaman utama (homepage).
o Tombol home maupun logo perusahaan dapat berfungsi
sebagai navigasi dan sebaiknya diletakkan di bagian kiri
atas (dari tangan Anda).
o Pastikan tombol home maupun logo ada pada setiap
halaman (kecuali halaman utama) agar pengunjung
(visitor) lebih familiar dengan navigasi tersebut.
Gambar Tombol Home
- Link
o Jika teks memiliki hyperlink sebaiknya diberi garis
bawah (underlined).
o Pengunjung mestinya tidak harus disajikan dalam
bentuk mouse over atau hover pada sebuah
link untuk
menyadarkan pengunjung bahwa teks tersebut adalah
sebuah link – buatlah link yang nyata.
o Sediakanlah lebih banyak teks link (textual link) dalam
sebuah website untuk mengijinkan pengunjung ke
informasi referensi secara silang.
o Usahakan menyediakan daftar susunan link secara
nyata dibandingkan hidden (adanya hal yang
tersembunyi) dalam sebuah teks. Adanya link dalam
sebuah teks mengakibatkan proses membaca sedikit
lambat, namun hal ini mungkin saja menjadi hal yang
bagus dengan tujuan menandai (highlight) kata-kata
yang khusus.
o Buatlah perbedaan antara internal link (link dalam satu
website) dengan external link (link dengan website lain).
o Jika link tersebut masih dalam satu website (internal
link) buatlah link menggunakan teks yang simple. Jika
link tersebut mengarah ke website lain (external link)
usahakan memasukkan alamat lengkap website
tersebut dalam teks (misal: http://www.websitelain.com).
Hal itu akan memberikan informasi kepada pengunjung
tentang website yang berbeda sebelum mengklik link
tersebut.
Gambar External link
o Apabila menyertakan link eksternal dalam website Anda,
jangan membuat link dengan cara membuka jendela
baru (new window) menggunakan target “_blank”. Ini
dapat mengakibatkan pengunjung merasa terganggu.
o Hindari tombol kembali (back button) – yang merupakan
perintah umum untuk kembali ke halaman sebelumnya.
o Jika memiliki link dalam bentuk file berukuran besar
seperti .avi atau .pdf, sediakan ukuran dalam bentuk KB
dalam tanda kurung untuk memberikan informasi
kepada pengunjung tentang ukuran file tersebut
sebelum mendownloadnya.
o Buatlah kepastian pengunjung untuk mengetahui
tentang link yang sudah dikunjungi (diklik) dengan cara
memberi warna yang berbeda. Misalkan dari warna biru
ke merah (artinya: warna biru memberi arti link tersebut
belum dibuka sedangkan warna merah menandakan
link tersebut telah dikunjungi/dibuka).
- Judul html (HTML Title)
o Umumnya berada pada tag html header.
o Judul html (sebagai header) masih relevan dengan
halaman sekarang.
o Ditampilkan di bagian atas (top title bar) pada sebuah
browser.
o Judul html sangat berguna bagi yang membutuhkan
sebagai bookmark situs Anda.
Gambar Judul
- Peta situs (Site Map)
o Site map merupakan salah satu bagian dari halaman
website yang memberikan informasi tentang peta situs.
o Site map merupakan struktur yang hirarkis dari sebuah
situs dengan link untuk seluruh halaman yang relevan.
o Memiliki link yang menyolok ke peta situs dari setiap
halaman.
Gambar Site Map
- Fasilitas Pencarian (Search Facility)
o Beberapa pengunjung/pengguna lebih memilih fasilitas
pencarian sebelum menggunakan navigasi lain yang
disediakan.
o Ada juga beberapa pengguna menggunakan fasilitas
pencarian sebagai fasilitas terakhir yang akan
digunakan.
o Pastikan situs Anda memiliki sebuah fasilitas pencarian
(search facility).
o Letakkan kotak pencarian dalam posisi yang menyolok
pada setiap halamannya.
Gambar Fasilitas Pencarian
- Grafik sebagai Navigasi dan/atau Link (Graphic as
Navigation and/or Link)
o Sebagian pengembang web menggunakan grafik/
gambar sebagai link maupun navigasi. Berhati-hatilah
jika melakukan hal tersebut.
o Jika garis tepi (border=”0”) pada tag grafik, hal itu
mungkin menjadi jalan yang tidak jelas bagi pengunjung
ketika memberitahukan bahwa gambar tersebut
merupakan sebuah link.
o Jika grafik/gambar tersebut bukan dalam mouseover,
pengunjung mungkin tidak akan melihat kursor berubah
menjadi sebuah tangan.
14
Gambar Grafik sebagai navigasi atau link
o Usahakan dan sediakan link teks (textual link)
untuk
informasi yang sama sebagai grafik.
Gambar Textual link
o Jika nilai estetika lebih penting, berilah garis tepi
(border=”1”) pada grafik/gambar sebagai link.
KONSEP PENULISAN (WRITING CONCEPT)
Teknik penulisan dalam web berbeda dengan penulisan untuk
publikasi (cetak). Waktu merupakan hal sangat penting
bagi mereka
yang menggunakan Internet, sehingga para pengguna
Internet tidak
akan membuang waktunya hanya untuk membaca teks yang
sangat
banyak sekali. Riset membuktikan bahwa para pengguna
cenderung
meneliti teks dalam layar monitor. Selain itu, lebih
cepat membaca di
layar monitor dibandingkan membaca di atas kertas.
Terdapat beberapa konsep penulisan dalam sebuah web,
yaitu:
- Sedikit itu lebih baik – pertahankan konsistensi:
buatlah struktur
kalimat sesederhana mungkin, atau buatlah kalimat yang
pendek.
- Seringlah menyorot (highlight) kata atau
ungkapan yang penting.
- Buatlah bullet atau nomor jika perlu.
- Buatlah panjang halamannya lebih pendek – hindari
terlalu
banyak menggulung layar (vertical scroll).
- Gunakan link untuk menyorot (highlight)
dan mengambil
pengguna untuk informasi lebih lanjut.
- Hindari penggunaan ungkapan yang tidak deskriptiv,
seperti “klik
di sini” - coba dan gunakan kata deskriptiv untuk link.
- Hindari penggunaan tag <hr> (Horizontal Rule),
untuk
memisahkan badan teks: gunakan banyak judul, subheading,
dan ruang putih sebagai gantinya (hal ini akan nampak
lebih
bagus dan mudah dibaca, tag <hr> juga banyak yang
tidak
menyukai.
- Hindari perataan teks di tengah-tengah (center) – tidak
nyaman
untuk dibaca.
- Jangan menggunakan semua huruf kapital – tidak nyaman
untuk
dibaca juga.
- Hindari teks miring (italic) secara berlebihan – hal
ini juga tidak
nyaman untuk dibaca.
- Pertahankan isi (content) dari style – gunakan style
sheet dan
masukakan file lain yang mendukung.
KESEDERHANAAN (SIMPLICITY)
Kesederhanaan merupakan hal penting dalam membuat sebuah
web
profesional. Sederhana di sini bukan dalam arti tampilan
sebuah situs,
namun lebih mengarah ke teknik penulisannya.
Ada beberapa hal yang perlu diperhatikan agar konsep
kesederhanaan tetap dipertahankan, yaitu:
- Gunakan Heading dan Sub Heading untuk memisahkan bagian
teks.
- Gunakan ruang kosong dengan warna putih secara
bijaksana.
- Pastikan Anda memiliki tidak lebih 12 kata dalam setiap
barisnya.
- Tulislah isi secara singkat – bukan sebuah karangan.
- Sorot (highlight) kata-kata yang penting.
- Gunakan warna latar belakang pucat (terang) jika menggunakan
teks utama dengan warna gelap.
- Gunakan warna latar belakang gelap jika teks utama
berwarna
terang.
16
- Hindari penggunaan warna yang terlalu banyak, terutama
kombinasi yang tajam bagi mereka yang buta warna dalam
membaca teks.
MUDAH DIAKSES (ACCESSIBILITY)
Suatu hal yang mudah diakses ke semua orang dengan
mengabaikan browser, paltform, sistem operasi, tersambung
atau
putus merupakan hal yang sangat utama untuk
mempertimbangkan
ketika merancang sebuah website. Anda tidak perlu
menghalangi
seorang pengguna web keluar, siapa saja bisa menjadi
potensi
menjadi pengunjung/ pelanggan. Setelah sebuah website
mudah
diakses, membuat penggunaan website Anda akan banyak
diakses
oleh pengguna/pengunjung. Mudah digunakan = Pengunjung
akan
kembali. Sulit digunakan = Pengunjung akan “kapok”.
“Kekuatan Web adalah disukainya web tersebut oleh
pengguna di
seluruh dunia (Universality). Akses oleh semua orang
dengan
mengabakan kekurangannya adalah aspek yang sangat
penting”.
(Tim Berners – Lee, Direktur W3C dan pembuat World
Wide Web).
Aspek kemudahan dalam mengakses sebuah website perlu
mempertimbangkan beberapa hal sebelum merancang web, di
antaranya:
- Pastikan website Anda mudah digunakan oleh browser
utama
yang sering digunakan banyak orang maupun web browser
lainnya.
- Pastikan website Anda mudah digunakan tanpa harus
mendownload sebuah plug-in tertentu.
- Ujilah website Anda pada tahap pengembangan untuk
memeriksa kinerja pada berbagai sistem operasi dengan
versi
browser berbeda.
- Gunakan style sheet untuk memisahkan style dan content.
- Gunakan etika tag html untuk menampilkan teks yang
dimaksud
sehingga memungkinkan pengguna yang masih awam dapat
membaca teks secara jelas dengan cara: menggunakan tag
<em> atau <strong>
pada Heading, usahakan selalu
menetapkan teks alternatif untuk grafik (<img
src=”gambar.gif”
width=”25” height=”35” alt=”keterangan gambar”>)
17
- Periksa penggunaan warna yang kurang bagus dengan
berbagai
format kebutaan warna (color blindness): jika ragu-ragu –
desaturate (buatlah hitam dan putih) rancangan untuk
melihatnya
apabila masih perlu pertimbangan, jangan menggunakan
warna
sebagai indikasi adanya perubahan (misal: bagian baru),
selalu
menggarisbawahi suatu teks berupa link.
KEBUTAAN WARNA (COLOR BLINDNESS)
Sekitar satu dari sebelas orang mungkin tidak mampu
menggunakan
website Anda berkaitan dengan beberapa format kebutaan
warna
(color blindness). Yang terbaik, website Anda tidak akan
nampak
pada orang yang buta warna seperti yang telah Anda
rancang.
Sialnya lagi, hal ini bisa jadi teks tidak terbaca,
navigasi yang sulit
digunakan dan elemen lain yang tersembunyi.
Ada beberapa pertimbangan dalam pemilihan warna agar
website
Anda dapat digunakan oleh mereka yang buta warna, yaitu:
- Kebanyakan orang yang buta warna tidak bisa membedakan
antara warna merah dengan hijau.
- Warna yang teduh akan nampak terang jika dilihat oleh
orang
yang buta warna.
- Format kebutaan warna yang umum adalah: Protanopia
tidak
mampu menerima warna merah dan Deuteranopia tidak mampu
menerima warna hijau, sedangkan Tritanopia tidak mampu
warna
biru.
Bagaimana cara menetralkan kondisi tersebut?
- Jangan menggunakan warna sebagai satu-satunya kunci
rahasia,
oleh karena itu gunakan selalu garis bawah (underline)
jika
merupakan sebuah llink, sediakan pula arti lain untuk
membedakan antar bagian.
- Hindari penggunaan warna merah atau hijau saja secara
monoton pada website Anda.
- Pertahankan tingkat kontras antara teks dan latar
belakang.
- Gunakan selalu “alt” (teks alternatif) pada setiap
grafik.
GRAFIK (GRAPHIC)
Unsur grafik sangat diperlukan dalam sebuah website,
karena
memiiki beberapa fungsi. Namun jika terlalu banyak
menggunakan
grafik, bisa jadi website kita akan menimbulkan berbagai
masalah.
Untuk mengatasi berbagai hal yang tidak diinginkan ketika
mendesain web, perlu mempertimbangkan berbagai sudut
pandang
dalam penggunaan grafik, diantaranya:
- Tambahkan grafik seperlunya karena bisa menambah waktu
ketika pengguna mendownload artikel yang diinginkan.
- Ambillah yang terkecil dalam hal ukuran fisik dan file
jika
memungkinkan.
- Jangan menggunakan navigasi dalam bentuk grafik jika
ingin
dijadikan beberapa bahasa – hal ini memerlukan
pemeliharaan
ekstra.
- Usahakan selalu mencantumkan spesifikasi tinggi dan
lebar
dalam tag <img src>.
- Usahakan selalu mencantumkan nilai border=”1” dalam tag
<img
src> atau beberapa browser akan menampilkan warna biru
di
sekitar tepi gambar jika grafik tersebut merupakan sebuah
link.
- Usahakan selalu menetapkan teks alternatif dalam tag
<img
src=”gambar.gif” alt=”keterangan”>. Sebagian orang
akan
mematikan grafik agar proses koneksi lebih cepat. Jika
grafik
dimatikan, dan tidak memasukkan teks alternatif maka
pengguna
tidak mengetahui gambar tersebut.
TEKNOLOGI BARU (NEW TECHNOLOGY)
Perkembangan internet yang begitu pesat membuat beberapa
developer menambahkan teknologi baru dapat menampilkan
aplikasi
yang dibutuhkan.
Sebagai seorang web developer, tentu saja harus selalu
mengikuti
perkembangan di dunia maya agar ketika merancang web tidak
timbul masalah akibat dari pengguaan teknologi yang sudah
kadaluwarsa.
Berikut ini terdapat beberapa bahan pertimbangan tentang
teknologi
yang digunakan ketika merancang sebuah website, yaitu:
- Hindari penggunaan teknologi yang sudah lebih dari dua
tahun.
- Hindari pembuatan website yang memaksa pengguna/
pengunjung harus mendownload software tertentu terlebih
dulu.
- Jika Anda memiliki teknologi baru dalam sebuah situs,
buatlah
alamat situs mirror-nya dengan cara memberi pilihan
kepada
para pengguna sebelum memasuki situs Anda – jangan
menggunakan sebuah plug-in browser yang terdeteksi adanya
pengalihan jalur link.
- Gunakan perencanaan pada situs Anda untuk melihat jika
para
pengguna menyukai html atau menggunakan teknologi baru
yang
terpasang dalam situs – tinggalkan teknologi baru jika
tidak
populer.
- Jika Anda membuat website menggunakan teknologi baru,
cari
tahu tentang usabilitas (kemudahan penggunaan) dari semua
jenis website yang ada.
- Periksa statistik website Anda untuk melihat berapa
banyak
pengguna memiliki plug-in terakhir sebelum Anda merancang
website.