Web Design Issues Index

WPDFD Issue #87 - January 25, 8000

Eight Rules for Effective Web Forms
If you're looking to collect information from your users, there isn't a much easier or more straightforward method than a Web form. If designed well, Web forms provide valuable information; if not, they may scare users away.
25 Beautiful Minimalist Designs
"Simplify, simplify, simplify." It's one of Thoreau's most enduring witticisms, and with good reason. When faced with the ever-increasing barrage of information that is modern life, many people find solace in minimalism.
Punctuationality (Part 2)
Part two of last week's examination of the personality of punctuation. Click here to read Part 1. Em Dash and Hyphen Em dashes and hyphens are sisters, and whenever they go out together, they get stopped by strangers.
Punctuationality (Part 1)
It's easy to resent punctuation. Its purpose is to clarify sentences, so why are the rules governing it so complicated? There are so many exceptions, so many exceptions to exceptions — it's enough to make you want forego punctuation altogether.
Top Five Ways to Make Your Site More Popular
The Web has grown into a real jungle, and finding cool new sites nowadays isn't always the easiest thing in the world. If you have a Website yourself, you're dealing with the other end of this issue. How do you get noticed online, and is there anything you can do to increase your popularity?
A Capital Idea: Setting the Record Straight on Capitalization Online
American English grammar is fraught with peril, filled with constructions, conventions, and exceptions seemingly designed to trip you up. Is it who or whom, further or farther, lie or lay? Should you use which or that, however or while, i.e.
Designing Accessible Websites
For the third-largest minority group in the United States — more than 40 million people — the vast majority of Websites are partially or completely inaccessible. The idea of a Website that excludes African-Americans or Latinos is all but unthinkable, yet Americans with disabilities are constantly faced with Websites that don't take their needs into account.
Typography and Renaissance-Era Eroticism
Hold on tight, people: I'm about to take you way, way back. Think back to a time before the Internet, before computers, before typewriters, back when the word “America” was still fresh on the lips of European colonists and people were still getting used to that newfangled Gregorian calendar.
Obama Defeats McCain
In these shaky economic and political times, it's important to put aside our conservative-versus-liberal differences, to shun petty political squabbling and come together in perfect bipartisan agreement about an important issue facing this election: Web design.
Where Design Really Fits
As a designer, do you know where your work really fits in the process of design? We all love Web design. Looking at a blank white box on a computer screen and using only your mind's eye, a mouse, and a keyboard to transform it into a living, breathing Website is no minor feat, and there is undoubtedly a creative rush when it comes to doing something like this.
The Design Environment
I get anxious in certain environments. The reasons for this can vary from general disorganization, to bad lighting or clashing colors, but the biggest culprit is usually clutter. Clutter is the stuff that has no "place," doesn't belong with its surroundings, and serves little to no purpose.
Knowing About Web Safe Fonts
What are Web safe fonts? Practically every personal computer has a set of fonts installed. These fonts are usually put there by the computer manufacturer or are the default sets of fonts for the operating system that computer is using.
Bland and Grand Web Designs
One of the greatest aspects about the Web is that it's such an open platform, especially for design. The accessibility and freedom of the Web allows designers to do some very nice-looking things, and it allows for experimentation and interpretation.
Do You Reset Your Web Design?
They've been around for a while now: reset style sheets. They're becoming more commonplace among web designers, and even Yahoo is using a reset stylesheet of their own in their development. There are a few different viewpoints and opinions on the use of reset stylesheets, though.
Showcase Your Design!
Do you have a good Web design? I'd love to see it. As part of an upcoming article for WPDFD, I'm going to showcase and discuss some good-looking, functional, and well-coded designs. If your design can match any of these three primary descriptors, a screenshot of your design and a link to your site might make it into the article.

WPDFD Issue #86 - January 25, 400

Don't Be Afraid of Serif Fonts
As the practice of Web design ages, some common rules and "best practices" inevitably embed themselves in the craft. Among these are the processes for using specific types of semantics when coding your site, like using divs as hooks in your X/HTML for your CSS, and making your page beautiful and functional that way.
Simple CSS: Creating More Readable Text
Typography is an important part of Web design. Just like in the print world, your content needs to be readable to your viewers for it to be of any use. As a general rule, you want to make sure your Web site provides as little resistance as possible to the user, and the easier your site is to read, the better.
Tomorrow's Web Design: Popular Design Software Challenge
Recently, I took up a project. A co-worker of mine created a fully standards-compliant XHTML website from the ground up titled HTML for Beginners, which will be released sometime soon. His code was hand-written and it's elegant and functional.
HTML, the Foundation of the Web
HTML is hot again. Some time ago the HTML5 promo machine got up to speed, causing a little mini-fuss. In a parallel universe, others are still putting a lot of time and effort into the development of xHTML2.
Twelve Things Most Sites Need - Part II
In the first installment, Twelve Things Most Sites Need - Part I , I offered a six-pack of must-haves. Specifically I suggested sites should have a proper navigation menu , a meaningful, well-formed title , a method of contact , a site map , passive accessibility , and standardized markup .

WPDFD Issue #85 - December 03, 2007

Twelve Things Most Sites Need - Part I
There are a plethora of Websites out there, each one unique in its design, its content, markup, features, functionality, and in myriad other ways. Yet, despite these differences, there are specific needs that should be met with near consistency, Internet-wide, regardless of the site.
Designing and Developing Websites with MAMP and MODx
Having a local development environment is an excellent idea. It is not at all difficult these days to install a xAMP stack. By this I mean an Apache web server, a MySQL database, and PHP/Perl. There is XAMPP for Windows and Mac, LAMP for Linux, and MAMP.
Growing Up with the Web
We're entering an exciting period in the history of the Web. Since the 90's, the Internet has embedded itself in our lives in ways we couldn't have imagined. I'd be hard pressed to find a lad in my school who doesn't have a MySpace , Facebook or Twitter profile, a Flickr account or a blog.
Simple CSS: Removing the Underline from Links
We frequently get responses and e-mails from viewers, and I see it requested all the time in user forums and elsewhere around the web: how do you remove the underline from links in your Web page? First Method: Inline Style The first way to do this would be to apply a style attribute to your links containing the CSS property "text-decoration." Like so: <a href="link-to-page-here.html" style="text-decoration: none;">Link text here!</a> This will create a link with no underline, but it will only affect that link, so you'll need to apply the style attribute to each link that you want to appear without an underline.
Things Every Web Designer Should Know
We get a lot of e-mail from people asking for ways to be a better Web designer. There is no simple way to answer a question like that, but the majority of the time we find that a designer has been exposed to HTML and Web design in such a way that he or she is designing pages and uploading them to the Web, but was never shown some of the essentials of Web design.
IE Version Targeting: A Neutral Perspective
Recently, there has been a lot of buzz going around about Internet Explorer 8 and plans to include in it a feature called "version targeting." You can scour the net for blog posts and articles about version targeting, but you'll get a lot of debate and several different views on this topic, and it's difficult to pinpoint just the facts.
Creating Lasting Websites
When my 98 year old grandpa posted a comment on my weblog last fall it hit me in a new way just how much the web is a part of our society. If I open my laptop in a coffee shop and there's no wireless I practically don't know what to do.

WPDFD Issue #84 - September 04, 2007

Board it Up
If there's one thing to be learned from print design, it's the impact of presentation. Unlike on the web, you can precisely control how your design will be presented, down to the exact dimensions, weight, and even sheen of the paper.
Painting, Karate and Organization
My sister recently graduated college and moved out to live with my wife and I for a while. This afternoon while I was helping her get moved in we were in my office getting some manilla folders and she tells me, "I need to marry a guy who's organized." ( Say what?

WPDFD Issue #83 - August 24, 2007

Web Design Success Story
Composition in web design is similar to good composition in print design. It is a process organizing and communicating in a way that is both functional and aesthetically pleasing. Web design is often even more complex because of the processes of navigation and multitude of variables in user interaction.
The Most Important Words You'll Ever Write
Do you want to know the secret to selling things successfully online? It's finding the RIGHT WORDS for the job. Consider this: Most visitors take 10 seconds or less to decide whether to stick around or move on to the next site.

WPDFD Issue #82 - April 20, 2007

A Stripe of List Style Inspiration
When most web designers think about css-styled link lists, the mental images that come to mind are of the trusty old horizontal and vertical navigation menus we’ve all become accustomed to building into our sites.
Interview: Jared Spool on Design
We recently spoke with renown usability expert Jared Spool. User Interface Engineering , the firm that he founded in 1988, is the world’s largest research, training and consulting firm specializing in Website and product usability.
What Humility Can Do For Your Career
The ministry I work with recently printed out an ad to pass out at a local jazz festival. As usual, things came down to the wire and the design was awaiting it's last minute approval process before going to print the next morning.
Do you need to re-design?
As daunting of a task as it may seem, your website is your company’s image and needs to look presentable. Ask yourself, how long have I had my current web site design? If your answer is more than 3 years, then its time to start thinking redesign.
Building Blocks of a Great Website
Building a great Website can be a lot of work. There is software that makes it a lot easier, but there are some other pieces of the puzzle I would like to tell you about too. I want to share a few secrets we’ve been using for years to help us make great looking Websites with you.
Online Business with a Shoestring Budget
You have a great idea, service or product. Now it’s time to build a Website and realize your dream. The eternal optimists say, “Build it and they will come”. This is easier said than done.
Writing the Web
Much has been written on the technical and graphical aspects of web design; these are important issues to be sure, but a central point often forgotten is that we read web sites. Jakob Nielson wrote about this way back in the year 2000 : Of users' first three eye-fixations on a page, only 22% were on graphics; 78% were on text.
How to Correct and Validate Your HTML
Validating your HTML documents is an automated process, akin to spell-checking your Word documents. Sounds like a no-brainer that any conscientious Web developer should do, right? However, HTML validators can sometimes return cryptic or arcane-sounding results that may be difficult for Web site developers to determine how to fix.
Link Building
Link Building   Link building is one of the most important factors of Search Engine Optimization (SEO), as Search Engine algorithms take into account when determining the relevancy and, indirectly, page rank of a site on Search Engine Results Pages (SERPs).
SEO Terms
Important SEO Terms   So you’ve purchased your domain and are ready to write your website content. Before you start writing SEO content anything, there are numerous SEO terms and tips with which you should become familiar:   Keyword – a keyword is a word that is typed into search engines.
Directory Submission
Before I get into the process of building quality links to your website, I’d like to briefly address an often overlooked step in the website creation process: Directory submission. A directory is an online database of categorized websites...like an online yellow pages.
The Basics of SEO
The Basics of SEO In the SEO World, there is a good deal of debate about where the term ‘Search Engine Optimization’ (SEO) originated. There is no conclusive evidence that a single individual or group of individuals coined this phrase; what is known is that the phrase appeared in the late 1990’s and referred to a process that increased web page rankings on Search Engines.
The Black and White of SEO
As with any other business practice, Search Engine Optimization can be performed within or without the boundaries of accepted business ethics. White hat SEO is optimization that follows the guidelines set forth by search engines.
Page Rank and Backlinking
A website’s success is contingent upon countless factors. Of these factors, perhaps the most essential is a site’s Google Page Rank, which is an algorithmic estimation of a site’s relevancy as determined by Google.
Centering Your Web Site With CSS
Using CSS to center elements on a Web site -- whether it's the entire page or a single block or tag -- can be a little tricky at first, especially if you've only used tables to center elements before.
What is SEO
Over the years, I've been approached by countless CEOs and Webmasters who, without any understanding of the term Search Engine Optimization (SEO), tell me that their website needs SEO. "Great," I respond, "which pages require SEO?
Using Graphics in CSS Styles
Want to add a repeating image to your site's header, use custom bullets in a list, or position an image that remains in place on your site even when users scroll down? You can accomplish all of these effects using the CSS background property.

WPDFD Issue #81 - December 01, 2004

Firefox 1.0 � the review!
Yes, the fans of Firefox have certainly been working hard and have managed to persuade some seven and a half million surfers to download it onto their computers. No mean feat! But, with all the hype, how good is it really?
Stop the Web, I want to get off
For me, the World Wide Web started in 1993. By then, I was already a seasoned 'interactive multimedia' veteran with a client list that included VideoLogic, Apple Computer and Canon. I had been an 'early adopter' when personal computers hit the scene in the early eighties.
The last word
I don’t think that there's anything more pleasurable in life than helping someone. From what readers have written and told me, this site has given a great deal of help to a lot of people over the years and a small amount of gratitude was all I needed to keep going.

WPDFD Issue #80 - November 01, 2004

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.
Patently transparent
'Opacity', it what your graphics program probably calls 'transparency'. Is the glass half opaque or half transparent? Whichever way you look at it, if you try it on the Web, you could have problems. Opacity is not officially supported yet in CSS although it has been around for a while in proprietary, browser-specific guises.
Buttons over images
Joe Gillespie 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.
Campaign Monitor
In a Net awash with unsolicited junk mail and SPAM, it's getting increasingly difficult to send legitimate marketing information to people who have actually asked for it. If you do manage to get your newsletters or e-brochures through, it's hard to judge how effective it's been.
Buttons over images
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.
Paper vs. Pixels - Part 4
This is the fourth, and final, article in the series. 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.
Campaign Monitor
In a Net awash with unsolicited junk mail and SPAM, it's getting increasingly difficult to send legitimate marketing information to people who have actually asked for it. If you do manage to get your newsletters or e-brochures through, it's hard to judge how effective it's been.
Patently transparent
'Opacity', it what your graphics program probably calls 'transparency'. Is the glass half opaque or half transparent? Whichever way you look at it, if you try it on the Web, you could have problems. Opacity is not officially supported yet in CSS although it has been around for a while in proprietary, browser-specific guises.

WPDFD Issue #79 - October 01, 2004

Paper vs. Pixels - Part 3
Continuing the series on changing from print design to Web design, this month we'll look at some of the 'interactive' aspects of using the Web. Print is basically passive. Unless it's a kid's book with pictures to colour-in or puzzles to do, or it has some kind of levers to make things wiggle, you just read – and that's it.
BBEdit 8
When I first started designing Web pages way back in 1993, there were no HTML editors and only one browser – NCSA Mosaic . I was a hand-coder from the start and at that time I used Microsoft Word as my HTML editor because it had a lot more going for it than SimpleText.
Spread Firefox
Mozilla Firefox browser is now reaching its final 1.0 release and is available as a 'preview' version to squeeze out the last few bugs. Firefox is the younger, slimmer sister of Mozilla aimed at the average surfer.

WPDFD Issue #78 - September 01, 2004

Absolutely relative
The concepts of absolute and relative positioning in CSS can be quite confusing and are often misunderstood. Absolute positioning puts CSS boxes (divs) at specific pixel locations in the browser window, just like pinning cards on a notice board.
Paper vs. Pixels - Part 2
Last month, I started examining some of the vital differences between designing for print and for the Web and explained how a Web page has no specific dimensions. Now, we'll look at some other factors that seem equally nebulous but have to be understood and accommodated.
CSS Layout Books
I'm going to review two excellent new CSS books this month. They have a lot in common. Both are by prominent authors in this field and cover similar ground but they are quite different in approach and will appeal to slightly different audiences.
Debugging your Web pages
Every day, someone posts a plea for help on the WPDF Forum or one of the other mailing lists that I frequent. Their new Web page isn't working in some browser or another and they post the URL for people to check it out.

WPDFD Issue #77 - August 01, 2004

Adapting print design skills for the Web
by Joe Gillespie If you've learned your design skills in the context of print, as many designers do, and you want to try your hand at some Web design, you have an excellent head start. This article examines graphic design skills and sifts through them to find out which are most appropriate when it comes to putting Web pages together.
Paper vs. Pixels - Part 1
I've often heard the criticism of print designers that they can design only at one, fixed size, but that's not strictly true. Press ads have to be adapted for different publication and page dimensions.
Adapting print design skills for the Web
If you've learned your design skills in the context of print, as many designers do, and you want to try your hand at some Web design, you have an excellent head start. This article examines graphic design skills and sifts through them to find out which are most appropriate when it comes to putting Web pages together.
Paper vs. Pixels - Part 1
I've often heard the criticism of print designers that they can design only at one, fixed size, but that's not strictly true. Press ads have to be adapted for different publication and page dimensions.
Flaming Pear WebMaster plug-ins
Flaming Pear have been producing Photoshop format plug-in for a number of years now. I've already bought several of them and have been very pleased with the results. The WebMaster Series, as the name suggests, is aimed specifically at Web designers and is actually a set of three separate plug-ins.
Where does the overflow go?
There is only one thing you can be sure of about text on a Web page, the amount of room that it takes up cannot be be predicted! A different computer, another browser, some other user – they will all have their own ideas what the type font and size should be.

WPDFD Issue #76 - July 01, 2004

All you wanted to know about Web type but were afraid to ask
We all get fed up seeing the same old fonts on Web pages but is there anything we can do about it? It all comes down to the fact that some fonts come preinstalled by Windows and Mac OS by default. Of course, it depends on which version of Windows and Mac OS we are talking about because fonts sets change over time and there are still a lot of legacy systems in use out there.
Xara X1
When I first saw Xara several years ago, I was very impressed. It was a fast and easy to use vector drawing program for Windows that put all the bigger, established programs to shame. Not only was the program itself a delight, it came with a comprehensive library of clip art and fonts.
Setting up your Mac as a server for testing Web pages
Setting up your OS X Mac as a local server for testing your Web pages could hardly be easier. Apache comes already installed, all you have to do is go into the Sharing control panel, check Personal Web Sharing and click on the Start button.

WPDFD Issue #75 - June 01, 2004

Transparency made clear
Using transparency with a GIF or PNG file can solve a lot of problems when it comes to overlaying type on backgrounds. The GIF file on the left has a background colour that matches the page's background.
CSS From the Ground Up - 5 - a very good place to start!
by Joe Gillespie This month we have the last three sections of the CSS from the Ground Up series. The series is intended to be an introduction to Cascading Style Sheets and as such, doesn't go into a great deal of detail nor does it tell the whole story – by a long shot.
CSS From the Ground Up - 5 - a very good place to start!
This month we have the last three sections of the CSS from the Ground Up series. The series is intended to be an introduction to Cascading Style Sheets and as such, doesn't go into a great deal of detail nor does it tell the whole story – by a long shot.
Transparency made clear
Using transparency with a GIF or PNG file can solve a lot of problems when it comes to overlaying type on backgrounds.. The GIF file below has a background color that matches the page's background.
Screen Grabbers
Taking screen grabs is a common enough task for Web designers. Whether you need an image for reference or for a portfolio, having the right tool for the job makes things a lot easier. Windows has a very basic screen grabber build-in.
SnagIt is hard to beat. Not only will it capture the screen, windows, objects and selected regions – rectangular or irregular – it can capture the contents of scrolling windows(such as an entire web page) and it can capture editable text as well as images.
Another Windows screen grabbing solution that captures scrolling (Web) pages. In addition to the usual rectangular grabs that all the other programs do, it can also do non-rectangular shaped grabs. Like SnagIt, HyperSnap can also capture images from PC games that use DirectX™ (and also Glide™) technologies.
SnapzPro X 1.0 is the premier screen grabbing utility for Mac (OS9 and OSX) and gives all the most-used options for grabbing windows, objects and selections. Unlike SnagIt and HyperSnap-DX, it doesn't have a built-in image editor but Mac-based Web designers will already have one and it can save files to most image formats with optional scaling, compression and color depth.
Unlike SnapzPro, ScreenCatcher can grab whole Web pages at once – along with all the usual windows, area selections etc. and it does a good job too. I've been using this one myself, until recently.
Not a screen grabber in the usual sense, more a dedicated Web page grabber and it will capture entire Web pages including the hidden areas off-screen. SnapWeb uses WebKit, so the captures are the same as taking a screen grab from Safari, which is fine if you are only concerned with how a page looks in Safari and not in other browsers.
Open source, open wounds!
Last month's review of MacGimp stirred up quite a hornet's nest. Someone put a link to it on slashdot.org and it opened up a long and heated debate about the GIMP, graphics editor and open source software in general.

WPDFD Issue #74 - May 01, 2004

CSS From the Ground Up - 4
In trying to keep these tutorials as simple as possible, I have left out some more complicated aspects which are not key to learning the principles – but can't be ignored. Without going too deeply into the inner workings, I'm going to explain how to make sure that you and the browsers are talking the same language.
Dynamic CSS animation
Last month I introduced the concept of 'film-strip' rollovers and promised to show some more examples this time. You are probably familiar with the term 'Dynamic HTML'. DHTML suffered badly from cross-browser consistency and has more or less fallen by the wayside.
I have no idea what a 'Gimp' is but computer users of a UNIX persuasion will recognise that it as the name of an open source (read 'free') graphics editor that is often compared to PhotoShop for its range of features and abilities.
Netscape lives?
I used to be very fond of a good horror movie. I'm not talking about the Freddie-come-latelies but the classic Frankenstein, Dracula, Wolfman and 'living dead' movies that are now being resurrected by Universal Studios to support the new Van Helsing blockbuster.

WPDFD Issue #73 - April 01, 2004

Film-strip rollovers: a simpler way to do rollovers
JavaScript rollovers are unnecessarily complicated requiring a set of normal and 'over' images to be preloaded into the browser before they work correctly. The code then swaps one image for another based upon an 'onmouseover' event.
CSS From the Ground Up - 3
After covering the basics of text formatting last month, this month we move on to layouts. Up until recently, most Web page layouts were achieved using tables. Tables are fairly easy to understand from a conceptual point of view and most WYSIWYG editors make them easy to configure – adding and deleting rows and columns, merging cells together etc.
JavaScriptThe Definitive Guide
Most Web designers have used JavaScript. Whether it is just to make a button rollover or 'sniff' a browser version, they will have either used a pre-programmed script generated by their WYSIWYG editor's 'actions' or copied and pasted it from another script.
Beginning PHP 4
After JavaScript, PHP is probably the next best step towards making your Web pages more dynamic and interactive. Unlike JavaScript which runs on the reader's machine (client side) and is very limited in what it can do, PHP is run on the server, is much more powerful and not all that more difficult to come to terms with.
Learning Perl
With its roots in UNIX, Perl is a bit more difficult than JavaScript or PHP but it is the standard for CGI scripting on the Web. There are loads of free Perls scripts available to download and they are relatively easy to install and get running.

WPDFD Issue #72 - March 01, 2004

Adobe® GoLive® CSS Palette
This is a collection of drag and drop CSS boxes for use with Adobe GoLive. With these building blocks, you can build various types of fixed and fluid layouts quickly and easily. Download CSSBoxes.sit.hqx for Mac Download CSSBoxes.zip for Windows Installation Copy the CSSBoxes folder into the Extends Scripts folder in the GoLive Modules folder.
CSS From the Ground Up - 2 - a very good place to start!
In 'CSS from the Ground up' this month, I'm going to cover some further basics before going on to the trickier stuff. First, a little more about text formatting and an introduction to the fundamentals of typography.
QuicKeys X2
CE Software's QuicKeys has been around for some time, I've been using it for quite a few years with Mac OS 9.x and now I've upgraded to the X2 version for OSX. It is one of those utilities I just couldn't live without.
Add a custom icon for your site
You may have noticed that some sites, including this one, put custom icons into the URL boxes of browsers. It used to be that you could only add 'favicons' in Explorer but now most browsers support them and it's worth the little extra trouble that it takes to do it.

WPDFD Issue #71 - February 01, 2004

Mozilla Extensions
Indispensible utilities for web designers Mozilla is not the most popular browser by a long way, but I do believe it is the best. It's not the fastest browser, but I wouldn't call it slow. What it has is the most accurate and reliable rendering engine available, Gekko, and a host of features unmatched by any other browser – especially if you design Web pages.
Mozilla 1.6
Mozilla was supposed to stop with version 1.4 but it still goes on. 1.6 has improved mail features, Ask Jeeves searching and many bug and security fixes.
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.
Xara MenuMaker
XARA have released a new and enhanced version of Menu Maker , its popular dedicated software for creating NavBars and menus. With just a few clicks, users can create stylish graphical navigation bars and slick DHTML menus without the need for any artistic or technical skill.
This is a set of free sample MiniFonts for Mac or Windows featured in the February issue of How Magazine that you can download and try for yourself. They are complete, usable fonts, not disabled in any way.
CSS From the Ground Up a very good place to start! Previous CSS Articles Turning the Tables Converting table layouts to CSS Style Sheets Without Tears 3-part series on basic style sheets CSS - Browser Support How well the browsers cope Thinking Inside the Box The fundamental building blocks of CSS Box of Tricks Rollovers without JavaScript Scripting the Box The power of CSS plus JavaScript Drawing with CSS Draw simple charts using CSS boxes FunWithFonts.com Examples of CSS layout tricks I've covered some interesting Cascading Style Sheets techniques in the last year or so (see links on the left) but in almost every case, I've been pushing the envelope – sometimes a bit too hard.
Xara MenuMaker
XARA have released a new and enhanced version of Menu Maker , its popular dedicated software for creating NavBars and menus. With just a few clicks, users can create stylish graphical navigation bars and slick DHTML menus without the need for any artistic or technical skill.
This is a set of free sample MiniFonts for Mac or Windows featured in the February issue of How Magazine that you can download and try for yourself. They are complete, usable fonts, not disabled in any way.
I've covered some interesting Cascading Style Sheets techniques in the last year or so, but in almost every case, I've been pushing the envelope – sometimes a bit too hard. Most CSS Web pages will break in some browser at some time but hey, we're in the fast lane here!
Mozilla Extensions
Mozilla is not the most popular browser by a long way, but I do believe it is the best. It's not the fastest browser, but I wouldn't call it slow. What it has is the most accurate and reliable rendering engine available, Gekko, and a host of features unmatched by any other browser – especially if you design Web pages.

WPDFD Issue #70 - January 01, 2004

What's New
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.
Subscribe Me Pro
If you need to send out a regular newsletter, as I do, there are several options. You can sign-up to a site that sends out mailing lists for you, you can use a bulk mailing program and send it yourself or you can install a script on your server to do it for you automatically.
CSS from the Ground Up
Introduction If you are frightened by the prospects of using Cascading Style Sheets, there's no need to be. Using a computer can be daunting for someone coming to it afresh but after a while, you think nothing of it.
Drawing with CSS How to draw simple charts using basic CSS elements CSS has the ability to draw rectangles with borders and fills. With a little bit of lateral thinking, it doesn't take too much effort to draw simple business charts.
CSS from the Ground Up - Steps 12 through 15
Step 12 – Styling Tables Although tables have been used for page layout since the dark ages of the Web, I think I've shown in this series that CSS layouts offer much more scope and versatility.
What's New
WebMerge 2.3 WebMerge 2.3, an upgrade to its popular tool for Mac OS and Windows that generates static Web pages from database or spreadsheet data. The new version provides a convenient TagMaker utility for point-and-click tag writing, search-and-replace options in field tags, preset delimiters for parsing affiliate program data feeds, a debugger tool, and other new features.
Subscribe Me Pro
If you need to send out a regular newsletter, as I do, there are several options. You can sign-up to a site that sends out mailing lists for you, you can use a bulk mailing program and send it yourself or you can install a script on your server to do it for you automatically.
Drawing with CSS
Drawing with CSS how to draw simple charts using basic CSS elements CSS has the ability to draw rectangles with borders and fills. With a little bit of lateral thinking, it doesn't take too much effort to draw simple business charts.

WPDFD Issue #69 - December 01, 2003

Advertisements on the Web
It is very difficult to be involved in Web design and not have to put an ad on your page at some stage. It might be an ad for some other company or product or simply one for your own services. To some, they are an necessary evil.
Lexar Media 128 Mb JumpDrive
It's amazing how floppy disk became obsolete so quickly, I don't think I've used one for three years or more. When I started using CD-ROM disks in the early '90s, they cost about $30 each for blanks and now they cost little more than a 1.4 Mb diskette.
Designing with Web Standards
Jeffery Zeldman is renowned in Web design circles for his tireless work in promoting Web standards, both to browser manufacturers and to the Web design community. His new book, "Designing with Web Standards", brings together all his thoughts, arguments and philosophies into one neat package that is both easy to read and entertaining.
Know your audience
When you want to know what browsers people are using these days, there are several sites that offer monthly statistics for surfing trends. One of the best known is TheCounter.com . The stats they give are based upon their own server logs and those of their customers so don't take them as being anything other than that.

WPDFD Issue #68 - November 01, 2003

Left Brain, Right Brain
Where I usually write about the 'right' and 'wrong' in Web page design, this time it's going to be slightly different. 'Right' and 'left!' If you read these articles regularly you will probably have noticed that I go out of my way to make the distinction between 'designers' and 'programmers' when it comes to Web page design.
Adobe GoLive CS
Adobe's new Creative Studio is a suite of their most popular programs bundled-up together - Photoshop, Illustrator, InDesign, GoLive and Acrobat plus a new utility called Version Cue that keeps track of project versions.
Adobe PhotoShop CS
Photoshop just gets better. At a casual glance, it hasn't changed much since version 7 but then how do you improve a program that is just about as perfect as they get? Well, unlike some programs that add features for the sake of adding features, Photoshop adds very little by way of new features, what it does is to improve on ones that it already has.
Excuse me sir, your Flash is broken!
Microsoft have just been successfully sued for half a billion dollars by a small company called Eolas, who claim to hold the patent rights for the technology that permits plug-ins like Flash and QuickTime to work in browsers – and the judges seem to agree.

WPDFD Issue #67 - October 01, 2003

CSS-P in Current Browsers
This month's edition is about progress – mostly! Firstly, it looks at the state of current browsers and shows how well they have come on in the last year. Although there are still minor discrepancies in how they render CSS, major cross-browser differences are now a thing of the past.
CSS-P in Current Browsers 2
Last September, I put a batch of browsers through some gruelling tests to see how well they coped with Cascading Style Sheets layouts. More specifically, I wanted to see how far I could push them before they fell over.
Macromedia Dreamweaver MX 2004
The uptake of CSS and general Web standards has been pitifully slow, a fact that is almost entirely down to the poor support in the popular Web page editors. The relatively few designers, who do care about such things, usually have to resort to hand coding.
In HTML and XHTML, the DocType is a special tag that goes right at the top of the page above <HTML> and warns the browser what's coming. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> This one, for instance, tells the browser that the page uses Extensible HyperText Markup Language - Just like saying "The game is Five Card Stud.

WPDFD Issue #66 - September 01, 2003

Acronyms! Love them or hate them, the Web design business is awash with them and very often they are used without even knowing DTD, XML, XHTML, SHML and many more. Although these abbreviations are marginally easier to remember than the words they represent, I still find it difficult to type SMTP instead of STMP without saying 'Simple Mail Transport Protocol' out loud and punching the keyboard at the start of each word.
Most good Web page editors have facilities to upload files to the server built-in but good, dedicated FTP programs give more power and versatility. Although I normally use Interarchy on a Mac for FTP work, I've also been using GlobalSCAPE's popular CuteFTP on my PC for several years now.
XHTML in Dreamweaver and Golive
If you are starting off a new XHTML page instead of converting an old HTML page, then your WYSIWYG editor should be able to insert the correct lower case tags and handle all the differences between HTML and XHTML automatically.

WPDFD Issue #65 - August 01, 2003

What's New
Macromedia Contribute 2 Previously reviewed on WPDFD, Macromedia Contribute 2 improves web content contribution with better security, a shopping cart wizard, Flash Paper support (Windows 2000 and XP only) and a Mac OSX version that automatically connects to .mac accounts.
by Joe Gillespie Like myself, many designers who have been working with print for years have turned their attention to the Web. It's not so much that print has died, there is just as much of it as ever, but the Web is seen as a new direction and a fresh challenge.
HomeSite and BBEdit
I've never tried to cut a wooden log in two with a penknife, though I'm sure it can be done. People will tell you that you can build a Web page with a simple text editor and I know that's possible too, but life is just too short.
Netscape Browser Yet another one bites the dust. Since my article about the demise of Internet Explorer for Mac last month, this month's victim is even more significant – Netscape is no more!

WPDFD Issue #64 - July 01, 2003

Selling Your Ideas
A very touchy subject this month. It's all very well coming up with a knockout design, but at some stage, you have to sell it to the client. Some designers like to show the client several alternative designs where others prefer to show only one and make a very good case as to why it is the 'right' one.
Graphic Fundamentals 3 – Selling Your Ideas
Being able to sell your designs to clients is a fundamental part of the graphic design business. Having your design work rejected by a client is bad for the ego and for the bank balance. It either means spending more time to come up with an acceptable solution or taking a much reduced fee and losing the business altogether.
Designing Websites for Every Audience
No, this book is not about pandering to the lowest common denominator. I don't think any single Web site is aimed at everybody. Instead, it takes six different kinds of site and shows how they can be made more user-friendly.
Cascading Style SheetsThe Designer's Edge
There are a lot of books about CSS on the bookshelves these days. I reviewed several others three months ago. Each one covers some common ground but takes a slightly different viewpoint. Molly Holzschlag's book is certainly very thorough in its coverage of the whys and wherefores of CSS-based design and dives headlong into the deep end.
HTML Complete
I have to admit, I didn't have high expectations of this book when I first picked it up. It was big, some 980 pages, cheap, had that pulpy 'dime novel' smell about it and no author's name to give it credence.
Another One Bites the Dust
Microsoft has officially announced that it is abandoning development of Internet Explorer for Mac (and the standalone Windows version too, but that's another story). Apart from some minor updates, there will be no IE 6 for Mac.

WPDFD Issue #63 - January 25, 0

Wildform Wild fx
Wildform SWfx was great fun, if somewhat limited. It could take a line of text that was typed-in, turn it into a typographic pyrotechnics display and output it as a Flash .SWF file. I've used it for banner ads and for quick 'n' easy online birthday cards.
Mozilla Firebird
Microsoft's Internet Explorer has overwhelming dominance of the browser marker yet there are still teams of programmers out there avidly toiling away on alternative browsers. Maybe they think of themselves as a resistance movement?
Wildform Wild fx
Wildform SWfx was great fun, if somewhat limited. It could take a line of text that was typed-in, turn it into a typographic pyrotechnics display and output it as a Flash .SWF file. I've used it for banner ads and for quick 'n' easy online birthday cards.
Mozilla Firebird
Microsoft's Internet Explorer has overwhelming dominance of the browser marker yet there are still teams of programmers out there avidly toiling away on alternative browsers. Maybe they think of themselves as a resistance movement?

WPDFD Issue #62 - May 01, 2003

Feature: Graphics Fundamentals
Last month I demonstrated how I could convert the editorial page into a CSS-only layout and in doing so, used a variation of the usual WPDFD house-style. I had lots of comments, and thanks to all who took the trouble to write, but the consensus was pretty much half and half with no overwhelming preference one way or the other.
Graphic Fundamentals 1 – The Big Punch
Anybody with a computer and a graphics program can produce Web graphics at the push of a button. Computers have made it easy to do things that trained graphic artists could have taken years to master – lettering, airbrushing, photo retouching and painting with a vast range of traditional and non-traditional techniques.
Spyder Monitor Calibrator with ColorVision PhotoCal
Have you ever looked at a wall of television sets in a store, all tuned to the same channel and showing the same program? No doubt you will have noticed that each television shows the picture slightly differently and perhaps the idea crossed your mind, "I wonder which one is right?" Well, they can't all be right!
Hiding Stylesheets from Old Browsers
As I mentioned in the introduction, older browser that don't understand CSS-P are on their way out but some people hang onto them like comfortable old shoes. As they were introduced when CSS was in its infancy, they know about some style features but not others.

WPDFD Issue #61 - April 01, 2003

Turning the tables
Tableless layouts have become something of a holy grail for forward-thinking Web designers. It's almost as if the use of tables has been totally banned or deprecated by the W3C – they haven't! Table-based layouts can still validate 100%.
Review: New Web Design Books
I find it difficult to pass a book store without going in and once in, I find it even more difficult to leave without an armload of new books. Whether you are looking for intellectual, technical or visual stimulation, you just can't have too many.
W3C 'Valid' Logos
If your pages pass the appropriate W3C validation tests for HTML 4.01, XHTML 1.0 or CSS, you are invited to add one of these 'W3C logos to the page as a kind of 'badge of honour'. One thing that confuses designers about validation is which standard they should be validating against.

WPDFD Issue #60 - January 25, 4800

Web Design as a Career
I get a lot of mail from people who say they would like to make a career in Web design and want to know the best way to go about it. Unfortunately, the question is usually along the lines of "How can I get a job as a Web designer?" Where the concept of 'Web design' is fairly easy to define, the term 'Web designer' is a little more nebulous.
Microsoft Wireless Optical Mouse Blue
Although I use a Mac most of the time, there's one thing that really annoys me - Apple's insistence in providing only a single-button mouse. Even though Mac OSes have supported contextual menus for many years, you have to use two hands to access them – one for the mouse button and one for the Control key.
Specifying small type sizes
There is a raging debate in Web design circles about the relative merits of specifying font sizes in pixels or ems. Using pixels locks the size of type in sync with physical pixels on the device displaying it where using ems sets the type sizes relative to those set up in the reader's browser preferences.

WPDFD Issue #59 - February 01, 2003

Designing Effective Banner Ads
I've often heard it said that banner ads are ineffective on Web pages. It's probably true, but then any misconceived ad will be ineffective and most banner ads don't stand a chance because the people that produced them don't know the difference between a 'notice' and an advertisement.
First of all, it has to be visible. That's not easy! Imagine a road with flashing neon signs on both sides all shouting at you and competing for attention - Fried Chicken, Luxury Rooms, Low Prices. The Web is a bit like that too.
In making your ad visually different, you have probably created a distinct identity for it. This is a very valuable property because it sets you apart from all the rest and you should endeavour to maintain and build upon that identity through consistent application.
Having caught the reader's attention, you also have to get their interest. If someone is beckoning at you with a finger, the person doing it and their demeanour will considerably influence your reaction.
The mechanicals
Physical dimensions, file size and formats. The most common sizes for banner ads are 468 x 60 px and half of that (234 x 60 px). Other popular sizes are 460 x 55 px, 392 x 72 px, 125 x 125 px, 120 x 90 px, 120 x 60 px, 88 x 31 px, 120 x 240 px.
Apple's Safari Browser
I watched Steve Jobs announce Apple's new Safari Web browser on the MWSF webcast and had it downloaded and running on my PowerBook within minutes. Yes, it was miniscule in file size (less than 3 Meg) and it performed like a racehorse as he said it would.
Random Banner Rotation Script
You may have noticed that some of my banners rotate - the one on the WPDFD home page is a prime example. Each time you load the page, you get a different ad. This is done with a little JavaScript routine which I will share with you.

WPDFD Issue #58 - January 25, 7200

New CSS Books
The trouble with books about Internet technologies is that they go out of date so quickly. The first book about Cascading Style Sheets that I bought was 'Cascading Style Sheets - Designing for the Web' by Håkon Wium Lie and Bert Bos.
Happy New Year!
First of all, a big thank you to everybody who entered the WPDFD Holiday Competition and especially those who passed on suggestions for new articles. Most people want to read more about Cascading Style Sheets and so I'm kicking off the new year with an article about combining CSS and JavaScript.
Scripting the Box In the November issue, I showed how to achieve rollover effects using just style sheets and no JavaScript. This time, I'm pulling out all the stops, no holds barred. CSS plus JavaScript makes a very potent mix indeed.
Vertical Centering with CSS Although it is easy to centre elements horizontally in a CSS box, there is no direct equivalent of the 'valign' used for vertical alignment inside table cells – but there is a way to spoof it.

WPDFD Issue #57 - December 01, 2002

Macromedia Contribute
I've been asked many times by clients if there is some way that they can update pages on the sites I've designed for them. What they want to do is open their page in their browser, change a few words or prices, and resave the modifications.
Meta tags
Meta data on a Web page is invisible to the surfer, it doesn't actually show on the screen but lurks in the dark corners where only the creepy crawlers go. Crawlers (or robots) are programs used by search engines to index sites on the web.

WPDFD Issue #56 - November 01, 2002

Box of Tricks
Last month's article demonstrated some basic layout techniques based on the CSS box. This time, we'll try something a little more daring, but not difficult – using CSS for rollovers. Most designers use JavaScript for rollover effects, either from an 'action' feature in their Web page editor or from a hand-coded script.
Multi-colored links
I'll just show the top, .home class to show how it's done, the others only differ in the 'color' spec. .home a:link       {       color:#06f;       background-color:transparent;       text-decoration:none       } .home a:visited       {       color:#06f;       background-color:transparent;       text-decoration:none       } .home a:hover      {       color:gray;       background-color:transparent;       text-decoration:none       } As this is a main menu and used often, the 'visited' state is not very relevant so I have made the a:visited and a:link colors the same.
CSS buttons
Using the 'border' attributes of a CSS box, you can outline a box in another colour but as you can address each of the four borders separately – top, right, bottom, left – pseudo 3D effects are very easy.
CSS Image Rollovers 1
Where CSS-only buttons and navbars are great for keeping files sizes to a minimum, sometime we just need to use GIFs, (to be able to use different fonts, for instance). The boxes containing the GIFs have colored backgrounds in their normal state, but the :hover state changes the backgrounds to white.
CSS Image Rollovers 2
CSS boxes can have background images and foreground images. Naturally, the foreground image obscures the background behind it but we can use this to advantage when combined with the image visibility property.
Adobe Photoshop Elements 2
To describe Adobe Photoshop Elements 2.0 as a cut-down version of Photoshop would be missing the point somewhat. Where it's true that it does share a great many of the same features, and underlying code too no doubt, Elements is aimed at a completely different market.
Fringe Benefits
Anti-aliasing has to gradate between the foreground (text) color and the background behind it or it will have a nasty 'halo'. In this instant, the text is crossing two slightly different backgrounds so they have to be combined into one composite image.

WPDFD Issue #55 - January 25, 4800

Thinking inside the box
It doesn't work at all in older browsers, it is inconsistent and unreliable in new ones. As I showed last month, the current batch of popular WYSIWYG editors are not up to it. So why bother with CSS positioning at all?
The Box
The CSS 'Box' is a bit like a table cell, it holds a block of text together and you can put images in it, or give it a background color or image with various options to repeat or not. You can give it a width and height and position it anywhere on the page, usually relative to the top left corner of the page - but not necessarily so.
Table Cells vs. CSS Boxes
This diagrams show the basic structure of a single table cell (left) and how it relates to a CSS box (right). Now for the first 'gotcha'! The official W3C specifications require that the padding area goes outside the width and height.
Boxing Clever
Now, for a CSS box. These are also referred to as 'blocks' or 'divs' but the word 'box' is probably more meaningful. There are two ways to define a box depending on whether it is a unique item on a page or one that can be used multiple times.
Styling text
So far, I haven't mentioned text styles. If I add a text style definition to the ' body ' style, it will pass down to all the other boxes by 'inheritance'. If we add text style definitions to any of the boxes, they over-ride the inherited styles.
Adding another box
So far, we have three boxes in the layout - 'header', 'content' and 'footer'. I now want to insert another box between the 'header' and 'content' boxes to hold some navigational elements. #navbar      {      color:#99c;      font-size:10px;       font-family:Verdana, Geneva, Arial, sans-serif;       background-color:#fc6;       text-align: center;      margin-top:3px;      margin-bottom:3px;       padding-top:3px;      padding-bottom:4px;      width:100%      } It's similar to the 'header' box, 100% width but with a different background color.
Multiple columns
At the moment, we have a contents area that is a single column of text centred in the browser window. All the boxes we have used so far are stacked one on top of the other on the page because they have not been explicitly positioned absolutely or relatively.
Netscape Composer
When I started designing Web pages way back in the early '90s, there were no special Web page editors and I had to use a text editor. In those heady days, you couldn't do very much with a Web page, the HTML was fairly simple, so it didn't matter.
Mozilla CSS Editor (CaScadeS)
You won't find this feature in Netscape 7 just yet but you can download a beta version . It's a WYSIWYG CSS editor that works within Composer on Netscape 7 or Mozilla 1.x. It downloads and installs automatically and then shows up in the 'Tools' menu as 'CSS Editor'.

WPDFD Issue #54 - September 01, 2002

CSS Positioning How the browsers cope
As a designer, none of the Cascading Style Sheet tutorials I've seen on the Web reflect the kinds of things I want to do on a Web page. The whole concept seems so document-centric, more akin to what a word processor will do rather than a page-layout program.
Introducing, Fun With Fonts
The principle I used is that I would pull no punches, well not exactly, there is no point in using CSS features that are not supported in any browser. I took Mozilla 1.1 as my 'base' as it is the most advanced browser where CSS is concerned, and it is my main browser of choice anyway.
CSS for Layout
One of the things that you can't do with a tables-based layout is put text or images on top of other images, so the first thing I wanted to explore was the layering of graphic images to get a 'look' to a page that you just can't get with conventional HTML.
Absolute necessities
Absolute positioning with CSS is fairly easily understood and works in browsers as far back as Netscape 4.x - that is, provide that the elements are positioned relative to the top, left corner of the page.
Relatively speaking
Relative positioning in CSS is one of those concepts that confuses even the most experienced of designers - and the browser programmers too it would seem. The big question is 'relative to what?' In theory, when you place a box using relative positioning, it 'relates' to whatever is above it and to the left margin so, if you put one box on a page, it floats to the top like a block of polystyrene in water.
Padding anomalies
The other major 'gotcha' you have to watch for is with box padding, which is counter-intuitive by specification - and most browsers get it wrong. Unlike table cells, padding for CSS boxes goes 'outside' the box size you specify, according to the official specs.
Little boxes made of ticky-tacky
CSS boxes generally want to stack one on top of the other. When you need to produce multi-column layouts, you can use 'float-left' and they should end up side-by-side instead. Giving each box a 'margin' value takes care of the column gutters.
How did the browsers do?
Having designed and marked-up all my pages and tested them in Mozilla, I tried them in Internet Explorer 5.1.5 on my Mac. Luckily, most things worked right off and if they didn't, my previous tips about avoiding the 'margin' property of boxes and not assuming default behaviours of nested boxes took care of the nasties.
The Crunch!
If you really need to reach Opera, iCab and Netscape 4.x surfers, it is best to stick to conventional table-based layouts and use CSS only for specifying type within the table cells. Netscape 4.x is too long in the tooth to worry about and getting rarer by the day, but the other two are current versions and really should be able to render CSS a lot better than they do.
Testing method
Each of the twenty pages of the site was viewed in the various browsers three times over a period of one week and then given the following scores. The best possible score is twenty times five (100). Except for minor tweaks and avoiding some known browser bugs as mentioned above, no attempt was made to cater for substandard CSS rendering.
Adobe GoLive 6.0
WPDFD was put together with GoLive mostly. I like its drag and drop interface and I feel that it has a more 'sympathetic' interface for people who are visually inclined 'right brainers'. Sure, it won't suit everybody, but it's nice to have a choice.
Macromedia Deamweaver MX
Dreamweaver faired a lot better than GoLive when it came to displaying pages laid out with CSS but it's still some way behind what modern browsers are capable of. It uses the term 'layers' to describe CSS boxes, which is a little confusing as these elements behave quite differently from 'layers' in any drawing program or Flash.
Zapping Cached Pages
Okay, you are certain that you have uploaded an updated page to the server but your browser still displays the old one, what's going on? You know about the browser's cache and you have gone into the preferences dialog and cleared the cache files - but the browser still shows the old page when you know you've changed it.

WPDFD Issue #53 - August 01, 2002

Web Page Color Scheming using your photos
by Suzanne Stephens Do you break out in a cold sweat when it's time to choose colors for your Web pages? If so, you're like many Web page designers who are intimidated by designing with color. Since color selection is a common stumbling block, I'm going to show you some techniques for creating color schemes from the photos used on your Web pages.
Adobe LiveMotion 2.0
Although Macromedia Flash's vector graphic .SWF files have a lot to be said for them for creating Web-based animations, or even simple, static elements, designers often find the Flash application itself to be intimidating and confusing.
ColourWays Colour schemes by accident
In the early days of Photoshop when 8-bit monitors were the norm and every file had to have a palette, there was a filter that manipulated the palette to give 'colour cycling'. Each one of the 256 colours values in the palette gradually changed and the overall effect was one of an ever-changing colour scheme that swept through a multitude of mind-blowing, psychedelic images.
Hot New Products
News of the latest new products for Web designers - with a particular emphasis on Web graphics - as usual. Web Validator Web Validator can validate HTML 4, XHTML and CSS of whole websites at once.

WPDFD Issue #52 - January 25, 6000

Get That Job!
The time comes in every designer's life when they have to get that first foot on the ladder. The ladder is, of course, their chosen career and that initial step is so very significant because it has, at last, committed them to a definite direction.
If you haven't already identified it in so many words, the purpose of the exercise is this: To demonstrate your skills and capabilities in the most concise way possible. There are a lot of things going on in this statement so I'm going to break them down into bite-sized chunks.
Presenting your work
There was a time when presentations and interviews were all done in person. It still happens, but with the Web when you are looking for clients, the whole World is your marketplace and being 'local' hardly matters at all.
What potential clients look for
It's amazing, but whether it's a small-time supplier of bathroom fixtures or the art-buyer of a major agency, they always look for the same thing. They want to see their job already done! What I mean by that is that the bathroom fixtures supplier will want to see half a dozen sites for other bathroom fixtures suppliers.
What potential employers look for
Quite different from the client's cursory flick through your work, the employer will want to dig deeper. This is not a one-off job but a longer-term relationship and probably not just between two people.
Some Dos and Don'ts
Here is a short list of tips, some obvious and some not so. Try to keep them in mind when you present your work. Do's Try to control the situation and browsing environment. Finding out that your site doesn't work properly in the client's browser is too late - you've blown your chance!
Web Design Index
To complement the article on portfolio presentation, I thought a review of a few inspirational references would be these two useful books. The sites linked-to from these references will help show you a wide range of design possibilities.
Web Page Thumbnails
Often, you will want to show a small preview of a Web page to give a quick idea of what it looks like. If you have ever tried to do a screen-capture of a Web page and reduce in a graphics editor, you will be aware that can difficult to maintain quality.

WPDFD Issue #51 - June 01, 2002

What's New
Web Design Links Got a Web design related link that you want to share with other WPDFD readers? This is surely the most comprehensive list of Web design links anywhere - over 2000 categorised links, updated each month.
Hot New Products
News of the latest new products for Web designers - with a particular emphasis on Web graphics - as usual. Web Design 1.5.3 Powerful HTML editor at a very affordable price - for Mac users only.
Style Sheets without tears - 3
by John Allsopp In the early 1990s, Geoffrey Moore brought together some thinking about markets and the adoption of new ideas that had been kicking around for a long time and published 'Crossing the Chasm' - now a classic of high technology marketing.
The PNG alternative
The PNG (Portable Network Graphics) file format has not been as ubiquitous as GIF and JPEG mainly because it is a relative newcomer and support for it in older browsers has been poor. Recent browsers have good PNG support if not 100%.
Wacom Cintiq 15x
It's not very often that hardware products are reviewed on WPDFD and this one is not strictly related to Web design but it is very relevant to graphic design. Most people have tried, or at least know the purpose of a graphics tablet.
In the previous two issues , I have looked at how style sheets can be used with a high degree of confidence to build efficient and reliable Web pages. Although I can't think of any good reason not to use style sheets, there are certainly different levels of adoption and the way in which you choose to use them depends entirely on your particular layout and your audience profile.

WPDFD Issue #50 - May 01, 2002

Style Sheets without tears - 2
Last month, I showed how you could add general styles to a page by providing specifications for the body, headings, lists, tables and links within the <head> section of the page. I also pointed out that, where all this is fine in theory, it doesn't always work in the way expected because there are so many browsers out there that have different ideas of how to interpret style sheets.
Browser Statistics
Depending on which statistics you look at, less than 10% of Web surfers still use 4.x or less browsers. That leaves versions 5.x and 6.x of Explorer on PC (and 5.x versions on Mac) with the lion's share.
Standing back and looking at the broader picture for a moment, the purpose behind any Web page is to communicate. The communications are mainly through words and images but a few other possibilities are gradually becoming viable as bandwidth increases.
The 'No Tears' approach
Since I started using style sheets on WPDFD three years ago, I have used a 'safe' method which uses tables for positioning and CSS for specifying the text within the table cells. Note the emphasis on 'the text'.
Classes and Elements
The main spec for the text on this page is the .bodytext class:- .bodytext {color: silver; font-style:normal; font-size:11px; line-height:19px; font-family: Verdana, Geneva, Arial, sans-serif } Note that a 'class' declaration always begins with a period whereas an 'element' declaration is just the name of an existing HTML tag.
Spanning Classes
Notice that I have only changed one attribute of the type spec in each new class - the boldness and the color. So, now I can do this:- <div class="bodytext"> This is <span class="green">green </span> bodytext and this is <span class="bold"> bold </span> </div> Which displays as green bodytext and bold .
Better safe than sorry
Now, I have to point out that taking this 'table and style' approach is frowned upon by purists who are only too keen to highlight its disadvantages. 1. It mixes and confuses structure and style. 2.
Adobe Photoshop 7
The long awaited Photoshop 7 has arrived! The people who have been chomping at the bit for it most are those who find it key to their migration from MacOS 9.x to OSX. The lack of an OSX compatible version of Photoshop is the main excuse I have heard for not upgrading.
Macromedia Flash MX by Mike Gilbert
At first glance, Flash MX looks very much like its predecessor, Flash 5, but as you dig down it becomes rapidly apparent that a great deal has altered. This is not just an overhaul but a major rebuild including functionality, programming and work method changes.
CSS Copy and Paste problems
One of the easiest ways to get errors in your CSS-based pages is to copy and paste text, especially in WYSIWYG editors. Does the Copy and Paste facility in your Web page editor only take the text across or does it bring the style with it?

WPDFD Issue #49 - April 01, 2002

Style Sheets without tears by Joe Gillespie
Taking a sneak-peek behind the scenes at some popular Web sites shows me that the dreaded <font> tag is still alive and kicking. It's strange, considering that it has been on 'death-row' for some time and is liable to be banished from new browsers any day now.
Cascading Style Sheets
Let's forget the 'cascading' part for the minute and start with the easier bit. 'Style' is a word that means many things to various people. It can make a difference to the clothes you wear or the type of car you drive.
Family Affairs
If your parents both had red hair and green eyes, then it is very likely that you and your brothers and sisters have them too. There is also a pretty good chance that some of your children will have the same family characteristics.
Example One - plain old HTML
This is a page that shows a basic HTML page that is all structure and no style. It has a <h1> at the top, a <h3> below that, some body text, a numbered list and a table. Whatever you see here is down to your default browser settings entirely.
Anatomy of a style declaration
Here, I've just added a 'body' style into the <head> ... </head> section of the page. This is a fairly ordinary style, but serves its purpose. It goes like this: - 1. <style type="text/css" media="screen"><!-- 2.
Example Three - small change
Using exactly the same HTML as the two previous examples but the style properties change slightly to give a completely different look and feel to the page. This time I have used pixel measurements for the font-size and line-height, which means they are 'fixed' and will not change in different browsers.
Example Four - The next step
Follows on from Three by additionally specifying how the <h1>, <h3>, <ol>, <td>, and <tr> should behave. Now, I have reverted to the more usual 'all in one line' layout for compactness.
Adobe GoLive 6.0
For more experienced Web designers, Adobe GoLive is the only serious competitor to Macromedia's Dreamweaver. Which one is best for you depends very much on the type of designer you are and the kind of work you get involved in.
CSS Font Specs
There isn't a lot of choice when it comes to specifying fonts for a Web site, everybody sticks to the same tried and trusted ones. The most common set of fonts are the various sans-serifs that can be found on any Windows or Mac machine plus a default 'sans-serif' spec that works on other platforms.

WPDFD Issue #48 - March 01, 2002

Function, Style and Accessibility
Like a lot of other people, I like to crash out on a Saturday night in front of a television set with a movie DVD. I hadn't really explored a DVD's 'options' menu before, other than to take the odd peek at out-takes or documentaries about special effects, so last Saturday night I thought I would investigate further.
'Accessibility' is another of those buzzwords being used a lot in Web design circles these days, what does it really mean? Everybody has his or her own ideas about accessibility but to me, it's all about 'design'.
The World Wide Web
When the Internet and the World Wide Web began over a decade ago, its purpose was to allow government departments and academic institutions to share documents. The computers at that time weren't much good for graphics, so the document were mainly plain text.
To tell if something is well designed or not, you have to first identify its purpose and then decide if it satisfies that purpose. A Web page is no exception. A Web page is a vehicle for communication.
Target Audience
For a very basic, unstyled textual Web page, accessibility is not usually a problem. Remember, accessibility is not just about making a page readable by people with disabilities, it's about making it readable by everyone and anyone.
Information, and beyond
Now, we come to the bit that is ignored by many of the 'accessibility' gurus. With the preponderance of the 'document' concept and all the technology and technologists, the emotive aspects of 'design' are often overlooked.
Accessibility in practice
Optimizing the accessibility of a website is mostly just common sense. There is 'function' and there is 'style' and an imaginary straight line that runs between the two but there are also situations that are some way off that line and not even running in parallel - bad functionality and bad style.
Beauty is in the eye...
Bad style is something else. As the song goes, 'You've either got or you haven't got style'. If you are tone deaf, you will sing out of tune and be totally unaware of the fact until somebody else tells you.
Getting down to the real nitty gritties
Having done your best to avoid the barriers, there are some things you can do to actually improve the accessibility of your site generally and also the accessibility for people with disabilities. Some countries now make website accessibility mandatory for governmental public information sites and for others, it is just makes good sense.
Hemera Photo-Objects
A few years back, I bought a quite expensive set of Clip art CDs that came with a nicely printed book showing all the images categorized into sections and with their filenames. Unfortunately, actually finding those files proved to be a nightmare because the catalogue was badly organised and in many instances, just plain wrong.
ArtToday has been going for about 5 years now and is Web-based rather than on CDs. Their marketing policy has changed a little over the years, they used to offer some images for free and then you paid a subscription to access the better stuff.
Accessibility testing
Last month, I gave some links for validating your HTML. Here are some links to help test the accessibility of your pages. Bobby http://webxact.watchfire.com/ checks the accessibility of your pages for people with disabilities.

WPDFD Issue #47 - January 25, 9600

Hot New Products
News of the latest new products for Web designers - with a particular emphasis on Web graphics - as usual. WebMerge 1.9.2 Generates static Web pages from a variety of popular database programs including FileMakerPro, Microsoft Access, Panorama, AppleWorks and even Excel.
Online Validators Revisited
Some time ago, I did a comparative review of the (then) current online validation services. Things have changed considerably since that time. W3C Validator http://validator.w3.org/ I've already mentioned this above.
Adding DOCTYPE declarations in Dreamweaver and GoLive
Neither of these leading WYSIWYG editors currently add a DOCTYPE declaration to your pages automatically. Text editors like HomeSite and BBEdit do. Here's how you can add them with minimal fuss. Dreamweaver has a default page that opens when you do "New".
What's New
WPDFD Forum Your comments, news and pleas for help are welcome at the new Web Page Design for Designers Forum. Web Design Links Got a Web design related link that you want to share with other WPDFD readers?
Building a Better Web Page
So, you have time on your hands but not much money and decide to build your own house. There was a time when everybody did this. You know what rooms you need - hall, living room, dining room, kitchen, bathroom, a few bedrooms.

WPDFD Issue #46 - January 01, 2002

Web Page Photography by Joe Gillespie A friend of mine, whose first language is not English, once remarked about 'making' pictures with his camera. At first, I thought it was just down to his lack of proficiency with the language but then I realised that my concept of 'taking' pictures and his of 'making' them were not at all the same.
FujiFilm FinePix 6800 Zoom If you look at ads for digital cameras, or just about anything else for that matter, you will be confronted with something called a 'feature list'. This is the marketing people's way of telling you how 'much' you are getting on the assumption that the more features there are, the better the product.
Hot New Products
News of the latest new products for Web designers - with a particular emphasis on Web graphics - as usual. Microsoft Internet Explorer 5.1 New Mac OS 9.x version of Explorer with many bug fixes and improvements.
Top Tip
Lighting for digital photography The two basic problems with on-camera flash units are, their proximity to the lens and their point-source nature. Being so close to the lens means that the lighting is flat with no modelling.
Happy New Year.
With each new year we see old Web design problems diminish and new ones take their place. The restraints of the Web-safe palette have all but disappeared, fonts size discrepancies are much less common and browsers are generally more consistent and compatible than they used to be.

WPDFD Issue #45 - December 01, 2001

Interface Design Primer
Computers are pretty dumb devices. They can only count on two fingers, but they can do so incredibly quickly. When programmers communicate with their computers, they use languages that they can understand as well as the computer.
Now, here comes the graphic design part!
A menu of hypertext links works very well. It is easily understood and fulfils the intended function admirably. Everybody knows that a chunk of underlined text is a clickable hyperlink. If you decide that you want to provide an alternative to this tried and tested interface convention, you have to come up with something that works just as well, if not better.
The Tabbed interface
The very familiar, if somewhat tired, tabbed interface is clearly understood. It only requires two button states, on and off. The fact that it works so well as a navigational device shows that it is difficult to separate 'familiarity' in the positive sense with 'cliché' in the negative.
Ghosting inappropriate buttons
In this example, the current page is, quite logically, removed from the range of choices of pages that you can go to by 'ghosting' the link button. This mechanism requires that the destination page is clearly titled elsewhere using static text.
Latching radio buttons
This interface uses the 'latching radio button' concept but presents it in a more modern way where electronic switching supersedes mechanical springs and levers. Real electronic switches usually have a 'click' effect to provide 'confirmation of operation' even though it is not technically necessary.
Adobe Illustrator 10
Once you get over the shock of Illustrator 10's new interface style, there are yet more surprises in store. Now that it has 'come of age', it is starting to care about its looks and the new toolbar of subtly coloured icons - some old and familiar and some brand, spanking new - certainly give the program a long awaited facelift.
New Masters Of Photoshop
Friends of Ed books are well known and highly regarded by designers who use Macromedia Flash. Now, they have turned their focus on Adobe Photoshop and the recently published New Masters of Photoshop shows every sign of meeting with similar success.
The 'Prestige'
One of the most popular effects used for animated logos in film and television is the 'prestige' – a spotlight or shaft of light that traverses the text, sometimes accompanied by sparkling highlights.

WPDFD Issue #44 - January 25, 800

The Web Designer's Toolkit What to buy, and why
Little Suzie wanted to play the guitar so her kind parents, who knew absolutely nothing about music, took her to the music store. Hanging on the wall, there was a vast selection of different guitars ranging from the very cheap up to ones costing really silly prices.
Swift3D 2.0
When Swift3D came out about a year ago, it was the only program that could create 3D objects and export them as Flash movies. It was better than nothing, but only just! Rendering was very slow and many basic facilities just weren't there.
Web Page Color Scheming
Here are the two basic layers, one is the paper and one the colors you are trying out. The paper layer has all the elements as transparent holes. The color layer has just rough slabs of color.

WPDFD Issue #43 - October 01, 2001

Hot New Products
News of the latest new products for Web designers - with a particular emphasis on Web graphics - as usual. StyleMaster 2.0 CSS Editor Style Master 2.0 brings the ease of use of a WYSIWYG editor and now, the power and flexibility of hand-coding, to the CSS standard.
It's About Time!
by Joe Gillespie Time plays strange tricks. How is it that some Web pages seem to load almost instantly and others take an age? It could be something to do with the page file size and the amount of data that has to be downloaded from the server to your computer, or it might be that the designer has not managed the downloading efficiently.
AutoFX Dreamsuite
DreamSuite is the latest offering from effects specialists, AutoFX. As the name suggests, it is a suite, or collection, of effects and are accessible from either a stand-alone application or from a Photoshop compatible plug-in.
New Masters Of Flash - The 2002 Annual
Back in February , I reviewed "New Masters of Flash" from publishers, Friends of Ed. The 2002 Annual is a follow-up to that book and goes deeper into the philosophies and principles underlying the use of Macromedia Flash.
Underlined Links and how to get rid of them
The most obvious indication that text on a Web page is hyperlinked is that it is underlined . This is the default in HTML and is fairly unambiguous. The underline is usually accompanied by a difference in colour too – one colour for an unvisited link, another for a visited link and there can also be colour changes on rollover or mouse click.

WPDFD Issue #42 - September 01, 2001

Writing for the Web by Robert Whyte
There are as many different types of web writing as there are genres of web sites. They range from corporate and small-business sites through family and community webs to personal pages and creative experiments.
Microsoft Word
It doesn't really matter how you get the words from your head onto a Web page except that the process should be as transparent as possible. That comes down to being comfortable with your computer and software and not letting them color your thoughts in any way.
Z- Write (MacOS and OSX)
Where MS Word more or less forces you to write in a linear fashion (I find its outliner feature virtually useless) I have never written in that way. Z-Write is a "non-linear" word processor, not strictly an outliner, but allows the writer to throw unrelated ideas into a melting pot and then rearranging them into a more coherent document later.
IBM ViaVoice (Mac and PC)
Having tried other forms of speech recognition on both Mac and PC, I approached ViaVoice with a high degree of skepticism. A short while into the introduction, I was pretty certain that my preconceptions were correct.
Since the mid '80s, most programs use a WYSIWYG screen display, a virtual paper page into which you type or insert images. Before that, word processing programs made no pretensions about being WYSIWYG simply because the printing devices were just electro-mechanical typewriters.

WPDFD Issue #41 - August 01, 2001

Layouts - Why bother?
by Joe Gillespie The last two editorials covered some of the more practical considerations of Web page layouts - static vs. liquid layouts, tables vs. CSS-P. This time, I'll ignore the "how" and concentrate on the "why".
GoLive in 24 Hours
I must admit, I'm not a manual reader. I tend to roll up my sleeves and dive into a new program head first. Luckily, most programs are based on earlier ones and, apart from a few oddities, I can tell how a program works by just looking at the interface.
GIF/JPEG combos.
JPEGs are the best format for photographic images and type is better delivered as GIFs, but what happens if you need to have type within a photograph? You either have to use an inappropriate GIF for the photographic image to get the text looking good or compromise the quality of the text by using a JPEG.
What's New
Web Design Links Got a Web design related link that you want to share with other WPDFD readers? This is surely the most comprehensive list of Web design links anywhere - nearly 2000 categorised links, updated each month.
Hot New Products
News of the latest new products for Web designers - with a particular emphasis on Web graphics - as usual!. Magic Flare Magic Flare is a Windows application that creates Flash text effects in seconds.

WPDFD Issue #40 - July 01, 2001

The Layout is dead, Long Live the Layout! by Maxine Sherrin
Years ago, a web developer called David Siegel thought of a way of creating (on the Web) the kind of layouts designers were used to working with on paper. These layouts fulfilled an obvious need, were an instant success and their use became a sort of standard.
BoxTop Software SuperGIF 1.5
Go into any consumer electronics store and observe the buying habits of the general public. See how they walk up and down the aisles of hi-fi and video equipment looking ever-so-closely at the merchandise.
Image Alt Attributes
Accessibility is becoming a big issue with new legislation making it manditory rather than optional. Most of it is just plain common sense. HTML provides for 'Alt' attributes for image tags so that people who have images switched off, or are using a 'screen reader' program, can make some sense of the images on a Web page.

WPDFD Issue #39 - June 01, 2001

What's New
Web Design Links Got a Web design related link that you want to share with other WPDFD readers? This is surely the most comprehensive list of Web design links anywhere. Newly updated each month.
Flash 5 Studio
A previous review of Foundation Flash 5 from the same publisher, Friends of Ed, showed how writing a book from a designer's point of view made it a lot easier to get to grips with the fairly complex program that Macromedia Flash 5 is.
Screen Resolution Grid
Here is a template that you can download and shows approximate 'safe areas' for the most popular screen resolutions. In most cases, only the width is significant but it is useful to know what fits into a browser window's height too.
Hot New Products
News of the latest new products for Web designers - with a particular emphasis on Web graphics - as usual!. Westciv CSS Guide Over the last three years, Westciv's CSS Guide has helped millions of developers get up to speed with the important Cascading Style Sheets standard.
Layout is not a dirty word!
by Joe Gillespie Windows browsers fill the screen (maximise) by default. Mac users generally surf with narrower browser windows that more closely follow printed page sizes. There is something very reassuring about a page.

WPDFD Issue #38 - May 01, 2001

Mega List
Hot New Products News of the latest new products for Web designers - with a particular emphasis on Web graphics - as usual!. Photogenics 5.0 A full-featured graphics package for Windows, Linux and Amiga users for a very reasonable $99.
Is the Web Safe Palette really dead?
Red, Green and Blue can combine to give six colors plus black and white. The infamous VGA palette still inflicts itself on many PCs today. Early color-capable computers were restricted in the number of colours they could use.
Adobe Photoshop Elements
Adobe Photoshop is the foremost image editing program available. I've been using it since version 1.0 and would find it very difficult to move to another program - even if there was such a thing.
Type Layer Tricks
When you are making GIFs for buttons or navigational items, sometimes you want a font that is a little bolder than any you have available, or you would like a drop shadow to make the type stand out against a mid-tone or busy background.

WPDFD Issue #37 - April 01, 2001

What's New
Pixel Fonts A page of tips and FAQs about using pixel fonts and cross-platform screen resolution. Mega List Got a Web design related link that you want to share with other WPDFD readers?
Foundation ActionScript
Introduced with Flash 5, ActionScript is what you might call a "designer's programming language". Earlier versions of Flash were just glorified animation packages that let Web designers get some movement into their sites without hogging too much bandwidth but ActionScript gives them some real power.
Alignment for script readability
Something that really annoys me about ActionScript is the way it aligns the scripts. Take this example from the 'Survey' movie above. This is the way Flash writes it. on (release) { if (result == "") { with (choices) { gotoAndPlay(6); } theVote = "No selection!"; } else { theVote = "You chose "+result+"!"; getURL ("mailto:you@youremailaddress?
Flash - beyond animation 3
A simple password protection script Something that crops up very frequently, is the need to password-protect a particular Web page, or site. Normally, this is done using .htaccess on the server, but that facility is not always available or convenient.
Hot New Products
News of the latest new products for Web designers - with a particular emphasis on Web graphics - as usual!. Z-Write One of the most useful programs I've found in a long time and I now use it to write WPDFD.
Flash - beyond animation 3
ActionScript for designers I have always said that this site is not about programming but a little bit of scripting comes in useful, especially when it is used creatively. You will appreciate that much of the Web is driven by server-side applications written in a wide variety of programming languages - C++, Java, Perl etc.

WPDFD Issue #36 - March 01, 2001

Mega List
Hot New Products News of the latest new products for Web designers - with a particular emphasis on Web graphics - as usual!. Adobe Photoshop Elements New cut-down version of Photoshop to replace Photoshop LE at $99.
Flash - beyond animation 2
With Web graphic file formats, you can't go far wrong. You choose from GIF or JPEG, depending on your subject, and you can be pretty certain that your audience will see what you expect. With audio, it's a different story entirely.
How to produce a .SWF with streaming MP3s
To start with, your audio should be digitised in .AIF or .WAV format. These are the two most common formats, but Flash also accepts SoundDesigner II files if you have ProTools or some other high-end audio system that supports that file format.
Where Flash works just fine for two dimensional animation, the third dimension is elusive - at the moment. You can create pseudo-depth using layers and object sizes, but creating convincing three dimensional objects needs a little help from outside.
DocType declarations
Every Web page should start off with a DocType declaration to tell the browser how to handle the HTML (or other markup language). At the top of the source code of this page is:- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> which says that the page conforms to HTML Version 4.0.

WPDFD Issue #35 - February 01, 2001

Mega List
Hot New Products News of the latest new products for Web designers - with a particular emphasis on Web graphics - as usual!. Swish 1.51 This great Flash text effects program now supports imported images and sound and there is a free alpha version of Swish 2 to download.
Flash - beyond animation
As soon as you hear the word 'Flash' mentioned, you immediately think of animation on Web pages, or to be more accurate, moving graphics. I make the distinction here because 'animation' involves more than making a few circles and lines of type move across the screen.
Flash and Type - Layouts as you want them
In Flash, fonts can be embedded, stored as symbols in a library or converted to outlines. When you export your .SWF file from Flash, static text is always embedded by default so you can always be sure that the reader sees 'exactly' what you intend, not an approximation.
Foundation Flash 5
This book is targeted squarely at users who are new to Flash and the concepts of frame-based animation and scripting. Similar in idea to the Visual Quickstart type of book, it takes the novice through a series of exercises explaining the interface and content creation techniques but uses simple metaphors in down-to-earth language to describe technical theory.
New Masters of Flash
Take 19 top-notch Flash designers and ask them to write about their favourite Flash projects, pass on their personal experiences regarding inspiration and design objectives and bundle the whole lot up in a big, glossy book together with all the files and source code on a CD-ROM, plus a lot more, and you have the essence of New Masters of Flash.
Aligning Layers in Photoshop
Sometimes you need to put two Photoshop layers exactly in register with one another. For instance, your scanner might not be big enough and you have to scan an image in pieces and join them back together in Photoshop seamlessly.

WPDFD Issue #34 - January 01, 2001

Hot New Products
News of the latest new products for Web designers - with a particular emphasis on Web graphics - as usual!. Style Master 1.9 Style Master 1.9 is not just a repurposed text editor. It's built from the ground up as a specialized style sheets IDE (integrated development environment), featuring everything you need to develop, test and deploy sophisticated style sheets.
2001: A Space Odyssey
It was a great movie. Now we have it for real! '2001: A Space Odyssey', apart from being a rare visual treat was one of the very few sci-fi films where the conventions of 'floor' and 'down' was dispensed with, and quite rightly so, there is no 'down' in space, it's just cheaper to make movies that way.
Have you ever gone into your bedroom, moved your pillow to the bottom of the bed and slept upside down - just for a change? If you sleep alone, it's no big problem, but if you share your bed, you are likely to meet an element of resistance...
Macromedia Dreamweaver 4 Dreamweaver has already bitten off a large chunk of the Web page editor market and according to Macromedia, is used by something like three out of four Web designers.
Top Tip - White space exploration
2001: A Space Odyssey featured black space, lots of it. White space is a typographic term for parts of a page that are empty - deliberately. The empty space on a page is as important as the type and graphics.

WPDFD Issue #33 - December 01, 2000

Mega List
Hot New Products News of the latest new products for Web designers - with a particular emphasis on Web graphics - as usual!. Macromedia Dreamweaver 4 This top notch WYSIWYG editor gets a facelift with new, improved code editor, JavaScript debugger, integrated reference material from O'Reilly's excellent reference books, the ability to produce Flash buttons and lots more.
Logo Design Workshop - 3
Last month, I suggested some of tricks that you can play with type to make it look more distinctive and memorable. I also pointed out that often a logo needs to be adaptable so that it can work across a wide variety of situations and shapes.
Adobe Photoshop 6
I am always very wary of software upgrades that just bolt-on new features without tackling inherent weaknesses. I certainly can’t say that of Photoshop 6. This time round, Adobe have added some very welcome improvements in addition to the new features which all goes to bolster its kingpin position in the image editing market.
Image Reduction in Photoshop
When you resize an image in Photoshop, it is resampled to the new size, usually with the 'bicubic' algorithm. To calculate the new value of every pixel in the new image, it averages the color values of the corresponding areas of the original image, which results in a general softening.

WPDFD Issue #32 - November 01, 2000

Web Design Mailing Lists
The amount of knowledge that you need to produce a good Web site can seem daunting. Even when you have gleaned the basics, the world of Web design is moving at such a great pace, you have to be running just to stand still.
Logo Design Workshop - 2
The process of creating a good logo takes a fair amount of skill and awareness of visual communication. Remember that what communicates quality and solidity to you might garner a different reaction from other people who have a closer, or more distant, relationship with the company.
What's New
Optimising your monitor for Web design You don't have to use a Mac to get accurate colour on your Web pages, in fact a Mac set up for print work is not really suitable for Web design at all. Properly adjusted, any computer and monitor can be used for Web design and this new article will tell you how.
Hot New Products
News of the latest new products for Web designers - with a particular emphasis on Web graphics - as usual!. Adobe Photoshop 6.0 The latest version of this graphics classic has significantly improved type handling along with a host of new text effects, new hierarchical layer management and tighter integration with the bundled ImageReady 3.

WPDFD Issue #31 - October 01, 2000

Limitations, What Limitations?
Do you remember making lino cuts? At school and later at art college, I was frustrated by the relative crudity of the medium and can't say I ever did anything with which I was remotely happy. At the time, I was fighting the technique rather than working with it and my first encounters with web pages were much the same.
Logo Design Workshop
For Web designers, the time always comes when you are asked to design a logo. Now, you might well be a seasoned graphic designer with years of logo designs under your belt or, you might think that it is just a matter of finding a typeface and tapping the words out on a keyboard and applying a Photoshop filter.
Microsoft Intellimouse Explorer
If you are one of those people who hate having to open up their mouse and de-gunk the roller wheels and mouse ball, you will love an optical mouse. No moving parts to go wrong and works on just about any surface.
Apple Pro Mouse
Chalk and cheese! If you have been subjected to the dreadful round hockey-puck mouse that was introduced with the iMac and supplied with newer desktop models as well, the new Apple Pro Mouse is a breath of fresh ...

WPDFD Issue #30 - September 01, 2000

Graphics and Color
The greatest annoyance when accessing web pages is the long wait for graphic to download and display. If you consider that it takes about 1000 bytes (1K) of data to fill a screen with plain text but this little icon takes nearly 9K, you will start to understand the predicament.
You can't design Web pages on a Mac!
I was visiting a hosting company the other day and was being given 'the grand tour'. They had wall-to-wall servers, massive black things with lights flashing all over them, and that deep, pervasive smell that you get from electronic equipment in confined spaces.
Adobe GoLive 5
I've always liked GoLive. It has a very 'designer friendly' feel to it but from its early roots in GoLive CyberStudio, it has had some serious shortcomings. It has always been tediously slow at redrawing the screen.

WPDFD Issue #29 - August 01, 2000

Step back.
First consider the problem, then decide the best way to solve it! Your doctor doesn't prescribe the latest designer drug without establishing what exactly is wrong with you and considering all the other options for treatment first.
That's professionalism!
Every design problem has its own set of peculiarities and requirements. Not only do you need to establish what these are but you have to prioritise them too. To hit the target, you can use a precision rifle or a scattergun - one spot-on solution or a number of solutions that are slightly differently focussed.
The target audience
Identify the audience profile and surfing environment. Lowest common denominator Sites that people can access with any computer, monitor or browser. You can’t assume any particular screen size, colour depth or plug-ins.
The Objective
Establish the purpose of the site which may focus on one, or include several of the following requirements:- To inform To provide information where the end result is not directly sales related.
Establishing the designer’s responsibilities for the project. Mechanical Assembling a Web page from supplied elements using basic HTML/JavaScript. Providing basic page layout and navigation.
Many clients have no idea what they should be paying for a Web site. They will get a huge spectrum of quotations from companies and individuals of many different levels of competence and won't really know what is the 'going rate', if indeed there is such a thing.
A Case History
Time Out London Guide An interactive 'Point and Click' electronic book 'Tomorrow's Newspaper' Startup Screen The 'NewsCaster' An imaginary PDA with a colour screen Spreads from the 'first' electronic newspaper NCSA Mosaic, the first net browser displaying prototype pages for the Electronic Telegraph When I was approached by the Daily Telegraph to do an interactive visualisation of an electronic newspaper back in 1993, there was a realisation that the dissemination of daily news on sheets of paper had an uncertain future.
Before you start! How to nail down a proper brief
Before you even think about designing a Web page, whether it is for yourself or for a client, there are some important questions that must first be addressed. I have always believed that, where design is concerned, getting the brief right is half the battle.
Many clients have no idea what they should be paying for a Web site. They will get a huge spectrum of quotations from companies and individuals of many different levels of competence and won't really know what is the 'going rate', if indeed there is such a thing.
Administrative and Legal
Again, I can't give anything but very general advice. I work in the UK. Formal contacts are almost unheard of here, I've never had one in my life. In the USA, contracts are virtually mandatory. Depending on where you live and work, you need to know about your legal rights, what you can and can't do and what your responsibilities are.
The Sex and Chocolate Slimming Diet
In the world of advertising, every product must have an image and certain attributes that set it apart from all others. The image is partly visual and manifests itself in the company logo, corporate colours, typographic ‘house style’.

WPDFD Issue #28 - July 01, 2000

Some tips to make your Web graphics and animation look more professional
The Web is a wealth of information. Everything you want to know about everything is only a few clicks away at Yahoo or AltaVista. Yet, amidst all this, there are millions of Web pages with little or nothing to say.
Optimising your monitor for Web design 2
The following charts demonstrate how well your monitor copes with low tones, mid tones and highlights. This is a fairly stringent test and most monitors will not pass on all accounts. It also depends on the ambient light in your working area.
Adobe Illustrator 9
I've used Illustrator since version 1.0 and every upgrade since. Previous versions have been pretty much aimed at print designers and although it has made the occasional nod in the direction of Web designers, it has never been quite so useful in that department as its stablemates, Photoshop and ImageReady.

WPDFD Issue #27 - June 01, 2000

Web typography
by Joe Gillespie A good background image or pattern is an economical way to give a Web page visual interest. When I say economical, I mean it in two ways - it is quick and easy to produce, and it requires very little bandwidth to deliver the page.
Taming the Electronic Page
One of the first things that needs to be considered is the page size that we are going to work on. On paper, we work to A4 or Tabloid or 48 Sheet poster format knowing that the size is going to stay constant.
What's New
Flash Streaming Audio I've just been playing with Flash for MP3 delivery and I'm very impressed. This is a site I've just done for the band I'm in - The Wandle Delta Blues Band. WPDFD Newsletter If you would like to be notified of what's new on Web Page Design for Designers through a brief, monthly email, just send a blank email to WPDFD-L-subscribe@topica.com   - no subject or message is necessary but you must send the email from the account to which you want your newsletter sent.
Swish is a little program written by David Michie in Australia that generates text effects in Flash .swf format. If you tried to produce these effects with the Flash application itself, you could - eventually.

WPDFD Issue #26 - May 01, 2000

Web Page Razzmatazz
Although there are a number of other browser programs available, Microsoft Internet Explorer and Netscape dominate the market Making sure that your design works satisfactorily in all the current versions of these browsers is the very least you can do!
New Browsers - New problems
In the last month, two new browsers have appeared - three, if you count the Windows and Mac versions of Netscape 6. The other one, of course, is Microsoft Internet Explorer 5 for Mac. The introduction of these browsers is very significant as far as designers are concerned.
Now for some specifics that affect your design.
As you probably know, font sizes on Macs and PCs are different. With the new versions of Explorer and Netscape, the same font spec on a Web page will make the type appear approximately the same size on both platforms in both browsers.
Stricter syntax checking.
Another problem with these new browsers is that they can be less forgiving of errors or ambiguities in source code. In an attempt to make them work faster and keep the application file size down to sensible levels, something has to be left out and one of those things is the ability to handle buggy old HTML code.
HTML Validators
The syntax checking Web sites reviewed here can all be pointed to any Web page that have a HTTP address, so they must have been uploded to the server already. Although they all carry out what is essentially the same task, they do it in slightly different ways and have useful additional features.
W3C Validator
The World Wide Web Consortium sets the standards for mark-up languages like HTML, so their validation site can be considered to be the ultimate authority when it comes to syntactical correctness. It will check HTML right up to the latest version, and XHTML too.
This site takes a completely different approach. It is examining your page for accessibility by people with disabilities (such as total or partial blindness), as well as browser compatibility. 'Bobby', in case you don't know, is a term for an English policeman and this site uses a bobby's helmet as an icon superimposed on a reproduction of your page everywhere that it finds something to complain about.
Dr. Watson
Oh no, not another police reference! Never mind, Dr. Watson checks your HTML against, lax, normal and strict criteria and allows you to include Netscape 4 and Explorer 4 specifics - or at least, lets you find out what will not work in a particular browser so that you can avoid it.

WPDFD Issue #25 - April 01, 2000

Web Graphics Optimisers
The products tested were:- Adobe Photoshop 5.5 (Mac version used) using the Save for Web feature. BoxTop Software's plug-ins for Photoshop (Mac versions used) PhotoGIF and ProJPEG (there isn't a PNG one) Ignite 2.0 (PC only at present) Macromedia Fireworks 3.0 (Mac version used) PaintShop Pro 6.02 (PC only) Ulead SmartSaver Pro 2.0 (PC only)
As you can see, no one program is best for every type of Web graphics file. In fact, the differences between the programs was not huge when it came to file sizes and some would perform better with some images than others.
The File Formats
GIF tests Big Deal could be saved in 4-bits (16 colours) with no perceptible loss of quality. It was saved with perceptual or adaptive palettes and no dithering in each program. The three photographic images are more efficiently saved as JPEGs, but I also tried saving them as GIFs with 6-bit (64 colours) with dithering switched full on, again with perceptual or adaptive palettes.
The Images
Red Dog A studio shot on a plain white background that was originally intended to be a cut-out vignette half tone. The large area of plain white and the soft shadow to the right are challenges for the JPEG format because any compression artefacts will start to show up there first.
The Programs
Fireworks 3 (Macromedia) Now, very similar to Photoshop 5.5 with its multiple previews and comprehensive palette controls. Fireworks also adds PNG-32 format to its armoury allowing multi-level transparency for those who can handle it.
The next couple of pages are about palettes. Colour palettes were very important in the early days of the Web when most people used monitors that could only display 256 colours or less. These systems are now becoming increasingly rare and the dithering problems associated with restricted palettes are gradually disappearing.
Where do I start?
A very good question. But, as with any set of directions, it helps to know where you are starting out from. The answer to this question will be quite different for someone who has trained in graphic design and someone who hasn't, because their skills and expectations will not be the same.
Web Graphics
Then there are the pictures. You know the old saying that a picture is worth a thousand words? It's true, but in a different way from what you think. The data that makes up a Web page has to travel along telephone lines character by character, and that takes a certain amount of time.
The Tools
I'm not going to start explaining the finer workings of HTML here, there are lots of other sites and books that do that. You can create a Web page in any text editor, and a lot of people prefer to do it that way.
Web Graphics programs
You will need some program for producing Web graphics. Web graphics, as mentioned above, are compressed to reduce their size for transmission over the phone lines. There are three types of Web graphics.

WPDFD Issue #24 - March 01, 2000

Advanced Techniques
INTRODUCTION This section covers some more advanced techniques for Web page design. When I say 'advanced' I don't mean bleeding edge technology, I'm just pushing the envelope of existing technologies to give these pages the 'edge' over the plethora of basic, push button solutions built into many editors and image manipulation programs.
The World Wide Web, by its very nature, encourages jumping from one site, from one page, from one thought, to another. It's all so easy! Reading a book is essentially a linear process. You start at the beginning and read to the end.
Advanced Techniques by Joe Gillespie
This month, I have a major new featurein WPDFD. It is the first of a series of 'Masterclasses' on aspects of Web page design. This one is called 'Advanced Techniques' but there will be something for newbies too, at a later date.
JavaScript Charts
Charts don't have to be static GIF files, here are some ideas for manipulating graphics using JavaScript to produce dynamic and stunning charts and graphs. You feed them the raw data, and they draw themselves.
Adobe SVG
Wouldn't it be nice to be able to design a Web page where you could use any layout you like, any set of fonts, whatever images or animation takes your fancy and to be certain that they are going to download quickly, look the same in every browser and print just like they appear on the screen?

WPDFD Issue #23 - February 01, 2000

File Compression Utilities
Each computer platform has its own utilities for files compression that can shrink the sizes of files for faster transmission over the internet. On Windows, there is the ubiquitous .ZIP format which has been around since the early days of MS-DOS.
The Frame Game
by Joe Gillespie Ah, frames. You either love them, or you hate them! Although the concept has been with us for some time, there are people who use them quite happily and others who, hands raised, back away in mortal fear.
What's New
WPDFD Newsletter If you would like to be notified of what's new on Web Page Design for Designers through a brief, monthly email, just send a blank email to WPDFD-L-subscribe@topica.com - no subject or message is necessary but you must send the email from the account to which you want your newsletter sent.
Good typography is just as important on a Web page as it is in any other medium. The fact that it appears on a computer screen and not on a piece of paper is immaterial; it should still be pleasing to look at and easy to read.
On-screen typography is far from being an exact science, but just like its counterpart in meatspace it is intended to get someone with a limited attention span to grasp your message. As with any medium, some fundamental cognitive rules still apply, since basically the message is still rendered in the reader's mind, the medium is just a means of transportation.

WPDFD Issue #22 - January 01, 2000

Happy New Millennium!
The year 2000 will prove to be an important milestone when somebody eventually writes the history of Web design. The last five years have seen the Web go through its birth pangs, its toddling stage, its first words.
2000 and beyond One of the questions I am often asked by readers is "How do you see the future of the Web?" In other words, where is this all going? Well, I have to grin and say to myself, "How should I know?" It is a very difficult question, especially if no time frame is suggested.
Tricks and Tips
All modern browsers can display background images. These can be small rectangular images that the browser 'tiles' to fill the window. The background of this page, for instance, is a small GIF file that repeats to fill the space.
Dreamweaver 3.0 Dreamweaver is already one of the most highly respected Web authoring tools around. It's one of the few WYSIWYG editors that doesn't mess-up your hand coding and that must surely be one of the main reason for its general adoption by professional Web designers.

WPDFD Issue #21 - January 25, 2015

E-commerce Growing Pains by Joe Gillespie
E-commerce is a technology, not a design discipline - so what is an article on e-commerce doing on WPDFD? Frankly, most of my e-commerce buying transactions have been a disaster so far - partly due to flaky technology, but more often, just bad design.
Pick a cart, any cart ...
The information that follows is fairly brief insofar as features of each cart goes, but will hopefully offer some assistance in determining whether it meets your criteria. PERLSHOP URL: http://www.arpanet.com/perlshop/ COST: Free PerlShop appears to be a good cart for anyone with a relatively small number of products to sell, but if you've got more than 100 or so products, it's probably not the right solution.
The shopping metaphor
Let's look first at the online shopping metaphor: You go into a store and pick up a basket. You walk round the store and put whatever you need into the basket. You take the basket to the checkout and pay for your purchases.
Hierarchy of information
The other problem is the amount of unnecessary information on the screen. In good interface design, superfluous information should be hidden or at least depreciated in emphasis by 'greying-out'. It is not necessary, or desirable, to offer every option at every step.
The onus on the designer to get it right first time
That's a lot of responsibility for a Web page designer, after all, in the real world there are specialist store designers, specialist window display artists and sales assistants that are trained to persuade.
This is where I'm supposed to say that I've come to a conclusion, right? Well, I wish I could, but I can't. Quikstore comes close, especially when you consider value for money and a comparison against other products in its price range, but for my needs, it's not quite there yet.
The Quest for a Cart by Terry Kluytmans
Earlier this year, I found myself in desperate need of a shopping cart. With so many on the market, it should have been an easy task, right?! Wrong.! It's been one of the biggest challenges I've faced in my life as a Web consultant, next only to my quest for browser compatibility in site design.
Where to start
Before you start, take some time to determine what your shopping cart needs are. It will help you immensely in narrowing the available choices! In my case, I had some fairly specific requirements, such as:- The need for a reasonably priced CGI solution in which the pages could be customized to match an existing site design.

WPDFD Issue #20 - November 01, 1999

Web-Safe 2000
In some situations, like when you have vast expanses of flat color, it makes sense to stick to web-safe values. Similarly, if you have a GIF logo and you don't want the main parts of the type to go speckled on 10% of the monitors out there, then make sure that you choose a web-safe color for the body and background of the type.
Restricting your palette
Restricting your palette is not a bad idea. Many of the most famous painters restricted their palettes to a few oil paint pigments. This was more of a practicality than an aesthetic judgement. In earlier times, artists had to grind their own pigments from locally available raw materials.
Monitor color depth
Virtually all cathode ray tube-based computer monitors are capable of displaying an infinite number of colours. Each of the Red, Green and Blue components can go from nothing (black) to full brightness just as if you turned a brightness knob on the monitor's control panel.
Some important things to remember about using color
Depending on the type of surfer your site is aimed at, you will have a pretty good idea of how much you have to religiously adhere to the web-safe palette. Business people tend to have less well specified computers than home users.
Nikon Coolpix 950
I've been a Nikon fan for a long time and have had a number of Nikon F-Series 35mm SLRs and I also have a Nikon SuperCoolScan 35mm scanner which is excellent. When it came to choosing a digital camera, I knew I couldn't go far wrong with a Nikon.

WPDFD Issue #19 - October 01, 1999

PNG - The 'other' graphics file format
During the last month, there has been a lot of discussion on the various Web design lists about the continued use of the GIF file format for Web graphics. At the heart of the GIF format is LZW compression - and this is patented by Unisys, Inc.
Adobe Photoshop 5.5
Until now, Photoshop has been singularly lacking in Web design tools. Sure, there are loads of plug-ins for optimising GIFs and JPEGs but the main application has only had the most rudimentary support for these formats.

WPDFD Issue #18 - September 01, 1999

You will appreciate how in print, the resolution of an image is related to the quality of the paper. For newsprint you will use coarse (80 LPI) screens and for high quality litho or gravure, fine (180 LPI) screens.

WPDFD Issue #17 - August 01, 1999

How a laser printer emulates halftone dots using laser dots. With computer printers, dots are also used to build up an image, but in a slightly different way. Laser printers generally try to simulate the effect of a traditional halftone screen with varying sizes of dots.
In vector terms, this simple rectangle can be described with just four numbers, the yellow ones.
Sometimes you will hear the phrase 'resolution independent', and as this month's review is about Macromedia Flash 4, I will explain what this means. The first time I encountered this concept was back in the mid '80s when Adobe PostScript was first introduced.

WPDFD Issue #16 - July 01, 1999

<BODY> Language 3
In the last two editorials, I discussed the personality of a Web page and how that personality can be made even more powerful through clarity, conviction and consistency. Many designers already do all these things instinctively.
AutoF/X AutoEye
There are many low-end scanners and digital cameras on the market now that allow people to capture images to put on Web pages. Their resolution is limited, but that doesn't matter too much, the end result is only going to be displayed at 72 pixels per inch.

WPDFD Issue #15 - June 01, 1999

Having created a strong personality for a Web site, it has to be applied consistently. Telling the same story over and over again in the same way strengthens the message. Any deviation or inconsistency is like removing the can of beans at the bottom of the display pyramid and has the effect of destabilising the whole structure.
Adobe Photoshop 5.02
Photoshop is undoubtedly the most ubiquitous graphics manipulation program there is but how relevant is it to Web design? The main requirements of Web graphics programs are that they should be able to produce images in GIF and JPEG formats and optimise them for Web use.

WPDFD Issue #14 - May 01, 1999

<BODY> Language
by Joe Gillespie Whether we are aware of it or not, when we speak to someone else there is a lot of communication taking place other than the words being spoken. Facial expressions, hand gestures and intonations of the voice all colour the message, adding emphasis to certain ideas or showing that we are dismissive of others.
BoxTop ImageVise 2.0
You will be aware that the best way to reduce the size of a GIF file is to save it with less colours. The GIF file format is often referred to as 'lossless' as its compression technique doesn't distort an image as a JPEG does, but this is not strictly true as removing colours from an image to obtain a smaller file size is most definitely introducing a degree of loss.
What's New
Suzanne and Carla's Mega List Surely the most comprehensive list of Web design links anywhere. Newly updated. List of Previous Editorials Here is a complete menu of previous editorials.

WPDFD Issue #13 - April 01, 1999

Designing for 'The Other' platform
Some very interesting facts emerged from the Web Page Design for Designers Survey. With well over five thousand responses so far, it shows that readers of this site are predominantly graphics designers, a disproportionate number of them use Macintosh computers and they prefer Netscape as their primary browser.
By far, the most obvious difference between Mac and Windows Web page is the size of fonts. Any font size specified on a Mac will turn out at least 33% bigger on a Windows machine, but the GIFs and JPEGs stay the same size.
You may have been told that graphics appear darker on a PC than on a Mac. This is only a half-truth. The colors in the Web palette are 20% steps of Red, Green and Blue and are shown in the chart opposite.
Browser Differences
With the ability to change default font sizes in a browser and to change the gamma with GammaToggleFKEY, it is fairly easy to simulate a PC browsing environment on a Mac screen, but wait, the differences between Mac and PC versions of Netscape and MsIE are even more of a headache and you can't so easily simulate those.
... And all the other stuff
If the browser differences are not bad enough, when it comes to extending them with JavaScript, Java, DHTML, CSS and various plug-ins, the gap widens even further. JavaScript implementation in the version 3 browsers is quite different.
Gamma Toggle FKEY
Usually, I try to keep reviews non-platform specific but as this month's editorial is biased towards Mac users anyway, this review will be of more interest to them. If anyone knows of a similar product for PCs, please let me know.

WPDFD Issue #12 - March 01, 1999

There is something nice about a blank, white sheet of paper. There is nothing there but potential. The same goes for a blank computer screen - just select New... from the File menu, but then what? It can be intimidating, it can be exciting, but beginning a new project from absolutely nothing and nurturing and cajoling initial ideas into full fruitfulness is what the creative process is all about.
The brief and proposal
The first part of any design task is to identify the problem. The client may have identified the problem and presented it to you as a design brief. More likely, they haven't. Sure they may know they have a problem, but they don't quite know what it is and certainly don't know how to go about fixing it.
What to do about a bad, or nebulous brief
The very first part of any design project to identify the objectives and scope of the job in hand. If you don't have a concise brief from the client, write it yourself. If the objective is not clear, it is impossible to satisfy it.
Preconceptions - theirs or yours
It is very easy to be swayed by preconceptions. The clients may have seen something that they like and want the same for themselves, or something along the same lines. You might have this great idea you have been dying to use for ages, and this could be the big chance ...
Conceptual design - The creative process
A few months ago, I wrote about how different designers have different strengths and weaknesses and how you can map their skills on a notional prism. Your skills may be in illustration, or typography, or in lateral thinking - it takes all sorts.
Ideas vs. style
The 'idea' is the intellectual element of the communication. You can have an idea with no style whatsoever - a lot of advertising material falls into this category, it is blunt and to the point and there's not much wrong with that.
Creative flow and barriers
When faced with creative constipation, most designers will head straight for the bookshelf and start flicking through design annuals looking for inspiration - I do it myself. This is okay if it is inspiration you are after and you are not just looking for someone else's ideas or layouts to copy.
Copying other people's ideas
Quite often I get people write to me and say, Hey Joe, (I'm sick of that one for a start,) is it okay if I use your background on my site? No, it bloody isn't!!! The background and graphics elements I created for my site give it a unique graphical style and they won't be unique if other people start to use them.
Avoiding, and using clichés
There are dozens, if not hundreds of site layout styles that we see over and over again. You can call them, 'tried and tested', 'popular styles', 'classic looks', 'Style #14b' or whatever. Yes, it is difficult, if not impossible, to be totally original but the fact is that people take shortcuts for reasons of time pressure, budget restrictions or simply because they don't have an idea in their heads!
Psychological barriers and how to break them down
I find that my computer is the main barrier to design. Ideas are light, wispy things. They waft by on the breeze like flutterbies, much more easily captured with a pencil and paper than by thirty pounds of plastic, steel and silicon.
Blaming your tools
They say a bad workman always blames his tools - yes, it no good blaming your computer or software if your work is below par. Bad workmen often choose the wrong tools to begin with. A Swiss Army Knife may get you out of trouble in an emergency, but it is not a substitute for a proper tool kit.
Using the best tools for the job
In Web design, certain tools are essential. You need a WYSIWYG HTML editor. I don't really believe that graphic designers can produce a decent page using a pure text editor only. There are plenty of products to choose from at a variety of price points with varying emphasis on layout accuracy and code efficiency.
From idea to Web page
When it comes to producing copy, like this article for instance, I could sit down with Microsoft Word and just type topdown, but I don't. I use an ancient Mac program called Acta which is more of an 'ideas processor'.
Prototyping in Photoshop
I will usually prototype a Web page in Photoshop or Illustrator where I can use the layers to show or hide alternative elements, moving them about the page until I get a 'look' that I am happy with. Having done that, I will produce the final images in GIF or JPEG format before taking them across to Macromedia's DreamWeaver/BBEdit for assembly and coding.
Self criticism
Now, before rushing off to show your client your wonderful new creation, stop. Think! This is the point where you have to stand back from your work and give it the acid test. This is where you have to try and take your client's point of view as best you can - it's not easy, but ask yourself these questions.
And finally...
Before presenting your ideas to your client, draw them into your thinking gradually. Shock tactics are all very well, but can spring unfortunate defence mechanisms. Remind the client of the brief that you agreed upon.
No, it's not some new Web design software that you haven't heard of yet. Solitude is sometimes confused with loneliness but it's not the same at all. You can be lonely in an office full of people, but you won't have solitude.

WPDFD Issue #11 - February 01, 1999

Small GIF and JPEG files - by design, not just optimisation by Ben Summers
Last month, I discussed how to get the best out of JPEG files, and the month before that, GIF files. But simply producing small files is not the only thing you can do. HTML forces you to consider its limitations when designing web pages, but with graphic files, the tendency is to draw first, optimise later.
Extensis PhotoGraphics 1.0
As wonderful as Adobe Photoshop might be in most respects, text handling has never been a strong point. The latest 5.02 revision has sorted out the dreadful kerning and anti-aliasing that was introduced with Photoshop 5 as a result of the implementation of editable text layers.

WPDFD Issue #10 - January 01, 1999

Smaller JPEG Files
by Ben Summers JPEG is rather more complicated than GIF, and it's useful to have a basic idea of how it works to get the best out of it. JPEGs are compressed in two stages. The first is lossy compression, which removes information from the image, and is why JPEGs never look quite the same as the original image.
What's New
List of Previous Editorials There is a pop-up list of previous editorials at the bottom of each editorial page, but here is a complete menu. New Search Facility WPDFD now has its own search facility and will quickly find all references to any word or phrase you enter.
A few final notes
JPEGs compress smooth images better than images with sharp edges, so you could try smoothing the image slightly before compression (your web graphics application may have a slider to apply this without affecting the original image).
Macromedia Dreamweaver 2.0
When I looked at the first beta release of Macromedia Dreamweaver, it seemed very promising - a WYSIWYG editor that produced pretty clean code and didn't mess with it when modified. It also allowed linking into BBEdit or Allaire HomeSite to benefit from their more heavyweight text editing capabilities.

WPDFD Issue #9 - December 01, 1998

Graphic File Formats
We have been through quite a few generations of Web browsers in the past five years or so and have seen many promising new technologies come and go. No matter how good they are, or how useful, technologies based on plug-ins seldom last long.
VisiBone Swatch for Adobe Photoshop and ImageReady
Sometimes you can go on for years using something and knowing, deep inside that there is something wrong, but not quite realising what it is that's niggling you. The default Web palette in Photoshop has all the 216 colors that it should have, but they are arranged in numerical order which makes it difficult to see the relative values of the colors with respect to one another.

WPDFD Issue #8 - November 01, 1998

Web Advertising
Web advertising got off to a slow start. It's not so much that the audience wasn't there - the growth of the surfing population has been nothing short of phenomenal. The problem has been partly due to the profile of the surfers, often seen as geeks and technophiles, and partly due to the oh-so-nervous toe-dipping by the advertisers themselves.
Monster Munch by Joe Gillespie
The radio says that Godzilla is headed for town, everybody has to get out quick! But there's only one road out of town. And, just out of town there are a couple of roundabouts, so all the traffic has to slow down before it can even reach the highway.

WPDFD Issue #7 - October 01, 1998

INTERFACE by Joe Gillespie Whoa, man! You have never seen such a car in your life! Low. Sleek. Absolutely stunning. You can't find a door, but it is so low to the ground that you can easily climb in through the opening in the roof.
Design Perspectives
Almost every area of art and design has some kind of technological dimension. At it's most basic, you have to be aware of what happens when you mix paints and apply them to paper or canvas. Further along the scale, you have things like printmaking, ceramics and sculpture when a significant degree of technical skill is essential to master the techniques.

WPDFD Issue #6 - September 01, 1998

Web Site Garage
I find this site nothing short of amazing! I usually review software products in this slot but this time I'm going to look at an on-line diagnostic service, Web Site Garage . I often tell Web designers that they must have a Mac and a PC and a whole mess of browsers to check their pages in but Web Site Garage claims to give your Web page a 'tune-up' without all this hassle and expense.
THERE IS AN attitude on the Web
THERE IS AN attitude on the Web that everything is free for the taking. This probably stems from the long-accepted perception of the Internet as a community where open sharing of resources has been the accepted norm.

WPDFD Issue #5 - August 01, 1998

It's the difference that makes the difference!
I can't think of any other creative medium where someone spends so much time and effort handcrafting a piece of work just so the audience can experience something else entirely. Look at the print industry.
HTML vs. WYSIWYG by Terry Kluytmans
Technically, a <TD> should be laid out as follows: <TD>Your text here</TD> Instead, many WYSIWYG editors format it like this: <TD> Your text here </TD> which may be more readable, but you risk this end result: This is a snapshot of a table rendered in Netscape 3.01 Gold for Win95 when beginning and ending <TD> tags were placed on separate lines.
Bare Bones Software BBEdit and Macromedia HomeSite
When it comes to hand-coding HTML, two products stand out from the rest. Bare Bones Software's BBEDit (Mac) and Allaire HomeSite (PC) do a similar job. They are both text editors with added features to aid the creation of Web pages.

WPDFD Issue #4 - July 01, 1998

The Future of the Web
I suppose I'm pretty lucky. Not so long ago, a National lottery was introduced in the UK with weekly jackpots of eight million pounds or more. The chances of winning this jackpot are zillions to one but I thought that I would be clever and write a little computer program to improve my chances.
Web Page Animation
Choosing an animation technique to use on a Web page is primarily a trade-off between quality and file size. It also depends very much on how much effort the designer is prepared to put into producing it in the first place.
Macromedia Shockwave
Shockwave is a plug-in that displays Macromedia Director movies within a Web browser. Director has been around for quite some time and has always been a favourite with multimedia producers. Not only does it handle 2D animation in a very intuitive way, its scripting language, 'Lingo', gives extensive control for manipulating 'sprites', sound channels and for general interactivity and navigation.
Macromedia Flash
Adobe Macromedia Flash is based on 'vector' graphics. Instead of having to retrieve every individual pixel in an image, as you do with the bitmaps used in GIFs and JPEGs, vectors describe shapes as a set of coordinates.
Java Animation
Java animation can be virtually anything you want it to be but has been considerably more difficult to produce until recently. One of the features of Director 6.5 is that, as well as Shockwave, it can export animations as Java applets complete and ready to run without any special plug-ins.
BoxTop Software GIFMation
Animation adds a new dimension to Web pages but it isn't easy to do well. The designer has to consider how a graphic will change over time and has to be able to relate each drawing to the ones before and after.

WPDFD Issue #3 - June 01, 1998

Branding on the Web
The web is a busy place. Getting a company or product noticed isn't easy amidst all that hustle and bustle. But have you ever been in a "real" market place? An African or Middle Eastern bazaar? When I visited the little town of Sousse in Tunisia not so long ago, there were two types of shopping experiences, one for the tourists and one for the locals.
Adobe ImageReady (beta)
It's been called 'Son of Photoshop' and indeed, there is a strong family resemblance, but to pass ImageReady off as a baby Photoshop is missing the point completely. If you have used Photoshop, you will feel immediately at home in ImageReady.

WPDFD Issue #2 - May 01, 1998

Identity Crisis
It all started in the army. Which army? Any army. The fact is, you have to know who you are fighting with, and against. I'm not talking combat jackets here, I'm talking about bright scarlet uniforms, banners, flags, shields with coats of arms.
Where do I begin?
This is one of the most common questions that Suzanne and I hear from people wanting to delve into the depths of web page design. Of course, the answer very much depends on where you are starting from and where you want to go.

WPDFD Issue #1 - April 01, 1998

Hi, I'm Joe Gillespie and I am a graphic designer working in London UK. The purpose of my Web Page Design for Designers site is not to teach people how to produce web pages. There is little mention of HTML or any other technical stuff except where necessary.
Design and Function
From feedback I get in emails and in the survey forms, this site is being read by a much wider audience than I had originally anticipated. With the fundamentals out of the way, many more people are now concerned with how their sites look and function, and that is what I hope to address.
Macromedia Fireworks (beta)
Macromedia's latest web design offering is now in public beta stage and I was at the front of the line to download it in eager anticipation. Fireworks is a single program, for Mac or PC, that combines the features normally associated with a whole load of other separate graphics programs used for producing web graphics.