1. Content and
Layout
Lon Barfield

2. Separating content and layout
Bit of web history
Content and layout on the web
Why separation is a good thing
But first...

3. The Large Hadron Collider

4. Million GBytes per second

5. The Higgs Boson - July 2012

6. Yes it’s Comic Sans!

7. The God particle the Devil’s typeface
bancomicsans.com
It would be nice to publish data without layout
issues

8. Tim Berners-Lee CERN - 1989
10,000 scientists from over 100 countries
It would be nice to publish data without layout
issues
World Wide Web - “Vague but exciting”
info.cern.ch/hypertext/WWW/TheProject.html

9. Tim Berners-Lee CERN - 1989

10. Just content, no layout
This chunk of text is a heading, etc.
Headings, Text, Title, Quote, Abstract
20 Elements

11. Early web had no ‘design’

12. Designers v content purists
‘Tricks’ subverting the HTML tags
spaces, blank images, H2 for titles
Compromise - the centre tag
HTML became content and layout

13. Nice HTML timeline
more layout oriented tags
still mixing content and layout
broadcast.rackspace.com/blog/HTMLtimeline

14. Style sheets - CSS
This is the content…
<H1>Blah blah</H1>
And this is how it should look...
H1 {font-weight: bold;
text-transform: uppercase;}

15. Advantages
Accessibility - screen readers for the blind won’t
start by reading the navigation bars
Responsive design - information can adapt for
small screens, printing etc.

16. Advantages cont.
Better search indexing - Is the term in the title,
the heading?
Semantic web - what do things actually mean

17. Hands on - Zen Garden
csszengarden.com
en.wikipedia.org/wiki/CSS_Zen_Garden
download HTML and CSS sample using the
links, tweak and screen grab it

18. Taking a peek at the CSS
The page using the CSS
www.csszengarden.com/?cssfile=/210/210.css
Just the CSS
www.csszengarden.com/210/210.css