best practices in web design - westcivwestciv.com/best_practices/bestpractices.pdf · best...

best practices in web design

Adobe Live July 2006

flex

ajax

thanks guys

I get to do really boring stuff like

professionalism

best practices

However

I am very opinionated

Pretty direct

don’t believe me?

almost all web sites are crap

no, really crap

actually, really really really crap

“The power of the Web is in its universality”

Sir Timothy Berners-Lee

most sites are built fora specific browser

even a specific browser setup (font size, resolution)

at a specific time (best viewed in)

for young able bodied people with good eyesight

most sites are built using

superseded technologies and practices

are not forward compatible with newer browsers, newer devices

not even backwards compatible with older browsers

And I know this how?

Because I foolishly surveyed 83 of the largest corporate and government sites in Australia late last year

4 areas of best practice in web development

1. Valid use of HTML or XHTML

2. Valid use of CSS for document presentation

3. Use Semantic and Structural HTML for document content

4. Accessibility

Yeah, says who?

Says the World Wide Web Consortium

“W3C”

OK!

W3C

founded by Sir Timothy Berners-Lee (guy who invented the internets web)

stakeholders from industry, academia, government

Adobe, Apple, Microsoft and others

“leading the web to its full potential”

ISO for the Web

W3C

develops “web standards” like

HTML and XHTML

XML

PNG

CSS

SVG

Web Content Accessibility Guidelines (WCAG)

Best Practices

are easily machine tested

provide “quality assurance” (QA) for web sites

Are rarely adhered to

Valid use of HTML or XHTML

The most recent version of HTML is 4.01

The most recent version of XHTML is version 1.1

Any of HTML 4.01, XHTML 1 or XHTML 1 are recommended by the W3C

Version 4.0 or older of HTML is not

Valid use of HTML or XHTML

HTML (and other web standards like SVG and CSS) are designed with

• accessibility

• forward and backwards compatibility

• device independence

• network efficiency

in mind.

By adopting valid HTML, these things come largely for free

Valid use of HTML or XHTML

Valid HTML documents require a Document Type Declaration (DTD)

DTDs specify the version of HTML the document uses

Valid use of HTML or XHTML

Results of my survey for valid use of HTML or XHTML

Valid use of HTML or XHTML

0

5

10

15

20

25

30

35

40

none

32

1

15 16 17

1 1 1

HTM

L 3.2

HTM

L 4.0 loos

e

HTM

L 4.01

loos

e

HTM

L 4.01

strict

XHTM

L 1.0 loos

e

XHTM

L 1.0 stric

t

XHTM

L 1.1

Valid use of HTML or XHTML

Out of 83 sites

• 52 used no doctype or an out of date one

• only 3 used a strict doctype

• Only 10 sites actually validated

• Another 9 had a small number of errors

• 75% of sites had significant validation problems

• A number were so broken the validator wouldn’t even try to validate them

Valid use of HTML or XHTML

05101520253035404550

missing

alt

<scri

pt> ty

pe

TOPMARGIN ...

unes

cape

d &

malform

ed HTML

unes

cape

d scri

pt co

ntent

unqu

oted a

ttribu

te va

lues

malform

ed ta

bles

backg

round

/borde

r TR/TD

form/ta

ble co

ntainm

ent

ID reus

ed

XHTML in <h

ead>

of HTML

<style

> in <

body

>

XHTML cas

e

<form

> no a

ction

XHTML with

HTML syn

tax

illega

l chara

cters

malform

ed co

mments

<nob

r>

color

miss

ing #

<link>

in <b

ody>

<style

> no t

ype

Valid use of HTML or XHTML

Same small number of errors recur over and over

Fixing these basic errors would mean most sites were valid with little real effort

The sites which use valid HTML have one thing in common - their developers make it a priority

Rather than boring you with the details, see my survey results

Correct and Valid use of CSS

Modern best practice is to separate the presentation of a site from its content

CSS is for site presentation

HTML is for the structured content of the site

Correct and Valid use of CSS

All but 1 of the 83 sites used CSS to an extent

Correct and Valid use of CSS

Sites frequently mixed presentation and structure in their HTML

• 71 of the 83 sites used tables for layout

• Over 33% used the <font> element!

• the significant majority of sites used some presentational HTML elements or attributes

Correct and Valid use of CSS

CSS is not just for pretty colors and fonts - any aspect of presentation, particularly layout, should be created using CSS.

It works in any contemporary browser, and there are legitimate, reliable techniques for serving simpler or no style to older browsers like Netscape 4 and IE4

In the experience of major sites, users of older browsers may well thank you for giving them less style.

Correct and Valid use of CSS

HTML has elements such as headings, paragraphs, and lists.

Where an HTML element exists, use it!

Pretty please

Correct and Valid use of CSS

Screen readers use headings to present users with navigation

Correct and Valid use of CSS

Search engines use the structure of documents to extract more meaning from them

Correct and Valid use of CSS

Who is the single most user of your site?

Your client?

Your boss?

Your readers?

Correct and Valid use of CSS

Accessibility

Mandated by law in most jurisdictions (including Australia and New Zealand)

Has the most direct impact on the lives of your users, and the one people pay the least attention to

Is typically the least well adhered to

Ironically, by adhering to the other three areas of best practice, you get a very large proportion of accessibility for free.

Accessibility

What standards are there for accessibility which define best practice?

Accessibility

The W3C’s Web Content Accessibility Guidelines, or WCAG1 is widely considered the baseline for accessibility.

Accessibility

There are three levels of priority

• the first, priority 1 (often referred to as level A) is mandatory

• the second (double A) is recommended

• the third (triple A) optional

Accessibility

Typically level double A is considered a sufficient level of accessibility

These can largely be machine tested

Most problems easily fixed

Accessibility

But, here is the thing about WCAG1

Accessibility

If you pages validate to one of the recommended document types

If you separate content from its presentation

If you use CSS for presentation

If you use structured semantic HTML correctly

Accessibility

You effectively meet AA level WCAG 1 compliance

For Free!

Accessibility

So how well do major Australian sites do?

Accessibility

0

5

10

15

20

25

30

35

40

45

50

5 4 3 2 1 0

accessibility scores / 5

score/5

frequency

average 0.45 median 0

1 0

10

1712

43

Summary

Sowhen beetles battle beetles with

paddles....

Summary

If you develop for the web, and do so professionally I think the following are a must

Summary

You use an up to date DTD for all your sites

Ideally a strict version if at all possible

Consider XHTML 1.0 strict for maximum forward and backwards compatibility

1

Summary

Validate every page using the W3C validator2

Summary

Use HTML for structured content only

Use headings, lists and paragraphs as appropriate

Use CSS for all presentation, layout and text style

3

Summary

Validate your CSS, using the W3C CSS validator4

Summary

Aim for WCAG 1 Double A accessibility 5

Summary

Check your pages for accessibility issues using an online accessibility checker

6

Summary

Dreamweaver allows you to develop standards based valid HTML and CSS based pages right out of the box.

7

http://wd06.com

TextAndy ClarkeDerek FeatherstoneKelly GotoMolly HolzschlagJeremy KeithDan SafferThomas Vander Wal

CSS and XHTMLWeb apps

AJAXAccessibility

RSS“web 2.0”

User Centred Design

john@westciv.com

http://westciv.com

thank you