Thinking in CSS

How to Build Great Looking Sites

Why Bother?

Standards are the key to free and open communication

Look deeper: standards drive everything online

Better standards support is driving Ajax and Web 2.0 style Web applications

Plus: big, big savings!

Technically Speaking…

The W3C creates specifications & recommendations, not standards

Only a few W3C technologies are actually standardized via ISO & IETF processes

What we refer to as “web standards” are de facto standards

The Cornerstones

So what standards are important?

(X)HTML, XML, CSS, ECMAscript, DOM

Also GIF, JPG, PNG, MP3…

Photo credit: http://flickr.com/photos/zerega/204055320/

Out of the Sixties…

The web’s roots go back 40 years!

HTML came from SGML

SGML also was the parent of XML, which brought XHTML

7

Tables Became the Way to Layout

They were really developed to display data, not design

But then: border=“0”

Grid system for element placement

Designers were able to use the table grid for design

The days of “slice n’ dice” nested table layouts began

Difficult Tools

A broken web was prolonged by site-building tools

Dreamweaver, GoLive, FrontPage, et al made things worse by trying to make things easier

Today’s tools are far more standards aware - Expression, Visual Studio all contain standards-oriented tools

Photo credit: http://flickr.com/photos/doeth/255053686/

9

Enter CSS

CSS 1.0 was published in 1996

IE 3.0 had the first strong implementation of CSS 1

CSS 2.0 was published in 1998

CSS became widely used for fonts and colors

CSS for layout has emerged slowly despite its benefits

Benefits of Standards

Why we care . . .

11

Design Flexibility

More flexible options for imagery

Better typographic control

Flexible and useful layout options

Print options

Alternate device design options via “handheld” and other available media support

12

Easier Site Maintenance

One style sheet, infinite pages

Design changes can be implemented very quickly

With a well structured HTML or XHTML document and CSS, refreshes and redesigns are far easier

13

Better Technical Performance

External style sheets are cached by the browser

Use of intelligent markup and best practices can reduce file sizes to 50% or less than those using presentational HTML, inline and/or embedded scripts and style

This allows documents to load more quickly

The user has a more seamless, improved experience

14

Return on Investment (ROI)

Semantic documents are smaller in size

Delivery of smaller documents and the caching factor of external style sheets demands far less from servers

Well optimized sites result in reduced HTTP requests

Well optimized sites also result in significant reduction of bandwidth

This can turn into real dollar savings, particularly for highly trafficked web sites

15

Standards in the Workflow

Meaningful markup +

CSS for visual wireframing +

Scripting and interactive media =

Interactive prototypes

Interactive prototypes provide shorter development cycles, reduced stress on designers and developers, and improved ability to demonstrate to clients how sites will actually work

Critical Knowledge Areas

Avoiding Pitfalls When Using Standards

17

Technology for Design - Challenges with CSS Adoption

CSS is a technical and complex language

It was written by technologists, not designers

Terminology in CSS is different than design terminology

No true visual tools for CSS layout

High learning curve

Implementation in browsers/user agents has been an ugly, complex, problematic (insert your feelings here) mess!

18

Meaningful Markup: Structure & Semantics

Effective CSS is an integrated rather than separated technology

Must be applied to documents that are semantic (meaningful)

Must be applied to properly structured documents

Must be applied according to best practices

19

The Holy Trinity of CSS: Cascade, Inheritance, Specificity

Understand the rules of the Cascade

Understand Inheritance (based on the document tree)

Understand the specificity algorithm

The Cascade: Application hierarchy in CSS

The cascade determines how CSS is applied:

By type of style sheet Inline Embedded Linked

By source order

Document tree

CSS2 and CSS2.1 specificity clarified

http://www.molly.com/2005/10/06/css2-and-css21-specificity-clarified

The final specificity calculations then would be: p = 0, 0, 0, 1 p.warning = 0, 0, 1, 1 #content p.warning = 0, 1, 1, 1

Inside the BoxUnderstanding the box model

Two box models exist: IE proprietary W3C

Managing this via DOCTYPE SWITCHING, hacks and filters is key to consistent x-browser design

CSS LayoutPresent and future

CSS is actually limited in terms of layout:

We use floats, which were never meant for layout

Positioning with CSS is poorly described, but extremely useful

CSS 3.0 proposes a number of different layout and column modules

Implementations will take time

CSS and Cross-Browser DesignMaking sites interoperable across browsers

Choices for managing browsers:

Hacks and workarounds Conditional comments Dean Edward’s IE7 Scripts

http://dean.edwards.name/IE7/

Rediscovering True DesignShifting to modern processes

Contemporary methods and techniques:

Improved typography Imaginative imagery New opportunities to break out of

boxy, limited design

Expression Helps!

Features within Expression Web Related to Standards

Being Compatible

Quick reporting on compatibility

Check against specific markup DTDs

(or let the DOCTYPE be the guide)

Check CSS against W3C standards or browser-specific schema

Style Checks

Great tools built right in

Check for orphaned rules

Get a breakdown of where a page’s acting rules are located

Instant Validation

It’s constantly checking for problems

Unbalanced tags are flagged immediately

More comprehensive reports are a click away

Built-in validation equal to or better than available online tools

Visual Representation

The box model made plain

One of the hardest things to explain to newcomers is how margins work

With the visualization in Expression, it’s a snap!

Code is highlighted as well

Style Creation

New styles made easy

Dialogs preview style changes for you

Some provide handy references!

Properties grouped into logical ‘topics’

Granted, there’s a lot to deal with here, but that’s CSS for you…

Give yourself a head start on accessibility

Set up a report and get explanations

Accessibility Checks

Accessible Reporting

Easy-print reports for later reference

Generate your reports as XHTML documents

Print and check off points as you hit them

You can even style the reports your way!

Questions & Answers