Web Design Digest – March 2004

This is the March 2004 monthly web design digest I compiled for my team at the Open University (OU). I’m going to be doing one a month and will continue to republish them here as well as on the OU Intranet.

XML based CMS

Adactio’s Jeremy is in the process of developing a content management system that avoids using MySQL and goes stright for XML data storage. Near to what we envisaged here but possibly fully working too. Might be worth following the development of this tool.

“I’m also interested in making the writing process as painless as possible. Tools like Textile go a long way to helping but I have some ideas of my own on ways to enter links and images.”

CSS site: BBC Broadcast

XHTML, CSS design. The CSS doesn’t quite validate due to the opacity on the menus but otherwise a really slick cutting-edge use of decent code.

Using Dreamweaver and CSS

Dreamweaver MX and MX2004 have a handy feature called Design-Time style sheets. We can use this feature to effectively turn off poor implimentations of CSS in the ‘edit’ mode. However, we cannot aply this functionality on a sitewide basis. Rather, we must apply it to each individual file. Dreamweaver then creates a .mno file for each of the files we want to utilise the design-time functionality. It’s not ideal. This post discusses the matter of shortcomings and offers the solution of ‘batch processing’ commands. Not an ideal solution. Hopefully Macromedia will look into this.

Quickly generate a standards based XHTML page with CSS!

This is quite amazing. If you know anybody who wants to create a document for the web then you could do worse than point them here. It’s a form with predefined fields for meta data, layout, links and colours and document structure. Don’t overlook this one!

High Accessibility, High Design

Anyone with good graphic-design skills can use Web standards to produce attractive Web sites that function adequately for nearly all viewers and very well for most viewers – including people with disabilities. This article explores a few details concerning the interplay of accessibility and Web design. The article nicely walks the reader through the past present and future of good design that isn’t inaccessible. Near the bottom of the document you will find links to site which have great designs but are also extremely accessible.

Hi-Fi Design with CSS

A well designed slideshow that details some of the more practicle CSS applications:
easy colour switching as used in Wired.com. Also explores the body class and
ID properties as used in many Learning Design and Technology projects like
Assessment.

Creating structured tables

The article is an easy to follow guide to using the various structural elements of data tables.

Accessible Tabs with CSS

Another presentation on combining structural XHTML with good design using CSS. The accessible popups techniques detailed here are used in Learning design and technology sites such as Employment
Info and T209.

Web design going in the wrong direction?

Is there too much emphasis on standards, css, html etc and not enough on
actual usability? This discussion suggests that the human being on the other
end of the interface is being forgotten. To a large extent I agree and hope
that in this team we accommodate both needs adequately.

Accessible Pop-up Links

Sometimes we have to use pop-ups – so we might as well do them right. This
article will show you how to make them more accessible and reliable while simplifying
their implementation. Learning Design and Technology have been using accessible
pop-ups for sometime now. Whilst it is preferrable not to use them at all,
at times it is unavoidable. To make the process as painless as possible, the
URL of the popup should not be contained within the javascript. Instead, a
traditional link should merely use javascript to invoke the function of launching
a new window.

CSS Sprites: Image
Slicing’s Kiss of Death

There is no longer any need to use an imagemap. Instead, we should use CSS
absolute positioning to to define co-ordinates of hotspots. We then use
background images (or, if neccessary, foreground images) to give the visual
representation to users who can access it. Non-visual and text only browsers
will be provided with textual descriptions where relevant which are then
hidden using your
favourite image replacement technique.

Zebra Tables

Whilst we no longer use tables to layout pages, they are still semantically
correct when used to display data. However, CSS alone will not provide
an easy solution in styling alternate rows with colour (a common usability
feature). The script found in this article enables us to easily create
different styles for even and odd table rows. This means that we don’t
have to manually add the class="odd" and "even" to individual rows. Benefit
to us: Less code, less bandwidth, less work.

A quick and dirty CSS hack: PNG backgrounds

Internet Explorer doesn’t support the alpha transparency layer of the PNG
file format. This means that we can’t realistically use alpha transparency
to overlap layers effectively. We are forced to use GIFs with their index
transparency. The Study
Folder site within LWOU uses this effect in the
header (resize your browser to see the folder move independently of the
background) This article offers one solution to cater for IE. However,
it is work intensive and I suggest that until IE supports the alpha-layer,
we stick to using index transparency (as crude as it may look!). Further
down the line we will be able to alter the CSS to offer a better alpha
transparency version.

10 new ways to speed up download time

We already avoid using tables for layout, call up images using CSS, use
relative call-ups and contextual selectors. Our META tags are also short
and sweet. We also already put our CSS and JavaScript into extenal documents.
We also ensure that a forward slash is at the end of every directory link.
We could probably do with using more CSS shorthand and minimise whitespace,
line breaks and comment tags. All in all we carry out the correct procedures
for speeding up download time.

Designing for dyslexia (part 1)

By following W3C guidelines, we are already doing a great deal for Dyslexic
users. The WAI accessibility guidelines ensure that we meet the requirements
for the web to be accessible to all.

Designing for Dyslexia (part 2)

Part two of an article by Made For All editor, Tim Roberts presenting techniques to make your web documents “Dyslexia Friendly”.

Footers – a discussion

We made the decision to ensure that we have a consistent footer across all
our sites here at Learning Design and Technology. The common elements we decided
upon: A link to top, copyright, privacy policy, disclaimer, accessibility statement,
site map and feedback are all very useful pieces of information and are of
definite benefit to the users. We decided not to put loads of links to other
site sections in the footer as they could soon reduce the usability rather
than imporve it.

IE7

This javascript enables us to code our CSS for standards based browsers and
have Internet Explorer render the pages correctly too. However, it does involve
linking to another CSS file which to me seems to be overkill. I actually prefer
the method of coding to the baseline of Internet Explorer whilst adding further
embellishments to web standard browsers. For instance, in print CSS we can
expand urls of linked content so users can see where the linked documents are
(only in standards browsers). Internet Explorer users will have to go to the
web page itself t access the links (as the case has always been).

EOLAS
patent dropped

This means that embedded content can still be used without fear of unusable
messages being flagged up infront of the user. A seemless internet
experience is retained and no recoding is required by us in sites
like Effective Use of English which embeds Flash activities into
HTML.

Tags: Web design