Worry free web development

Worry-Free Web Development Estelle Weyl EvoTech.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 Weyl EvoTech.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

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?

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

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

Semantics!
Use the correct <element> 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.

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

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

Your XHTML should not:
Have divitis
Have non-contextual images ~
Have non linking links

Your XHTML should not:
Have divitis
Have non-contextual images ~
Have non linking links
Have tables!!!

Semantics
<div> and <span> have virtually no semantic meaning.

Semantics
<br /> is only for poetry!

Semantics
<br /> is only for poetry!
<table> is for data ~

Tableless
Float everything?
Parent <div> has 100% width and floated
{ clear: both;} on section <div>
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
<link href="myCSS.css" rel="stylesheet" type="text/css" media="screen" />

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

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

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.

Including JavaScript
<script type=”text/javascript”>
type=”text/javascript” is required
language=”javascript” is not allowed in strict

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 [email_address] http://evotech.net/blog

Worry free web development

by Estelle Weyl on Jun 06, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Worry free web development — Presentation Transcript