CSS & HTMLCoding Today

Presented by:

Ted Ulle (tedster)Administrator – WebmasterWorld

Senior Search Analyst – Converseon

Senior Editor – Search Engine Marketing Journal

This is the #1

Cutting Edge Approach

Top Secret

It Will Give You a

Major Advantage

AND ALMOST NO ONE DOES IT !

Speed development

You Will…

Send clear signalsto the search engines

Reduce maintenance time

Have Tons More Time to Work on CORE BUSINESS TASKS

RTFM!

HTML

Mstands for

MARK-UP

The DOCUMENT

is assumed to be

The FOUNDATION

NOT! the visible display

Semantic Meaning vs. Visual Rendering

• HTML tags = semantic information

• CSS rules = display information

The Goal:

Lean & Mean HTML

<div id=“content”><h1>Modulation Rules</h1><p>System-wide iteration engenders economies of scale, cross-

media technology and life cycle replication.<img src=“url.jpg” class=“fl”></p>

<p>Enterprise engenderment accelerates initiative platforms, reducing staffing components, integration of technical accessibility, resulting in bottom line pluralisms. Incidental re-sizing staff requirements through attrition can be accelerated by paradigm shifts and a focus on cross-training.</p>

<ol><li>Marketing teams input produce cross purposing</li><li>Goals misalign due to knowledge paucity</li><ol>

<p class=“c b”>Conceptualizing random endpoints in an access matrix provides reach extensions enterprise wide. Respective divisions historically insignificant, upscale trend lines in a management inventory analysis survivability format.</p>

</div>

Under-used CSS

Common elementsdeserve their owndefault style rules!

Not this: <h1 class=“topheader”><span style=“font-weight:normal;

text-align:center;”>text</span></h1>

But this:<h1>text</h1>

Put your rules for h1, p, li etc, in the external CSS file

Multiple class declarations

with a space separator

<p class=“c no sm lg”>

Under-used CSS

What’s the big deal?

CSS Toolkit.c {text-align:center;}

.r {text-align:right;}

.s {font-size:10px;}

.in {margin:0 0 0 30px;}

1. Easier coding on the fly

2. Lower need for new classes

3. Easy team coordination

<p class="r s">Laurie Lipsum</p>

Under-used CSS

line-height

• Space matters a LOT

• “Leading” in print typography

• Set by ratio (1.25) not px or pt

• Improves readability and comprehension

sup {line-height:0}

Abused CSS

Hidden Anchors

Don’t let aesthetics hurt communication

Removing underscores?

Then use redundant link cues:

Color / Background-color

Font variations

Hover behaviour

Links are the CORE of the web –Keep your visitors in touch

<span>

Should be extremely rare

Often exposes weak CSS planning

Should change only PART of a larger containing element

A major culprit in code bloat

Abused CSS

H1, H2 etc

Semantic meaning - not for presentation!

<h2>Buy Now and Save</h2>

Use an “imitation” class for the H2 look

Abused CSS

RTFM!