Author: cmkl

Posted on

Web design: art versus engineering

Graphic design confronts a new medium

What are we trying to do anyway?

What do these three pages suggest to you?

Your design is a subtext to your text, and its impact on your words are as real as intonation, gesticulation and eye contact are to verbal communication.

This is pretty much the standard schtick for print design. But if you’re a web designer and this describes the goals of your site, then you have no ambition.

If you’re thinking up goals of a web site these days, be prepared to add the following:

  • allow visitors to interact with the organization/company/person. That means:
    • Ask questions and get answers
    • Visitors can converse with each other
  • visitors can order/buy goods and services from the site
  • visitors can retrieve information that meets their needs, which may be close to unique
  • visitors can send donations/gamble/otherwise give away money to the site

This is a fair way from print design wherein if you wanted to interact with the producer of the material, you had to fill out the courtesy card or get on the phone. With the web, the messaging medium is also the action medium. Obviously, you can’t do everything over the web, but the fact that there are more functions attatched to the web than simply communication means that we have to revisit an old debate.

Form vs function: here we go again

There is this ancient and unresolvable conflict between wanting to have beautiful form and wanting to be practical and useful.

Well… can’t you have both?

Not without selling your soul. Actually that’s not entirely true, but more often than not web design is about finding a compromise position between eye candy and eye oatmeal. And you often have to privilege one over the other.

Take, for example, Jacob Nielsen’s Top Ten Mistakes in Web Design, or the Top Ten New Mistakes of Web Design.

Taken together, following Nielsen’s rules will restrict the colours you can use, where you place (or if you place) your identifying logo, limit if not eliminate the use of graphics on your page etc etc. Flash, movies and animations are pretty much verbotten.

You get a useable web site, but it’s boring. By contrast, David Siegel’s site for his book Designing Killer Web Sites talks about some different rules. Like how to make web pages sing.

In fact he talks a lot about how to anti-alias graphics and how to infest your pages with code, placing invisible gifs all over the place to put things in the right place. Here is a really old page of his offering some design tips.

More recently he’s retreated from his “web pages will sing” notions. His current web site says there won’t be any more David Siegel books for developers.

In fact, he did a bit of an about face. Here’s an article from an Australian web design site, shorewalker.com, that describes his thinking.

So is there a concensus building about web design? Is it dead? Are all sites eventually going to look like www.useit.com? Maybe, but for two things:

  1. People like looking at pretty things.www.urbantakeover.co.uk breaks pretty much every one of Nielsen’s user interface rules, but we were all captivated by it for about half an hour. And the user interface fetish people will never tell you how to make anything look pretty. I mean would you want to live in a house Jacob Nielsen built? I should note that since this class first discovered this site it’s calmed down a lot. There are now menus with text labels, for example.
  2. There’s more to life than shoppingIn fact both the user interface and the singing page people seem pretty much obsessed about selling people stuff via the web. It’s like a new sort of gold mining expedition. Maybe the web is just going to be something people do to connect with other people and find out about things and stuff. Web sites won’t be profit centres, but rather their cost will be lumped in with promotion, running a store and “the cost of doing business.” In this case, maybe designing pretty just for fun isn’t such an anathema.
  3. There’s nothing saying pretty sites have to be unusable or vice versa.In fact one could argue that truly boring sites will never get used just because they’re boring.

Happy mediums

I’m not saying you can resolve this. But you may be able to live with the ambiguity of wanting an attractive, useful web site. That’s certainly the conclusion drawn by this A List Apart Article.

Here’s an approach that might work:

  • Design a pretty site.
  • Figure out how many of the usability rules it violates.
  • Figure out which of these you can live with.Nielsen rates the following rule violationsas having “very severe” impact on usability:
    • bleeding edge technology
    • scrolling text and looping animations
    • outdated information
    • slow download times
  • Any pages that violate these rules you should really consider changing
  • See if you can’t achieve the same design within the rules
  • Change your design or
  • Try and assess the damage:
    • View the site in as many other, older browsers as possible
    • Ask your friends to look at the site; find out what conditions they’re viewing under (browser, connection speed)
    • Use browsercam.com to see how your site looks in every browser that ever walked the earth. It’s free for a single use.
  • Be happy or make changes based on your damage assessment

Six principles of graphic design and how many of them are still useful to web designers?

Balance:

Also known as symmetry. What goes on one side of the page must weigh as much as what goes on the right. Or top vs bottom. Graphic elements have visual weight. Big items weigh more than little ones. Dark weighs more than light. Colour weighs more than black and white. But a small dark element will weigh less than a concentration of white space because it’s unusual. Note, though, that balance doesn’t necessarily mean equilibrium.

This notion is often at odds with the following notion, because if a page has no balance, then it almost necessarily posesses some form of…

Dynamism

In many languages, including the one I’m using now, people read from left to right, top to bottom pretty much all the time. So much so, in fact, that it’s become a habit.

The top left chunk of a page is known as the “primary optical area” because that’s where a literate person’s eye is trained to go. Mind you, eyes are more like cats than dogs. They’re not easy to train. They’re easily distracted by shiny, noisy or (to bring back some jargon from a couple of prinicples ago) visually heavy objects. So in print we tend to build designs that use the eye’s trained tendency to move top to bottom, left to right. But theoretically, if you use the notion that eyes also move from dark to light, big to little shapes, you can start a page anywhere and get the reader to move through it.

This motion, in design circles, is referred to as dynamism. I admit it’s a tad pretentious.

A good dynamic leads you through the page. A bad one leads you off the page or leaves you standing there with nowhere to go, as overly symetrical pages tend to do.

Proportion

“The lesser dimension in a plane figure is to the greater as the greater is to the sum of both.” Huh? About 1:1.4. This is some ancient law of aesthetics. You’re not supposed to break it. It applies to the shape of a page, elements within a page, where elements are placed etc. Of course, most people’s monitors aren’t in this proportion. But more on that later.

Contrast

Also known as “Emphasis.” Something on the page stands out to give the page a focus or entry point.

When two or more elements are given emphasis, they compete for the reader’s attention, cancelling each other out and encouraging people to move on. Elements cannot, however, be so large and contrasting that they squash out everything on the page.

The amount of emphasis an element gets should also correspond the importance the designer assigns to it, rather than the amount of space that needs filling.

Simplicity

Fewer elements, rather than more. One or two type faces. One or two graphics rather than a dozen. (There are web-specific reasons for this too). Enough said.

Unity

Mentionned earlier is the notion that this is not art. Good design has a unified look from page to page. Choose a headline style and stick to it. Page headers and footers (called folios in print jargon) should be consistent from page to page. Font changes should be minimal, have a purpose and be consistent.

(The web helps a lot here but in other ways causes many many problems).

Unity also means holding the page together. Nothing sends the elements of a page off in all directions quite like white space forced into the middle of a page. Watch this, especially when you’re sizing different squared off shapes like tables, frames etc.

Posted on

Content management systems 0 bureaucratic human nature 1

Content management systems like boats no one wants to row
Content management systems like boats no one wants to row

The webmaster is dead, long live content management systems. Self-serve content. Freedom from the tedium of pee slash pee pee slash pee bee slash bee. Nice idea. But it’s not quite that simple.

See, a few years ago I set up an open source content management system for a small volunteer organization of which I am a fee paying member.

People were complaining about not getting information or not being able to keep all the emails straight or never hearing about the stuff they wanted to hear about.

“PHPNuke to the rescue,” I thought. “Cut paste and post and you’re done.” I’ve learned a few things since then. One of which is not to use PHPNuke. But the most significant lesson came today. And it has nothing to do with technology.

But I should rejoin the narrative before jumping to the moral.

Content management systems: build them and people won’t come

My site stood empty and unused but for the odd tentative exploration from the dweebier elements of the group. No one posted anything. They continued to share information by distribution lists in their email clients.

I gave up on the site and it continued to gather dust. The organization dutifully renewed its domain every year, but ultimately it was a waste of space. I fell behind on my PHPNuke upgrades and I became increasingly anxious about having an old version of the application with Christ knows how many XSS vulnerabilities just sitting out there on my web server.

So I proposed to the organization’s leadership that they set up a listserv instead. They like email. I mean they really like email and I figured a listserv could make that work more efficient. And I figured Mailman’s listinfo pages could handle the amount of markup required to host the documents they did want in a central repository.

Of course they went for it. And I’ve rejigged the site and set up their lists. Ducky.

But then a funny thing happened. People have started flooding me with things they want me to put on the web site for them. Am I the only person surprised by this?

Never mind that it’s only a few seconds to post something to PHPNuke. Never mind that you need to be only slightly smarter than a mouse pad to post to PHPNuke. Don’t matter. What matters is that someone else is going execute those half dozen or so keystrokes.

The need to communicate vs the need to do less work

The need to communicate is driven by the notion that someone else is doing the communication.

A recent Reuters article describes a survey which suggests about half of Internet users post some form of content – be it photos, a blog, message boards whatever. It’s possible that my co-workers are composed entirely of those belonging to the other half of the survey sample.

But I rather think that it’s more about organizational politics and bureaucracy.

Have I changed my mind on CMSs and self-publishing? Absolutely not. If by eliminating the buck passing and by requiring people to lift a finger to publish something, we force some consideration of whether or not report X should get published, then the CMS will have succeeded in ways I didn’t even imagine.

Posted on

Got more than 100 web pages? A content management system should be in your future

Content management systems save lives

Content management systems save livesA content management system can be the solution to the single largest problem with most web sites — keeping content current. Updates take time, cost money and require logistical support. And a few years ago, the digital equivalent of elbow grease was the only solution. Organizations brought on staff or contracted to freelancers the task of marking up text – either by hand or using a visual page editor – to do routine updates to their web sites.

But this sort of coding work is repetitive and predictable. If it sounds to you like a perfect task for a computer you’re right. It is.

Enter the “content management system.” A content management system (CMS) is a generic term for a collection of web pages or web-connected programs that maintain the information on a web site. A CMS does this by storing the information in a database, and then retrieving it and displaying it as a web page when someone visits the site. There is a private and hidden set of pages that authorized individuals use to add, edit or delete the site’s content.

Advantages of a content management system

Your maintenance costs will decrease
If you pay someone to post each page, your costs will decrease if posting a page is a 30 second task involving copy and paste. If your staff already do this, they will have more time for other tasks.

Updates will take less time
Contractors have other clients, staff have other tasks. Delays are inevitable. But you can minimize the lag time between content creation and publishing by making the process as easy as possible.

Publish anytime from anywhere
You use a series of web pages to publish your content, so if you have a web browser and an internet connection, you can publish to your web site. No specialized software required.

Separate content from structure
With your content in a database, you can, by making a relatively trivial change, decide to list your stories by topic, rather than by date because the database does the sorting. With a static page, someone has to rearrange the stories themselves. This is not a complicated task, but it is time consuming and does require some relatively specialized knowledge.

Now anyone can be a web publisher
Most content management systems perform the basic HTML markup tasks themselves, including adding images and links. If you can copy and paste text between your word processor and your web browser, you can be a web publisher.

Your librarian will love you
A web site is a collection of text files with obscure names. Once you’ve been running your site for a few years, you will accumulate hundreds if not thousands of these things. Trying to figure out where all your stories are can be challenging, to say the least. Using a CMS can bring the power of a database to bear on this, including full text search, metadata, content summaries.

Disadvantages of a content management system

If there weren’t any, everyone would be using one of these things.

They cost more to set up
Getting a database to interact with a web server and in turn a visitor’s web browser is a significantly more complicated task than just marking up a bunch of text files to turn them into HTML. So the setup costs are higher. As a general rule, if you have fewer than a hundred pages on your site, a CMS could well be overkill.

They can cost more to host
Depending on your service provider, it may cost you slightly more every month to host your website. But you may already entitled to host some content management systems.

Publishing outside the box can be a bit tricky
Databases like information well-structured and of similar shape. Sometimes that means your pages have less variety than you’d like.

CMS options

There are lots of content management systems out there. Some of them are commercial software packages that cost hundreds of thousands of dollars, some of them are open-source or freely available collections of scripts. Or, you can pay someone to write the thing from scratch.

I have had good experiences with two open source CMS packages: