Do More in Less Time | Nick Pan Do More in Less Time Nick Pan | [email protected] | 24 th Nov 2006 | Club Med, Bintan.
Do more in less time
Jan 16, 2015
Slides from a company trip sharing.
Using HTML and CSS to separate content from presentation in order to achieve faster project completion time.
Using HTML and CSS to separate content from presentation in order to achieve faster project completion time.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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
Related Documents
