Source: Things everyone should know about web design, posted by Chris Sharkey

Ceritanya, saya baru getol mencoba terus mempelajari apa yang disebut-sebut “penting” dan “shoud be known by everyone” oleh orang-orang yang sama-sama bergerak di bidang web development seperti saya.

Jadi, jangan bosen-bosen ya kalau saya ga ada habis-habisnya ngomongin masalah yang satu ini di blog saya

1. Accessibility

   Accessibility is very important in web design. You can’t always assume that everyone will access or view your website the same way. For instance, these days many people access your website on phones, in kiosks or Internet cafes and all sorts of other devices, even fridges (!). Furthermore, people with disabilities such as sight loss, may access your website using a text-to-speech reader which will read your website to them. Keeping these in mind, here are a few things you can do to improve the accessibility of your website:

   1.1. ALT Tags

   Every image on your website requires an ALT tag; thus allowing you to specify a description of the image. These descriptions are seen while an image is loading, if the image fails to load or when you hover your mouse over it. More importantly, from an accessibility perspective, they allow people who use a voice reader on the site to understand that there is an image there, and what the image is of.

   Another ancillary benefit of having good ALT tags, is that they can have a positive influence on where your website appears on search engine results.

   1.2. Acronyms

   If you use a lot of acronyms or jargon on your website, there is an acronym tag (<acronym>) that allows you to define these. The acronyms will then appear with a dotted underline, which will give the user a definition if they roll their mouse over the text. This allows you to freely use this kind of language without alienating those who do not understand the material.

   Note: So, it’s crucial to have your website built seriously, coding dibuat bukan sekedar menggunakan sistem convert otomatis dari program seperti Adobe Fireworks atau program slicing HTML. I didn’t say it won’t work, it will, but build website from zero kelihatannya masih jadi aspek penting kalau mau mikirin dua hal di atas.

   1.3. Design and Colour Scheme

   The design and colour scheme of your website can have an impact on the accessibility of your website. It is important to identify the content of the website with strong type and ensure there is enough contrast to make the text easily legible. Black text on a white background works best and eliminates issues such as colour blindness.

   Note: Di Indo urusan fasilitas untuk disability memang baru di tahap ’start’… misalnya urusan penyediaan WC buat orang berkursi roda di mall-mall (itupun baru di mall-mall terkemuka yang memang berstandar internasional), so untuk website, so far belum ada client saya yang concern soal hal ini. Kenapa ga kita mulai dari sekarang?
   
   Graphics can be used to break up big blocks of text and add aesthetics to your website, especially if you augment them with carefully written ALT tags. Using Flash is acceptable, provided you allow it to revert to normal graphics or HTML if the user doesn’t have flash available. There is nothing worse than trying to access information on a flash-based website on your phone!

   1.4. Expected Behavior

   Nothing on your website should behave unexpectedly. Clicking links should not open up a new window unless the user requests this, links should look like links, buttons should be used for forms etc. Nothing is more confusing or frustrating to users than unexpected behaviors for standard page elements. It’s important that you get this right!

   Note: Berlaku juga untuk kita yang masih menganggap penting fitur “disable right click” untuk proteksi gambar, content dll, karena ini justru salah satu yang bertentangan dengan prinsip “expected behaviour” ini. Kasarnya sih, kalau kita ga mau materi yang kita share di website diambil orang, keep it for ourself, never publish it on internet! As simple as that

   
   

2. Design 2.1. Frames, Tables and CSS (Stylesheets)

   In the early days of web sites, frames were often used to divide a page into its various elements – navigation, header and content. While this was once deemed acceptable, these days, frames are not a legitimate way to design a website. This is for many reasons including poor search engine performance, not meeting the user’s functionality expectations, not having proper addresses in the title bar, etc.

   Tables are a better solution for layout but HTML with CSS is by far the best way to layout a website these days. The idea here is that the content of your website, defined in HTML, is separated from the styling and layout which is contained in the CSS file.

   Since a website can have multiple CSS files for different media types this allows a website to have different layouts with the same content. This allows many methods of access such as screen, printing, phones, or even other websites extracting the information.

   By separating the content, this also places a greater emphasis on the content for search engines and can increase the ranking of your site for your top keywords.

   Your website should also comply to WC3 standards to make sure that all browsers are able to access it correctly.

   Note: Intinya, sekarang trend website adalah berkisar di CSS dan konsep bahwa content dan design adalah dua hal terpisah yang saling berkaitan. Nah lho, kontradiksi dah Yang dimaksud dengan “terpisah yang berkaitan”, adalah bahwa content memang ga akan betul-betul terpisah dari desain, biar bagaimanapun content soal sebuah perusahaan tentu akan didukung juga oleh tampilan dan desain, bagaimana image perusahaan itu mau dibangun. Tapi yang dimaksud disini adalah lebih ke arah tekhnisnya, dimana desain seperti layaknya packaging, yang memang mempengaruhi content, tapi tetap punya hirarki yang berbeda. Bingung? Boleh dong sekali-kali ngomong ala bikin skripsi jaman dahulu… ^^

3. Usability
   
   3.1. Standard Page Elements

   While you can take liberty of the design and layout of your website, users expect a certain consistency in terms of the elements that appear on a website. Specifically, people expect to see a logo or title describing which website they are on, a consistent navigation system that appears in the same place on every page and common pages – such as an “About Us”, “Contact Us”, “Privacy Policy” etc.

   While it is your choice to follow these conventions, going against a web user’s expectations can breed mistrust in the website or potentially confuse someone who came looking for your produce, service or information.

   Note: Jaman dulu memang tampilan berbeda di setiap page masih ditoleransi, sekarang kayanya udah makin ga jaman, karena makin banyak website yang bisa dibuka, makin sedikit waktu yang mau disisihkan seseorang untuk sebuah website saja (kecuali Facebook, tentunya ^^), sehingga dengan membuat website “ajaib” yang ga bisa dimengerti dalam sekali lirik, sama dengan menggesuh orang untuk ga berlama-lama di website kita…

   3.2. Speed of Loading

   An absolutely critical factor in the usability of your website is the time in which it takes to load the pages on your site. The number of images, flash content, integrated video, speed of your server and connection are all be factors in the loading time. Internet users are very fickle because of the sheer amount of information available to them. If your page does not load quickly people will get frustrated and leave. A second or less of additional loading time could be enough for a user to leave your website.

   Note: Yang juga perlu diperhatikan adalah semakin banyaknya orang Indonesia yang menyewakan space hosting dengan harga semakin murah… yang artinya ada yang dikorbankan — dalam hal ini, biasanya bandwith.  Dengan space sama, harga sewa lebih murah, biasanya bandwith yang diberikan semakin sedikit. Dan itu artinya, semakin banyak elemen-elemen ajaib yang ada di website kita, semakin banyak bandwith yang termakan setiap ada orang yang mengaksesnya. So, kalau budget terbatas dan kita ga punya hal yang superb untuk dibuat ajaib, kenapa ga dibikin simpel ajah… ^^

   3.3. Internal and External Links

   The reason they call it the ‘web’ is because web pages were designed to link to other web pages. It is important that when you mention other relevant areas of your website that you link to them. Firstly so your user has a more rewarding experience on the website, and secondly, because this creates a web structure for your website which is great for search engines and unified structure and content.

   Linking to external sites has both of the aforementioned benefits too. Nothing can benefit your site more than relevant links to other websites with related content in terms of value to the user and the perception of your site in the search engines.

   Note: Intinya, jangan malas memberi credit pada website yang kita anggap berguna (apalagi yang berhubungan dengan content website kita), apalagi dengan sistem kerja search engine sekarang ini – semakin banyak website kita “ngelink” dengan website bertema dan berkonten serupa, semakin besar kemungkinan kita akan terindeks di search engine.

4. Search Engine Optimisation and Website Promotion

   4.1. Basic SEO

   Even if you are not looking to make money from your website, it is still important to engage in some basic search engine optimisation, to make sure that your website shows up for relevant keywords in Internet search engines.

   Some simple things you can do to make your website show up for the relevant keywords are:

   • Make sure you mention your key phrases several times on the page, a key phrase is something like “dog advice”
   • Try not to target too many key phrases per page
   • Make sure your keyword/key phrase is mentioned in the title of the page, the heading, and at the start, middle and end of the text
   • Make sure that the text on the page is related to the keywords you want to show up for

   Note: Dan jangan coba-coba bikin fake page berisi keywords doang… yang ada malah kemungkinan kita diblok oleh search engine

   4.2. Linking Strategy

   Another important part of Search Engine Optimisation is making sure that your page has relevant links to other pages of your website and external websites. For example, your page was about dog advice, you might have a link to the RSPCA and also a link to a page on your website with advice about specific breeds of dogs.

   4.3. Content is King

   By far the best way to get good results on search engines, is make sure that your website has a lot of content. News, articles, links, blogs, media – anything that relates to your website will be beneficial. The volume and frequency at which the content is updated, will have the biggest impact on how well your site performs in search engine and furthermore how many visitors your website gets.

   Note: So, once kita memutuskan untuk punya web sendiri (bukan sekedar page di Facebook or Multiply), berarti kita setidaknya harus bersedia meluangkan waktu khusus untuk betul-betul membangun website kita itu. Don’t sweat the small things — Saya pernah punya klien yang menghabiskan waktu berminggu-minggu hanya untuk menggonta-ganti warna dan jenis huruf di websitenya (belum termasuk waktu yang dihabiskan untuk memperdebatkan jenis huruf yang ga standar, yang ingin dia pakai disitu), juga perletakan elemen-elemen yang sebetulnya tidak akan berimbas banyak pada rank-nya di Google nanti — lebih baik waktu yang ada digunakan untuk fokus akan konten apa yang ingin ditampilkan di websitenya, link dan artikel apa yang kiranya berhubungan dengan bisnis dan servis yang disediakan, sehingga tujuan ‘lebih besar’ yang diinginkan dengan keberadaan websitenya itu bisa lebih ‘mungkin’ dicapai.

5. Yang ini tambahan dari saya: Keep up your good attitude (towards your web visitors!)

   Menurut saya aspek yang satu ini justru sangat penting artinya buat website di Indonesia, karena meskipun mulai ada peningkatan signifikan terhadap tingkat kepercayaan di dunia online, tetep aja yang namanya orang Indonesia butuh diyakinkan, apakah betul ada “penunggu” di website yang dia kunjungi ini. Dan bagaimana caranya dia bisa diyakinkan? Dengan adanya quick response dari pemilik website, bisa lewat tanggapan balik dalam waktu max 1 hari setelah si visitor meninggalkan pesan di contact formnya, atau lewat fasilitas Live Chat yang memungkinkan si web visitor berinteraksi dengan sang empunya website saat itu juga.

   Kenapa saya bilang penting diketahui? Karena dari 10 website lokal yang random saya kunjungi setiap harinya, setidaknya 5 bahkan 7 dari website-website  itu menampilkan pesan error ketika page contact us nya diisi. Atau ketika email address yang ada di sana saya kirimi email.

Kalau Anda sendiri, yang menurut Anda penting dari website Anda, apanya nih?