New Way

CSS

Cascading Stylesheets are a language for providing formatting information for HTML documents.

CSS allows a seperation of content and style, which gives certain benefits:

• The style remains consistent over the whole site, automatically. Changing the styles automatically affects all pages.
• No presentational information is left in the content. It's easier to maintain, and moreover search engines and screen readers get to see what your pages mean, not what they look like.
• The style information is downloaded once per site, so it's much faster than when the style information is encoded in each page
• Different style sheets can be provided for different media so the content can be adapted to best suit each medium.
• Graceful degradation (to an extent). Viewed without browser CSS support, the page content is still ordered and legible. (Problems only occur in browsers with partial or broken support.)

XSL and XML

CSS doesn't provide sufficient power for complete theming. To a certain extent you can replace the stylesheets and change the presentation of information, but some presentational information is still encoded in the HTML web page. Most notably, the order of the content is encoded in the HTML, which doesn't always make sense (should a menu come before the prose or afterwards?)

Creating documents in a completely presentation-neutral language called XML and transforming it into HTML with XSL (all W3C standards) provides that flexibility.

• Content generation remains consistent throughout the site.
• Even less information is sent to the browser per-page (if the browser supports XSL)
• Exchange XSL for completely flexible theming.
• Impose rules and data structures to make creating the content easier.
• Removes the maintainability barrier to creating extremely complex and attractive page styles and layouts

Server-side processing

When producing interactive content, there is a choice between server-side and client-side processing. Server-side means that the server is programmed to do the processing; client-side means that some form of program is sent to the web browser and run there. Client-side programming requires support within the browser for executing the type of code you send it; server-side code is inherently request-driven which means that less interactivity is possible.

Server-side processing guarantees accessibility by browsers which don't support any form of client-side code. Dependence on client-side code can mean that your site is inaccessible to those whose browsers don't support the client-side language you use and those who choose to disable client-side code.

• Can be combined with client-side code when applicable to produce the best of both worlds.
• Guaranteed accessibility by using only HTML, the basic language of the web.
• Server-side applications can be very large and complex; client-side code must be entirely transferred to the client, and is therefore best used for simpler improvements to web applications.
• Graceful degradation: if client-side processing is unavailable, the application still works.

AJAX & modern client-side utilities

Server-side processing is vital to almost all web applications. However, we are increasingly able to improve the web experience by the addition of client-side processing on top of server-driven applications.

This empowers us to deliver more easy-to-use, more interactive sites and smaller page load times through to vastly better ways of interacting with visitors and delivering and receiving information.

Historically, the use of extensive client-side scripting has been largely overlooked by the professional web development community because of certain specific omissions from the client-side platforms which would have made these approaches unworkable. These problems are now, for the most part, rectified.

• Page load times are reduced because client-side code can request only the data it requires.
• Allows web pages to break out of the request-driven limitations of server-only applications.
• Allows for glossy, dynamic interactivity without compromising accessibility (unlike technologies such as Flash).
• Graceful degradation: we implement client-side scripts nly as a utility. Our applications are not dependent on users being able to run the scripts.

Old Way

Tables for layout

Tables are grid-like structures originally intended for tabular data. However a lack of powerful formatting tools combined with quite a lot of flexibility in table markup meant that tables were widely adopted for layout purposes.

• Tables are not a linear format and so are hard to turn into a single script for reading by text-to-speech software (the kind of thing Stephen Hawking uses to speak).
• They are also problematic for printing because the web browser can't reflow them for an A4 page.

Transparent images for layout

Tables give the browser a lot of flexibility as to how to render content. Some web developers sought to impose more rigidity by using transparent images which don't show up but do affect layout by padding out certain distances and so on.

• Impacts the content of the page. On some sites a screen reader might keep saying "Image, Image, Image" because it can't distinguish the image as presentation rather than content.
• Adds to the file size of the web pages and therefore increases download time. A single line of CSS can replace hundreds of such images.

Font Tags

Font tags and similar presentational markup was introduced by Netscape into HTML to allow for different font sizes and colours.

• To change the colour of a site's text, every font tag on the site must be changed (there are sometimes thousands). With CSS it can be changed in one place.
• Add to the file size of the web page.

Marquees, Blink Tags and Animation

All of the above forms of animation are heavily distracting. Some can reduce accessibility or in rare cases trigger epileptic fits in epileptics.

Macromedia Flash

Flash is a technology for embedding animated vector graphic in webpages. Flash does look very good, but that won't be a comfort to visually impaired visitors!

Flash can't be fully replaced by accessible techniques at the moment but there is hope that SVG might one day provide a similar technology without the accessibility problems.

There is no standards procedure for Flash: it is controlled by Adobe. There is one tool for creating Flash. Open standards might expect thousand of tools, generating a lot more power for developers like us. There is a lot more potential with SVG, so there are ideological reasons for us to avoid Flash as much as possible.

• In most scenarios, glossy Flash animations won't actually have any effect on sales, yet they cost more to create and maintain. The numbers don't work!
• Totally inaccessible. The content is locked into the Flash file and cannot be interpreted by the browser. This means that visually impaired people will be left in the cold.
• Slow to download. Flash files are large and are usually loaded completely before being played. This can mean several seconds or even a few minutes before users can navigate a site.
• Slow to navigate. Many animators put glossy fades and animations between pages. Many visitors will give up and try some other site to get the information they need.
• Unfamiliar user interfaces. Experience shows visitors find many Flash interfaces harder to use than the normal web browser's interface, which they are used to.

Framesets

Framesets are the HTML technique used to divide the browser's page area into seperate rectangles, with a different page displayed in each. Many sites use framesets to separate navigation pages from content, such that the navigation is kept on-screen at all times. This is largely a hallmark of sites which don't accomodate server-side processing. With a tiny amount of processing, navigation and titles can be incorporated into every page, which provides significant advantages over the frameset technique.

• Frames hinder accessibility. Frames are purely visual and so translate poorly to screen reader for the blind, etc.
• Search engines index content and navigation pages separately, so visitors browsing search results may not find the rest of your site.
• Frames are always rectangular - more attractive layouts can be accomplished if frames are avoided.
• Frames produce confusing behaviour with the back button and bookmarking/favourites features of nearly all web browsers. If people fail to return to the page they had bookmarked, they will likely remove your site from their bookmarks/favourites.
• Advantages to frames, such as smaller page sizes and static layouts, are for the most part replaced by newer techniques such as gzip compression and newer CSS properties, which have fewer disadvantages.