Download Folie 1

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
Photo credit: http://flickr.com/photos/zerega/204055320/

So what standards are
important?

(X)HTML, XML, CSS,
ECMAscript, DOM

Also GIF, JPG, PNG, MP3…
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
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
7
Difficult Tools
Photo credit: http://flickr.com/photos/doeth/255053686/

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
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
9
Benefits of Standards
Why we care . . .
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
11
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
12
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
13
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
14
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
15
Critical Knowledge Areas
Avoiding Pitfalls When Using Standards
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!
17
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
18
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
19
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 Box
Understanding 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 Layout
Present 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 Design
Making 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 Design
Shifting 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…
Accessibility Checks

Give yourself a head start on
accessibility

Set up a report and get
explanations
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