Tuesday, 13 May 2008
Web Site Coding Standards
Pure CSS or Hybrid?
CSS can replace verbose HTML code formerly used to define web pages' layout. This results in greater separation of content from markup code, and typically makes development and maintenance more efficient and affordable.
What is CSS?
"Cascading Stylesheets"
Cascading Stylesheets (CSS) can be used to define the style and presentation of web documents. It was formalized as a W3C recommendation in 1996, when it faced short-lived resistance from developers and site owners because of poor support for it in the web browsers of the time. Today, though, most web browsers comply to a great degree with CSS specifications.
For many web sites, the adoption of CSS lightens the byte-load (of the pages we've sampled) by about one-third to one-half. Client-side executable code can be reduced; it and even some server-side scripts may have fewer branches and therefore execute faster.
Some developers, including External Design, sometimes use CSS as a replacement for common Javascript functions. Most notably at the time of this writing, CSS pseudo-elements are being used for some image swaps; this reduces the need for Javascript arrays and scripts. It is executed by compiled browser code rather than by a run-time script interpreter. It also implicitly encourages web designers to account for global user-interface states — e.g., a image's latent state plus the :hover and :active pseudo-elements; and a link's optional :before and :after elements — thereby satisfying users' unconscious expectations of the user interface.
CSS was never intended to replace appropriate Javascript effects, though, and tabular data still may be best represented using HTML tables. But CSS offers a streamlined alternative to older, code-heavy sites. In general, a CSS site:
- requires less code, downloads faster
- may render faster in the browser
- can eliminate some Javascript, effects may execute faster
- simplifies updates and maintaintenance of both content and code
- adapts more easily for display on PDAs, mobile phones and other devices
Not all browsers adopt CSS consistently, but all major browsers' current versions offer good support of HTML 4, XHTML 1 and most of CSS 2. Some inconsistencies remain but in most cases fixes are simple.
Progressive Enhancement and Older Browsers
Certain sites may be mandated or find it cost-efficient (due to ROI) to support very old browsers, which we may informally refer to collectively as "Netscape 4 and earlier" (NN4) or "Internet Explorer 5" (IE5). Even such browsers can benefit from a carefully coded, pure CSS site's content.
In earlier years, designers treated older browsers with the design principle known as "graceful degradation" — many page elements would not work or look good, but the content would remain accessible. The oft-unspoken presumption was that users of older browsers were used to seeing a poor version of most sites, so a poor rendering would not reflect poorly on the site in their eyes.
At this writing users of minority browsers, including NN4 or IE5 or earlier, account for a very small percentage of most sites' visitors, often less than 2%. Design philosophy has moved from the days of graceful degradation to the new "progressive enhancement" ideal, which presents a well-designed web page even to today's less-capable browsers but with additional aspects for browsers with more-accurately implemented CSS or that have adopted newer standards.
The fact remains that supporting older browsers requires additional design forethought and coding considerations, and may add to the development time. Site owners should evaluate the importance of support for very old browsers, and be aware of all the tradeoffs and foreseeable consequences before including them in the list of browsers to be supported by a new web site design.
HTML and XHTML
In general, we adhere to standard XHTML 1.0 coding standards, another activity of the W3C. Used with CSS, this can allow web pages to be designed for appropriate display on platforms like mobile phones, PDAs, dashboard devices and specialized browser clients for the visually and physically impaired. (As a very minor example, some pages of this site do not display certain elements when printed.) This site does not yet make full use of alternate media (e.g., for Palms and other handhelds), but adoption of the CSS and XHTML web coding standards makes it more likely to be achieved with minimal effort when it becomes useful to our business.
Adhering to web coding standards now makes it less likely to encounter cross-browser incompatibilities during development and thereby makes many projects more affordable. It also increases a site's likelihood of seamless transition to future browser releases.
To Validate or Not To Validate?
Online validators provided by the W3C, and validation extensions to some browsers, make it easy to test whether a page's code conforms to the standards. Is it necessary to validate your site's code? In general, no. Is it a good idea? Usually. Canny developers will use validators intelligently and, if it is appropriate and acceptable, may publish a well-tested web page whose code does not pass validation. They will be aware of the tradeoffs and act thoughtfully.
The External Design Approach
Our work focuses on getting good results for our client, including the client site's equivalent look and functionality across computer platforms and browsers. We look at how many of a current site's visitors are users of old browsers. The client often can infer what percentage of those visitors convert to meaningful contacts or sales.
We consult with clients on how backward-compatible their sites need to be to achieve their business goals. In most cases, we now advocate a CSS approach. Tables may be used, but to a lesser degree and as tables in general are intended (for tabular data); inline style tags are more sparse and succinct.
Rationale
The XHTML and CSS standards improve accessibility and enable more-consistent, reliable performance from web browsers. They streamline the code, in the hands of experienced developers, thus reducing bandwidth and improving both developer and user experience. They also simplify content integration and site maintenance, and are more likely to be compatible with future browser releases. Dynamic content is more easily served because its markup can be free of hand-coded style overrides.
In a Perfect World...
We prefer to keep our sites free of workarounds that fix obscure rendering issues in specific browsers. But even some major browsers have CSS bugs, and some businesses must support users of older browsers.
The terrain is not as rocky as it once was, but it's still possible to stumble. We work with each client to define the business at hand, and then adopt appropriate technical approaches to ensure a smooth development process and a reliable, effective result.
To offer feedback, please use our contact form.
custom web site designers
Soothe the savage beast with 