Cara membuat website yang tepat (standar)

Istilah web standar dapat berarti berbeda bagi orang yang berbeda. Bagi beberapa orang, itu adalah 'meja-situs gratis', bagi orang lain itu adalah 'menggunakan kode yang valid'. Namun, standar web jauh lebih luas dari itu. Sebuah situs web yang dibangun untuk standar harus mematuhi standar (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG dll) dan mengejar praktek-praktek terbaik (berlaku kode, kode akses, kode yang benar secara semantik, user-friendly URL dll).

Dengan kata lain, sebuah situs web yang dibangun untuk standar idealnya harus ramping, bersih, CSS-based, dapat diakses, bermanfaat serta ramah mesin pencari.

Tentang checklist

Ini bukan uber-checklist. Mungkin ada banyak item yang bisa ditambahkan. Lebih penting lagi, itu tidak boleh dilihat sebagai daftar item yang harus diatasi pada setiap situs yang Anda kembangkan. Ini hanyalah panduan yang dapat digunakan:

* Untuk menunjukkan luasnya web standar
* Sebagai perangkat praktis untuk pengembang selama fase produksi website
* Sebagai bantuan bagi para pengembang yang tertarik untuk bergerak menuju web standar

Checklist

1.Quality kode
1. Apakah situs Anda menggunakan DOCTYPE yang benar?
2. Apakah situs menggunakan set karakter?
3. Apakah situs Anda menggunakan Valid (X) HTML?
4. Apakah situs Anda menggunakan Valid CSS?
5. Apakah situs menggunakan CSS hacks?
6. Apakah situs Anda menggunakan kelas yang tidak perlu atau ids?
7. Adalah kode yang terstruktur dengan baik?
8. Apakah situs memiliki link rusak?
9. Bagaimana cara situs melakukan dalam hal kecepatan / ukuran halaman?
10. Apakah situs Anda memiliki JavaScript kesalahan?

2. Tingkat pemisahan antara konten dan presentasi
1. Apakah situs menggunakan CSS untuk semua aspek presentasi (font, warna, padding, perbatasan dll)?
2. Apakah semua dekoratif gambar dalam CSS, atau apakah mereka muncul dalam (X) HTML?

3. Aksesibilitas bagi pengguna
1. Apakah "alt" atribut yang digunakan untuk semua gambar deskriptif?
2. Apakah situs Anda menggunakan unit relatif daripada absolut unit untuk ukuran teks?
3. Apakah ada aspek dari layout istirahat jika ukuran font meningkat?
4. Apakah situs Anda menggunakan menu terlihat melompat?
5. Apakah situs Anda menggunakan bentuk diakses?
6. Apakah situs Anda menggunakan tabel diakses?
7. Ada warna cukup kecerahan / kontras?
8. Apakah warna saja yang digunakan untuk informasi penting?
9. Apakah ada respons tertunda untuk dropdown menu (untuk pengguna dengan keterampilan motorik dikurangi)?
10. Apakah semua link deskriptif (untuk buta pengguna)?

4. Aksesibilitas perangkat
1. Apakah situs bekerja bisa diterima di seluruh browser modern dan lebih tua?
2. Apakah konten yang dapat diakses dengan CSS dinonaktifkan atau tidak didukung?
3. Apakah konten yang dapat diakses dengan gambar dinonaktifkan atau tidak didukung?
4. Apakah situs bekerja di browser teks seperti Lynx?
5. Apakah situs bekerja dengan baik bila dicetak?
6. Apakah situs bekerja dengan baik dalam perangkat Hand Held?
7. Apakah situs termasuk metadata rinci?
8. Apakah situs bekerja dengan baik dalam berbagai ukuran jendela browser?

5. Dasar Usability
1. Apakah ada hirarki visual yang jelas?
2. Apakah tingkat pos mudah membedakan?
3. Apakah situs yang mudah untuk memahami navigasi?
4. Apakah situs Anda menggunakan navigasi konsisten?
5. Adalah link digarisbawahi?
6. Apakah situs Anda menggunakan bahasa yang konsisten dan tepat?
7. Apakah Anda memiliki sebuah sitemap halaman dan halaman kontak? Apakah mereka mudah untuk menemukan?
8. Untuk situs yang besar, apakah ada alat pencarian?
9. Apakah ada sebuah link ke halaman home pada setiap halaman di situs?
10. Link dikunjungi jelas dengan warna yang unik?

6. Situs manajemen
1. Apakah situs memiliki bermakna dan bermanfaat kesalahan 404 halaman yang bekerja dari setiap kedalaman di situs?
2. Apakah situs Anda menggunakan URL yang ramah?
3. Apakah URL Anda bekerja tanpa "www"?
4. Apakah situs memiliki favicon?

1. Kualitas kode

1,1 Apakah situs Anda menggunakan DOCTYPE yang benar?
Sebuah DOCTYPE (kependekan dari 'jenis dokumen deklarasi') validator yang menginformasikan versi (X) HTML yang anda gunakan, dan harus tampil di bagian paling atas dari setiap halaman web. Doctypes adalah komponen kunci dari halaman web yang sesuai: markup dan CSS Anda tidak akan memvalidasi tanpa mereka.
KODE
http://www.alistapart.com/articles/doctype/


More:
KODE
http://www.w3.org/QA/2002/04/valid-dtd-list.html

KODE
http://css.maxdesign.com.au/listamatic/about-boxmodel.htm

KODE
http://gutfeldt.ch/matthias/articles/doctypeswitch.html


1,2 Apakah situs menggunakan set karakter?
Jika agen pengguna (misalnya browser) adalah tidak dapat mendeteksi pengkodean karakter yang digunakan dalam dokumen Web, pengguna dapat disajikan dengan teks terbaca. Informasi ini terutama penting bagi mereka yang memelihara dan memperluas sebuah situs multibahasa, tetapi menyatakan pengkodean karakter dokumen penting bagi siapa pun memproduksi XHTML / HTML atau CSS.
KODE
http://www.w3.org/International/tutorials/tutorial-char-enc/


More:
KODE
http://www.w3.org/International/O-charset.html


1,3 Apakah situs Anda menggunakan Valid (X) HTML?
Kode yang valid akan membuat lebih cepat dibandingkan kode dengan kesalahan. Kode yang valid akan membuat lebih baik dari kode yang tidak valid. Browser menjadi lebih memenuhi persyaratan standar, dan ini menjadi semakin perlu untuk menulis sah dan sesuai standar HTML.
KODE
http://www.maxdesign.com.au/presentation/sit2003/06.htm


More:
KODE
http://validator.w3.org/


1,4 Apakah situs Anda menggunakan Valid CSS?
Anda perlu memastikan bahwa tidak ada kesalahan baik dalam HTML atau CSS, sejak kesalahan di kedua tempat itu dapat menyebabkan penampilan dokumen dirusak.
KODE
http://www.meyerweb.com/eric/articles/webrev/199904.html


More:
KODE
http://jigsaw.w3.org/css-validator/


1,5 Apakah situs menggunakan CSS hacks?
Pada dasarnya, hacks datang ke pilihan pribadi, jumlah pengetahuan yang Anda miliki tentang workarounds, desain khusus yang sedang Anda coba capai.
KODE
http://www.mail-archive.com/wsg @ webstandardsgroup.org/msg05823.html


More:
KODE
http://css-discuss.incutio.com/?page=CssHack

KODE
http://css-discuss.incutio.com/?page=ToHackOrNotToHack

KODE
http://centricle.com/ref/css/filters/


1,6 Apakah situs Anda menggunakan kelas yang tidak perlu atau ids?
Aku telah memperhatikan bahwa pengembang mempelajari keterampilan baru sering berakhir dengan baik tapi miskin XHTML CSS. Secara khusus, kode HTML cenderung penuh yang tidak perlu divs dan ids. Hal ini menyebabkan cukup berarti kembung HTML dan style sheet.
KODE
http://www.clagnut.com/blog/228/


1,7 Apakah kode terstruktur dengan baik?
Markup semantik yang benar menggunakan elemen html untuk tujuan tertentu. Yah terstruktur HTML memiliki arti semantik untuk berbagai user agent (browser tanpa style sheet, browser teks, PDA, mesin pencari dll)
KODE
http://www.maxdesign.com.au/presentation/benefits/index04.htm


More:
KODE
http://www.w3.org/2003/12/semantic-extractor.html


1,8 Apakah situs memiliki link rusak?
Pranala patah dapat melemahkan pengguna dan berpotensi mendorong pelanggan pergi. Pranala patah juga dapat menjaga mesin pencari dari benar mengindeks situs Anda.

More:
KODE
http://validator.w3.org/checklink


1,9 Bagaimana cara situs melakukan dalam hal kecepatan / ukuran halaman?
Jangan membuat saya menunggu ... Itu pesan pengguna memberi kita dalam survei demi survei. Bahkan broadband pengguna dapat menderita lambat-loading blues.
KODE
http://www.websiteoptimization.com/speed/


1,10 Apakah situs Anda memiliki JavaScript kesalahan?
Jelajahi internet untuk Windows memungkinkan Anda untuk mengaktifkan debugger yang akan muncul jendela baru dan membiarkan Anda tahu ada javascript error pada situs Anda. Ini tersedia di bawah 'Internet Options' pada tab Advanced. Hapus centang 'Disable script debugging'.

2. Tingkat pemisahan antara konten dan presentasi

2,1 Apakah situs menggunakan CSS untuk semua aspek presentasi (font, warna, padding, perbatasan dll)?
Gunakan style sheet untuk mengontrol layout dan presentasi.
KODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html # tech-style-sheet


2,2 Apakah semua dekoratif gambar dalam CSS, atau apakah mereka muncul dalam (X) HTML?
Tujuannya untuk web developer adalah menghilangkan semua presentasi dari kode html, meninggalkan bersih dan semantik benar.
KODE
http://www.maxdesign.com.au/presentation/benefits/index07.htm


3. Aksesibilitas bagi pengguna

3,1 Are "alt" atribut yang digunakan untuk semua gambar deskriptif?
Menyediakan teks ekuivalen untuk setiap elemen non-teks
KODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html # tech-text-sama


3,2 Apakah situs Anda menggunakan unit relatif daripada absolut unit untuk ukuran teks?
Gunakan relatif daripada absolut unit dalam bahasa markup nilai atribut dan nilai properti style sheet '.
KODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html # tech-relative-unit


More:
KODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html # tech-relative-unit

KODE
http://www.clagnut.com/blog/348/


3,3 Apakah ada aspek dari layout istirahat jika ukuran font meningkat?
Cobalah tes sederhana ini. Lihat di situs web Anda pada browser yang mendukung incrementation mudah dari ukuran font. Sekarang meningkatkan browser Anda ukuran font. Dan lagi. Dan lagi ... Lihat di situs Anda. Apakah tata letak halaman masih terus bersama? Hal ini berbahaya bagi pengembang untuk mengasumsikan bahwa semua orang menelusuri menggunakan ukuran font standar.
3,4 Apakah situs Anda menggunakan menu terlihat melompat?

Sebuah metode harus disediakan yang memungkinkan pengguna untuk melewati link navigasi yang berulang-ulang.
KODE
http://www.section508.gov/index.cfm?FuseAction=Content&ID=12


Link terkait kelompok, mengidentifikasi kelompok (agen pengguna), dan, sampai agen pengguna melakukannya, menyediakan cara untuk melewati grup.
KODE
http://www.w3.org/TR/WCAG10-TECHS/ # tech-group-link


... buta pengunjung bukan satu-satunya yang terganggu oleh terlalu banyak link di area navigasi. Ingatlah bahwa mobilitas-orang cacat dengan teknologi adaptif miskin mungkin akan terjebak tabbing melalui rawa-rawa.
KODE
http://joeclark.org/book/sashay/serialization/Chapter08.html # h4-2020


More:
KODE
http://www.niehs.nih.gov/websmith/508/o.htm


3,5 Apakah situs Anda menggunakan bentuk diakses?
Bentuk bukan hal yang paling mudah digunakan untuk para penyandang cacat. Menjelajahi di sekitar halaman dengan konten tertulis adalah satu hal, melompat antara kolom formulir dan memasukkan informasi yang lain.
KODE
http://www.htmldog.com/guides/htmladvanced/forms/


More:
KODE
http://www.webstandards.org/learn/tutorials/accessible-forms/01-accessible-forms.html

KODE
http://www.accessify.com/tools-and-wizards/accessible-form-builder.asp

KODE
http://accessify.com/tutorials/better-accessible-forms.asp


3,6 Apakah situs Anda menggunakan tabel diakses?
Untuk tabel data, mengidentifikasi baris dan kolom header ... Data tabel yang memiliki dua atau lebih tingkat logis baris atau kolom header, gunakan markup untuk mengasosiasikan data header sel dan sel.
KODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html # tech-table-headers


More:
KODE
http://www.bcc.ctc.edu/webpublishing/ada/resources/tables.asp

KODE
http://www.accessify.com/tools-and-wizards/accessible-table-builder_step1.asp

KODE
http://www.webaim.org/techniques/tables/


Apakah ada cukup 3,7 warna kecerahan / kontras?
Pastikan bahwa latar depan dan latar belakang memberikan kombinasi warna yang cukup kontras jika dilihat oleh seseorang yang memiliki defisit warna.
KODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html # tech-colour-contrast


More:
KODE
http://www.juicystudio.com/services/colourcontrast.asp


Apakah warna 3,8 saja digunakan untuk informasi penting?
Pastikan bahwa semua informasi yang disampaikan dengan warna juga tersedia tanpa warna, misalnya dari konteks atau markup.
KODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html # tech-warna-menyampaikan


Pada dasarnya ada tiga jenis defisiensi warna; Deuteranope (suatu bentuk merah / warna hijau defisit), Protanope (bentuk lain merah / warna hijau defisit) dan Tritanope (biru / kuning defisit-sangat jarang).

More:
KODE
http://colourfilter.wickline.org/

KODE
http://www.toledo-bend.com/colourblind/Ishihara.html

KODE
http://www.vischeck.com/vischeck/vischeckURL.php


Apakah ada tertunda 3,9 responsif untuk dropdown menu?
Pengguna dengan mengurangi keterampilan motorik dapat menemukan menu dropdown sulit digunakan jika tanggap diatur terlalu cepat.

Apakah semua link 3,10 deskriptif?
Link teks harus cukup berarti masuk akal jika dibaca di luar konteks - baik sendiri atau sebagai bagian dari urutan link. Link teks juga harus tegas.
KODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html # tech-bermakna-link


4. Aksesibilitas untuk perangkat.

4,1 Apakah situs bekerja bisa diterima di seluruh browser modern dan lebih tua?

Sebelum mulai membangun sebuah layout berbasis CSS, Anda harus memutuskan yang browser untuk mendukung dan tingkat apa yang Anda berniat untuk mendukung mereka.
KODE
http://www.maxdesign.com.au/presentation/process/index_step01.cfm



4,2 Apakah konten yang dapat diakses dengan CSS dinonaktifkan atau tidak didukung?
Beberapa orang mungkin mengunjungi situs Anda dengan salah satu browser yang tidak mendukung CSS atau browser dengan CSS dimatikan. Dalam konten terstruktur dengan baik, ini tidak akan menjadi masalah.

4.3 Apakah konten yang dapat diakses dengan gambar dinonaktifkan atau tidak didukung?
Beberapa orang mencari situs web dengan gambar dimatikan - terutama orang-orang di koneksi sangat lambat. Konten harus masih dapat diakses untuk orang-orang.

4,4 Apakah situs bekerja di browser teks seperti Lynx?
Ini seperti kombinasi gambar dan CSS dimatikan. Sebuah browser berbasis teks akan bergantung pada konten terstruktur dengan baik untuk memberikan makna.

More:
KODE
http://www.delorie.com/web/lynxview


Apakah situs 4,5 bekerja dengan baik bila dicetak?
Anda dapat mengambil (X) HTML dokumen dan gaya hanya untuk mencetak, tanpa harus menyentuh markup.
KODE
http://www.alistapart.com/articles/goingtoprint/


More:
KODE
http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html # print


Apakah situs 4,6 bekerja dengan baik dalam perangkat Hand Held?
Ini adalah satu sulit untuk menangani perangkat sampai tangan manusia secara konsisten mendukung jenis media yang benar. Namun, beberapa tata letak saat ini bekerja lebih baik di perangkat genggam. Pentingnya mendukung perangkat tangan manusia akan bergantung pada khalayak sasaran.

Apakah situs 4,7 termasuk metadata rinci?
Mesin dimengerti metadata adalah informasi untuk web
KODE
http://www.w3.org/Metadata/


Metadata adalah informasi yang terstruktur yang diciptakan khusus untuk menggambarkan sumber daya lain. Dengan kata lain, metadata adalah "data tentang data '.


Apakah situs 4,8 bekerja dengan baik dalam berbagai ukuran jendela browser?
Ini adalah anggapan umum di antara para pengembang bahwa ukuran layar rata-rata meningkat. Beberapa pengembang berasumsi bahwa rata-rata sekarang ukuran layar lebar 1024px. Tapi bagaimana dengan pengguna dengan layar yang lebih kecil dan pengguna dengan perangkat tangan manusia? Apakah mereka bagian dari target dan mereka yang kurang beruntung?

5. Dasar Usability
5,1 Apakah ada hirarki visual yang jelas?
Mengorganisir dan memprioritaskan isi halaman dengan menggunakan ukuran, hubungan menonjol dan konten.
KODE
http://www.great-web-design-tips.com/web-site-design/165.html


Tingkat 5,2 pos Apakah mudah untuk membedakan?
Gunakan elemen header untuk menyampaikan struktur dokumen dan menggunakannya sesuai dengan spesifikasi.
KODE
http://www.w3.org/TR/WCAG10/wai-pageauth.html # tech-logis-judul


5,3 Apakah navigasi situs mudah dimengerti?
Sistem navigasi Anda harus memberikan pengunjung Anda petunjuk mengenai halaman apa situs mereka saat ini dan di mana mereka bisa pergi.
KODE
http://www.1stsitefree.com/design_nav.htm


5,4 Apakah navigasi situs konsisten?
Jika setiap halaman di situs Anda memiliki gaya yang konsisten presentasi, pengunjung akan merasa lebih mudah untuk menavigasi antara halaman dan mencari informasi
KODE
http://www.juicystudio.com/tutorial/accessibility/navigation.asp


5,5 Apakah situs Anda menggunakan bahasa yang konsisten dan tepat?
Penggunaan bahasa yang jelas dan sederhana meningkatkan komunikasi yang efektif. Mencoba tampil sebagai mengartikulasikan dapat menjadi sulit untuk dibaca sebagai tata bahasa ditulis dengan buruk, terutama jika bahasa yang digunakan bukan bahasa utama pengunjung.
KODE
http://www.juicystudio.com/tutorial/accessibility/clear.asp


5,6 Apakah situs Anda memiliki sebuah sitemap halaman dan halaman kontak? Apakah mereka mudah untuk menemukan?
Sebagian besar peta situs gagal untuk menyampaikan beberapa tingkat informasi situs arsitektur. Dalam kegunaan tes, pengguna sering mengabaikan peta situs atau tidak dapat menemukan mereka. Kompleksitas juga masalah: sebuah peta harus peta, bukan sebuah tantangan navigasi sendiri.
KODE
http://www.useit.com/alertbox/20020106.html


5,7 Untuk situs besar, apakah ada alat pencarian?
Sementara alat-alat cari tidak diperlukan pada situs yang lebih kecil, dan beberapa orang tidak akan pernah menggunakannya, situs-alat pencarian tertentu memungkinkan pengguna pilihan pilihan navigasi.

5,8 Apakah ada sebuah link ke halaman home pada setiap halaman di situs?
Beberapa pengguna ingin untuk kembali ke home page situs setelah navigasi ke konten dalam situs. Halaman rumah menjadi base camp bagi para pengguna, yang memungkinkan mereka untuk berkumpul kembali sebelum menjelajahi konten baru.

Apakah link 5,9 digarisbawahi?
Untuk memaksimalkan dirasakan affordance dari clickability, warna dan menggarisbawahi teks link. Pengguna seharusnya tidak perlu menebak atau menggosok halaman untuk mencari tahu di mana mereka dapat mengklik.
KODE
http://www.useit.com/alertbox/20040510.html


Apakah dikunjungi 5,10 didefinisikan dengan jelas?
Paling penting, mengetahui halaman mana yang dikunjungi mereka sudah membebaskan pengguna dari secara tidak sengaja mengunjungi kembali halaman yang sama berulang-ulang.
KODE
http://www.useit.com/alertbox/20040503.html


6. Situs manajemen

6,1 Apakah situs memiliki bermakna dan bermanfaat kesalahan 404 halaman yang bekerja dari setiap kedalaman di situs?
Anda telah meminta halaman - baik dengan mengetik URL secara langsung ke address bar atau klik pada out-of-date link tersebut dan Anda telah menemukan diri Anda sendiri di tengah dunia maya mana-mana. Seorang pengguna situs yang ramah akan memberikan uluran tangan sementara banyak orang lain hanya akan melakukan apa-apa, bergantung pada browser built-in kemampuan untuk menjelaskan apa masalahnya.
KODE
http://www.alistapart.com/articles/perfect404/


6,2 Apakah situs Anda menggunakan URL yang ramah?
Kebanyakan mesin pencari (dengan beberapa pengecualian - yaitu Google) tidak akan mengindeks halaman apapun yang memiliki tanda tanya atau karakter lain (seperti ampersand atau tanda sama dengan) dalam URL ... yang baik adalah sebuah situs jika tidak ada seorang pun dapat menemukannya?
KODE
http://www.sitepoint.com/article/search-engine-friendly-urls


Salah satu unsur terburuk dari web dari sudut pandang antarmuka pengguna adalah URL. Namun, jika mereka pendek, logis, dan mengoreksi diri, bisa diterima URL dapat digunakan
KODE
http://www.merges.net/theory/20010305.html


More:
KODE
http://www.sitepoint.com/article/search-engine-friendly-urls

KODE
http://www.websitegoodies.com/article/32

KODE
http://www.merges.net/theory/20010305.html


6,3 Apakah URL situs bekerja tanpa "www"?
Meskipun ini tidak kritis, dan dalam beberapa kasus bahkan tidak mungkin, adalah selalu baik untuk memberi orang-orang pilihan dari kedua pilihan. Jika pengguna mengetik nama domain Anda tanpa www dan tidak mendapatkan situs, hal ini dapat merugikan baik pengguna dan Anda.
6,4 Apakah situs memiliki favicon?

Sebuah Favicon adalah multi-gambar beresolusi disertakan pada hampir semua situs yang dikembangkan secara profesional. The Favicon memungkinkan webmaster untuk mempromosikan situs mereka lebih lanjut, dan untuk menciptakan penampilan yang lebih disesuaikan dalam browser pengunjung.
KODE
http://www.favicon.com/


FAVICONS yang jelas tidak kritis. Namun, jika mereka tidak hadir, mereka dapat menyebabkan 404 kesalahan dalam log (situs statistik). Browser seperti IE akan meminta mereka dari server bila salah satu situs bookmarked. Jika favicon tidak tersedia, sebuah 404 dapat dihasilkan. Oleh karena itu, memiliki favicon bisa mengurangi favicon 404 kesalahan tertentu. Hal yang sama berlaku dari 'robots.txt' file.