do more in less time
DESCRIPTION
Slides from a company trip sharing.Using HTML and CSS to separate content from presentation in order to achieve faster project completion time.TRANSCRIPT
Do More in Less Time | Nick Pan
Do More in Less TimeNick Pan | [email protected] | 24th Nov 2006 | Club Med, Bintan.
Do More in Less Time | Nick Pan
The Myth of Design then PopulateThe Holy Trinity
Semantic MarkupLazy Designers
Zen Your GardenI’m a Convert
Do More in Less Time | Nick Pan
Design Slice CMS Populate
Designer(3 weeks)
Designer(1 week)
Tech(3 weeks)
Web Master(2weeks)
Tradition
3 + 1 + 3 + 2 = 9weeks
The MythThe Holy TrinitySemantic MarkupLazy DesignersZen Your GardenI’m a Convert
Do More in Less Time | Nick Pan
Must content populationdepend on design?
The MythThe Holy TrinitySemantic MarkupLazy DesignersZen Your GardenI’m a Convert
Do More in Less Time | Nick Pan
Should content populationdepend on design?
The MythThe Holy TrinitySemantic MarkupLazy DesignersZen Your GardenI’m a Convert
Do More in Less Time | Nick Pan
Hold that thought.
The MythThe Holy TrinitySemantic MarkupLazy DesignersZen Your GardenI’m a Convert
Do More in Less Time | Nick Pan
XHTML
The MythThe Holy TrinitySemantic MarkupLazy DesignersZen Your GardenI’m a Convert
CSS DOM
The Holy Trinity
Markup(Content)
Presentation
(Style)
Behaviour(Interaction
)
Do More in Less Time | Nick Pan
style.cssscripts.js
webpage.htmlwebpage.phpwebpage.asp
The MythThe Holy TrinitySemantic MarkupLazy DesignersZen Your GardenI’m a Convert
Do More in Less Time | Nick Pan
The MythThe Holy TrinitySemantic MarkupLazy DesignersZen Your GardenI’m a Convert
Semantic Markup
Molly E. Holzschlag Group Leadthe Web Standards Project (WaSP)
• In English, the word semantic means “of or relating to meaning.”
• Headers signify headers (h1 does not mean “big bold and ugly”).
• Paragraphs are used to denote paragraphs.
Do More in Less Time | Nick Pan
The MythThe Holy TrinitySemantic MarkupLazy DesignersZen Your GardenI’m a Convert
Semantic Markup
Do More in Less Time | Nick Pan
The MythThe Holy TrinitySemantic MarkupLazy DesignersZen Your GardenI’m a Convert
Is there a standard wayof doing websites?
Do More in Less Time | Nick Pan
The MythThe Holy TrinitySemantic MarkupLazy DesignersZen Your GardenI’m a Convert
What are “Standards”?
Do More in Less Time | Nick Pan
The MythThe Holy TrinitySemantic MarkupLazy DesignersZen Your GardenI’m a Convert
Standards
Do More in Less Time | Nick Pan
The MythThe Holy TrinitySemantic MarkupLazy DesignersZen Your GardenI’m a Convert
What if we don’tfollow standards?
Do More in Less Time | Nick Pan
The MythThe Holy TrinitySemantic MarkupLazy DesignersZen Your GardenI’m a Convert
Lazy Designers makelife difficult for
other Designers.
By doing it their own wayand not the standard way.
Do More in Less Time | Nick Pan
The MythThe Holy TrinitySemantic MarkupLazy DesignersZen Your GardenI’m a Convert
Don’t feel guilty.
Do More in Less Time | Nick Pan
The MythThe Holy TrinitySemantic MarkupLazy DesignersZen Your GardenI’m a Convert
Admit it.Learn from it.
Don’t repeat it.
Do More in Less Time | Nick Pan
The MythThe Holy TrinitySemantic MarkupLazy DesignersZen Your GardenI’m a Convert
Zen Gardenwww.csszengarden.com
A demonstration of what can be accomplishedvisually through CSS-based design.
Do More in Less Time | Nick Pan
The MythThe Holy TrinitySemantic MarkupLazy DesignersZen Your GardenI’m a Convert
1 HTML fileNo CSS file
Same HTML fileApplied different CSS file & graphics
Do More in Less Time | Nick Pan
The MythThe Holy TrinitySemantic MarkupLazy DesignersZen Your GardenI’m a Convert
Recap.
Do More in Less Time | Nick Pan
The Myth(The Challenge)
The Holy Trinity(Content, Presentation & Behaviours are Separated)
Semantic Markup(Give html tags meaning)
Lazy Designers(Standardise Web Design methodology)
Zen Garden(Demo of possibilities with new standard approach)
The MythThe Holy TrinitySemantic MarkupLazy DesignersZen Your GardenI’m a Convert
Do More in Less Time | Nick Pan
So now?
The MythThe Holy TrinitySemantic MarkupLazy DesignersZen Your GardenI’m a Convert
Do More in Less Time | Nick Pan
DesignCMS
SlicePop
CMS Populate
Designer(3 weeks)
Designer(1 week)
Tech(3 weeks)
Web Master(2weeks)
Tradition
3 + 1 + 3 + 2 = 9weeks
The MythThe Holy TrinitySemantic MarkupLazy DesignersZen Your GardenI’m a Convert
Do More in Less Time | Nick Pan
DesignCMS
SlicePop
CMS Populate
Designer(3 weeks)
Designer(1 week)
Tech(3 weeks)
Web Master(2weeks)
There is another way.
3 + 1 + 3 + 2 = 9weeks
The MythThe Holy TrinitySemantic MarkupLazy DesignersZen Your GardenI’m a Convert
Do More in Less Time | Nick Pan
Design Slice
CMS Populate
Designer(3 weeks)
Designer(1 week)
Tech(3 weeks)
Web Master(2weeks)
TestCSS
Designer(1 week)
3 + 2 = 5weeks (not to mention even faster future updates)
The MythThe Holy TrinitySemantic MarkupLazy DesignersZen Your GardenI’m a ConvertThe other way.
Do More in Less Time | Nick Pan
I’m a Convert!What should I do now?
The MythThe Holy TrinitySemantic MarkupLazy DesignersZen Your GardenI’m a Convert
Do More in Less Time | Nick Pan
The MythThe Holy TrinitySemantic MarkupLazy DesignersZen Your GardenI’m a Convert
Think Modular & Design Modular.
Separate Content from Presentation.
Design with Standards.
Use CSS correctly.
Do More in Less Time | Nick Pan
Thank You
The MythThe Holy TrinitySemantic MarkupLazy DesignersZen Your GardenI’m a Convert