Folie 1

1
(No Transcript)
2
Thinking in CSS

• How to Build Great Looking Sites

3
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!

4
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

5
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/2040
55320/
6
Out of the Sixties

• The webs 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 border0
• 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
8
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
• Todays tools are far more standards aware -
  Expression, Visual Studio all contain
  standards-oriented tools

Photo credit http//flickr.com/photos/doeth/25505
3686/
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

9
10
Benefits of Standards

• Why we care . . .

10
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

11
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

12
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

13
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

14
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

15
16
Critical Knowledge Areas

• Avoiding Pitfalls When Using Standards

16
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!

17
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

18
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

19
20
The Cascade Application hierarchy in CSS

• The cascade determines how CSS is applied
• By type of style sheet
• Inline
• Embedded
• Linked
• By source order

21
Document tree
22
CSS2 and CSS2.1 specificity clarified

• http//www.molly.com/2005/10/06/css2-and-css21-spe
  cificity-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

23
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

24
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

25
CSS and Cross-Browser DesignMaking sites
interoperable across browsers

• Choices for managing browsers
• Hacks and workarounds
• Conditional comments
• Dean Edwards IE7 Scripts http//dean.edwards.na
  me/IE7/

26
Rediscovering True DesignShifting to modern
processes

• Contemporary methods and techniques
• Improved typography
• Imaginative imagery
• New opportunities to break out of boxy, limited
  design

27
(No Transcript)
28
(No Transcript)
29
(No Transcript)
30
(No Transcript)
31
Expression Helps!

• Features within Expression Web Related to
  Standards

31
32
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

33
Style Checks

• Great tools built right in
• Check for orphaned rules
• Get a breakdown of where a pages acting rules
  are located

34
Instant Validation

• Its 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

35
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, its a
  snap!
• Code is highlighted as well

36
Style Creation

• New styles made easy
• Dialogs preview style changes for you
• Some provide handy references!
• Properties grouped into logical topics
• Granted, theres a lot to deal with here, but
  thats CSS for you

37
Accessibility Checks

• Give yourself a head start on accessibility
• Set up a report and get explanations

38
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!

39
Questions Answers
40
(No Transcript)