The document discusses planning a website like planning a party by including essential components like HTML (music), CSS (food), and JavaScript (drinks). It provides examples of semantic HTML markup, CSS resets and styling, and unobtrusive JavaScript. Key recommendations include using semantic HTML, CSS resets and cascading styles, external style sheets, and namespaced JavaScript functions to avoid conflicts.

1. Plan your web sites
like you plan parties
Stanford, May 2007
Christian Heilmann

2. • All of the following is licensed
under a Creative Commons
Attribution-Share Alike 3.0
License
http://creativecommons.org/
licenses/by-sa/3.0/ which
means you can re-use it by
attributing anything you use
to me.
Go nuts

3. • Why am I telling you that you
should plan your web site like
you plan a party?
http://www.icanhascheezburger.com

4. • I have no idea what you do or
what you want to hear about
and I just published a book
that has a similar approach.
• My master plan is to achieve
the following:
– Help people forget about the
internet as a technical
challenge and use it to
communicate and publish
information.

5. • A good party is made up from
several components:
– Music
– Food
– Drinks (or other drug
equivalents)

6. • The music part is easy, if you
keep it simple. The music
should be:
– Fast
– Loud
– Easy to understand /
discordantly sing along

7. • The food part is a bit trickier.
You need to cover the basic
food groups:
– Crisps
– Burgers
– Salads
– Alternatives for the Vegetarians
/ Vegans / Other oddballs

8. • The drinks part is mostly easy,
just make sure you have
– Alcoholic
– Ridiculously Alcoholic
– Non-alcoholic drinks to mix the
others with / use as an
alternative

9. • The main problem you have is
one of transportation and
maintenance.
– You want the music to arrive
and not get lost or broken
– You want the drinks to stay cool
and mostly unmixed
– You want some of the food to
stay cold
– You want to make sure the
salads don’t mix with the meat
as otherwise you annoy the
Vegans

10. • The solution:

11. • The solution:

12. • The solution:

13. • The solution:

14. • That way you can solve the
transportation issues and you
successfully bring the party
idea to the intended
audience.

15. • As a schema:

16. • The same applies to delivering
a web product. You have your
different components:
– HTML – The Music / Non
Alcoholic Drinks
– CSS – The Food
– JavaScript/Flash – The Drinks /
Drugs

17. • But first of all:
• WYSIWYG is not a solution to
anything, it is a waste of time.
• WYSIWYG should be
WYSIWYCIICCANSGYAYPFBYC
SOMAA
http://www.icanhascheezburger.com

18. • WYSIWYCIICCANSGYAYPFBYC
SOMAA
– What You See Is What Your
Computer In Its Current
Configuration And Network
State Gives You And You
Perceive Filtered By Your
Current State Of Mind And
Ability.
http://www.cuteoverload.com

19. • HTML is the most important
part.
• Without it there is no web
site.
• It gives structure to the
content you want to convey.

20. Party etiquette. How not to
approach women at parties.
Don’t say “hey babe, come
here often”. Don’t show them
your Speedos and say “you
know you like my Speedos,
don’t fight it”. Don’t say “hey,
haven’t I seen you on girls
gone wild?” (unless you are
100% sure). How not to
approach men at parties.
Don’t show up.

21. • Party etiquette.
• How not to approach women
at parties.
– Don’t say “hey babe, come here
often”.
– Don’t show them your Speedos
and say “you know you like my
Speedos, don’t fight it”.
– Don’t say “hey, haven’t I seen
you on girls gone wild?” (unless
you are 100% sure).
• How not to approach men at
parties.
– Don’t show up.

22. • In HTML:
<h1>Party etiquette</h1>
<h2>How not to approach women at parties.</h2>
<ul>
<li>Don’t say “hey babe, come here often?”.</li>
<li>Don’t show them your Speedos and say “you know
you like my Speedos, don’t fight it”.</li>
<li>Don’t say “hey, haven’t I seen you on girls
gone wild?” (unless you are 100% sure).</li>
</ul>
<h2>How not to approach men at parties.</h2>
<ul>
<li>Don’t show up.</li>
</ul>

23. • With good and honest music,
you can tell by the cover what
it is.

24. • Punk

25. • Electronic

26. • Comedy

27. • Progressive Rock

28. • Music that was made to make
money might trick you.

29. • Punk?
• Hip Hop?
• What now?

30. • Don’t make your end users
have to guess what your
content is.
• What you need is a packing
crate for your HTML, and this
is the DOCTYPE.

31. • Now, this is what I call an HTML document:
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
quot;http://www.w3.org/TR/html4/strict.dtdquot;>
<html dir=quot;ltrquot; lang=quot;enquot;>
<head>
<meta http-equiv=quot;Content-Typequot; content=quot;text/html;
charset=utf-8quot;>
<title>Party Etiquette</title>
</head>
<body>
<h1>Party etiquette</h1>
[… All the other stuff …]
</body>
</html>

32. • The idea of music that is easy
to follow and sing along to
also applies to your HTML.
• Simply put, use the right
HTML for the right job.
• The fancy name for this is
semantic markup.

33. • Thinking too far…
<table width=”300” border=”0”>
<tr>
<td>
<font face=”arial” size=”+3”>
<b>
Party Etiquette
</b>
</font>
</td>
</tr>
</table>

34. • Better, but still too much
<div class=”main_heading”>Party Etiquette</div>

35. • There we go…
<h1>Party Etiquette</h1>

36. • Navigation menu, fail#1:
<table border=”0”>
<tr><td><a href=”home.html”>home</a></td></tr>
<tr><td><a href=”location.html”>Report</a></td></tr>
<tr>
<td>
<a href=”photos.html”>Photos</a>
<table border=”0”>
<tr><td><a
href=”partyshots.html”>Party</a></td></tr>
<tr><td><a
href=”mugshots.html”>Police</a></td></tr>
</table>
</td>
</tr>
<tr><td><a href=”videos.html”>Videos</a></td></tr>
<tr><td><a href=”aftermath.html”>Aftermath</a></td></tr>
</table>

37. • Navigation menu, fail#2:
<a href=”home.html”>home</a><br />
<a href=”location.html”>Report</a><br />
<a href=”photos.html”>Photos</a><br />
<img src=”0.gif” width=”10” height=”10” /><a
href=”partyshots.html”>Party</a><br />
<img src=”0.gif” width=”10” height=”10” /><a
href=”mugshots.html”>Police</a><br />
<a href=”videos.html”>Videos</a><br />
<a href=”aftermath.html”>Aftermath</a><br />

38. • Navigation menu:
<ul>
<li><a href=”home.html”>home</a></li>
<li><a href=”location.html”>Report</a></li>
<li><a href=”photos.html”>Photos</a>
<ul>
<li><a href=”partyshots.html”>Party</a></li>
<li><a href=”mugshots.html”>Police</a></li>
</ul>
</li>
<li><a href=”videos.html”>Videos</a></li>
<li><a href=”aftermath.html”>Aftermath</a></li>
</ul>

39. • You got your party going with
the right music and you have
to keep people entertained.
• One idea is to provide
nourishment.
• Your food should be
– easy to prepare,
– re-arrange and
– most of all fresh.

40. • For web development and
CSS this means that you stick
to the basics and use them as
far as they go.
• You can still make a product
really pleasing to the eye
without sacrificing structure.

41. • The myth of the unstyled
document.

42. • Global Whitespace Reset gives you a clean slate to
start from
*{
margin:0;
padding:0;
list-style:none;
border:none;
}

43. • Define presets for all the elements you are likely to
have in a document using element selectors
body{
font-family:helvetica,arial,sans-serif;
background:#fff;
color:#333;
padding:2em;
}
p,li {
padding-bottom:.5em;
line-height:1.3em;
}
h1,h2,h3,h4,h5,h6{
padding-bottom:.5em;
}

44. • Define page modules and sections and refine the
global definitions for these.
#nav li{
padding:1em .5em;
}
#header p{
border:1px solid #999;
background:#ddd;
}

45. • Show class but, don’t overdo it.
<ul>
<li class=”list-item”>The Passenger</li>
<li class=”list-item currentlyplaying”>Louie Louie</li>
<li class=”list-item”>I want to conquer the world</li>
<li class=”list-item”>Foxtrott Uniform Charlie Kilo</li>
</ul>
li.list-item{
padding:.5em;
font-family:courier,monospace;
color:#000;
}
li.currentlyplaying{
color:#c00;
}

46. • Use classes as the exception to the rule and use the
cascade.
<ul id=”playlist”>
<li>The Passenger</li>
<li class=”currentlyplaying”>Louie Louie</li>
<li>I want to conquer the world</li>
<li>Foxtrott Uniform Charlie Kilo</li>
</ul>
#playlist li{
padding:.5em;
font-family:courier,monospace;
color:#000;
}
#playlist li.currentlyplaying{
color:#c00;
}

47. • All of the CSS should be in a
separate file and not
contained in the documents.
• The reasons are obvious:
– You have one central repository
of all the look and feel
– This information gets cached by
the visitors’ computers and thus
only needs to get loaded once.

48. • Let’s go over to the
intoxicating parts of the party.
• When it comes to drinks,
there are some rules that
make life a lot easier.

49. • Don’t choose cheap over easy to
digest and keep in
• Use alcohol when you feel in the
mood for it, not to make you feel
better or lose inhibitions
• Don’t drink and drive
• Don’t mix what does not go
together.
• Don’t give hard alcohol to minors
or drugs to people who don’t know
what these drugs do
(http://urban75.com/drugs).

50. • When it comes to JavaScript
the same rules apply:
– Only use JS when the end user
has some benefit from it
– Don’t expect anything
– Make your script test that it can
run on the current user agent
before it applies itself
(unobtrusive JavaScript
http://onlinetools.org/articles/
unobtrusivejavascript)
– Don’t script and drive

51. • It is easy to code some functions to do things.
function init(){
lis = document.getElementsByTagName(‘li’);
for(i=0;i<lis.length;i++){
lis[i].onclick = doStuff;
}
}
function doStuff(){
this.style.background = ‘#ffc’;
}

52. • The issue with that is though that you can add several
scripts to each document.
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
quot;http://www.w3.org/TR/html4/strict.dtdquot;>
<html dir=quot;ltrquot; lang=quot;enquot;>
<head>
<meta http-equiv=quot;Content-Typequot; content=quot;text/html;
charset=utf-8quot;>
<title>Party Etiquette</title>
<script type=quot;text/javascriptquot; src=quot;yourscript.jsquot;>
</script>
<script type=quot;text/javascriptquot; src=quot;anotherscript.jsquot;>
</script>
</head>
<body>
</body>
</html>

53. • Therefore, avoid overwriting by encapsulating your
code and avoiding global variables
highlightLIs = {
init:function(){
var lis = document.getElementsByTagName(‘li’);
for(var i=0;i<lis.length;i++){
lis[i].onclick = doStuff;
}
}
doStuff:function(){
this.style.background = ‘#ffc’;
}
}

54. • Keep all your script output to
itself – Namespace your
functions and variables
• Use scripting as a helper and
not to show off

55. • Add-ons for a perfect party
– Sun screen for the redheads
– Protection planning (first aid kit,
condoms…)
– Doggie Bags and playlist
printouts for people to take
away

56. • The web page equivalents for
these:
– a print style sheet
– an Open ID login
– Microformats (doggie bags to
take pieces of your information
with and re-use them)
– A zoom layout

57. • That’s it. Let’s party!

58. THANKS!
chris.heilmann@gmail.com
http://wait-till-i.com
http://icant.co.uk
Flickr/delicious: codepo8