Content vs. Layout

What is content and layout?

The bad ol’ days

Owing to a lack of appreciation for the web as a medium, pixel perfect design will be around for a long time!

Pixel Perfect Design

The pixel perfect design is based upon the idea that the web is in fact the same as a printed piece of paper.

Pixel perfect design abuses the separation of content and layout by accurately(?) placing pieces of content in neatly (and horribly) nested tables, usually separated by transparent images.

The current template used by ECU is a pixel perfect design. The width of the table used to place the content of the page is 770 pixels wide, irrespective of the display device being used.

The Font Tag

This is a common example of how the FONT tag in HTML is used.

	<B>
	<P><FONT SIZE="+3" FACE="Arial,Helvetica">Site Title</FONT></P>
	<P><FONT SIZE="+2" FACE="Arial,Helvetica">Welcome</FONT></P>
	</B>
	<P><FONT SIZE="3" FACE="Arial,Helvetica">More text.</FONT></P>

What is bad with this approach?

You've just finished the web site. All of the content is up. You've been good. It is all valid HTML 3.2.

The Marketing Department decide that they no longer like the font Times, and would like to change it to Arial for readability.

The color drains from your face as you realise that you have to go and find every reference of <font face="Times"> and change it to <font face="Arial">

It's not that bad… you only have to do it to a about a hundred (thousands depending on the site) web pages.

Why would we want to separate them?

Separation of content allows us to:

How would we do this?

Enter CSS

CSS provides us with a mechanism to separate content from layout.

It is not the solution. It is part of a solution. We still need to educate our content providers and user agent providers.

CSS design principles

Taken from http://www.w3.org/TR/REC-CSS2/intro.html#q6

CSS2, as CSS1 before it, is based on a set of design principles:

Browser Incompatibilities

Q: If CSS is part of the solution, why don't we use it more?

A: Those damn browsers (user agents).

Browser compatibility tables:

How do I include a style sheet in my page

There are four ways:

With the exception of inline styles, all style information is included in the head tag.

	<!-- <style> tag -->
	<!-- make text black on a page, with a white background -->
	<style>
		body {
			color: #000;
			background: #FFF;
		}
	</style>
	
	<!-- <link /> tag -->
	<link rel="Stylesheet" href="style.css" type="text/css" />
	
	<!-- @import -->
	<style>
		@import url("style.css");
		<!-- or you can 'hint' the user agent -->
		@import url("style.css") screen;
	
	</style>
	
	<!-- inline -->
	<p style="color: #000; background: transparent;">Text</p>

A note of warning: Inline should be used sparingly, as it allows us to go back to the bad old days.

At Monash, there are two ways you can do this. You can use SSI:

	<!--#include virtual="/assets/stylesheet.shtml" -->

…or you can use JavaScript (yuk!):

	<script src="/lib/stylesheet.js" language="JavaScript"
		type="text/javaScript">
	</script>

What if a user turns JavaScript off?

Resources