Aspects of Web Design Introducing Web Standards

1
Aspects of Web DesignIntroducing Web Standards
2
introduction to web standards

• Why are standards important?
• Which standards should I use?
• Evolution of markup languages
• Practical considerations
• Subverting the standards
• Further resources

3
why are standards important?

• The Web is founded on a standard (X)HTML
• Allows many different browsers to display the
  same document
• Allows that document to be displayed on many
  different devices (from widescreen monitors to
  mobile phones to the printed page)
• Allows a document to display without reference to
  the display device or computer architecture
• Without standards, we would have to write
  different material for different browsers/devices

4
why are standards important?

• The current browser landscape is chaotic
• Many browsers with many different interpretations
  of how (X)HTML should display
• Many bugs and incomplete implementations give
  unreliable display in some cases
• Unreliable display means a difficult job for the
  designer
• But better standards are gradually taking force

5
which standards should I use

• Current standards recommended by W3C
• HTML 4.01
• Retained for use in legacy applications
• Newer XHTML standards were built on the basis of
  this HTML version
• Written in SGML, a now outdated metalanguage
• XHTML 1.0
• The currently recommended language for all new
  markup
• Moves towards the goal of separating content from
  presentation
• An XML application

6
the XHTML 1.0 standard

• Three flavours
• XHTML 1.0 Strict
• Defines a document content and structure only
• Completely free of presentation and layout
• More machine readable, and less tolerant of
  markup errors
• XHTML 1.0 Transitional
• Relaxes the strict definition to cope with older
  markup
• Easy to convert HTML 4.01 to this standard
• Some presentational aspects allowed in the markup
• XHTML 1.0 Frameset
• Used to create documents which partition the
  window into frames
• Generally to be avoided due to usability problems

7
HTML vs. Strict vs. transitional examples

• The ltfontgt element
• Considered to be presentational HTML
• CSS rules created to handle font properties
• Removed from XHTML
• The target___ attribute on ltagt
• Considered part of the behaviour layer
• Removed from XHTML 1.0 Strict
• Now implemented in Javascript, or possibly CSS3

8
XHTML 1.1 and beyond

• XHTML 1.1 is a W3C Working Draft
• Features and syntax are under discussion
• Will evolve into the next recommended standard
• Essentially similar to XHTML 1.0
• Main change is modularization, which allows
  authors to customise the standard more easily
• Leads into XHTML 2.0
• Also in early Working Draft status
• Extends support for non-Western languages, new
  media types, etc.

9
CSS Standards

• Newer family of standards
• Still has unreliable implementation
• CSS Level 1
• Basic CSS rules and syntax
• Largely well-implemented in browsers
• CSS Level 2.1
• More complex rules, selectors and
  pseudo-selectors
• Support much less reliable
• CSS Level 3
• Under development

10
how markup languages evolve

• (X)HTML family are controlled by W3C
• Consortium of experts creating language
  definitions
• Democratic and open development and discussion
• Not controlled by any one manufacturer or
  corporation
• Clear roadmap for new standards
• Working Drafts
• Candidate Recommendations
• Recommendations
• Other standards have similar evolutionary paths

11
practical considerations

• Stricter, standardised markup should mean more
  reliable presentation
• Learn how the browser behaves
• Modern browsers detect the type and quality of
  your markup
• Modern markup will be handled more strictly and
  reliably
• Older or sloppier markup will be displayed
  differently
• Try to keep to standards to future-proof your
  site
• Adapt to new standards as they gain recognition
• Understand your target audience
• E.g. http//www.google.com/analytics/
• Validate!

12
standards and quirks

• Most modern browsers have two modes
• Quirks mode
• Many websites would break if CSS was interpreted
  correctly
• Where older markup is detected, this mode is
  switched on
• Renders older markup correctly by emulating older
  browsers
• Standards mode
• Assumes good quality markup
• Interprets the CSS (almost) as per the standards

13
standards vs. quirks mode
Source http//www.ericmeyeroncss.com/bonus/render
-mode.html
14
using doctype switching

• Controlling Quirks mode with a lt!DOCTYPE gt
• Declaring the standard as XHTML 1.0 Strict will
  turn off Quirks mode
• Declaring Transitional will usually turn it on
• For a full discussion on this, see Eric Meyer's
  page on rendering modes, and the material at
  quirksmode.org.

lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xh
tml1-strict.dtd"gt
15
subverting the standards

• Browser-specific issues
• Differences in rendering implementation
• Incomplete implementation of the standards
• Different interpretations of the standards
• All lead to problems for the web designer
• Do you design for a lowest common denominator?
• Or stick to standards and wait for browsers to
  catch up?
• Or design differently for specific browsers,
  using hacks?

16
hacks

• Using differences of interpretation to detect
  the browser
• Mostly based on tricking the browser to ignore
  certain styles or markup
• Often very complex and opaque - i.e. not
  logical or obvious
• Mostly dont make sense if the standards are
  correctly implemented
• Hacks are an interim solution to lax standards

17
hacks simple examples

• Use of HTML comment to hide CSS from early
  Netscape versions
• Use of _at_import rather than ltlinkgt to hide CSS
  from NS4
• Use of conditional comments for IE5

ltstyle typetext/cssgt lt!-- CSS
commands --gtlt/stylegt
ltstyle typetext/cssgt _at_import
url(ie-only.css) lt/stylegt
ltpgtThe following will only appear in IE5lt!--if
gte IE 5gtltbr/gtIt works!lt!endif--gtlt/pgt
18
hacks the box model problem

• Problems with IE5s rendering of CSS boxes
  created problems for designers
• Border and padding widths subtracted from
  overall width
• Standards say should be additive

 div     width 100px    padding
10px    border 10px solid 000  
19
hacks the box model solution?

• Bugs in IE5s CSS implementation used to create
  IE-specific CSS rules
• In the example, a bug prevents IE from reading
  any rules after the voice-family rules
• IE will select a width of 400px
• Other browsers use 300px
• http//www.tantek.com/CSS/Examples/boxmodelhack.ht
  ml

div.content width400px voice-family
"\"\"" voice-familyinherit width300px

20
hacks should they be used?

• In general, hacks are a bad idea because
• Browser implementations can change
• There are often unpredictable side-effects
• Theres no encouragement for the browser
  manufacturers to fix bugs or follow standards
  more closely
• Its not obvious what they achieve
• Its much more work for the designer in the long
  run!
• Most problems can be avoided within the
  standards

21
hacks when can they be useful?

• There are times when hacks can be used
• If an older browser is popular amongst your
  target audience
• If there is a specific issue in a browser which
  is difficult to deal with in any other way
• And times when they should never be used
• Never to cope with new browser features
• Never to get a quick fix without examining the
  standards
• Never if you can possibly do things another way!

22
hacks summary

• There are many discussions on browser-specific
  features, hacks and bugs
• Almost all should be avoided if possible

23
further resources

• Cederholm (2004) Web Standards Solutions
• a practical guide to designing within the
  XHTML/CSS standards
• webstandards.org
• A campaigning website monitoring standards and
  browser implementations
• Sitepoint CSS Reference
• http//reference.sitepoint.com/css
• And especially all the standards linked to
  previously at http//www.w3.org/!