Controlling HTML and CSS

Diona Kidd

Introduction

Challenge & Solutions

Best practices

WebGUI specifics

Resources & Tools

ChallengesSite growth

Unintended CSS inheritance

Browser bugs & hacks

Multiple developers

Deprecated styles

Without careful thought,you have a...

Spaghetti SiteDevelopers dread working

Fixing one thing breaks more things

Technical debt

Redesign is imminent

How do we gain control?

Thoughtful Design

Design for reuse (template design)

Follow design patterns (consistancy)

Implement using best practices

HTML Semantics

Semantics - the study of meaning

Communicate structure & purpose

Used with tags, ids and classes

Will extend markup vocabulary

<p class=”header”>some title</p>

<h1>some title</h1>

Optimization

Remove unused styles

Leverage CSS inheritance

Minimize http requests

<div id="stuff"><h1 class="red">Big Title<h1></div>

<div id="stuff"><h1>Big Title<h1><div>

#stuff h1 { color: red; }

Leverage CSS Inheritance

Make reusable general Classes

Use multiple classes

Combined ID’s and classes

<div class=”column first”><div class=”column”><div class=”column last” id=”sidebar”>

Design for Standards

Design for standards first

Target IE browsers by version using Conditional Comments

<!--[if IE 6]><link rel=”stylesheet” href=”ie6.css” /><![endif]-->

Best Practices

Implement Web StandardsImplement for Standards first, hack later

Use semantic markup

Extend your markup vocabulary

Validate your markup and CSS

Validate HTML & CSS

Catches errors

Helpful in debugging

Available @ W3C.org

Avoid “Tag-Soup”

Malformed HTML tags

Improperly-nested HTML elements

Unescaped character entities

Disregard for semantics

1. <div style="background: transparent; border: 1px #000000 none; float: none; margin: 0px; vertical-align: top; height: 41px; left: 40px; position: absolute; top: 61px; width: 620px; z-index: 1; " id="id3"><div><div><div style="margin: 4px; "><div class="paragraph Date" style="line-height: 34px; padding-bottom: 0pt; padding-top: 0pt; ">Wednesday, January 11, 2006</div> 2. </div> 3. </div> 4. </div> 5. </div>

Wow! Impressive.

Most Abused XHTML

divs, span, table

1. <div style="background: transparent; border: 1px #000000 none; float: none; margin: 0px; vertical-align: top; height: 41px; left: 40px; position: absolute; top: 61px; width: 620px; z-index: 1; " id="id3"><div><div><div style="margin: 4px; "><div class="paragraph Date" style="line-height: 34px; padding-bottom: 0pt; padding-top: 0pt; ">Wednesday, January 11, 2006</div> 2. </div> 3. </div> 4. </div> 5. </div>

1. <span id=”date”><p>Wednesday, January 11, 2006</p></span>

Tag Soup

Useful XHTML Tags

fieldset, legend, label

th

dd, dl, dt (definition lists)

code, abbr, address, q, cite, em

Many others...

Avoid inline stylesDifficult to debug

Overrides stylesheets

Bad practice

Organize StylesheetsGeneral Layout specific stylesheet

Browser specific stylesheets

Site section stylesheets

Browser hacks

Organize Styles

Group general, global styles (h1, h2, p)

Group related styles (header and header elements)

Comment Style sections

Use Code CommentsWhat div is being closed?

What is the style used for?

What problem is being addressed?

Best Practices Summary

Semantics

Web Standards & Validation

Leverage CSS Inheritance

Avoid inline styles

Organize & Comment

Real-World Example

Markup

CSS (layout.css)

WebGUI Specifics

Prototype

Prototype static HTML/CSS

Browser debugging

Use ‘media’ folder for images in markup

Style & Page Layout

Style Template contains global elements (header, footer)

Page Layout is specific to layout (1 column, 2 over 1, etc.)

Clarify separation

Copy Default Templates

Upgrades can overwrite default templates

Protect customizations

Great ‘starting place’ for customization

Real-World Example #1

Organize TemplatesCreate a template folder

Copy default templates to template folder

Organize by asset type

Real-World Example #2

Themes

Style that can be applied site-wide

Imported as a package

Theme Folder

Contains CSS, JS, Templates, navigation objects

Templates Folder

Organized by asset type

Copy default templates

Avoid Extra Header TagsOr use sparingly.

Assets are combined to render page

Hard to locate items placed in extra headers without comments

Tools & Resources

Style Guides

Great communication tool

Great deliverable to both managers and clients

Useful planning tool

W3C Validators

Firebug

Inspect elements & edit HTML, CSS and JavaScript

Box Model view

Rulers and guides

Debug and profile JavaScript

Explore the DOM

And more...

Measure-It

Draw ruler to measure width, height and alignment

Color-Zilla

Eye dropper and color picker

Webpage DOM Color Analyzer

Online Palette Viewer

Full Page Zoom

Firebug support - allows opening the selected element in Firebug

YSlow

Analyzes load time

Grades site performance

Grade based on Yahoo’s standards

Dust-me Selectors

Finds unused CSS on a page

Spider sitemaps (HTML or XML)

Save as CSV

CSS Frameworks

BluePrint

Elements

YUI Grid

and others...

Thank you!

Questions? Comments?

Diona Kidd

http://www.knowmad.comdiona@knowmad.com

IRC Nick: dionak

Bonus Slides

CSS Compressors

Optimizes load time

Removes line breaks

Combines stylesheets

Grid-based Layout

Predefined grid used for layout

Applied as background-image on body

Credit: Khoi Vinh

Layout Engines

Trident Internet Explorer 4 - 8

Tasman Internet Explorer 5 for Mac

Gecko Firefox, Galeon, Flock, Epiphany

WebKit Safari, Shiira, iCab 4, Epiphany, Adobe Air

KHTML Konqueror

Presto Opera, Nintendo DS, Internet Channel