Web Page Design for
                                                                                                                              Designers

 


 

 

Bármely szakterületen is dolgozzunk, néhány év alatt viszonylag egyoldalúvá válik a szemléletmódunk - így van ez a grafikus tervezéssel is.

Függetlenül attól, amit itt leírtam, és attól, hogy mennyire hiszek benne vagy élek aszerint, elfogadom, hogy számtalan egyéb nézőpont létezik.

Mindannyiunkat a környezetünk határoz meg.

Írja le megjegyzéseit, kritizáljon és fejtse ki véleményét erről az anyagról vagy a web oldalak tervezéséről általában!

Nem ígérhetem, hogy minden hozzászólást közéteszek, nem ígérhetek newsgroup-szerű párbeszédet - de legalább próbáljuk meg!


Joe Gillespie joe@pixelp.co.uk

 

menunext

 

 William Barnard asks about new graphic file formats

 This site wins top web site design award!

 Translating DTP files into web pages - Sandie French

 Richard Scott asks about adaptive palettes

 A comment on Design Aesthetics - Craig Stinson

 Adam Gottschalk asks about smooth gradations

 Web Page Design list server

 Angi Drew complains about my sexist site!

 Frank Cohen on using IMG Height and Width

 Cat amongst the pigeons - Margaret Peavy

 Mark Oliver prefers 'REAL' HTML

 Mandy Lockyear wants a more exciting site

 Colour fidelity - an issue for web designers

 WYSIWYG Vs. Raw HTML - Alan Duncan

 Jasbir Gambhir's user interface problem

 Martin Pierce wants to know about Java

 A blatant plug for Nina! - Proofreading

 Pantone colours for web designers? - David Faulder

 A new way to create typographic leading?

 Hard copy? Hard Luck!

 A message from Joe on his 'day off'

 A CorelPAINT tip from Sophia Chan

 What are your influences? asks Angela Collins

 Bob Gale suggests a NEXT button - dunnit!

 Design Vs. Speed - a question from Henry Wheeler

 Jeff Gates writes about more palette issues

 Using invisible gifs for spacing - Mike DelGaudio

 A tip about rules from Joe Pemberton

 Patrick Havens asks about frames

 What about anti-aliased type? asks Yves Roberts

 Lisa Clements shares a viewpoint on design

 M. Steven Hilton, Jr. asks about palette mapping

 A question about navigation from Sasha Pave

 Paul Anderson asks about GIF animation programs

 Peter Small asks about cross platform palettes


 

William Barnard asks about new graphic file formats

I have heard that there is a new graphic file format that sorts out the dreaded gamma problems between Mac and PC, what can you tell me about it?

It's called PNG (Portable Network Graphics) and is intended to replace the GIF format eventually. It combines tight compression with an 'intelligence' that adjusts the gamma of a picture depending on which platform it is running. It isn't very popular just yet, but hopefully, new browsers will have built-in support for it.

Find out the whole story at W3C.

Back to Top

 

 

This site wins top web site design award!

I am delighted to announce that Web Page Design for Designers has been awarded the prestigious High Five Award for excellence in web site design.

The High Five Award is administered by David Siegel of Studio Verso in San Francisco. David is the author of the top-selling book Creating Killer Web Sites and is also a member of several W3C committees defining the future of HTML.

Winners are selected on the basis of design, conception, execution and content, with an emphasis on clear information design and visual aesthetics. Naturally, I am thrilled and honoured with the accolade.

Web Page Design for Designers was featured on the High Five Awards Site from October 23rd - 29th and can be accessed through 'Previous Winners'.

Joe :?{

Back to Top

 

 

 

Translating DTP files into web pages - Sandie French

Is there some easy way I can turn existing Quark XPress and PageMaker files into web pages?

Yes, there are a number XTensions and plug-ins that will convert these files into HTML documents but don't imagine for a minute that they are going to look anything like the files that you started with.

It is just not possible to translate sophisticated DTP layouts into web pages without making some compromises. Although they may be convenient, I have found that using such translators leaves a lot to be desired in terms of web page layout and efficiency.

You have to remember that the design criteria for a web page is quite different from that of a printed page. You have to consider bandwidth, file sizes, which graphic file formats to use and the fact that your web pages are going to appear on numerous combinations of computer platforms, monitors sizes and browsers.

Designing a web page requires a completely different mindset from a conventional 'paper' page layout and unless you start with very simple layouts with small or no graphics, I would advise starting again and working WITH the medium and not trying to IMPOSE a design upon it. Square pegs! Round holes!

Back to Top

 

 

 

Richard Scott asks about adaptive palettes

In your section on graphics, you seem to endorse the use of the Netscape web palette for GIF files in preference to using adaptive palettes. I have seen comparisons of the two methods and using an adaptive palette produces much better results. Why are you so against this method?

Richard, I am not 'so against' it, my preference for the use of the 6x6x6 palette is for two reasons. Using an adaptive palette for GIFs does work better in some instances, especially when there is a predominance of one colour. Where there is no colour dominance, and if an image has a broad palette of colours, I find that the 6x6x6 web palette gives better and more consistent results across platforms. The only way to tell is to try both methods for any given image on a variety of Mac and PC systems and compare the results, and then to ask yourself if you should be using a GIF at all!

My main objection is due to bad experiences with a number of PC video cards that give very unpredictable results with a multiplicity of palettes on the same page, and work fine when there is only one. I know it shouldn't happen, but it does!

What software do you recommend for producing GIF files with adaptive palettes?

I use Photoshop with BoxTopSoft's PhotoGIF plug-in. I know that there are a number of applications that will do a similar job and before I got this plug-in, I would frequently come out of Photoshop because its own GIF manipulation facilities are pretty basic. PhotoGIF does just about anything that you could want to do with a GIF file, transparency, animation, interlacing etc. and it supports a wide variety of optimized palette, bit-depth and dithering options.

DeBabelizer does a good job too but has a dreadful user interface. See the LINKS page for details and for other Mac and PC solutions.

Back to Top

 

 

 

A comment on Design Aesthetics - Craig Stinson

I think on the WWW, there are two considerations as far as design goes. One is Design Mechanics - the use of HTML, how to optimize the delivery of the page to the end user, and what browser and version you write for. The second is Design Aesthetics - how graphic elements lay out on the page, how intuitively the links lead to where one wants to go, and look and feel type issues. The problem is that HTML is a rotten lowest common denominator for doing design work. Even with all the enhancements to browsers, that's still a problem that may be even greater as a result. While users have so much control over how their pages present themselves, I'm afraid design standards are a moving target.

I would appreciate discussing these things with you, as well as whatever else comes up in discussions.

I too think that not enough consideration is given to the 'Design Aesthetics' you mention, that is why I put this site up. Even within the constraints of HTML, I think it is possible to do something worthwhile - providing the web page 'designer' is, in fact, a designer and not just a web page 'programmer'. It took me about two days to learn HTML but a lifetime to learn about design! 

Back to Top

 

 

Adam Gottschalk asks about smooth gradations

I look around and I see that most designers take the tack of straight colors, no gradations, no photographic transitions, etc., except if geared for those with 16 bit color systems. But some do excellent jobs at getting airbrush effects. The cool looking women with the tie dye dress on your page--she looks great and the colors blend smoothly on my system even when I set the colors to 256. How did you do that? Any tips on airbrush shadows and the like?

The 'key' colours in the gradation should be chosen from the 216 colour palette by using swatches of the same colours to draw with - it's that simple. There are 'runs' of colours within the 6x6x6 palette, using these will give the best results across all platforms. The motto is 'don't impose YOUR design on the palette' - use it. It also helps to set your monitor to 8-bits when you are creating so as not to get a 'perfect' view of your work.  

Back to Top

 

 

Web Page Design list server

A few people have asked me for a Web Page Design list server address. There is an active web design list run by Lynda Weinman which should be of interest to anyone involved with web page design. Lynda's Homegurrrl Web Designers' List.

Back to Top

 

 

Angi Drew complains about my sexist site!

Why do your pages assume (inaccurately) that only men design Web pages? Get real, and take out all the references to "the web designer, when he..." etc etc. Here's one female Web page designer who finds them really offensive.

If anyone else finds my use of the masculine gender offensive, please accept my sincere apologies for my laziness, because that is all it is. May I just point out that you do not have to look very far on the Internet to find material that puts my transgressions into REAL perspective. 

Back to Top

 

 

Frank Cohen on using IMG Height and Width

Thank you for writing and publishing the web designers forum site. I found it very interesting and informative. I especially like your choice of colors and background image.

One thing I didn't notice you mention is the use of the height and width statements in an IMG reference. If you add these to your IMG references most browsers will first display the page's text, then load the image. It makes the page appear to load faster and gives the user something to do - read - while the images are loading.

Thanks for pointing this out Frank. The two layout programs that I use, Adobe PageMill and Claris HomePage, put these in automatically. Your suggestion will certainly be of benefit to people who don't use these programs or prefer to hand code their HTML.  

Back to Top

 

 

Cat amongst the pigeons - Margaret Peavy

Jo, I wish you knew what an uproar your monitor test has caused in our department. Your background looks black to me and I can only see two other shades of blue. I have been promised a new computer for ages and showed your test to my boss, but all he will do is change my monitor 'sometime'. Now the others are complaining too...

We would all like a new computer Margaret, but don't shoot the messenger!  

Back to Top

 

 

Mark Oliver prefers 'REAL' HTML

You would seem to be an advocate of WYSIWYG web page design programs. I have not found one yet that comes anywhere near satisfying my needs compared with using a decent text editor, plain Netscape and a good knowledge of HTML.

I have tried various editors including HotMetal Pro and Netscape Gold and they all seem to have more bad points than good. Yes, you can see what you are doing as you do it, but you can't do very much.

In the early days of computer typesetting the compositors used tags not dissimilar to HTML, a few diehards still do. I can only say that if designers had to create pages for print using just TeX or raw PostScript, the business would be in a sorry mess.

When you create a page with XPress or PageMaker, you are removed from the mechanics of PostScript and can get on with the job of DESIGNING. The sooner HTML gets shoved into the background too, the better for everyone - IMHO!  

Back to Top

 

 

Mandy Lockyear wants to make her site more exciting

I am not a graphic designer but found your site very useful and informative and it contained a lot of common sense tips that had never really occurred to me.

As webmaster of a new site for a large insurance group, I would greatly appreciate any suggestions as to how we can make a potentially very boring collection of facts and figures into a more user-friendly and exciting web experience.

In the first instance, don't lose sight of the fact that your 'boring facts and figures' are probably very important to your company's business. It is the designer's job to communicate this essential information - not to decorate or embellish it.

If you have a look at a few conventional company reports, you will see how importantly 'tone-of-voice' features in the presentation. A company in the financial or insurance business needs to communicate integrity and stability - something that the use of gratuitous 'cool' web gizmos completely negates.

'User-friendly' I am all for, and I would never endorse 'boringness' for any reason. I would just suggest that, if you are not an experienced graphic designer, that it is better to err on the side of honest, visual simplicity. Try to create (or maintain) a strong corporate image that easily identifies your company's site from others. Consider your target market, do they only use monochrome or 4-bit displays for instance? Don't ignore the fact that your company is probably spending a lot of money on advertising and promoting a particular marketing strategy. There is a lot more to all this than just being computer literate and knowing how to use HTML.  

Back to Top

 

 

Colour fidelity - an issue for web designers

...Your grey-on-white lettering is barely there; your yellow-on-white lettering is indecipherable; the letters next to the colored triangles are completely illegible...

...Maybe I'm colour blind or is grey and blue text on a maroon ground derived from your "colour theory"?

... it may be very fashionable but I can't say I like your black background...


Judging from the mail I get, the majority of people can read this site without any problem. The three contradictory messages above describing my background colour as variously, white, maroon and black bring up an important issue.

Whereas the graphic designers that this site is aimed at are likely to have his/her monitor adjusted for maximum possible colour fidelity, other people may not - or may be blissfully unaware that they even have a problem.

Macintosh users will normally have their monitor's gamma set to 1.8 or thereabouts by default. This means that the 20% steps of colours in the 6x6x6 web palette (especially blue) will look like even, 20% increments of tone. A typical PC monitor will not have any gamma compensation, or any facility to alter it, so colours at the dark end of the spectrum will be indistinguishable. Where the corrected gamma monitor shows six even steps from black to blue, the uncorrected one will show two or three black squares and then go straight into intermediate or pale blues. Try this test on your monitor now.


Do these 20% increments of blue look even
on your monitor? If not, you may need to adjust your monitor's
brightness, contrast or gamma controls.
If they don't even look blue, then you have serious problems!

Very little can be done about this. PC monitors are designed to display text and numbers and, in a competitive world, colour fidelity is relatively unimportant. Our own PCs exhibit considerable variations in colour values, although none of them show this site as having a white, maroon or black background thankfully. Our Macs are fairly accurate and consistent across the spectrum and only needed a minor tweak to set them that way.

The moral of this story is that, if you are designing your web pages for a mainly PC audience, be aware that darker colours will tend to lack separation and try to avoid designs that demand high degrees of colour fidelity.  

Back to Top

 

 

WYSIWYG Vs. Raw HTML - Alan Duncan

Thank you for a very useful and informative site. I have been hand coding HTML for some time now and looking at your source code have found some tags that I don't recognize such as 'X-SAS-WINDOW' and 'X-SAS-UseImageWidth'. What are they?

The tags are inserted by Claris HomePage for its own purposes and seem to be redundant as removing them makes no difference to the page. I have noticed a few peculiarites in the code generated by both Claris HomePage and Adobe PageMill. Neither of them seem to be able to 'clean-up' the HTML of pages that have been extensively edited leaving things like silly empty FONT and UL tags. Having said that, I am using Beta versions of both products and I can tell you that this site wouldn't be here if I had to 'hand code' it!

Back to Top

 

 

Jasbir Gambhir's user interface problem

It was fantastic presentation of how HTML pages should be created & what points should be kept in mind while designing. But as you wrote that there might be a very good piece of graphic, how do we make the user aware that it is not only a mindblowing grahic but an active image map.

Actually, i have faced this problem several times. Last time, we made a java applet which consisted of a fantastic graphic. The graphic in turn consisted of video's, tv's etc. The user was supposed to move the mouse near the video buttons for another applet to start or press enter near those very small buttons. i was at a loss b'coz the graphic team had put a lot of effort in designing that graphic. i had to use those very small buttons for different functions but when a novice was told to use it. He just couldn't find the navigation tools.

What do U suggest ?

There are two main kinds of navigational devices - the EXPLICIT and the METAPHORICAL. The explicit one is in the form of a button or hypertext word that says BACK or NEXT, with or without an arrow or other graphic. The metaphorical is like the Trash Can on your desktop, you understand the purpose of a trash can so you make the connection. If I design an interface for playing videos that mimics the controls of a real life video tape player, the user will understand how to use it, especially if the buttons have the standard tape transport symbols. If I use different symbols or controls that don't mimic the buttons on a video player then I have to use my skills as a creative graphic designer to find a _working_ alternative.

How do I know if it works you might ask? I 'idiot test' it!

When I designed the 'home page' for the Web Page Design for Designers site, I designed it with obvious rectangular buttons for the main menu items and also a version with less obvious buttons which were just lines of anti-aliased text.

When I tried it out on some 'idiots' (no disrespect meant to real idiots here) they had no problems with the obvious buttons but were confused by the lines of plain text because they were NOT obviously hypertext OR buttons. I found that by adding the coloured arrowheads to the ends of the lines of plain text, everybody understood what to do. So, I arrived at a solution that fits into neither the EXPLICIT nor METAPHORICAL camps but draws a little from each.

Although I have tested it and am content that it works in almost every case, I know it is not 100% perfect - but then what is?

For anyone interested in some of the theory behind graphic symbols and and their use in interface design, I have added a new page.

Back to Top

 

 

Martin Pierce wants to know about Java

You mention Java on one of your pages and I have been hearing a lot about it recently. I don't really understand what it is all about, do I need to know about it to design web pages and where can I find out? How does it compare with HTML?

Martin, if you are a graphic designer, you probably don't need to know much about Java - yet!. I bought a book called Teach Yourself Java in 21 Days and would highly recommend it if you want to get started or you could go to Sun's web site for some pointers. I don't think I will be using it on any of my web sites for some time because, although all our machines are fast and packed with RAM, I know a lot of people still using older machines with 8 Meg of RAM and running System 7.1 or Windows 3.1 and they are going to miss out.

Java is a lot more difficult to learn than HTML, getting your brain around the concepts of object oriented programming is a major hurdle for most people and I won't go into details. I did say from the outset that this site was going to be a geek free zone!

Back to Top

 

 

A blatant plug for Nina - Proofreading

Hi Nina, If you are referring to the typos on my site, I usually catch them in the cold light of dawn. If you are trying to sell me your services, this site is non-profit making and can't support the expenditure. Seriously though, designers are notoriously bad at spelling and I claim no exception. Long hours, late nights, tired eyes, clumsy typing - hey, I'm starting to write your ad for free...

It's that left/right brain thing, and thanks for the copywriting -- you may see it on my Website! :) Ah, but who proofs the sites you build for others? I have a number of clients who feel that after staring at the screen for hours on end, creating away, they need another pair of eyes. So they use mine. Big sites, little sites -- they all need to be as perfect as possible. Think about it, and thanks again!

Ok Nina, you got your plug, happy now? (In the absense off a gude web spel and grammer chequer, this link mite be usefull!)

Back to Top

 

 

Pantone colours for web designers? - David Faulder

I enjoyed your pages on web design - found via netscape's "What's new". Do you have any information regarding matching screen colours to "corporate" colours that have been designated using the Panatone system; for instance we use 420 & 211, and life would be a lot more peaceful if I could get my web pages to match - or would you argue that for screen publishing it is better to do something different because of different ways in which colours are perceived on screen and on page?

Pantone have just published a swatch book of the Web Palette at $29.95 Pantone ColorWeb. The nearest web colour to Pantone 420 is CCCCCC and 211 is FF66CC, I have checked these and they look pretty close on my Radius PrecsionColor monitor but who knows what they will look like on an office PC. (But then, have you ever seen two Pantone swatches that match exactly?)

Back to Top

 

 

A new way to create typographic leading?

I just found your page on the " Whats New? " section, and I must say how refreshing it is to see somebody using a clean, concise, and functionally attractive page design. I would imagine that many of the tips within it shall be referred to on numerous occasions, as I have only just recently started designing on the Internet.

I just wanted to mention, in reference to your para. on leading, that it is now possible to adjust leading in 'Body Text' etc. The 'line height' attribute sets "leading". You can specify leading in points,inches, centimeters, or pixels. For example:

{line-height: 20pt}

You can also specify a percentage value:

{line-height: 150%}

c/o. " A User's Guide to Style Sheets"

Jeremy Mac Lynn

I could not reply to you Jeremy because your email address was not recognised, but I presume you are talking about Microsoft Internet Explorer 3.0 specific tags here. I go to great pains in my ramblings to try to disuade designers from using features that 90 percent of readers will miss out on, no matter how 'cool'. I would love to see the HTML 3.2 specs include these tags and maybe they will, but until they do and they are universally adopted.........

Back to Top

 

 

Hard copy? Hard luck!

 

I have had a few messages from people who have tried to print out these pages and are getting poor results. Unfortunately, neither Netscape nor MsIE are DTP packages and their printing facilities are fairly basic. This site was designed, and optimised, to be viewed on a computer screen and the anti-aliased headings and photographs are at screen resolution - 72 dpi. I would not expect it to print very well and that is why I have prepared an off-line version that can be downloaded on to your hard disk for reading off-line. The off-line version is updated every weekend so may not contain the latest forum messages or any additions made during the week. See the LINKS page for downloading.

If you MUST have a hard copy, try saving the pages as TEXT and print from those.

Back to Top

 

 

A message from Joe on his 'day off'

 

I would first of all, like to thank everyone who has taken the trouble to write. It is Sunday 8th September and my site has had over 10,000 visits this week and a corresponding amount of email. The mail varies from simple 'thank you' messages to requests for very complicated information, from useful tips to invitations to visit and review individual sites. I AM OVERWHELMED! As there is only one of me and I have to work and sleep sometimes, please be understanding if you do not recieve a personal reply. Much as I would like to, I can't possibly reply to everyone.

I am sorry but I can't offer critiques of your home page or undertake to find specific pieces of information or links for individuals. If I can answer a question off the top of my head, I probably will, but I can not do your research for you.

I have had mail from every corner of the World with some offers to translate the site into local languages. I must point out that this site, its content and design are my copyright and you must have my express written permission to reproduce all, or any part of it by any means whatsoever. Having said that, I will not withhold that permission for any purpose that I think fair and reasonable.

Again, thank you all for help making Web Page Design for Designers such a success. Joe. :?{

Back to Top

 

 

A CorelPAINT tip from Sophia Chan

 

I was just looking for stuff on Yahoo and came by your link. I love the design of your page. Did you know you can make gifs with CorelPAINT! ? It's pretty neat. That way, I don't have to buy a GIF drawing program.

What you do is, first you download someone's gif image, it can't be interlaced or transparent, second you open it in CorelPAINT! and you can erase the picture you downloaded and then draw whatever pictures you want. If you want to adjust the area, just go to 'Area...' under 'Edit'.

I apologize if you've discovered this already but I thought this was pretty neat since I don't have to spend extra money to make a GIF.

Back to Top

 

 

What are your influences? asks Angela Collins

I rmust congratulate you on your wonderful site, it is the most beautiful and informative site I have seen on the web. I am a graphic designer and new to all this web stuff, so your site has been an inspiration.

What impresses me most is your use of color. I don't know how to describe it but it is both restrained and vibrant, which seems to be a contradiction. Can you tell me what your influences are and point me in the direction of any suitable reference books?

Ahem, thanks for the eMail Angela (or is it fan mail?), I'm glad that you like the site but it is a tricky question. We are ALL new to 'this web stuff', there are no 'old hands' in this business!

To try to answer your question, I have had a good old fashioned art college training and I suppose I must put it down to that initially. I have done a some painting too, that helps in developing an appreciation of colour.

I think that my influences are more Bauhaus than anything else, especially Herbert Bayer and Josef Albers. As far as reference books are concerned, I can't really help. I don't believe that you can learn to use colour from books, only from practice.

Back to Top

 

 

Bob Gale suggests a NEXT button - dunnit!

I just discovered your Web Page Design site today (thanks to Netscape's What's New page), and I read it "cover to cover." I've been following Web page design issues for a while now, and you've done a great job in pulling together the most important concepts into a coherent and attractive package.

A few thoughts on navigation: Considering that I read your whole site through in one sitting, I would have liked "next" and "previous" buttons/links instead of having to reload the main page each time. My philosophy on hypertext is that although it does give us the ability to break out of the linearity of less interactive media, reading is still a very linear process. Many readers appreciate a suggested linear course through a written work, even when it's only one of many possible paths. If the case of your site, where there does seem to be a progression of topics from general to specific and from basic to advanced, I should think that Previous/Next links (or even just Next) would be a valuable yet unobtrusive navigational feature, IMHO.

I don't usually subscribe to 'relative' navigational links. It had not occurred to me at the outset that anyone would read the site from 'cover to cover' as you put it, but I have had a surprising amount of mail from people who have said that they have done just that. I guess old habits die hard! In the light of that, I have added a 'NEXT' button.

Also, do you have any thoughts on using HTML form elements as navigational tools, such as the "Pick a section" drop-down list paired with a "Go" submit button used at www.sjmercury.com and www.washingtonpost.com? I'm considering using them on our newspaper's Web site as away of providing many navigation options on each page without using up a lot of space. I also like the way it plays with the notion of "software" vs. "content"; rather than content being this separate thing that we present within a wrapper of software called a Web browser, the software is embedded within the content itself.

This mechanism is useful where space (or lack of it) is an issue but I find it clumsy in most circumstances as it requires what I feel is 'too much' user intervention. It requires a click, a drag, and another click to achieve the functionality of a single click on an ordinary list or image map menu. It also contradicts the functionality of any other computer interface 'pop-up menu' element that excecutes on 'mouseup'.

Back to Top

 

 

Design Vs. Speed - a question from Henry Wheeler

Joe, I am very impressed by the look and content of your Web Page Design site. Most of the good looking sites on the web rely heavily on large graphic elements that take ages to download but yours looks great and downloads very quickly. At what point do you think that a designer should start compromising design for speed?

This is a difficult one because there are so many unknown factors. I agree that it is all too easy to stick a whizzy, full screen graphic up there produced in Freehand or something at the expense of download time. I am aware of personally 'compromising design for speed' as you put it.

On my company site http://ds.dial.pipex.com/pixelp/ I originally used separate icons along the bottom of the screen with the idea that I could 'grey-out' the icon representing the page being viewed and leave the rest 'active'.

In practice, this turned out to be very slow and annoying so I just put all the icons into one single 'image mapped' graphic. Having a common graphic on every page is more efficient from a 'bandwidth' point of view.

Although this is less than ideal functionally, I can justify it as being 'true to the medium' but it would be impossible to make any hard and fast rule.

Bac to Top

 

 

Jeff Gates writes about more palette issues

I've just read your answers to a couple of queries about color mapping and I have a few questions:

Do you have to worry about cross platform color mapping if you are using jpegs? I know the difference between gifs and jpegs, but how do they deal with cross-platform color issues differently?

JPEGS are 24-bit images and are dithered by the browser on 8-bit displays so there are no cross paltform problems with JPEGs whatsoever.

Also, is it necessary to use your web color chart if you are using only one image on a page? I was told that if you save all the images you will be using on one page in one Photoshop document, a correct color table will be created so there are no strange colors appearing in any image.

This is a good technique for producing a 'super palette' to prevent palette flashing in Director and other multimedia programs as you go from one 'frame' to another but it is not really relevant for WWW design.

However, if you are concerned about cross-platform readability, I would assume that is when one would use the color chart and color map procedure you are outlining. Correct?

Yes, but readability is the wrong term, 'readability' refers to an attribute of typographic and letterform design. What you are refering to is cross-platform colour consistency.

Somewhere, very early on, I was told by someone who was extensively experimenting with graphics on the web that one's gifs (when converted to Index Color) should be given an "adapted" palette with no dithering (as Netscape had it's own built-in dithering scheme). I notice you have suggested other choices in the Mode Change to Index Color dialog box.

Why do you recommend those choices?

Jeff, that advice could lead to disaster! I have had a lot of correspondence about palettes. As there seem to be general confusion on this subject, I have put together another couple of pages which should help to answer yours, and many other peoples questions. They will demonstrate why you should NOT use adaptive palettes and also have a link to a Photoshop Web Palette .act file that you can download. See More about PALETTES.

Bac to Top

 

 

On using invisible gifs for spacing - Mike DelGaudio

Congratulations on a very informative, and quite beautiful site. One thing I have recently discovered is the use of the "one pixel-transparent gif" as a method of placing text and images where I want them, using absolute pixel references, or as close as I can get given the "elasticity" of a web page. In viewing the source of your documents, it appears you use the "trick" extensively. I was wondering if you have any particular methods that you have had success with. Or ground rules you could suggest to use this method as effeciently as possible.

I have not used anything as small as a single pixel transparent gif, I prefer to use the <&nbsp;> tag and adjust the font size of the space. This can be used for both horizontal and vertical spacing.

The 'non-breaking space' is not supported by many web design packages and has to be added at HTML level but, as I mention in the typography section, it is the best way of introducing letter-spacing. You can put in a nbsp and set its size to adjust letterspacing or, if you put it at the 'back end' of a line in conjunction with an 'ALT-RETURN' and make it a large size, it controls your leading.

If you do use a transparent (invisible) gif, use just one for your whole site and adjust its size using the image size tags.

Bac to Top

 

 

A tip about rules from Joe Pemberton

Joe, I find your site very useful as a student of graphic design (at Brigham Young University, Provo, Utah, USA) and a free-lance web publisher. In your typography section you mention the use of rules, specifically on how to resize rules (or any image) by specifying its width in pixels in the "img src" tag. You mentioned that the <hr> tag automatically resizes when the browser window is resized.

You can achieve this with an image by specifying its width as a percent of the screen in the "img src" tag (<img src="x.gif" width="y%"). It may be useful to include that information among the other great tips you have published. Keep up the fine work.

Bac to Top

 

 

Patrick Havens asks about frames

My Name is Patrick Havens and I'm in the process of changing my page over to one with frames. And my question is, what is your feelings on them. It seems to make it easier to put things in a way that people can find things easier. But are there some guidelines I should follow.

Frames were very popular when they were first introduced in Netscape but many people have stopped using them.

Used well, they can provide a static list of links to other pages or provide a constant header or footer. But you must be aware that a lot of people use 640 x 480 screens or smaller - there are still some Macintosh LC users with 12 inch screens and there are now web browsers for the Newton! There are also some web browsers that don't support frames at all.

On smaller screens, the 'usable' area of a 'frames' page design becomes disproportionately smaller and the user finds scroll bars on every pane both horizontally and vertically which exasperates the problem even further.

I find that frames create more problems than solutions and I avoid using them where possible. I would say, that if you do decide to use them, you should check the functionality of your design by reducing the size of your browser window to simulate a small screen size and see what happens.

It is also a good idea to give your readers a 'WITHOUT FRAMES' option but, of course, that means doing everything twice!

Bac to Top

 

 

What about anti-aliased type? asks Yves Roberts

I was very interested to read your site. I too am very frustrated about the lack of typography on web pages design and the fact that type does not look so good on the computer screen.

I have read that it will soon be possible to have anti-aliased type on the screen using Adobe Type Manager 4. Will this not make everything look much better?

Yves, anti-aliasing can make type look a lot better on the computer screen but it has its pitfalls too.

Anti-aliasing type makes it look smoother by adding intermediate coloured pixels into the 'steps' in curved or diagonal lines thereby creating an illusion of a higher resolution screen. It is effectively 'blurring' the edges of the type and works well on large, bold typefaces.

Palatino 14 point at 800% magnification shows the effects of anti-aliasing

Trying to anti-alias smaller font sizes, 18 point and below, tends to make text too fuzzy to read, especially on lighter faces. In trying to be accurate with character shapes and spacing, the technique 'fights' with the natural pixel grid of the screen and trys to put vertical lines in-between pixels. It can only simulate this by adjusting the tonal values, so you get lines which are on-grid and ones that are off-grid looking different in weight and colour.

Notice how Palatino anti-aliases more sucessfully than the lighter Futura because it has a vertical 'stress', the downstrokes are relatively thick. Futura has a more even geometry and blurs in all directions, even at 18 point size

I prefer to use a good screen font for small sizes of type and only use anti-aliasing for headlines.

Of course, you will have little, if any, control over the typeface your reader is using for his browser or whether ATM 4.0 is installed at all!

Bac to Top

 

 

Lisa Clements shares a viewpoint

Thanks for this info! I am working on my web site and coming from a design background, find the (for lack of a better word) "geeky" side of all this a little daunting. Unlike print, multimedia design becomes geeky fast! Your easy to read designer viewpoint is a big help!

I have been designing a corporate site with lots of computer whizs for the last year and am now working on my site and sites for clients without the computer genius so readily available. I love the challenge though! It is important for all designers to recognize the importance of multi-disciplinary work in these technological times!

Bac to Top

 

 

M. Steven Hilton, Jr. asks about palette mapping

Awesome site dude.

I read the whole web design site from front to back and have a question about the Netscape palette.

Let's say I've been given 6 different gifs to put onto a website. All of them vary quite a bit, but not drastically, from image to image. (most are pics of people with a lot of flesh tones, others are logos with bright neon-like colors)

How would I go about remapping the color palette on each gif to the Netscape palette?

You will need Photoshop (or DeBabelizer) but the technique is very simple.

Download the WebPalette from my site. (webpal.gif)

Open it in Photoshop

Go to Mode Menu - Color Table

Select Save and save the palette as 'webpal.act'

Now open one of your files (in RGB mode - important!)

Choose Mode Menu - Indexed Color

Choose Custom and Diffusion and OK

In the Colour Table dialog that opens, load your new 'webpal.act'

You will have converted the file to the web palette

Save it as a GIF file.

For subsequent conversions, just choose Previous in the Indexed Color dialog or reload the 'webpal.act' if you have changed to a different palette..

NOTE: There is now a downloadable 'WebPal.act' on the new Palettes page.

Bac to Top

 

 

A question about navigation from Sasha Pave

I have a question for navigational design, which maybe will spark some discussion:

Is it important to provide a listing of all the areas in a site on every page? For instance, if you have a site split up between 10 different areas. Should all 10 be listed on each page? It's a bit much for a menu bar.

The more savy reader would appreciate it, but simplicity would state otherwise.

It is a designer's job to prioritise information and present it in the most logical and easy to understand way. If it is essential that it is possible to directly access every area from every page then a way must be found to make it work. To put direct access on every page by default just shows that the problem hasn't been considered enough.

On analysis, it is most likely that the presentation of the information can be simplified and you are absolutely right to try to maintain simplicity. One possibility is to return to a main menu from each page, as my site does. The nature of the site is not completely linear or I would have put a NEXT button on each page as well as a HOME button. I think that this helps the reader keep his/her bearings.

The other possibility is to GROUP the areas into a more managable size (6?) and then branch out from those.

Bac to Top

 


 

What are the Gif animation programs you mention? - asks
Paul Anderson

For the Mac, I have been using Gif Builder, an excellent freeware package from Yves Piquet in Switzerland. It does everything you could want, and very elegantly too.

If you use a PC, Corel Xara 1.2 can now produce animated Gifs and it is certainly my favourite graphics package on the PC platform by far.

Bac to Top

 


 

Peter Small asks about cross platform palettes

First, thanks Joe for your very helpful palette colour guide chart. It has helped me at last (after many years) to get a mind set on colour palettes.

Do colours in fact come out the same on all PCs and the Mac (in 8,16 and 32 bit) if you use those recommended mixtures of red green and blue?

In theory, yes. On a Mac screen, given the slight differences in screen phosphors, the colours will be reasonably consistent. On PCs, there is little concept of colour consistency and the same colour can vary quite considerably from one monitor and video card to another. The most significant difference between Mac and PC platforms is the 'gamma' of the screen. Without getting too technical, mid tones on a PC monitor will appear darker than on a Mac monitor. If you set up a wedge of 16 even steps of grey with Photoshop on a Mac and then view the same file on a PC, all the dark greys run into one another. The same goes for all other colours. (Now perhaps you will start to understand why designers prefer Macs).

Bac to Top