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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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 .

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.

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.

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.

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.

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.

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.

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.

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.

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?

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.

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.

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.

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.

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.

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 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.

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.

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.

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 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).

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.

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 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.

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.

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.

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.

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?

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.

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?

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.

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.

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.

'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.

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.

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.

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.

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.

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.

'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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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.

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.

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 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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 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 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 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.

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.

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.

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.

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.

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.

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 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.

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.

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.

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.

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.

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'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.

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.

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.

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.

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.

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.

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.

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.

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.

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!

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.

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.

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.

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.

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.

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.

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.

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 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.

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?

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.

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.

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!

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.

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%.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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.

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.

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.

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 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.

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.

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.

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 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.

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.

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.

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.

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.

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.

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.

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'.

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.

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.

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 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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!

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.

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.

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.

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.

by John All