Slides from a company trip sharing. Using HTML and CSS to separate content from presentation in order to achieve faster project completion time.

1. Do More in Less Time | Nick Pan
Do More in Less Time
Nick Pan | nick@nickpan.com | 24th
Nov 2006 | Club Med, Bintan.

2. Do More in Less Time | Nick Pan
The Myth of Design then Populate
The Holy Trinity
Semantic Markup
Lazy Designers
Zen Your Garden
I’m a Convert

3. 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 Myth
The Holy Trinity
Semantic Markup
Lazy Designers
Zen Your Garden
I’m a Convert

4. Do More in Less Time | Nick Pan
Must content population
depend on design?
The Myth
The Holy Trinity
Semantic Markup
Lazy Designers
Zen Your Garden
I’m a Convert

5. Do More in Less Time | Nick Pan
Should content population
depend on design?
The Myth
The Holy Trinity
Semantic Markup
Lazy Designers
Zen Your Garden
I’m a Convert

6. Do More in Less Time | Nick Pan
Hold that thought.
The Myth
The Holy Trinity
Semantic Markup
Lazy Designers
Zen Your Garden
I’m a Convert

7. Do More in Less Time | Nick Pan
XHTML
The Myth
The Holy Trinity
Semantic Markup
Lazy Designers
Zen Your Garden
I’m a Convert
CSS DOM
The Holy Trinity
Markup
(Content)
Presentation
(Style)
Behaviour
(Interaction)

8. Do More in Less Time | Nick Pan
style.css
scripts.js
webpage.html
webpage.php
webpage.asp
The Myth
The Holy Trinity
Semantic Markup
Lazy Designers
Zen Your Garden
I’m a Convert

9. Do More in Less Time | Nick Pan
The Myth
The Holy Trinity
Semantic Markup
Lazy Designers
Zen Your Garden
I’m a Convert
Semantic Markup
Molly E. Holzschlag
Group Lead
the 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.

10. Do More in Less Time | Nick Pan
The Myth
The Holy Trinity
Semantic Markup
Lazy Designers
Zen Your Garden
I’m a Convert
Semantic Markup

11. Do More in Less Time | Nick Pan
The Myth
The Holy Trinity
Semantic Markup
Lazy Designers
Zen Your Garden
I’m a Convert
Is there a standard way
of doing websites?

12. Do More in Less Time | Nick Pan
The Myth
The Holy Trinity
Semantic Markup
Lazy Designers
Zen Your Garden
I’m a Convert
What are “Standards”?

13. Do More in Less Time | Nick Pan
The Myth
The Holy Trinity
Semantic Markup
Lazy Designers
Zen Your Garden
I’m a Convert
Standards

14. Do More in Less Time | Nick Pan
The Myth
The Holy Trinity
Semantic Markup
Lazy Designers
Zen Your Garden
I’m a Convert
What if we don’t
follow standards?

15. Do More in Less Time | Nick Pan
The Myth
The Holy Trinity
Semantic Markup
Lazy Designers
Zen Your Garden
I’m a Convert
Lazy Designers make
life difficult for
other Designers.
By doing it their own way
and not the standard way.

16. Do More in Less Time | Nick Pan
The Myth
The Holy Trinity
Semantic Markup
Lazy Designers
Zen Your Garden
I’m a Convert
Don’t feel guilty.

17. Do More in Less Time | Nick Pan
The Myth
The Holy Trinity
Semantic Markup
Lazy Designers
Zen Your Garden
I’m a Convert
Admit it.
Learn from it.
Don’t repeat it.

18. Do More in Less Time | Nick Pan
The Myth
The Holy Trinity
Semantic Markup
Lazy Designers
Zen Your Garden
I’m a Convert
Zen Garden
www.csszengarden.com
A demonstration of what can be accomplished
visually through CSS-based design.

19. Do More in Less Time | Nick Pan
The Myth
The Holy Trinity
Semantic Markup
Lazy Designers
Zen Your Garden
I’m a Convert
1 HTML file
No CSS file
Same HTML file
Applied different CSS file & graphics

20. Do More in Less Time | Nick Pan
The Myth
The Holy Trinity
Semantic Markup
Lazy Designers
Zen Your Garden
I’m a Convert
Recap.

21. 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 Myth
The Holy Trinity
Semantic Markup
Lazy Designers
Zen Your Garden
I’m a Convert

22. Do More in Less Time | Nick Pan
So now?
The Myth
The Holy Trinity
Semantic Markup
Lazy Designers
Zen Your Garden
I’m a Convert

23. Do More in Less Time | Nick Pan
Design
CMS
Slice
Pop
CMS Populate
Designer
(3 weeks)
Designer
(1 week)
Tech
(3 weeks)
Web Master
(2weeks)
Tradition
3 + 1 + 3 + 2 = 9weeks
The Myth
The Holy Trinity
Semantic Markup
Lazy Designers
Zen Your Garden
I’m a Convert

24. Do More in Less Time | Nick Pan
Design
CMS
Slice
Pop
CMS Populate
Designer
(3 weeks)
Designer
(1 week)
Tech
(3 weeks)
Web Master
(2weeks)
There is another way.
3 + 1 + 3 + 2 = 9weeks
The Myth
The Holy Trinity
Semantic Markup
Lazy Designers
Zen Your Garden
I’m a Convert

25. Do More in Less Time | Nick Pan
Design Slice
CMS Populate
Designer
(3 weeks)
Designer
(1 week)
Tech
(3 weeks)
Web Master
(2weeks)
Test
CSS
Designer
(1 week)
3 + 2 = 5weeks (not to mention even faster future updates)
The Myth
The Holy Trinity
Semantic Markup
Lazy Designers
Zen Your Garden
I’m a Convert
The other way.

26. Do More in Less Time | Nick Pan
I’m a Convert!
What should I do now?
The Myth
The Holy Trinity
Semantic Markup
Lazy Designers
Zen Your Garden
I’m a Convert

27. Do More in Less Time | Nick Pan
The Myth
The Holy Trinity
Semantic Markup
Lazy Designers
Zen Your Garden
I’m a Convert
Think Modular & Design Modular.
Separate Content from Presentation.
Design with Standards.
Use CSS correctly.

28. Do More in Less Time | Nick Pan
Thank You
nick@nickpan.com
www.nickpan.com
The Myth
The Holy Trinity
Semantic Markup
Lazy Designers
Zen Your Garden
I’m a Convert