Worry-Free Web Development

Estelle WeylEvoTech.Net

Plan Ahead

An ounce of prevention is worth a pound of cure

-Ben Franklin

A stitch in time saves nine

- Thomas Fuller (or his mom), 1732

Code it right the first time

- Me

Worry-Free Web Development

Estelle WeylEvoTech.Net

By coding content, presentation and behavior separately, your code will work cross browser and cross device: without having to re-code when a new technology or device comes on the market.

By coding properly, you can create usable, accessible and working web sites while saving yourself headaches down the road

If your CSS is external, and your XHTML is well coded, you can change the look and feel of a website simply by rewriting a single file: your css.CSSZenGarden

If you XHTML is cleanly coded, you can create work with templates or include files, such as PHP

CSSZenGarden

All of their sites have their sites have the exact same XHTML with the exception of one line: the call to the external CSS. ~

Target Audience

Who is your target audience?

What devices are they using to access the web?

How does it differ from how you access the web?

How will it differ 5 years from now? 10 years?

What is the purpose of your site?

How will that change in the next 10 years?

Right now your target audience may be a 40 year old on a PC, but in a few years it may be a that same person, with worsening eyesight, accessing from a cell phone, or accessing it with children on a large screen television.

Site Structure

Expandable,

upgradeable,

changeable?

The Right way

Code to the web standards - not to a browser

Separate XHTML, CSS, and JavaScript

Separation of presentation from structure

Separation of behavior from presentation

First code XHTML,

Next CSS

when it works, add JS

XHTML (how)

All elements and attribute names are lower case

All attribute values are quoted

All elements require a closing tag

If empty, the elements is closed with a slash

No attribute minimization

in strict XHTML, inline elements are in block elements

XHTML is an XML application written in well formed XML

We all know the difference b/t xhtml and html, but in case we forgot....

XHTML is valid XML.Avoid quirks mode browsers will make assumptions about what was intended when it isn't valid: different browsers may make different assumptions.

If it interprets the DOM in a way you didn't intend, js manipulation of the dom will be screwy.

Semantics!

Use the correct for each component of your page.

Code understood by you & others working it

Screen readers understand it

Search engines understand it

Mobile devices, printers, parsers, etc!

XHTML (why)

Better: XHTML is easier to manipulate, encourages use of CSS, is extensible, and is supported by mobile devices.

and

Easier: The syntax rules for XHTML are consistent. XHTML is easier to author and to maintain, the structure is more apparent and problem syntax is easier to spot.

In HTML, case, quotes, closing of elements and uncontained elements are allowed and popular

Arg html 2 v xhtml 5

XHTML (why, part II)

Easier to maintain

XML (XSL, XSLT, RSS, Machine readable)

Easier to learn

Futureproof

Difference between XHTML and HTML is invisible to the PC browser user.

Layer and Enhance

Your initial document should be pure, valid XHTML

Your page should work with just your XHTML ~

Don't create dependencies between

XHTML, CSS and JavaScript

Check printcheck cell

Layer and Enhance (XHTML cont.)

Your XHTML should be:

In the right order to be read

In the right order for search engines

Accessible

Work in all browsers

Work in all media

Does your page make sense?SEOaccessibilityflow

Layer and Enhance (XHTML cont.)

Your XHTML should not:

Have divitis

Have non-contextual images ~

Have non linking links

Only image: logoimages of products OKalt attribute

Layer and Enhance (XHTML cont.)

Your XHTML should not:

Have divitis

Have non-contextual images ~

Have non linking links

Have tables!!!

Only image: logoimages of products OKalt attribute

Semantics

and have virtually no semantic meaning.

Semantics

and have virtually no semantic meaning.

is only for poetry!

Semantics

and have virtually no semantic meaning.

is only for poetry!

is for data ~

Tableless

Float everything?

Parent has 100% width and floated

{ clear: both;} on section

Examples:

Dreamweaver ~

Grids ~

Faux columns ~

Backward compatible

Don't code to old browsers, but do avoid breaking them

Add extra outer div

Don't include XML declaration

Presentation Layer ... CSS

Add the presentation layer

Develop in compliant browser

Keep browser quirks in mind....

Avoid hacks

Reset the default rendering to equalize browser differences

Presentation effects

External stylesheets

Develop in Firefox

Get the site working with a compliant browser

Keep browser quirks in mind, but don't cater to them

ex. Double margin on float in IE6

Develop in FireFox rather than Safari

Presentation Layer ... CSS

Keep browser quirks in mind....

Avoid hacks

Set defaults for all elements to minimize browser differences

This will reduce typing!

http://www.evotech.net/blog/2007/04/css-best-practices/

http://developer.yahoo.com/yui/fonts/

http://developer.yahoo.com/yui/reset/

Presentational Effects in CSS

Rollovers,

Background image changes

Drop down menus

Presentation Layer ... CSS

Once that's all working...

enhance with javaScript

Behavior Layer ... JavaScript

ENHANCEMENT

Start with a site that WORKS without JavaScript

Use JS to enhance the user experience

ex. if a link isn't linking anywhere, create it dynamically.

Progressive enhancement over graceful degradation. Graceful degradation prioritizes presentation, with non-supported browsers receiving less. Progressive enhancement puts content at the center, allowing browsers to receive more, and provides more to the user with a supported browser.

Including JavaScript

type=text/javascript is required

language=javascript is not allowed in strict

Including JavaScript

type=text/javascript is required

language=javascript is not allowed in strict

Dreamweaver starter scripts gets this wrong

Including JavaScript

//

code here

//]]>

Including JavaScript

Don't include anything between the open and closing tags

Include the external javascript file at the BOTTOM of the page

Sunday, go to unobtrusive JavaScript at 1:00 on Sunday by Paul Davis. Please heckle him

Event Handlers

target.addEventListener(type, listener, useCapture);

var container = document.getElementById('myId');

var links = container.getElementsByTagName('a');

for (var i=0; i < links.length; i++){

links[i].addEventListener('click',

function(){ functionhere;}, false);

}

Thanks to:

OpenOffice.org

Engage.com

Adobe / Community MX

You

Contact Information

Estelle Weyl
estelle@weyl.org
http://evotech.net/blog