Веб-стандарти - це більше, ніж просто "бестаблічная верстка"

Для різних людей термін "веб-стандарти" означає різні речі. Для декого це просто "сторінки без таблиць", для інших - "правильний код". Однак веб-стандарти це щось набагато більше. Сайт, простроенной по веб-стандартам, це сайт, який дотримується стандартів (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG і т.д.) і кращих відпрацьованих рішень (пройшов стандартизацію код, доступний код, семантично правильний код , дружні URL-и)

Іншими словами сайт, побудований за стандартами в ідеалі повинен бути легким, чистим, заснованим на CSS, доступним, зручним і дружнім до пошукових серверів.

Про перевірочному списку

Цей перевірочний список не претендує на звання "супер-пупер" повного перевірочного списку. Можливо його ще можна доповнити і розширити. Що більш важливо, так це те, що цей список не варто розглядати як обов'язковий для кожного сайту, який вам доведеться розробляти. Це всього лише список рад, який можна використовувати:

  • як великий список всіх наявних веб-стандартів
  • як зручний інструмент для розробників, яким вони можуть користуватися при розробці сайтів
  • як посібник для тих розробників, які вирішили рухатися в напрямок веб-стандартів

Список

  1. Якість коду
    1. Вказано Чи у сторінок правильний Doctype?
    2. Вказано Чи у сторінок charset?
    3. Валід чи (X) HTML код сторінок сайту?
    4. Дійсний Чи CSS-таблиці сайту?
    5. Чи використовує сайт будь-які CSS-хакі?
    6. Чи використовуються на сайті які-небудь зайві й непотрібні класи (class) і ідентифікатори (id)?
    7. Чи добре структурований код сторінок?
    8. Чи є на сайті зламані посилання?
    9. Як у сайту зі швидкістю завантаження сторінок і з їх розмірами?
    10. Чи видає браузер які-небудь помилки JavaScript при роботі зі сторінкою?
  2. Ступінь поділу контента й подання
    1. Чи використовується на сайті CSS для всіх аспектів оформлення сторінки (шрифти, кольори, відступи, границі й т.д.)?
    2. Перенесено Чи вся декоративна графіка в CSS, або вона все ще зустрічається в (X) HTML-коді?
  3. Доступність для користувачів
    1. Чи використовується атрибут "alt" у всіх значимих зображеннях?
    2. Чи використовується на сайті для шрифту відносні одиниці виміру замість фіксованих?
    3. Ламається чи яким-небудь образом компонування сторінки при збільшенні розміру шрифту?
    4. Чи є на сторінці видима посилання "пропустити"?
    5. Чи використовуються на сайті доступні форми?
    6. Чи використовуються на сайті доступні таблиці?
    7. Чи достатньо контрастні і яскраві кольори на сторінках сайту ?
    8. Використовується Чи тільки колір для виділення критичної інформації?
    9. Чи використовується затримка в випадаючих меню (для користувачів з повільною моторикою)?
    10. Чи всі посилання містять опису (для сліпих користувачів)?
  4. Доступність для пристроїв
    1. досить добре сайт працює і в сучасних і в старих браузерах?
    2. Чи можна працювати з матеріалами сайту при відключеному CSS або в броузері, де немає підтримки CSS?
    3. Чи можна працювати з матеріалами сайту при відключених зображеннях або при відсутності підтримки їх виведення на екран?
    4. працює сайт у текстових броузерах, таких як Lynx?
    5. Чи добре виглядає сайт при роздруківці?
    6. працює сайт на наладонних пристроях?
    7. Забезпечений Чи сайт детальним набором метаданих?
    8. працює сайт у вікнах різних розмірів?
  5. Основи юзабіліті
    1. Чи є на сторінці чітка візуальна ієрархія елементів?
    2. легко відрізнити один рівень заголовків від іншого?
    3. Чи достатньо легко зрозуміти навігацію по сайту?
    4. Чи використовується одноманітна навігація на всіх сторінках сайту?
    5. Чи використовується на сайті прийнятний і одноманітний мову текстів?
    6. Чи є у сайта карта й сторінка з контактною інформацією? Чи легко їх знайти?
    7. Якщо ваш сайт дуже великий, чи є на ньому інструмент пошуку?
    8. Чи присутній на кожній сторінці сайту посилання на його головну сторінку?
    9. Підкреслені чи посилання?
    10. Чітко Чи виділені кольором посилання, які користувач уже відвідав?
  6. Управління сайтом
    1. Чи є у сайта зрозуміла й корисна сторінка помилки 404, яка працює з будь-якого рівня сайту?
    2. Чи використовуються на сайті дружні URL-и?
    3. Чи можна до вашого сайті доступитися , набравши адресу без "www"?
    4. Чи є у сайта піктограма для закладок?

1. Якість коду

1.1 Вказано чи у сторінок правильний Doctype?

Doctype (скорочено від 'document type declaration' - "декларація типу документа") повідомляє валідатора, яка версія (X) HTML використовується у вашій сторінці. Декларація повинна бути присутнім на початку кожної веб-сторінки. Doctype - ключовий компонент сторінки, що претендує на відповідність стандартам: ваша розмітка і CSS не пройдуть валідацію, якщо у вашому документі відсутній Doctype.
Стаття на webmascon.com

Чому такий важливий DOCTYPE

Див Вказано Чи у сторінок кодування (charset)?

Якщо користувальницький агент (наприклад браузер) не може самостійно визначити кодування вашої веб-сторінки, користувачі побачать на екрані нечитаний текст. Ця інформація особливо важлива для тих, хто створює і підтримує багатомовні веб-сайти. Але взагалі оголошення кодування дуже важливо для тих, хто створює сторінки в XHTML/HTML і CSS.
Http://www.w3.org/International/tutorials/tutorial-char-enc/

См . також:

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

1.3. Валиден чи (X) HTML код сторінок сайту?

Дійсний код браузер виведе швидше, ніж невалідний. Дійсний код браузер виведе краще, ніж невалідний. Все більше і більше браузери підкоряються стандартам, і тому все більш важливим є валідний і стандартний HTML-код.
Http://www.maxdesign.com.au/presentation/sit2003/06.htm

см. також:

  • http://validator.w3.org/

1.4. Дійсний Чи CSS-таблиці сайту?

Не забувайте переконатися, що ваш HTML-код і CSS-сторінки не містять помилок, так як помилки приведуть до спотвореного відображення документа на екрані.
http://www.meyerweb.com/eric/articles/webrev/199904.html

Див також:

  • http://jigsaw.w3.org/css-validator/

1.5. Чи використовує сайт будь-які CSS-хакі?

По суті кожен сам вирішує, які хакі йому використовувати. Це залежить від того, наскільки добре ви знайомі з усіма варіантами, і від того, який дизайн ви хочете створити.
Http://www.mail-archive.com/wsg @ webstandardsgroup.org/msg05823.html

Див Чи використовуються на сайті які-небудь зайві й непотрібні класи (class) і ідентифікатори (id)?

Я помітив, що розробники, освоюючи нові прийоми і технології, часто створюють чудові CSS-таблиці , і при цьому - поганий XHTML-код. Особливо часто в XHTML-коді зустрічаються непотрібні і зайві "div" і "id". Через це HTML-код втрачає стрункість, а CSS-файли стають заплутаними.
Http://www.clagnut.com/blog/228/

1.7. Чи добре структурований код сторінок?

Семантично правильна розмітка на увазі використання html-елементів за їх прямим призначенням. Добре структурований HTML-документ добре сприймається всім спектром користувальницьких програм (браузерами без підтримки стильових таблиць, текстовими браузерами, надолонниками, пошуковими роботами і т.д.)
http://www.maxdesign.com.au/presentation/benefits/index04.htm

Див також:

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

1.8. Чи є на сайті "зламані" посилання?

"Зламані" посилання розчаровують користувачів і потенційно ховали від вашого сайту ваших клієнтів. "Зламані" посилання можуть також позначитися на те, як пошукові роботи будуть індексувати ваш сайт.

Див також:

  • http://validator.w3.org/checklink

1.9. Як у сайту зі швидкістю завантаження сторінок і з їх розмірами?

Не змушуйте мене чекати ... Ось яку думку увазі користувачі при проведенні всіх досліджень. Навіть користувачі з широким каналом втомлюються від повільного завантаження.
Http://www.websiteoptimization.com/speed/

1.10. Чи видає браузер які-небудь помилки JavaScript при роботі зі сторінкою?

Internet Explorer для Windows дозволяє включити відладчик, який буде вискакувати на екран всякий раз, коли на сторінці буде виявлена ??помилка в JavaScript. Ця опція знаходиться в меню "Internet Options" на закладці "Advanced". Приберіть галочку з пункту "Disable script debugging".

***

2. Ступінь поділу контента й подання

2.1. Чи використовується на сайті CSS для всіх аспектів оформлення сторінки (шрифти, кольори, відступи, границі й т.д.)?

Використовуйте стильові таблиці для управління компонуванням сторінки і її зовнішнім виглядом

http://www.w3.org/TR/WCAG10/wai-pageauth.html # tech-style-sheets

2.2. Перенесені Чи вся декоративна графіка в CSS, або вона все ще зустрічається в (X) HTML-коді?

Ваша мета, як веб-розробника, полягає в тому, щоб прибрати з html- коду вашої сторінки всі оформлювальні елементи.

Завдяки чому код стане чистіше і семантично правильніше.
Http://www.maxdesign.com.au/presentation/benefits/index07.htm

***

3. Доступність для користувачів

3.1 Чи використовується атрибут "alt" у всіх значимих зображеннях?

Кожен нетекстові елементи супроводжуйте текстовим описом

http://www.w3.org/TR/WCAG10/wai-pageauth.html # tech-text-equivalent

3.2. Чи використовується на сайті для шрифту відносні одиниці виміру замість фіксованих?

В коді і в стильових таблицях використовуйте відносні, а не абсолютні одиниці для вказівки розмірів елементів
http://www. w3.org/TR/WCAG10/wai-pageauth.html # tech-relative-units

Див народу - відносні розміри шрифтів

  • Розмір шрифту нехай вибирають самі користувачі

3.3. Ламається чи яким-небудь образом компонування сторінки при збільшенні розміру шрифту?

Проведіть простий тест. Відкрийте свій веб-сайт в будь-якому браузері, де є функція зміни розміру шрифту. Тепер збільшіть розмір шрифту. Ще раз збільшіть. І ще раз ... Подивіться на свій веб-сайт. Чи як і раніше компонування сторінки залишилася незмінною? При розробці сайту не розраховуйте, що у відвідувача в браузері розмір шрифту збігається з вашим.

3.4. Чи є на сторінці видима посилання "пропустити"?

"... Слід передбачити спосіб, який дозволяє користувачеві перейти до контенту сайту, пропустивши навігацію ..."
http://www.section508.gov/index.cfm?FuseAction=Content&ID=12

"... згрупуйте родинні посилання, опишіть групу і уявіть спосіб користувачам пропустити цю групу для перегляду ... "
http://www.w3.org/TR/WCAG10-TECHS/# tech-group-links

" .. маса навігаційних на сторінці посилань завдає неприємностей не тільки сліпим користувачам. Згадайте і про тих, у кого утруднена моторика і кому доведеться натискати багато разів клавішу Tab, щоб пройти по всіх цих посиланнях до тексту також:

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

3.5. Чи використовуються на сайті доступні форми ?

Форми на веб-сторінках не найпростіша річ для людей з фізичними вадами. Одна справа - навігація по сторінці з текстовим матеріалом, і зовсім інша - перехід по полях форми і введення інформації в неї.
http://www.htmldog.com/guides/htmladvanced/forms/

Див Чи використовуються на сайті доступні таблиці?

Що стосується таблиць. Не забудьте вказати заголовки для стовпців і рядів ... Для таблиць, де є два і більше логічних рівнів рядів і стовпців, скористайтеся допоміжними елементами мови html, щоб зв'язати логічно комірки даних з осередками Чи достатньо контрастні і яскраві кольори на сторінках сайту?

Переконайтеся, що різниця між кольором фону та кольором тексту досить контрастна, щоб не викликати труднощів при читанні у людей зі зниженим сприйняттям кольору.
http://www.w3.org/TR/WCAG10/wai-pageauth.html # tech-colour-contrast

Див також:

  • http://www.juicystudio.com/services/colourcontrast.asp

3.8. Використовується Чи тільки колір для виділення критичної інформації?

Переконайтеся, що вся важлива інформація, виділена кольором, також виділена при відсутності кольору, наприклад за допомогою контексту або елементами логічної в основному три типи порушення кольоросприйняття: дейтеранопія (порушення в сприйнятті червоного і зеленого кольорів), протанопія (інша форма порушення сприйняття червоного і зеленого кольорів) і трітанопія (порушення сприйняття синього і жовтого кольорів - дуже рідкісний випадок)

см. Чи використовується затримка в випадаючих меню (для користувачів з повільною моторикою)?

У людей з повільною моторикою можуть виникнути труднощі при роботі з меню, які для них будуть працювати дуже швидко.

3.10 . Чи всі посилання містять достатньо описовий текст (для сліпих користувачів)?

Посилання повинні бути досить зрозумілими, щоб вони мали сенс при читанні поза контекстом - або при простому читанні або при читанні у вигляді списку.
http://www.w3.org/TR/WCAG10/wai-pageauth.html # tech-meaningful-links

***

4. Доступність для пристроїв

4.1. досить добре сайт працює і в сучасних і в старих браузерах?

Перш ніж починати верстати сторінки з використанням CSS, визначитеся, які браузери ви збираєтеся підтримувати і до якого ступеня.

http://www.maxdesign.com.au/presentation/process/index_step01.cfm

4.2. Чи можна працювати з матеріалами сайту при відключеному CSS або в броузері, де немає підтримки CSS?

На ваш сайт можуть зайти люди, у яких браузер не підтримує CSS або підтримка CSS відключена. Якщо ваші сторінки правильно структуровані, у таких відвідувачів не виникне жодних проблем при роботі з ними.

4.3. Чи можна працювати з матеріалами сайту при відключених зображеннях або при відсутності підтримки їх виведення на екран?

Деякий користувачі переглядають веб- сайти не завантажуючи графічні елементи сторінок. Так чинять в особливо ті, у яких підключення до Інтернету занадто повільне. Ваші сторінки не повинні викликати труднощів у роботі у таких відвідувачів.

4.4. працює сайт у текстових броузерах, таких як Lynx?

Текстовий браузер це як би комбінація відключених графіки і CSS. Текстові браузери покладаються цілком на структуру документа при створенні зображення на екрані.

Див також:

  • http://www.delorie.com/web/lynxview

4.5. Чи добре виглядає сайт при роздруківці?

До будь (X) HTML-документа можна прикріпити стиль для виводу на друк і для цього не потрібно чіпати розмітку самого документа.
стаття на webmascon.com У друк!

Див також:

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

4.6. Чи добре працює Чи сайт на наладонних пристроях?

Цей момент викликає найбільші труднощі, так як в даний час немає однаковості в тому, як надолонні пристрої підтримують веб-сторінки. Однак деякі рішення у компонуванні сторінок підтримуються на наладонниках краще, ніж інші . Підтримка наладонних пристроїв залежить від цільової аудиторії вашого сайту.

4.7. Забезпечений Чи сайт детальним набором метаданих?

Метадані - це інформація, яка зрозуміла для машин.
http://www.w3.org/Metadata/

Метадані - це структурована інформація, яка створюється людьми спеціально для того, щоб описати нею який-небудь ресурс. Іншими словами, метадані - це "дані про даних ".

4.8. працює сайт у вікнах різних розмірів?

Серед веб-розробників існує стійке переконання, що з кожним роком середні розміри екрана у відвідувачів ростуть. Деякі розробники переконані , що середній розмір екрана у відвідувачів їх сайтів складає по ширині 1024 пікселів. Ну а що щодо користувачів з меншими розмірами екранів або з власниками надолонників? Чи є вони частиною вашої цільової аудиторії, і чи будуть вони відчувати труднощі при роботі з вашим сайтом?

***

5. Основи юзабіліті

5.1. Чи є на сторінці чітка візуальна ієрархія елементів?

Організуйте і виділяйте важливість того чи іншого матеріалу за допомогою розмірів, відступів і логічних зв'язків.

http://www.great-web-design-tips.com/web- site-design/165.html

5.2. Чи легко відрізнити один рівень заголовків від іншого?

Використовуйте заголовки для того, щоб розкрити структуру документів, при цьому використовуйте їх у відповідність зі Чи достатньо легко зрозуміти навігацію по сайту?

Навігація вашого сайту повинна підказувати відвідувачу, на якій сторінці сайту він зараз знаходиться і куди він може слідувати далі.
Http://www. 1stsitefree.com/design_nav.htm

5.4. Чи використовується одноманітна навігація на всіх сторінках сайту?

Якщо на кожній сторінці вашого сайту навігація дотримується одного і того ж стилю , відвідувачам легше буде працювати з сайтом і вони швидше будуть знаходити потрібну їм Чи використовується на сайті прийнятний і одноманітний мову текстів?

Ясний і простий мова матеріалів дозволяє ефективно вести діалог з відвідувачем. Не забувайте, що ваш сайт можуть читати користувачі, для яких ваша мова не є рідним.
http://www.juicystudio.com/tutorial/accessibility/clear.asp

5.6. Чи є в сайту карта й сторінка з контактною інформацією? Чи легко їх знайти?

Більшості карт сайтів не вдається розкрити багаторівневу структуру архітектури сайту. У тестах на юзабіліті користувачі часто ігнорують карту сайту або просто не можуть її знайти. Складність карти також є проблемою: карта повинна бути саме картою, а не головоломкою по навігації.
http://www.useit.com/alertbox/20020106.html

5.7. Якщо ваш сайт дуже великий, чи є на ньому інструмент пошуку?

Детальніше »