Doing it in style - creating beautiful sites, the web standards way / WebDD / Reading / 3 February 2007

Doing it in style
CREATING BEAUTIFUL SITES, THE WEB STANDARDS WAY
Patrick H. Lauke / WebDD / 3 February 2007

Visual aesthetics?
“Beautiful sites” can be created with any technology...
●
Table-based layouts
●
Font tags
●
Giant images
●
etc
Why bother with web standards/CSS?

Web standard tenets
Boil down to three things:
●
Separation of content and presentation
●
Valid (published grammar)
●
Semantic markup/code

Web standards elements
Building a page by defining:
●
What it is
●
What it looks like

Web standards and aesthetics?
“You can't make good looking sites with web
standards...”

Traditional “old school” way
Choice of markup purely down to their look
●
<h1> is too big ... I'll use <h4> instead
●
<blockquote> to indent
●
More space between paragraphs ... add a few
<p></p>

Traditional “old school” way
...then sprinkle presentational markup on top
●
forget <h4> ... <p><font size="+3"
color="ffffff><b>...</b></font></p>
● <p>this is <b>important</b>.</p>

Web standards process
Distinct tasks:
●
Mark up content in most appropriate elements -
convey meaning, not look
●
Apply styling (override browser defaults)
Model, View, Controller (MVC) parallels?

Why web standards
Some advantages:
●
Lighter code
●
Easier to maintain
●
Easier to change look/feel
●
Multiple output media
●
Accessibility
●
SEO

New technology, old habits
<p><font size="+3" color="ffffff">...</font></p>
<p><span style="font-size: 200%; color:
#ffffff">...</span></p>
<p style="font-size: 200%; color:
#ffffff">...</p>

Meaningless content
Presentational:
<p class="headingbig">Heading</p>
<p>This is <span
class="bold">important</span>.</p>
<p class="headingsmall">Subheading</p>
Semantic:
<h1>Heading</h1>
<p>This is <strong>important</strong>.</p>
<h2>Subheading</h2>

Non-semantic class/id names
<p>I know <a href="..." class="red">CSS</a>.</p>
.red { color: red; }
I know CSS.

Non-semantic class/id names?
<p>I know <a href="..." class="red">CSS</a>.</p>
.red { color: green; }
I know CSS.

Semantic class/id names!
Presentational:
<p class="boldred">Error: no entry found</p>
Semantic:
<p class="warning">Error: no entry found</p>

Semantic digression...
Conveys meaning? Don't forget to mark it up
accordingly...
<p class="warning"><strong>Error: no entry
found</strong></p>

Classitis – the “labelmaker” approach
.nav { color: green; }
<ul>
<li><a href="..." class="nav"> ... </a></li>
</ul>

Classitis – cured
#nav a { color: green; }
<ul id="nav">
<li><a href="..."> ... </a></li>
<li><a href="..."> ... </a></li>
<li><a href="..."> ... </a></li>
<li><a href="..."> ... </a></li>
<li><a href="..."> ... </a></li>
</ul>
●
Be smart with your CSS
●
Use semantic structure to your advantage

Divitis – everything in neatly labelled boxes
<div id="header">
<h1>Patrick's rants</h1>
</div>
<div id="navigation">
<ul>...</ul>
</div>
<div id="footer">
<p>©2007 ... </p>
</div>

Divitis – cured
<h1 id="header">Patrick's rants</h1>
<ul id="navigation">...</ul>
<p id="footer">©2007 ... </p>
●
Knowledge about your content to simplify markup.
●
Not easy with generic template/CMS?

Tables?
“I've just learnt web standards and removed all tables
from my site...”

Tables (faked)
Misguided zealots go too far...
<div>
<div>
<span>First name</span>
<span>Last name</span>
</div>
<div>
<span>Patrick</span>
<span>Lauke</span>
</div>
...
</div>

Tables!
Not all tables are evil...
●
Tabular content (Excel spreadsheet)
●
Best way to define relationship
●
Accessibility

Explicit semantics of tables
<table>
<tr>
<td>Name</td>
<td>Phone</td>
<td>Email</td>
</tr>
<tr>
<td>Patrick H. Lauke</td>
<td>0161 2954779</td>
<td>p.h.lauke@salford.ac.uk</td>
</tr>
...
</table>

<table>
<tr>
<th scope="col">Name</th>
<th scope="col">Phone</th>
<th scope="col">Email</th>
</tr>
<tr>
<th scope="row">Patrick H. Lauke</th>
<td>0161 2954779</td>
</tr>
...
</table>

<table>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Phone</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Patrick H. Lauke</td>
<td>0161 2954779</td>
</tr>
...
</tbody>

Explicit semantics and styling
With thead/tbody easy to nicely style table
thead { background-color: #444; color: #fff; }

Style th differently in table body
tbody th { font-weight: normal;
text-align: left;
}

Underline each row
table { border-collapse: collapse; }
text-align: left;
}
tbody tr th,
tbody tr td { border-bottom: 1px #444 solid; }

Headless table
thead { position: absolute; top: 0; left: -999em;
}
text-align: left;
}
tbody tr th,
...but IE doesn't like that...

Headless table (even in IE)
thead,
thead tr { position: absolute; top: 0; left:
-999em; }
text-align: left;
}
tbody tr th,

“Fluff” images
Accessibility and ALT attributes:
●
Convey purpose/meaning of images
●
alt="" (null alt) if only decorative

“Fluff” images
<p class="warning">
<img src="warn.gif" ... alt="" />
<strong>Error: no entry found</strong>
</p>
p.warning { padding: 10px;
border: 1px #000 solid;
}

“Fluff” images via CSS
If only decorative...
●
Decorative = presentation
●
Add images as non-repeating CSS backgrounds

“Fluff” images
<p class="warning">
</p>
p.warning { padding: 10px;
background: url(warn.gif)
no-repeat left top;
}

“Fluff” images
<p class="warning">
</p>
p.warning { padding: 10px 10px 10px 50px;
no-repeat 10px center;
}

“Fluff” images
<p class="warning">
</p>
p.warning { padding: 10px 10px 10px 50px;
no-repeat 10px center;
min-height: 30px;
}

“Fluff” images
Also works for inline elements
<p>See our <a href=""><img src="qt.gif" alt=""
... /> quicktime video</a> for more
information.</p>

“Fluff” images
<p>See our <a href="" class="qt">quicktime
video</a> for more information.</p>
a.qt { background: url(qt.gif)
no-repeat left center;
padding-left: 50px;
}
Beware of line-height, min-height won't work

Softening up boxes
Same principle, but for different purpose (“rounded
boxes”)
<blockquote><p>...</p></blockquote>
blockquote { color: #fff;
background-color: #73aeb5;
}

Softening up boxes
Apply image flush to corner
background: #73aeb5 url(corner.gif)
no-repeat left top;
}

Softening up boxes
More padding
background: #73aeb5 url(corner.gif)
no-repeat left top;
padding: 20px;
}

Softening up boxes
Changing box colour
background: #f77921 url(corner.gif)
no-repeat left top;
padding: 20px;
}

Softening up boxes
Naïve approach
blockquote { padding: 10px 20px 40px 20px;
width: 210px;
color: #333;
background: url(bigquote.gif)
no-repeat left top;
}

Softening up boxes
“Sliding doors”
blockquote { padding: 10px 20px 40px 20px;
width: 210px;
color: #333;
background: url(quote-top.gif)
no-repeat left top;
}
blockquote p { background: url(quote-bottom.gif)
no-repeat left bottom;
}

Softening up boxes
blockquote { padding: 20px 0 0 0;
width: 210px;
color: #333;
background: url(quote-top.gif)
no-repeat left top;
}
blockquote p { padding: 0 20px 80px 20px;
background: url(quote-bottom.gif)
no-repeat left bottom;
}

Image replacement
Images used for headings etc
●
Branding
●
“Fancy” font
●
Graphical buttons
<h1><img src="heading.gif" alt="..." /></h1>

Image replacement
Potential issues?
●
Accessibility (zoom)
●
Multiple devices
●
Images off

Image replacement
●
Mark up text version (proper semantics)
●
Hide this text
●
Put an image in its place

Image replacement
Wrap text in a span, apply background image
<h1><span>Heading</span></h1>
h1 { width: 350px; height: 75px;
padding: 0;
background: url(heading.gif)
no-repeat left top;
}

Image replacement
Hide the span
<h1><span>Heading</span></h1>
h1 { width: 350px; height: 75px;
padding: 0;
background: url(heading.gif)
no-repeat left top;
}
h1 span { display: block; position: absolute;
top: 0; left: -999em;
}

Image replacement
Taking it further: more than just a heading
<div id="header">
<h1>Heading</h1>
<h2>Subheading</h2> ...
</div>
#header * { display: block; position: absolute;
}
#header { ... }

Image replacement (eXtreme)
Too far? Whole page replaced...
<body>
<h1>Heading</h1>
<h2>Subheading</h2> ...
</body>
body * { ... }
body { ... }

Image replacement issues
From accessibility point of view:
●
Images off / CSS on
●
Text resizing / zoom
Multiple (unskilled/WYSIWYG) authors?
Backgrounds don't normally print

Image replacement trick?
Replacing an image with another image
<h1><img src="logo_bw.png" ... /></h1>
@media screen {
h1 { ...
background: url(logo_colour.jpg)
...
}
h1 img { ... /* off left */ ... }
}
Black/white logo for print, colour for on-screen

Forms
●
Traditionally laid out in tables
●
Semantic “grey area”

Forms
Accessibility considerations:
●
Form controls need associated label
●
Grouping related controls
●
Logical order

Forms – associating labels
Implicit:
<label>First name: <input type="text"
name="fname" /></label>
Explicit:
<label for="fname_id">First name:</label>
<input type="text" name="fname" id="fname_id" />

Forms – associating labels
“Belt & braces”
<label for="fname_id">First name:
<input type="text" name="fname" id="fname_id" />
</label>

Forms – “built-in” labels
<input type="submit" value="Send application" />

Forms – grouping related controls
<p>What's your favourite colour?</p>
<label for="col_r">
<input type="radio" name="col" id="col_r"
value="red" /> Red</label>
<label for="col_g">
<input type="radio" name="col" id="col_g"
value="green" /> Green</label>
Radio buttons, checkboxes, form sections

<fieldset>
<legend>What's your favourite colour?</legend>
<label for="col_r">
<input type="radio" name="col" id="col_r"
value="red" /> Red</label>
<label for="col_g">
<input type="radio" name="col" id="col_g"
value="green" /> Green</label>
</fieldset>

<fieldset>
<legend>Billing address</legend>
...
</fieldset>
<fieldset>
<legend>Shipping address</legend>
...
</fieldset>

Forms – basic styling
<form ...>
<label>...</label>
<input />
<label>...</label>
<input />
<label>...</label>
<select> ... </select>
<input type="submit" ... />
</form>
label, input, select { display: block; }

<form ...>
<input /></div>
<input /></div>
</form>
div input, div select { float: right; }

<form ...>
<input /></div>
<input /></div>
</form>
div label { float: left; }

<form ...>
<input /></div>
<input /></div>
</form>
div label { float: left; clear: both; }

<form ...>
<input /></div>
<input /></div>
</form>
div { height: 1.3em; }
div label { float: left; clear: both; }

<form ...>
<input /></div>
<input /></div>
</form>
div { height: 1.3em; }
div input,
div select { position: absolute;
top: 0; left: 7em;
}

<form ...>
<input /></div>
<input /></div>
</form>
div { height: 1.3em; position: relative; }
div input,
top: 0; left: 7em;
}

<form ...>
...
<div><input type="checkbox" ... />
<label>...</label></div>
...
</form>
div input,
top: 0; left: 7em;
}

<form ...>
...
<div class="check"><input type="checkbox" ...
/>
<label>...</label></div>
...
</form>
div input,
top: 0; left: 7em;
}
div.check input { position: relative; left: 0; }

<form ...>
<label> ... <input /></label>
<label> ... <input /></label>
<label> ... <select> ... </select> </label>
<label class="check"><input /> ... </label>
</form>
label { height: 1.3em; position: relative; }
label input,
label select { position: absolute;
top: 0; left: 7em;
}
label.check input { position: relative;
left: 0;
}

Forms – basic required fields
<form ...>
...
<label class="req"> ...<span>(required)</span>
<input /></label>
...
</form>
...
label.req span { position: absolute;
}
label.req { color: #f00; font-weight: bold; }

Layout
●
Most complex part of CSS
●
Look at a micro-layout for general technique

Layout
Look at a micro-layout for general technique:
<div class="example">
<img ... />
<p>Image caption</p>
...
Main body of text
...
</div>
div.example { background-color: #fff9b2;
padding: 20px;
}

Layout
padding: 20px 20px 20px 340px;
position: relative;
}
div.capimage p { font-size: 0.6em;
font-weight: bold;
}
div.capimage { position: absolute;
top: 20px; left: 20px;
}

Layout
padding: 20px 340px 20px 20px;
position: relative;
}
div.capimage p { font-size: 0.6em;
font-weight: bold;
}
div.capimage { position: absolute;
top: 20px; right: 20px;
}

Hurdles to adoption
What's holding web standards and CSS back?

Hurdles to adoption
●
Requires technical mind with aesthetic sensibility

Hurdles to adoption
●
Designers don't understand the web

Hurdles to adoption
●
Developers don't understand the web

Hurdles to adoption
●
Old dogs and new tricks

Hurdles to adoption
●
Difficult to get robust, general techniques

Hurdles to adoption
●
Tools getting better, but still far off

Doing it in style - creating beautiful sites, the web standards way / WebDD / Reading / 3 February 2007

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Doing it in style - creating beautiful sites, the web standards way / WebDD / Reading / 3 February 2007

Ähnlich wie Doing it in style - creating beautiful sites, the web standards way / WebDD / Reading / 3 February 2007 (20)

Mehr von Patrick Lauke

Mehr von Patrick Lauke (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Doing it in style - creating beautiful sites, the web standards way / WebDD / Reading / 3 February 2007