May, 2004

Colours on the web

A well-written introduction to colour theory. Explains the colour wheel, primary colours, methods of combining colour and offers a colour wizard for use when building web pages. Certainly one to bookmark.

Web usability checking for blind and vision impaired

A powerpoint presentation, a PDF and a word doc are all a list of questions that Royal Blind Society’s Adaptive Technology Consultants will commonly ask when checking websites for accessibility.

Quirksmode Javascript (HIGH)

THE place to go to fully understand JavaScript’s inner-workings.

Navigation Matrix

How to create your CSS nav using one image or ‘navigation matrix’. This is a technique I used on the OU’s "T209 taster" website. Nice to have a label for the technique now.

Zeldman.com Redesign

Fresh, green but still not the ‘classic’ it once was. Zeldman’s increasing commitments mean he doesn’t update his site so much and the personal, chatty feel seems to have lost for good. Still, there are plenty of others willingly picking up the torch.

When semantic markup goes bad (HIGH)

Explains good and bad usage of semantic markup. Well examined and explained and well worth reading.

Ten questions for Keith Robinson

He talks about reverting to a table layout in frustration, writing for ‘Digital Web’ and how validation isn’t the be all and end all.

What is web Accessibility

ALA article discusses what web accessibility is. Fairly basic stuff.

Mountaintop corners (HIGH)

Very interesting article about a very clever technique in creating corners pixel by pixel.

Accessible Search Engine Techniques (HIGH)

How to get pages ranked higher in search engines by simply following a few accessibility techniques.

Visited links – Your Take

An interesting debate against Nielsen’s suggestion that all links should indicate their visited status.

What’s "Accessible" Accessibility?

Tantek fires a few shots 37 signals way and they take the bait. Explores the notion of providing every document in HTML as opposed to, say, PDF format.

Opacity support in Mozilla 1.7

the opacity property allows you to set a sort of seethrough value for any element on the page. One interesting application of this principle is e.g. an on :hover lightup effect for images. No need for creating faded versions of the original images, and no image replacement techniques around – img tags and CSS3 do the job.

XStandard: Powerful, Standards-based, Accessibility-aware

XStandard is simply the most advanced, standards-based WYSIWYG editor on the market. It is designed for any Windows or browser-based content management system that supports ActiveX. XStandard manages rich content in any language, has strong accessibility features, and supports popular editing options including tables, wrapping of text around images, and file drag & drop into the editor.

Semantic lists – Analysis

Interesting discussion. Rather than simply picking the best among a set of alternatives, it is perhaps more important to understand how good or bad each alternative is. My summary (which reiterates what a number of folks have said)

Digital Convergence: Insight into the future of Web design

Much of what is written about the Web has to do with the problems developers encounter today, such as a lack of uniform standards and accessibility compliance. While on one hand that is appropriate—providing knowledge and skills for today’s challenges—on the other, this tight focus on the here-and-now is doing us a disservice. We continue to operate in a reactive space, one where the way we are thinking is not attuned to the opportunities of tomorrow. It keeps us on a perpetual treadmill, thinking and working in a tactical and compartmentalized way. We view the work we do narrowly, in the moment, not understanding the greater context, much less the startling changes that are just over the horizon.

The Evolution of Corporate Web Sites

Hard to believe, but corporate Web sites have been around for over 10 years now. It’s fascinating to see how they have evolved over the years, from the early days of magazine-style brochureware to the most recent trends of two-way Web interfaces.

Flash of Unstyled Content (FOUC)

Some pages that use the CSS @import rule experience a curious display quirk in the Windows version of MS Internet Explorer: a momentary flash of unstyled page content. The unimaginative creature that I am, I call this phenomenon Flash of Unstyled Content or FOUC for short.

Javascript Bonsai Tree

I had an interesting question put to me the other week: what about making use of the null <script> element in the Zen Garden’s markup (so placed to avoid the flash of unstyled content IE bug) and open that up for submission as well?

Launching windows

This question comes in from Keith Robinson — and it’s a good one. Recently, Keith had been working on a project using the XHTML 1.0 Strict doctype — but ran into a dilemma when he needed to launch certain links into a new window.

Semantic coding

Semantic markup has been sold to us very well. The dream is that one day, other computer systems will see meaning in your code. Google will look at your headlines and think “hmm, that’s a headline, it must be important”. Speech browsers will see that something is wrapped in an <em> and will dutifully emphasise it. Using (X)HTML elements in the correct, semantic way is very laudable and long may it last.

Art direction and the web

What is ‘art direction?’ – all is revealed.

Thoughts on Template Design

A good template is difficult to design. The designer must step back and imagine the many types of content that will be framed in their design. Some weblogs will consist of dozens of one or two-line posts per day. Others will have thousand-word essays. Others will consist mostly of photos. The templates will be filled with lots of different languages and many varied color schemes once customized.

Focus on the Student: How to Use Learning Objectives to Improve Learning

If information architecture is a fairly new field, then the practice of teaching information architecture is even newer. Often instructors are experienced information architects who have little to no teacher training, and they must teach students with a wide range of experience and learning goals. Learning objectives are one tool that can make information architecture courses easier for teachers and more rewarding for students.

Making guidelines part of the team

Guidelines. We seem to have a love-hate relationship with them. At the same time we construct them, we worry they’ll come back to haunt us. How did guidelines get such a bad reputation?

Presentational Javascript

In the last years the discussion about web standards has mainly focused on XHTML, CSS and their proper application, possibilities and limitations. The rapid evolution of the use of these technologies and concepts now appear to have implications for the use of other web standards like JavaScript and the W3C DOM.

A little browser quandary

For me, choosing a default browser on my PC was very, very easy. Should I use IE with its basic features and crappy standards support? Opera with its flashing ad banners, and messy interface? Hmmm, it’ll be Firefox then.

Actionscript recommendations?

Lets say you knew someone who could use Flash. They could use use the timeline, animate/tween etc, but really wanted to get to grips with the actionscript side. What book/site/tutorial CD would you suggest they look at? “ActionScript for Flash MX: The Definitive Guide” by Colin Moock looked like a good bet, but please leave thoughts if you have them.

Fireworks vs illustrator

In the comments to the recent Thunderbird post, there was some talk about why I used Illustrator this time around, rather than Fireworks. Someone felt that Fireworks was a ‘consumer’ application, and that ‘Illustrator’ was for professionals. I thought I would just outline a few of the pros and cons in each that I’ve found (solely on the subject of icon design).

Designing for dyslexia

Dyslexia is the most common disability, with an estimated 15-20% of the world.s population affected by it to varying degrees. It is one of a number of incurable learning difficulties (see sidebar 1) and is the common cause of reading, writing and spelling difficulties affecting an indiscriminate section of the population; regardless of their gender, race or social background.

One year (MEDIUM)

The CSS Zen Garden is now one year old. Now, Dave Shea explains the methodology behind one of his designs.

Apple: Get out of Desktops

Opinion: It’s long past time for the Cupertino company to forget the Macintosh, from software to all its hardware incarnations. Instead Apple should focus on its real opportunity—consumer convergence.

The new blogger

Blogger redesigns and gets a load of respected web designers in to do the templates.

An objective look at table based vs. CSS based design

Andy Budd causes a stir (Response, Another: Tables My Ass)

Let’s Be Honest

Everyone is quick with the praise. Someone launches a new site and it is linked to by one large figure or another and then you suddenly see thousands of these links popup all over the place describing how wonderful a site is. Even worse is when top figures that hold great esteem in the community, for one reason or another, launch a site and just because it came from that one person it is already deemed “beautiful” or whatever other niceities you wish to throw there way. (follow up/backtrack)

Digital Web Redesign: The Transformation of an Industry

For those of you who may be long-time readers, you may have noticed subtle transitions over the years. I’m not talking about changes in the design of the site; I’m talking about changes in the content. We started out as a Web publication focused strictly on the front-end design aspects of Web sites. Over the years that focus has shifted, not because our readership had changed, but because the Web had changed. Building Web sites was no longer just about presentation and cool GUIs, it was about good usability, solid architecture, convenient accessibility and compliant code, as well as transparent design.

CSS3 – The new Frontier

Imagine this: overnight, the W3C makes CSS3 a standard, and the browsers end their differences (IE included) and support everything in CSS3. How will this affect you? What magical things that CSS3 offers will bring your webpages to life?

Separation: The Web Designer’s Dilemma

With all the discussion about separating presentation from content (and structure), it’s easy to lose track of the goal. So let’s step back, define our terms, and take a look at why it matters.

Amazon Web Services

Although Amazon Web Services is a cool technology, it also provides the very useful function of enabling our business partners to interact with our Web site through standard protocols. This interaction can lead to a deeper, more valuable relationship for both parties involved. Here are a few of the ways that our partners are benefiting from Web Services

Movable Type 3.0

It’s not free anymore, people are not happy… (more, more, more, more)

Colour Schemes

A ‘technical’ method of colour-selection involves choosing one or two dominant colours from the colour wheel, to be used with a small set of complementary colours. Basic colour theory concepts like split complementary and triadic colour schemes offer a wide range of variation, particularly when you start throwing in shades, tints, and saturation adjustments.

Under the influences

Eric Meyer lists the people who’ve influenced him in web design over the years.

How to clear floats without structural markup

When a float is contained within a container box that has a visible border or background, that float does not automatically force the container’s bottom edge down as the float is made taller. Instead the float is ignored by the container and will hang down out of the container bottom like a flag. Those familiar only with Explorer for Windows may scratch their heads and say “That’s not right!” True, IE/Win does enclose a float within a container ‘automatically’, but only if the container element has a stated dimension, and in any case it’s a W3C spec violation. This illegal behavior can also be ‘toggled’ on and off by links within the container, if ‘hovering’ alters the link background or several other properties. Quite a mess.

CSS banners "Fixed"

The trick was to remove “overflow: hidden” from the rules that turn these two h5 headlines into clickable images with rollovers. (Hat tip: Gulliver and Micah, who each proposed the same solution on the same day, with no knowledge of each other.) Let’s look closer.

How to clear Contribute ‘Edit mode’ cache

This is the answer!

Content management on a budget

A Macromedia solution

How to size text using ems (HIGH)

Text for the screen is sized with CSS in terms of pixels, ems or keywords. As most of us know, sizing with pixels is easy: get your selector and give it a font-size – no more thought required. Sizing with keywords is more complicated and requires a few workarounds, but you’re in luck as the techniques are well documented. That leaves ems. At this point people often leg it. ‘Ems are too inconsistent,’ they say, ‘they’re too hard; they never work.’ Well that may be the received wisdom, but if ever the was a case of FUD then this is it. I will now attempt to show you how ems can be as quick and easy to use as pixels.

Design eye for the usability guy (HIGH)

Last Monday, to much fanfare, Nielsen published the second part to his guidelines on the display of links. I was as shocked as anyone by it. He actually made sense!

The Open CD

A bunch of open source software to replace your office apps and more.

The CSS box model hierachy (HIGH)

A 3D explanation of the box model.
Here’s a thing. I’ve seen umpteen diagrams showing CSS beginners how padding, border and margin work together, but not the order in which elements such as background colour and image are stacked. To try and fill this hole, I’ve drawn a diagram. I’m not sure if this is of any use at all, but here it is anyway – the 3D CSS Box Model.

Creating Colour palettes

When I am designing a colour scheme for a client site, I am often lead by the colours used in existing logos or publicity materials as clients want to see the web site ‘fit’ within their company style. But when the client only uses one or two colours, I use a favourite technique for creating a whole range of complimentary ‘tones’.

Onion skinned drop shadows

Yes, onion skinned. Animators use onion skinning to render what is impossible to see otherwise: a snapshot of motion across time. Now, web designers can use it to render another seeming impossibility: the truly extensible CSS-based drop shadow.

Print it your way

Web developers have various methods for creating print friendly versions of their websites. By using a server side routine or print stylesheets, the print version may strip out images and navigation that lose their meaning on the printed page, and perhaps display the page in a single column using a different font with a different size.

How labels affect usability and branding

You’ve got to pay to read this article. If you’ve got the cash it’s worth a read.

Focus on the student: How to use learning objectives to improve learning

If information architecture is a fairly new field, then the practice of teaching information architecture is even newer. Often instructors are experienced information architects who have little to no teacher training, and they must teach students with a wide range of experience and learning goals. Learning objectives are one tool that can make information architecture courses easier for teachers and more rewarding for students.

Learning to let go

Accessibility and Usability are words you hear a lot more these days than let’s say a year ago. One reason is that companies and developers realise that the hype about having a flashy web site is slowly ebbing down. Not too many people are impressed any longer by designs and navigations that engulf you completely – they start looking for the content and the services you offer instead.

Separating behavior and presentation

Separating presentation and structure started in the early days of the CSS revolution. It turned out to be rather more complicated than anyone thought, but by trial and error we’ve mastered the principles.

Grey box methodology

After I read Underline Text in Adobe Illustrator by Douglas Bowman last week, it got me thinking about my own process for designing a website. The main point of his article focuses on not being able to underline text simply in Illustrator (which is quite annoying) and his solution and workaround. Afterwards, there was some interesting discussion about what programs people use to create their designs and why. This caused some self reflection on my methods and how they have changed over the years.

Underline Text in Adobe Illustrator

Last week, when I announced the Blogger redesign, I mentioned that I’ve been using Adobe Illustrator much more often to comp my designs, instead of Photoshop. The vector-based Illustrator provides more flexibility in shape rendering, and allows me to create and tweak designs faster than the bitmap editing of Photoshop. Once we’ve honed in on a final design, then I move over to Photoshop for a final polish and pixel-level precision for the site’s images. Just after the Illustrator mention in the Blogger entry, I tossed in this little frustration:

Ten questions for Patrick Griffiths

Patrick Griffiths (or PTG) is a London-based freelance webmaker. He is most widely known for his site HTML Dog, an HTML and CSS resource for beginners and experts alike. Patrick has written some highly acclaimed articles including Suckerfish Dropdowns, Sons of Suckerfish and Elastic Design. He also shares his knowledge with the world via his blog – aptly titled “Dog Blog“.

Stylish accessible forms

I can’t think of many web sites that don’t include at least one form, and I can’t think how many times I have compromised on a form’s visual design because of looming deadlines, leaving a “Must get around to styling this form properly” comment in the code.

When a link falls at the end of a sentence always put the full stop outside the anchor

Until user agents (including assistive technologies) render adjacent links distinctly, include non-link, printable characters (surrounded by spaces) between adjacent links.

Mezzoblue V4

Daring and reckless no.1

Stop Design redesign

Daring and reckless no.2

The Risks of Web Redesign

Critique of stop design and mezzoblue redesigns.

Put the friendly back in user-friendly

I think Art Direction is an underused practice on the Web, and I don’t think I’m the only one who sees this. A List Apart recently did a great piece about Art Direction on the Web. If you haven’t yet — give it a read. In many ways I see Art Direction as being almost as important as editing is, quite obviously depending on the project and the goals you’ve set out for the site.

Design direction for web design

I think Art Direction is an underused practice on the Web, and I don’t think I’m the only one who sees this. A List Apart recently did a great piece about Art Direction on the Web. If you haven’t yet — give it a read. In many ways I see Art Direction as being almost as important as editing is, quite obviously depending on the project and the goals you’ve set out for the site.