Editor’s note: Newspapers & Technology Production Manager Chere’ Martin is in the early stages of making her transition from print designer to Web designer. Her column, which will appear for the next few months, chronicles her journey in an attempt to help other designers who might be making their own migration to the “wild wild Web.”

Chere’ Martin Production Manager Newspapers & Technology

To date, I can find few guarantees in Web design as I do in print.

With print, there is always one way or another to make things exactly the way I want. But with Web design, the very nature of multiple browsers (each with its own set of capabilities) and the nature of people (who also have their own set of capabilities) make the art of presentation a bit more treacherous.

So throw your chips on the table, kiss the dice for luck and don’t drink too much as the night rolls on.

From the very beginning of a Web project, the physical size of various pieces must be considered. The first size consideration is among the most basic: To what dimensions should your page be built? Typical canvas sizes are anywhere from 640-by-480 pixels, 800-by-600 pixels or even as large as 1,024-by-768 pixels.

Of course, you can pick a size in between but keep in mind the typical interface aspect ratio is 4:3 (four units wide by three units high). The larger the monitor, the more pixels can be displayed, so consider your audience when planning a Web project. Is it comprised mostly of the technologically challenged or is it computer savvy and armed with cutting-edge computer equipment? Treat this decision as carefully as you would the planning of a print ad for a visually challenged reader.

Subtract before adding

Now that you’ve determined the size your pages should be, you’ll need to subtract some pixels before you begin building your masterpiece. Yes, it’s annoying but not so crazy when you consider that the navigation bar of a browser as well as the vertical slider on the side take up space on a screen. 

And, of course, each browser will take up different amounts of space. If you want to see exactly how many pixels your favorite browser uses up, take a screen shot of it and open it up in Adobe Photoshop.

Screen shots are taken at 72 dots per inch so it will be size accurate.

From there, you can crop the image to see either how much space is left after the navigation tools are gone, or how much is taken out by checking the image size. And now finally, you have your canvas size decided.

If, for whatever reason, you decide to throw caution to the wind and build a really large page that explodes beyond the boundaries of a typical user’s monitor, you needn’t worry about losing data.

But the large size will force users to continually use their scroll bars to view your site in its entirety. The gamble is yours to take when betting whether someone will or will not bother to take the extra steps to see your content.

Design away

And now, we come to a point where most print designers feel like the professionals they are: creating the look and feel of a project.

Build your interface in your favorite design software, whether that program is Adobe Photoshop, Adobe Illustrator or Macromedia Freehand.

Avoid using a layout program such as QuarkXPress or InDesign. I’m sure someone has come up with some sort of workaround that would get these files into a workable format for Web use but why bother? Most of the time, you will be aiming to get the design into Photoshop/ImageReady or Fireworks, so exploit the extensive artistic tools available to you within those packages.

A question of fonts

Before beginning my journey into Web design, one point on which I had been previously unclear was the hows and whys of font usage on Web pages.

On the one hand, I understood there were a limited number available; on the other, I’ve seen some pretty swanky fonts on some sites. And since designers, including me, consider fonts an art form unto themselves, the thought of being forced to restrict my Web font design to such pedestrian fonts as Helvetica and Times has always made me want to hurl my lunch.

As it turns out, I was right on both counts.

For your fancier page aspects, such as buttons or navigation bars, feel free to use whatever font you like.  But in order for that text to appear properly in all browsers, you will need to convert it to an image. Keep in mind that images make much larger files than editable text.

Yes, it is simple enough to convert but don’t get too carried away. If you have some text that was converted to an image that later on needs to be adjusted, look forward to finding the original files, make the changes, export to Photoshop (if not there already), select changed area, save a new file, go to each and every HTML page the previous image appeared and replace. Yeah, good times.

If you’ve used editable text, however, the process is greatly simplified and amounts to opening each HTML page and making the text change by typing. Editable text must conform to standard font usage in order for it to display properly from computer to computer (see Figure 1). This graphic, taken from Macromedia’s Dreamweaver cascading style sheets menu, illustrates the hierarchy of how a browser will select and display a font, based on your font of choice at the time of the page’s creation.



Fig. 1

If you use Arial, for example, and the user doesn’t have Arial on his system, the browser will automatically search for Helvetica. If that’s not available, then the browser will display the user’s default sans-serif font, whatever it may be.

In other words, you can’t be guaranteed the font you use is the one that will appear on the user’s screen. But really, when was the last time you didn’t see a font such as Verdana on a computer? Editable text is a relatively safe bet.

Bottom line? It’s up to you whether to use editable text or text that needs to be converted to images. But keep this in mind: On my first Web site design attempt, a portfolio site, I tried to be super-fancy and use mostly text that needed to be converted to images. It took exactly one typo, found a week later, to make me change my stance on the matter.

An exception to these font guidelines might be if you happen to be designing a site that will only be viewed within a company’s intranet where all user fonts are controlled by a central IT department and, thus, everyone has the same fonts.

In this case, feel free to design editable text with any of those fonts knowing that your page will display correctly.

Interface template

In the same way that branding requires some consistencies from one advertisement to another, so does your Web site.

Create consistencies in your interface so users become increasingly comfortable as they navigate from page to page. Drastic changes in color or layout can be confusing.

Most well-organized pages have some consistent features that do not change much, if at all, as you move through their sites:

*Logo area

*Header area (perhaps a slogan or site description)

*Navigation bar area

*Footer area (fine print, sub-navigation area across the bottom of the page)

*Main content area (stage)

Consider these time-tested standards and decide if and how you will approach these items with your project. Whatever you decide should remain consistent from page to page for the end user, these items become part of your template.

Personally, I overlooked some small details when creating my first interface template. Many sites allow you to scroll page to page via arrow buttons (in addition to the navigation bar) and mine was no different.

It seems those buttons don’t show up on their own and I needed to backtrack and build them. Another item my instructors insisted was important is the presence of some kind of text marker that shows users exactly where they have navigated to within the site.

Like so many things in life, you must plan on someone finding themselves lost or confused and plan accordingly.

A final note

As you design your interface do not include the actual text that will be editable. Design only the area in which it will reside and consider the space it will require.

Editable text will be added later within an HTML editor program like Macromedia’s Dreamweaver. Your design templates should be what a template is in any other forum and contain only the elements that will be consistent from page to page within your Web site.

With page size and font usage under control, you can proceed with confidence in building an interface with the print design tools you’ve come to love without fear of losing your shirt to the casino that is the World Wide Web. Good luck!

Chere’ Martin, production manager at Newspapers & Technology, has a bachelor of arts degree in graphic design from the Art Institute of Colorado. For more information on her transition to Web designer, please visit her Web log at www.livejournal.com/users/printgirlonline. This is an interactive blog, so feel free to post questions or comments there.