Merancang Navigasi Website

Navigasi pada sebuah website yang tertampil pada menu dan links adalah petunjuk bagi pengunjung terhadap halaman - halaman yang terdapat dalam website. Pengunjung akan semakin mudah menemukan halaman - halaman dalam website Anda jika menu - menu dan link yang ada tampil secara terstruktur. Sudah pasti pengunjung akan kesal apabila tidak mendapatkan halaman website yang ia cari gara - gara navigasi yang ruwet.

Rencanakan dengan Baik

Hal yang mutlak dilakukan sebelum mulai membuat web tentunya adalah pembuatan konsep website itu sendiri. Konsep tersebut akan memuat navigasi dasar dalam bentuk “tree view” (bercabang dan beranting) dari mulai konten yang bersifat umum hingga konten yang bersifat mendetail. Inilah garis besar navigasi dari situs yang akan dibuat.

Dimana Navigasi diletakkan

Seperti telah dikemukakan di atas, bahwa navigasi akan membawa pengunjung dari hal - hal yang bersifat umum sampai hal - hal yang bersifat mendetail. Halaman utama (index) tentu saja akan memuat menu website yang pokok yang bersifat umum. Percabangan dari menu - menu inti tersebut dapat diletakkan pada halaman - halaman cabang dari index.

Alternatif lain, Anda dapat menggunakan javascript untuk menampilkan menu dan sub-menu sekaligus.

Konsisten

Sebisa mungkin jangan merubah letak menu pada setiap halaman web sehingga pengunjung web lebih mudah menemukan menu - menu tersebut. Misalnya menu utama berada di atas, setelah itu pada halaman - halaman yang terdapat dalam menu utama dapat ditampilkan sub-menu di sebelah kiri atau kanan halaman.

Spotty!

Buatlah menu dengan menonjol sehingga pengunjung mudah mengenalinya. Hal ini tentu saja harus digabungkan dengan unsur estetika sehingga menu - menu tersebut dapat sejalan dengan konsep desain website yang dibuat.

Singkat & Deskriptif

Kata - kata yang terdapat dalam menu harus mampu memberikan petunjuk yang jelas dan singkat tentang halaman website di bawah menu tersebut. Gunakan istilah - istilah yang lazim, singkat, dan mudah dipahami.

Berikan Petunjuk pada Pengunjung

Akan lebih baik jika pada halaman website memuat secara singkat struktur web yang sedang di tampilkan. Misal : Tentang Kami >> Visi & Misi >>

Berikan Link ke Halaman Utama

Jangan lupa untuk memberikan/memberikan link ke halaman utama atau link ke halaman dalam “parent topic”. Ini akan memudahkan pengunjung jika situs Anda di bangun dalam struktur menu dan submenu yang cukup kompleks.

Sitemap

Kita sebaiknya membuat sitemap yang linknya berada di setiap halaman web. Ini akan semakin memudahkan dan mempersingkat proses pencarian halaman - halaman website oleh pengunjung.

Jika pengunjung merasa nyaman dalam mengunjungi website Anda, maka akan semakin baik pula isi website dapat diterima oleh pengunjung.

Tips dan Trik dalam Mendesain Web Pribadi

Sering kita temui website yang tipikal: "Welcome to my homepage," animasi e-mail, background dengan tulisan miring (diagonal), animasi garis pembatas, tabel dengan border tiga-dimesi dan lain-lain. Hal ini terjadi akibat dari fasilitas Template yang disediakan oleh software pembuat web seperti: FrontpageT, Corel WebDesignerT, dan sebagainya yang ditujukan untuk mempermudah penggunanya dalam membangun website.

Jika anda puas dengan hasil kerja anda membangun website pribadi dengan fasilitas template, sudahlah cukup sampai disini. Tetapi jika anda tidak puas dengan apa yang anda buat, dan anda merasa ingin lebih baik, maka anda perlu mengetahui bagaimana Web Designer membangun suatu Website, terlepas anda punya bakat seni atau tidak.

1. Unik : Dalam membuat karya apapun seorang designer mempunyai kesadaran untuk tidak meniru atau menggunakan karya orang lain. Begitu pula seorang Web Designer harus mempunyai budaya malu untuk menggunakan icon, animasi, button, dll, yang telah digunakan atau dibuat oleh orang lain.

2. Komposisi : Dalam pembuatan website Seorang Web Designer dalam mendesain web selalu memperhatikan komposisi warna yang akan digunakan dalam website yang dibuatnya. Pergunakan selalu Palette 216 WebColor, yang dapat diperoleh dari Adobe.com, hal ini untuk mencegah terjadinya dither pada image yang berformat GIF. Dalam membuat website perusahaan, Web Designer selalu menyesuaikan warna yang digunakan dengan Corporate Color perusahaan tersebut. Sebagai contoh: Telkom Corporate Color-nya adalah biru, Coca-Cola : merah dan putih, Standard-Chartered : hijau dan biru, dsb. Untuk kemudian warna-warna tadi digunakan sebagai warna dominan atau sebagai elemen pendukung (garis, background, button, dsb).
3. Simple : Web Designer banyak yang menggunakan prinsip "Keep it Simple", hal ini ditujukan agar tampilan website tersebut terlihat rapi, bersih dan juga informatif.
4. Semiotik : Semiotika adalah ilmu yang mempelajari tentang tanda-tanda. Dalam hal ini diharapkan dengan melihat tanda atau gambar, user/ audience dapat dengan mudah dan cepat mengerti. Sebagai contoh: Jangan membuat gambar/image yang berkesan tombol, padahal itu bukan tombol/ link.
5. Ergonomis : Web Designer selalu memperhatikan aspek ergonomi. Ergonomi disini adalah dalam hal kenyamanan user dalam membaca dan kecepatan user dalam menelusuri website tersebut. Web Designer memilih ukuran Fonts yang tepat sehingga mudah dibaca, Web Designer menempatkan link sedemikian rupa sehingga mudah dan cepat untuk di akses dan lebih penting lagi adalah Informatif.
6. Fokus : Tentukan hirarki prioritas dari pesan yang akan disampaikan, misalnya: Judul harus besar, tetapi jangan sampai akhirnya akan konflik dengan subjudul yang berukuran hampir sama. Hal ini akan membingungkan user/audience untuk menentukan pesan mana yang harus lebih dahulu dibaca/ dilihat.
7. Konsisten : Tentukan font apa yang akan digunakan sebagai Body-text, Judul, Sub Judul dan sebagainya, sehingga website tersebut akan terlihat disiplin dan rapi. Sesuaikan jenis huruf yang digunakan dengan misi dan visi website tersebut, misalnya: hindari menggunakan font Comic dalam membangun website suatu perusahaan resmi.

Demikian beberapa aspek dan prinsip yang digunakan Web Designer dalam membuat website, selebihnya merupakan ekspresi dari pembuat website itu sendiri yang terwujud dalam penggayaan penyusunan website.

14 hal untuk membuat website ( website sendiri )yang cepat diload

Kali ini kita membahas bagaimana cara mengoptimalkan website kita agar cepat diload. Hal ini saya rasa perlu karena banyak user yang koneksi internetnya masih lambat seperti penulis sendiri. Atau paling tidak kita memberikan pelayanan yang prima ke user. User kita jangan disuguhi halaman yang isinya .. pls wait a minutes. loading in progress.. Wew.. siapa juga yang mau menunggu. Di samping itu, menurut yang pernah saya baca "kecepatan loading suatu halaman berbanding lurus dengan jumlah pengunjung". Maaf penulis lupa linknya, tapi kalau dipikir memang masuk akal juga. Pembaca yang kelamaan menunggu loading halaman, pasti tidak sabar dan kebanyakan langsung menutup halamannya.

Pada artikel kali ini penulis mencoba menjelaskan 14 aturan dasar buat website ( website pribadi )kita cepat diload.

1. Perkecil jumlah HTTP requests

Hindari pemakaian image map server site dan perkecil jumlah script hal-hal lain yang merequest ke server

2. Gunakan CDN

Content Delivery Network (CDN) adalah network komputer yang terhubung bersama-sama melalui internet yang bekerjasama untuk mengirimkan content kepada user. Berikut situs-situs dan penyedia layanan CDNnya:

3. Tambahkan Expires header

Browser akan mencocokkan apakah cache di browser sudah kadaluarsa apa belum dan ini akan memakan waktu apabila ternyata cache sudah kadaluarsa. Untuk mencegah ini tambahkan expires date.

4. Gzip components

HTML, XML, CSS dan JSon (selain gambar dan PDF). Penulis menggunakan kode berikut di baris atas untuk mengcompress halaman blog ini.

view plain print

2. ob_start("ob_gzhandler");
3. ?>
4. Tempatkan CSS di bagian atas

Karena CSS akan menghalangi proses render di Internet Explorer. Untuk mencegah hal ini letakkan CSS di HTML Anda dan gunakan external link ke CSS Anda jangan menggunakan @import.

6. Pindahkan Java Script ke bagian bawah

Akibat dari javascript diletakkan di atas adalah adanya blank screen berwarna putih yang lama saat loading dan tertundanya loading isi halaman. Java Script tidak akan bekerja apabila obyek yang dikenai efek script belum selesai diload. Contohnya apabila kita menambahkan tool tips di links-links kita. Apanya yang akan diberi tools tips, jika links itu sendiri masih diload oleh browser. Belum lagi loading CSS dari tool tips itu sendiri.

Dan kenyataanya Java Script menghalangi browser melakukan parallel downloads dan menghalangi rendering semua content yang berada di bawahnya (CSS, HTML, image, dll). Pada keadaan normal (tidak ada Java Script) image akan didownload secara parallel sedangkan jika ada Java Script di bagian atas maka Java Script akan menghalangi proses ini, sampai keseluruhan kode java script selesai diload.

Hindari CSS expressions

7. CSS expressions dikenalkan pertama kali di Explorer 5.0 dan memperbolehkan kita untuk memanggil JavaScript expression ke dalam CSS. Sebagai contohnya adalah CSS expression untuk menentukan posisi elemen div berdasarkan uskuran browser. Menjanjikan memang, tapi silahkan Anda coba sendiri di browser Anda.
Berikut contohnya:

view plain print

1. #myDiv {
2. position: absolute;
3. width: 100px;
4. height: 100px;
5. left: expression(document.body.offsetWidth - 110 + "px");
6. top: expression(document.body.offsetHeight - 110 + "px");
7. background: red;

CSS expressions are a powerful (and dangerous) way to set CSS properties dynamically.
High Performance Web Sites by Steve Souders

Masalah yang timbul dengan penggunaan CSS expression adalah, CSS expression ini dijalankan berkali-kali, lebih dari yang diharapkan. Tidak hanya dijalankan saat halaman dirender dan diresize tetapi juga saat halaman di scroll bahkan saat user mengerakkan mouse di halaman web tersebut.

8. Buat JavaScripts and CSS external

Alasan membuat Script dan CSS external adalah agar dapat dicache oleh browser. Dengan demikian halaman akan cepat diload apabila user kembali lagi ke halaman kita.

view plain print

1. "style/style.css" rel="stylesheet" type="text/css" />
8. Selain itu dalam pembuatan website, anda juga harus memperhatikan setiap langkah yang telah anda lakukan, untuk mempermudah sebaiknya anda menggunakan jasa pembuatan website atau juga melakukan konsultasi dengan ahli komputer / ahli pembuat website.

source : http://www.gecko.web.id