Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
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