Web Design Directory
Do you need a Web designer or some help with a project that you are working on yourself? The Web Design Directory has hundreds of searchable listings covering every aspect of the business. Designers, illustrators, programmers, hosting companies. They are all there!
FireFox

With the final release almost here and over six million downloads so far, FireFox fans are organising a World Wide party for the launch. Find the location of the one nearest to you.
Swift 3D

Version 4 of this 3D package for Flash users has just been launched with new, advanced modelling tools including a polygon editor and improved texture mapping. Swift 3D is now also available for Mac OS X.
A new range of stylish pixelated maps from MiniFonts.com suitable for Web design, presentations and print. Initial sets include World, USA, Europe and UK with other to follow next month. Each set has 38 different maps at a variety of sizes and dot pitches in colour and monochrome. All maps are in PNG format for best compatibility and there are lots of usage tips and suggestions on the site.
If you want to put multiple links on an image, in a navbar or diagram for instance, the usual way to do it is with an imagemap.
        I hate imagemaps!
        Not only are they difficult to set-up and edit, they can cause accessibility and usability problems and belong in the trash can along with frames and blink tags. Where a 'normal' button can have a rollover effect that gives visual feedback, with an imagemap you are depending on a cursor change or lumbered with IE's ugly link outlines.

The alternative that I'm going to suggest is a combination of two techniques I have covered recently, film-strip rollovers and absolutely relative positioning.

It's impractical to swap a large JPEG image to achieve a rollover effect. It's not a good idea to have text on a JPEG image anyway as the compression used doesn't work well for type. Having multiple rollover images is also a fairly complex process. Breaking images up into a multitude of smaller slices is one way to get round it but a single image will load faster and cleaner than one that is all sliced-up because there is only one request sent to the server and one download.

Ideally, we should have a static JPEG image for the main picture and then place small, bandwidth-friendly, link buttons on top of that image. Those button images can have transparent backgrounds, if you like, so that they blend in with the background image seamlessly. This gives the best of both worlds – efficient JPEG compression for the background image and crisp, clean type on the button – plus you have the benefit of having rollover effects that you can control.

Putting a button on top of an image is easy with CSS. If the image is the background of a relatively positioned CSS box (div), we can use absolute positioning to put small buttons anywhere we like on top of that image with pixel accuracy, achieving perfect image-on-image registration if necessary.

 

 

Navbar Example
Here is a typical imagemap navbar. As it's a photographic image, it is saved in .JPG format but because it contains type too, the compression has to be kept to around the 70% mark in Photoshop's 'Save for Web' or the type would exhibit nasty compression artefacts. So, the image file size is about 16K.
        Each of the menu items is linked through an imagemap to another page (well, it would be in a real situation.)
 
The clues that the reader gets that these are actually links are fairly subtle. I'll list them... Below, is a seemingly identical navbar but this time, I've used a box called #stonehenge which has the JPG image as its background. There is no type on the background image so I can compress it much more, in fact, this image is only 5.7K instead of 16K. The logo and link text are small foreground GIF images.

Now, when the mouse goes over the links, they emboss and when they are clicked, they deboss. These are tri-state buttons, each with a normal (off) state, a rollover state and a clicked state.

The composite film-strip rollover graphic looks like the image on the left. Their backgrounds are transparent and the 3D effects are produced by appropriately coloured single pixel lines for highlights and shadows.

The links are separate, absolutely positioned buttons (#shb1...#shb4), so they can go anywhere inside the navbar. They are in a single straight line here, but they don't have to be. They can be in diagonal lines or curved sweeps – you have complete control.
        A link <a href=...> can't be attached to a background image, so each button has a transparent GIF (clear8.gif) in the foreground.
        Before CSS positioning came along, people used clear GIFs to fake positioning. The single pixel clear GIF still has its uses – except that single pixel GIFs are too small and fiddly and are easy to lose, so my clear GIFs are 8 x 8 pixels.

Interactive Images

Another way that imagemaps are often used is to provide more information about objects in a picture – a bit like heavy-duty tooltips. This is very useful in catalogues and diagrams.
 
Wild rice
Not actually a rice but a grass seed. Nutty and nutritious and used in Indian cooking
Tri-coloured Fuselli
Coloured with tomato and spinach to mimic the colours of the Italian flag – red, white and green
Conchiglie
Pasta shells, the ideal pasta for seafood
Peppercorns
Dried peppercorns come in a variety of colours and degrees of flavour
Almonds
Come in sweet and bitter varieties and have many culinary and medicinal uses
Honey
As varied in flavour and colour as wine, honey is actually twice as sweet as sugar
Fusilli
Pasta spirals made from durum wheat and water. The gaps in the spiral soak up copious amounts of sauce and are best served 'al dente'
Tip: Although the button borders are initially invisible and only turn green on mouseover, if you temporarily make the initial borders 'solid', you can see them and adjust their margin-left, margin-top, width and height to register perfectly with the objects. When they are all in the right place, change the initial style back to 'none'.

To make it easier to decipher the source code for these two pseudo-imagemap techniques, I have put the navbar example and interactive image on to separate pages which will open in new windows.

The only small price to pay for not using imagemaps is that with div buttons, we can currently only have rectanglar hot spots. There are situations where you might have to use ovals or polygons. For those, you will have to stick with imagemaps for the minute.

Paper vs. Pixels - Part 4
This is the fourth, and final, article in the series which started in the August issue.

For someone used to designing for print, dealing with Web pages can a be a frustrating and hair-pulling experience – if you let it.

If, instead of fighting the medium, you work with it, and go with the flow, you will live longer and happier. 'Nuff said.

 
 
Artwork/Production
Getting technical
Another huge difference between print and Web design is in what you might call 'programming', although the more accurate term is 'scripting'. Print designers don't generally get involved in anything remotely like this. Many Web designers don't get too involved in it either, preferring to rely on 'actions' built into their Web page editing software. At best, they will hunt down 'off-the-shelf' scripts that they can copy and paste and maybe hack a little to suit their own needs.

In print, technical stuff like this is usually handled by people at the production end. Knowing exactly how to trap certain colour areas or what dot gain and undercolour removal settings are required are tasks considered to be too technical for the average 'designer' – although he or she will probably be familiar with the terms.

It is asking a lot for any individual to know everything about everything. In a small company, you might have to know more than a designer working in a larger company with more resources to draw upon. A word of warning – 'Technicalities' can't just be ignored just because you don't understand them. The problems won't solve themselves.

The first step is in recognising that there is a problem. Without that recognition, you are really flying blind and sure to end up with a disaster on your hands. At best, it will be an embarrassment but it could just as easily cost you money or your job.

Having identified a problem, the second step is to find someone who can solve it – someone who can advise you, if it is a relatively simple matter, or to whom you can sub-contract the part of the work that needs done. Now, it might well be that what you are trying to do is totally impractical, or there might be a better way to do it that will cause less problems. 'Expert' advice does not come cheap. When you are estimating a job, it's up to you to build in a contingency for outside help if it is not available in-house.

Relying on software programs to get things right is a BIG mistake. Even the best WYSIWYG editors are flawed. The only 'perfect' Web page software is a text editor used by someone who knows what he or she is doing. A WYSIWYG editor can save time and provide valuable shortcuts but it's like any other tool, only as good as the person using it.

 
 
Bandwidth
Internet bandwidth doesn't really have a counterpart in the world of print – unless you try to fit a whole book into four pages.

A printed page filled with fifty words costs the same (in effort and ink) as one with two thousand words. If you have to fit a lot of words on a page, you can make the type smaller. Printed type remains readable down to four points or less. On the Web, more words means more bandwidth and the smallest type you can get off with is nine pixels high.

Although it is less of a problem now than it used to be, everybody still doesn't have high speed broadband access to the net. For small Web pages, there is very little difference in page load times between a modem and broadband. Under ideal conditions, a page of 32k will take six seconds to download with a modem and one second with broadband. At 64k, the modem will take twelve seconds but broadband only about two. 64k is a substantial amount of text, about ten thousand words. A typical full browser page size JPEG image (760 x 420 pixels) will take about the same length of time.

So, text isn't generally a problem. Large image areas and Flash animations are.

For general audiences, with a higher proportion of dial-up users, smaller pages are obviously better. Allowing for a maximum download wait of ten seconds, a page 'weight' of 50k is a good upper limit to aim for. That includes text, images, scripts, style sheets and anything else. For more sophisticated audiences with a higher proportion of broadband users, this figure can edge up. The danger, as always, is judging page load times purely on your own computer or internal network. Even with broadband, there can be bottlenecks that slow down traffic at peak times or in remote locations.

 
 
Mindset
To sum up, the main difference between designing for print and for the Web is in your mind. If you have worked in print, it's very difficult to let go of old habits, in fact, it's probably easier for someone who has had no print experience to design a 'good' web page from functional and semantic points of view – they won't be hampered by the 'baggage'. On the other hand, they might have terrible colour sense, not know how to crop a picture and they certainly won't understand the dynamics of design or the principles of subliminal communication.

You have to meet half way!