Preparing images for the web

How to Display Your Art on the Web: Part 6

[This is part of a series of articles for which the introduction and list of articles is here. If you haven’t read the introduction yet, it would be helpful to read it first.]




Atoms to bits
Unless you work digitally, in order to get your artwork from the easel/drawing table to the web, it needs to be translated from physical atoms to bits of digital information (as Scott McCloud points out), i.e. photographed or scanned to a digital image file. That file will then be used to create the final resized and compressed image file that is displayed on your site or blog.

If you work digitally, you probably know a good bit of what’s in this article already, and can go surf YouTube while the rest of the class catches up.

Photographing your work
This is an area were I don’t have a lot of personal experience, as I largely work digitally, but there are many resources on the web (and in print) from “those who know” (see my list of resources below).

You’ll find some conflicting information here and there, particularly in terms of digital vs. film. If you’re preparing a portfolio for galleries, many of whom still want submissions as transparencies (slides), then slide film is the obvious choice. You’ll still have to scan the slides for the web, which requires a slide capable scanner; and it may be just as easy, if not easier, to take an alternate set of digital photos at the same time, specifically for the web.

Hiring a professional
You may want to take a stab at doing it yourself, but be critical. If you can’t get the results your work deserves, consider hiring a professional photographer. Find one who lists the photography of artwork specifically as one of their specialties. There’s a big difference between photographing a cute, drooling baby and a painting of a cute, drooling baby.

Scanning your work
If you your artwork is flat, on paper, illustration board or the back of a napkin, and is small enough, you might consider scanning; but for good results that don’t require a lot of color correction, you’ll want a graphic arts quality scanner (or access to one). Even though images for the web are prepared at low resolutions, scan at 200 ppi or better to give yourself some leeway. It’s always easy to scale down in image editing software, you can’t scale up. If you’re scanning for print too, scan at 300 or higher.

Again, try it with what you have, but be critical of the results and consider the option of a professional service bureau if the scans don’t look right. I turn off all the scanning “helpers” and image correction options, scan as raw as possible and do any corrections in Photoshop.

Image editing software

Once your artwork has been converted from atoms to bits, you may need to make adjustments to the color or straighten off-square photos or scans; and you will certainly need to use image editing software to create the final resized and compressed image files for display on the web. (Plus you always need something on your computer that will let you put the President’s head on Arnold Schwarzenegger’s body to amuse your friends.)

Adobe Photoshop is the industry standard professional image editor, if you have that and know how to use it, you’re ahead of the game. If you don’t have it, Photoshop is expensive (around $600) and can be more than you need to simply prepare a few images for the web; kind of like buying a Porsche Carrerra to drive to the train station. (I know, you told your wife/husband that a 2-seater would save on gas.)

If you are a full or part time student anywhere, you are eligible, as I advise the students in my Flash classes, for academic discounts that make things like Photoshop remarkably cheap (about the price of an upgrade package). Academic software is the same as the commercial versions, but it has some restrictions, (can’t be upgraded in the future, requires that you wear horn rimmed glasses and a pocket protector). See this description of academic software from About.com. Beware of cheap software scams in this area. (i.e. all those emails you get promising Adobe Photoshop for $29.95!) As a teacher, I can also get the real discounts; when I use them I usually buy from Academic Superstore. You have to produce proof that you are a student or teacher for the real academic discounts, but part time and continuing education classes usually qualify (and it doesn’t have to be art classes). Talk to the coordinator at the school.

Photoshop Elements (Mac & Win) is a lower priced (around $100) consumer version of Photoshop without the gee-whiz, super-duper, hyper special pro features (that let you put the President’s head on Arnold Schwarzenegger’s body and make it believable enough to fool Associated Press). You can read a comparison of the two on Graphic-Design.com and a review on CreativePro.com.

GIMP (The GNU Image Manipulation Program) is a free, open source image editor for Mac, Windows and other platforms, that some genius programmers with too much time on their hands created on all those Friday nights when they didn’t have dates and Stargate SG-1 was in reruns; and is in some ways comparable to Photoshop (and in many other ways, not). Installing and using it requires a degree in particle physics and a black belt in computer graphics, but it’s very capable (and pretty amazing for free software). Again, despite having the “right price” it may be the equivalent of using a bulldozer to turn over your backyard garden (which, granted, can be fun) because of the learning curve. It will also let you put the President’s head on Arnold Schwarzenegger’s body and make believable enough to fool USA Today (not that that takes much). See the description on Wikipedia. Some other geeks have spent their Friday nights putting together GIMPshop, a modification designed to make it more like Photoshop and easier to use.

Graphic Converter is a Mac only shareware application ($40) that is the universal can opener of graphics applications. It has an amazing ability to open and save in almost any image format known to man and computerkind (and some that no one’s ever heard of). Graphic Converter has good basic image editing tools and you can try it as long as you want for free, (but you should pay the modest asking price if you keep and continue to use it).

iPhoto® is the image cataloging application that ships free with iLife® as part of the Mac® OS X® computer® operating® system® from Apple®. It has basic image editing tools that may be sufficient for prepping your images for the web.

Windows Photo Gallery (Wikipedia description) is basically Microsoft’s version of iPhoto, and also has some basic editing tools. Previous versions were called Mocrosoft Picture It! (Wikipedia description). Like all Microsoft applications, to use this application you must click on a button to agree that Microsoft owns your immortal soul, and all reproduction rights thereto, in perpetuity and in all media, physical, electronic and ethereal, in current use, yet to be created, or ever to be imagined by the mind of any sentient being in any plane of existence. Other than that, it’s free.

Paint Shop Pro is a Windows only image editor that has its adherents and detractors. I mention it because it’s popular and relatively inexpensive ($60), and in some ways more powerful than Photoshop Elements; but take the “Pro” part with a grain of salt. If you’re a “pro”, you use Photoshop. See the description on Wikipedia.

About.com has a couple of handy lists: Free Photo Editors for Windows, and Free and Budget Photo Editors for Mac. Turn your sound down and be ready to duck the annoying talking ads for SitePal.

The big list. Here’s a long list of available raster graphics image editors from Wikipedia, most of the items are linked to more detailed descriptions. More than you ever cared to know about.

There are also some online image editors. The idea seems kind of foreign to me and I don’t know much about them, but who knows?. Here is a list of free Online Photo Editors from ExtremeTech. If anybody has tried these, let me know how you like them.

What’s the format, Kenneth?

Web browsers can generally display three kinds of images, news, comics and por… er, I mean GIF, JPEG and PNG. They all use some method of compression to reduce the file size of images so they can be transmitted over the web without taking a week to download.

GIF (Graphics Interchange Format) can be pronounced with either a hard or soft “G”, but the originators of the format say choosy artists choose “jif”. GIF was the original format back in the early days, when the web was 5 steam-powered computers hooked together with Radio Shack speaker wire across the MIT campus. GIF is really only suitable for images with a limited color range (256 colors) and flat areas of color. The GIF format can produce images with a small file size and can be good for some things, like simple, flat-color comics, typography and cartoons of the President’s head on Arnold Schwarzenegger’s body.

JPEG (Joint Photographic Experts Group) is pronounced “jay-peg”. JPEG images are by far the most common image format on the web, and are usually the format you will use to reproduce your art for the web. They support the full range of millions of colors. Used correctly, JPEG compression can compress images to to a remarkable degree without losing apparent image quality. Used incorrectly, it can turn your images into a grunky mess that looks like the cat threw up in your digital camera.

JPEG is a “lossy” compression method, meaning it throws away image data that the algorithm has determined you won’t miss; kind of like your wife cleaning out your studio when you’re not home. If you compress a JPEG too far, however, or re-compress an existing JPEG, you can wind up with dirty looking “artifacts” in the image. This is where is pays to have an image editor that gives you a preview, like Photoshop’s “Save for Web” feature, that shows you an approximation of how your image will look as you choose the compression level. You want the smallest file size possible without seeing any artifacts – dirty, squarish roughness in areas of the image (see the JPEG image above with the compression level of “10”). The stronger the level of compression, the lower the file size; but also the more image data that is thrown away. Always keep copies of your original files; and let your wife know that you really did buy 2 copies of Uncanny X-Men 96 on purpose.

As a general rule don’t re-save a JPEG as a JPEG; create a fresh one from the original file. Re-compression throws away more image data. JPEG’s that are originally saved with minimal compression, however, like those from a digital camera, can be used to make new JPEGs. Not much image data has been discarded. JPEGs saved for the web, though, are generally “pushed to the edge” and compressed as hard as possible without looking bad; re-saving those will make your images look like spoiled peaches.

PNG (Portable Network Graphics) is, the originators insist, pronounced “ping”, though you will hear “pee en gee” in certain circles. PNG images combine some of the characteristics of GIF and JPEG. Like GIF they are a lossless image format and support transparency. Like JPEG they support the full color range millions of colors. The main disadvantage is that their lossless compression method is not as efficient as JPEG’s lossy compression, and they make images with larger file sizes for the same level of apparent image quality.

The emails were right: size matters

Image size
In addition to file size you need to be concerned with image dimensions. You will need to determine how your images will display within your interface design, and how much room you have in your design area, before you resize them and save them out as final files for the web. I’ll be covering the design of online galleries and portfolios in a future post.

Once you know how the images will be displayed, you will probably be making more than one version of each image. Depending on your gallery design, you might be making:
a thumbnail and a full size image,
a thumbnail, medium size preview image, and full size image,
a thumbnail, full size image and jumbo, extra large, Grade-A, hi-res detail image,
a cropped detail close-up,
and/or all of the above.

If you’re clever and persistent, and not doing anything on Friday nights, you may be able to figure out how to have your image editing software save out several size versions simultaneously, for an entire folder full of files, using batch processing.

Resolution, or dpi and ppi, FYI, QED
Resolution in print is measured in “dots per inch” (dpi), or “lines per inch” (lpi), and on the computer is measured in “pixels per inch” (ppi) (or pixels per centimeter for those of you in the rest of the civilised world). While this matters in print, or when scanning or working in Photoshop, image resolution does not matter on the web. What matters is the dimension in pixels.

If a 2″ by 2″ (5cm x 5cm) image has a resolution of of 100ppi (i.e 100 pixels per inch), it will be 200 pixels by 200 pixels. If the 2″ image has a resolution of 300ppi, it will be 600 pixels by 600 pixels. Both of those images will print at the same size, 2″; the higher resolution one will have more detail.

Web browsers, however, are rather narrow-minded and don’t understand or care about image resolution. All they understand is dimensions in pixels. So the first image will display much smaller on screen than the second. (Unless you learned “new math” in the 60’s, in which case 5 images + 5 images = 12 images.)

This concept is made additionally complicated by the fact that computer monitors can be adjusted to display at different resolutions, so “pixels per inch” is actually a relative term. When someone says “on the web it’s all 72 ppi”, they are referring to a default resolution.

Monitors come in different sizes. 1024 x 768 is the default resolution for a 17 inch monitor, and it’s 1280 x 1024 for 19 or 20 inch monitors (with other varistions for “widescreen” monitors). If you have your own monitor set to a higher resolution than the default, it will display more pixels per physical inch, and images will appear smaller onscreen to you than they might to other computer users (and vice-versa if you set your resolution lower than the default).

If you get lost, try a bit of the cake that says “Eat me” (hmmm… or is it the bottle that says “Drink me”?)

Putting it in the browser

OK, you digital artists in the back row who were surfing YouTube can pay attention now.

Embedding images in HTML
Images aren’t actually “in” the HTML page the way words are, they are “referred to” by the IMG tag, which basically tells the browser “Go get this image from this location and stick it here in the page.” The IMG tag can also tell the browser what the size of the image is (in pixels by pixels), which helps the browser leave a place for the image while it’s downloading so it can render the page faster. You can artificially force an image to display at a different size this way, and some HTML editing software will give you the impression this is a fine thing to do. It’s not. It will make your image display poorly. Prepare your images at the size they will display, and don’t trust advice from strange HTML editors to whom you have not been properly introduced in the course a chaperoned social occasion.

Displaying images in Flash
If you are preparing your images for display in a Flash-based gallery or slideshow, save them out as JPEG images, compressed just as if you were going to place them directly in a web page. Dedicated image editors do a much better job of image compression than Flash does. Flash won’t re-compress an imported JPEG unless you tell it to. Flash is considerate that way.

“Protecting” your images

You can’t.

Clever tricks that don’t work very well
Many people try various tricks to keep their images from being easily downloaded, like disabling right-click with JavaScript, placing a transparent GIF over the image in a CSS layer, putting the image in a Flash file, adding a sound file that screams “Don’t touch that!” whenever someone chooses “download image”, etc. They can all be gotten around in one way or another. All of them, in fact, can be defeated by simply using a third party screen capture utility (which is why, of course, all software from companies with less than a $4 billion market cap should be illegal, or at least that’s what Steve Ballmer tells me).

Watermarks and other ways to ruin your image
I should be clear here that by “watermark” I mean a word or symbol, sometimes partially transparent, that is laid over an image in an attempt to render it useless to someone who wants to download and “repurpose” it. The problem, of course, is that this also renders the image useless for showing your artwork as anything but a hideous, insulting joke. You can also choose to display your images so painfully small that they have the same results. See my rant on “How Not to Display Your Artwork on the Web“.

Bylines and credit markings
On the other hand, marking your image with a small, innocuous signature or byline, crediting you as the creator of the image, perhaps with a copyright mark and/or listing your web site’s URL, is a fine idea, as long at it’s done without making your image look bad. If you’re going to be displaying your images against a known background color and you are comfortable that the color won’t change in the future, you can add an additional band of that color to the bottom of each image (by adding to the “canvas size”), and add your byline there without intruding on the image area at all.

Keep it in focus
Unless you’re putting your images up for the benefit of your mom and Aunt Joan (it’s so lifelike!), your purpose here is to have the images on the site present the best representation possible of your work. That’s the end goal for all this fuss. As Fernando sez, you want them to look mahvellous!

Next: Gallery and portfolio design

Resources

Photographing your work
A Short Tutorial from Art Link Swap
How to Photograph Artwork from The Artists Web (images missing, still useful)
List of Resources on Photographing Artwork from Catherine Jo Morgan
How to Photograph Art from Dallas Arts Review
Photographing Your Artwork by Russell Hart and Nan Starr (Amazon link)
Other books (Amazon)
Photographing Small Paintings for “painting a day” blogs from Jeff Hayes

Scanning your work
Scanning Artwork from The Artists Web
How to Scan Artwork from Treelight Studios

Image editing software
Photoshop (Adobe: Mac & Win) (Amazon Mac & Win)
Academic software dicsounts – info from About.com
Photoshop Elements (Adobe Mac & Win) (Amazon: Mac & Win) Comparison on GraphicDesign.com
GIMP, description on Wikipedia, GIMPshop
Graphic Converter
Paint Shop Pro (Win), description on Wikipedia
Free and Cheap Photo Editors for Windows and Mac, (About.com)
Big list of raster image editors from Wikipedia
Free Online Photo Editors from ExtremeTech

Formats
JPEG, GIF and PNG on Wikipedia
JPEG artifacts and Pitfalls of JPEG Compression on About.com

Resolution
DPI and PPI Explained on tildefrugal.net
Display, Printing, dpi and ppi on Photo.net

 
Facebooktwittergoogle_plusredditpinterestlinkedinFacebooktwittergoogle_plusredditpinterestlinkedin

Designing your web site

Designing your web site

How to Display Your Art on the Web: Part 5

[This is part of a series of articles for which the introduction and list of articles is here. If you haven’t read the introduction yet, it would be helpful to read it first.]

OK, big news flash here, in case you weren’t aware of it, but artists, even good artists, don’t necessarily know squat about graphic design. (Gasp!) Yes, true fact: art and design are two different skill sets, even though there is some cross over. Sorry if I’m stepping on any toes, but if you want proof, look no further than the endless array of horribly designed artists’ web sites already out there.

To make matters worse, traditional print designers, even good ones, don’t necessarily know squat about web site design. Again, it’s two different skill sets, though the overlap is much more extensive.

Print designers, if they know their craft, can specify a page design that turns out in print precisely as they designed it, with pinpoint placement of graphic elements, total typographical control and exactly specified colors.

The web, on the other hand, still offers very limited typographical control; color space and page size vary between operating systems and individual computers; and even web pages designed by pros, that once looked fine across the board, can go wonky with the newest release of the most popular browser from The Giant Software Company That Shall Not Be Named. The web is wiggly and squirmy, and designing for pages that can be different sizes and shapes on different computers is a little like eating Jell-O with a fork; it can drive stout-hearted print designers to madness and acts of desperation.

Alternatives
You have some of the same alternatives I mentioned in my article on Building your site, notably hiring a professional and using, or starting with and altering, existing page templates. I can’t give you a course in design here, but I can try to point out some important considerations.

Size and proportion
Here’s where web design gets all twitchy right off the bat. Unlike print design, you don’t know the final size or shape of the area in which your design will display; it varies from computer to computer among those viewing your site over the web. EEK! This understandably drives long-time print designers completely crazy, and they will very often make their pages un-web-like by freezing them at a set width and height, or popping them up in a specifically sized window, and otherwise trying to make them behave like print pages. This is one option if it makes life easier for you, but I think it’s better to approach a web page as a web page and take advantage of the fact that it can shrink and grow to accommodate different amounts of content. Web design has lots of advantages over print design, it’s not all disadvantages.

While you can’t predict the exact size in which viewers will be seeing your pages, you can predict the most likely “window”, based on statistics. Most people are viewing the web in one of several common screen resolutions. The most common, as measured in pixels, are: 1024 x 768, 800 x 600 and 1280 x 1024, in order of current popularity. These figures change over time as more people buy larger monitors. Up until a couple of years ago, I was designing for 800 x 600, but smaller monitors are giving way to larger and I now design sites to display comfortably in 1024 x 768, and try to nicely accommodate the way they will look in higher resolutions.

How big is that doggie in the window?
Taking into consideration typical “browser chrome”, the space taken up by the browser interface and all its wonderful widgets and tool bars, and allowing a little extra wiggle room, I work within a “safe” size of 980 x 550. The page can be longer vertically, of course, but that initial size before the user starts scrolling (if they take the trouble to scroll) is the most important. Try to keep your most important content, navigation elements, etc. “above the fold” in that window. (“Above the fold” is a reference to the front page of newspapers, in which the most important stuff has to be seen when the papers are folded in half on the stack.) You may want to leave more or less in terms of horizontal margins. On larger resolutions, the background will expand to fill out the difference.

Remember in designing your page elements that you don’t want to force part of your main image gallery display, or the gallery navigation, below the bottom of the window so users have to scroll to see or use it.

Would you like ice with that?
The content area of your design can either change width with the window width (“fluid”), be a set width, locked to the upper left (“ice”), or be a set width that floats to the center of the window, with the background expanding or contracting to either side (sometimes called “floating ice”). The first is the hardest to implement, the second the easiest, and the third is currently the most popular design structure.

Design elements
Think of a web page as a grid. You can make it as curve-u-licious as you want, but it’s going to have a rectangular grid underneath it, and you need to make your curves work within that structure.

Where to start
You’d be surprised at the number of high-end sites that are based on a few simple elements with some graphic design embellishments. Try starting with a top bar or banner, a horizontal space across the top of the site containing your “logo”, name or the name of the site, and maybe an image element. Under that arrange a navigation area, perhaps horizontal if your site is very simple, or a vertical column to allow for subsections and expansion, and a content area with your page heading, text and images. If you want you can tie the bottom of the page off with a horizontal footer, usually containing a copyright notice or contact information.

Consistency, consistency, consistency.
Ah-ha! you say. Consistency is the hob-goblin of little minds! Perhaps, but on the web, it’s the guardian of clarity and your best defense against confusing or discouraging your visitors. At any given moment after a visitor opens your site, they should be able to glance at page elements and know: What site am I on? What page within that site am I on; and where am I in relation to the other pages (or major sections) in the site?

Consistency means things like: every page should have the navigation in the same place and in the same form. (Don’t, for example, drop out the nav element for the page you’re on, or change its position. Highlight it, perhaps, but leave it in place and in the same order.)

Headings (page titles) and sub-headings should look the same, and be in the same position on every page. Sub-headings should be clearly subordinate to headings. If you have a footer, keep it consistent.

The exception
While there may be variation within your consistent page layout (a text page for information About the Artist will be different from a portfolio or gallery page, for example); the one page that can be dramatically different from the others is the home page, which acts much like the cover of a book or magazine. It should have some continuity, in that it should look like part of the same web site, but it doesn’t have to follow the same pattern as the interior pages, and in fact, should look different so users can distinguish it easily as the home page. It also serves like the lobby of a building, from which visitors can orient themselves.

Navigation
Here’s another area where the web is very different from print. In print you have page numbers and chapter headings that let readers know where they are and help them find something; on the web you must offer them clickable navigation as well. Some important points:

Put it somewhere users expect to find navigation (usually toward top or left).
Make it look like navigation.
Keep it consistent.
Ideally, highlight the navigation element for the page or section they’re in as a sort of “you are here” indicator.

Every page but the home page should have a link to “Home”, preferably as the first navigation element. Every page should have access to all of the major pages or sections. If you’re in a sub-section (e.g. “Portfolio”), every page in the sub-section should have access to every other page in that sub-section, as well as to the main site pages. Don’t make them use their “Back” button, or your own version of a “Back” button (like “Up” arrows, etc.). This is a web site, not a directory on your computer.

Pop this
I’m not a big fan of “pop-out” or “drop-down” menus. I think it’s a poor substitute for visible hierarchical menus. Lots of people love them, but then lots of people love Michael Bolton and Yanni, I’m just not one of them.

More info
For more on navigation concerns, see Don’t Make Me Think: A Common Sense Approach to Web Usability by Steve Krug. Start looking at sites you visit with an eye toward which ones are easy to navigate, and which are not, and see if you can understand why.

Color
Color can be as personal as clothing choice, and likewise will impact the immediate (and perhaps lasting) impression made on others.

There are a number of color utilities out there, many of then free, that are designed to help you choose “color schemes”, groups of colors that ostensibly work together. They are often accompanied by web sites where color schemes can be posted by users. There is a large list on the Web Developer’s Handbook. (Here’s an interesting variation for atists: Web Design Color Inspiration from the Masters based on picking colors from paintings.)

The most important piece of color advice I can give you is to remember the purpose of your site. Don’t choose a color scheme that will overwhelm, conflict with, or otherwise detract from the display of your work. This may often mean using low-chroma, neutralized colors or even grays, or choosing colors that compliment the predominant colors in your work. But, hey, if you think a background of electric green or baby-puke yellow will set off your work to best advantage, go wild.

The so-called “Web Safe Palette”
Back when web site design was a fledgling art, the major software companies were clueless about our need to access the palette of colors that would display reliably across different operating systems, particularly when one of them was often running on machines with a very limited ability to display colors. (Older Windows computers could often display only 256 colors.) So we were left with third party utilities to choose colors from the small palette of 216 colors common to the two systems. Now that almost all computers can display millions, or at least thousands, of colors, the major software companies are once again displaying their ignorance by acting as if the web safe palette is this wonderful web-aware feature they’re providing for you, when it essentially no longer matters! If you are trying to match the edge of a flat color in a graphic or Flash file with a background color set by hex code in the HTML, it can be helpful to use a color from the web safe palette; otherwise use the colors you want.

Different visions of the world
Be aware that your site will look different on Mac and Windows machines. They have a different “gamma” settings, and colors will generally look darker on Windows than on the Mac. Image editors like Photoshop and Fireworks have provisions for previewing your work in the other system’s color space.

Also be aware, very aware, that your fledgling site design can look fine in one browser, and fall apart in another. Though there are standards for how HTML and CSS should work, the engineers that write the browser code that interprets those standards in displaying your page often appear to live in a Bizzarro World where “rite am rong”. Whenever possible, test in different browsers. Impose on your friends who use a different operating system. I test in IE6, IE7 and Firefox for Windows, and Firefox and Safari for Mac. (Occassionally you may want to ensure compatibility by painting yourself blue and sacrificing a chicken to the Web Gods at midnight on a full moon in a bar-b-que pit that faces Redmond, Washington.)

Typography
If CSS has brought web design out of the stone age and up to Victorian levels of technological sophisitication, web typography is still in the medieval dungeons and is the domain of witches and demons. The problem is that your “live” text has to display in a font (typeface) that exists on the user’s machine. You can specify any font you want, but if the user doesn’t have it on their machine, the browser will default to whatever it can find, sometimes with unpredictable results. This is another thing that drives print designers crazy and I don’t blame them, it’s a terrible limitation that leaves very few font choices. The best universally installed fonts are Verdana, for sans-serif body copy, Trebuchet MS or Arial for sans-serif headings and Georgia for serif. In general serif fonts don’t read well at small sizes on the low resolution of a computer screen. Verdana, Trebuchet MS and Georgia were specifically designed for display on screen rather than in print. Avoid things like Times New Roman, and surpress any temporary possession by demons that may make you think about using Comic Sans.

I can’t give you a whole primer on web type, but I often use 11px Verdana for body copy, 12px Arial or Trebuchet for subheadings or text-based navigation elements. Your milage may vary.

Page headings and navigation elements can be created as graphics, allowing you to use any font and restoring full typographic graphic control to at least those areas. Be sure to use image “alt” tags in the HTML for those images for the benefit of search engines.

Don’t use more then three different typefaces.

Text columns.
Here is an area where some big-time web usability gurus (Jacob Neilsen are you listening?) fall flat on their faces, in apparent ignorance of one of the most fundamental rules of graphic design (and one that has been known for literally hundreds of years): human beings read text more easily if it is constrained to a certain width. The general rule is about two alphabets, 50 or so characters, which is approximately the width you’ll see in most hardbound novels. This is the primary reason that magazines and newspapers have columns, though selling ads is a close second, and in newspapers columns are broken down to even smaller widths to make it easier to sell small ads.

White space is your friend
More than that, it’s a page’s highway system and tour guide, the way you move someone’s eye around the page. White space is one of your most powerful design tools, and the proper use of it is one of the quickest indicators of high end design. (“White space” doesn’t have to be white.) Look at the most appealing professional sites and note the amount of space in the design that is “empty”. You’ll notice the same thing in newspaper and magazine ads. The really high end ones will appear to “waste” a lot of the very expensive ad space, but are actually using it to control your eye and attach importance to the highly focused message. Give your text columns plenty of room to “breathe”. Even artists who understand the concept of “negative space” in painting and composition may not grasp its importance in design. What is not there, Grasshopper, is often more important than what is there.

The elements of style (web version)

Make sure it’s clear what is and is not a link. Don’t use colored text except for links and headings. Never underline anything on a web page that is not a link. Use bold or italic (sparingly) for emphasis.

Don’t center your text! Unless the site is one big wedding invitation, never center anything that is not a headline. For some reason, perhaps exposure to too many Microsoft Word documents, a large number of people suffer from the delusion that centering text makes it look more professional, when in fact the opposite is true.

Don’t use italics for long passages, like centered text, it’s hard to read.

Inspiration
Like artists learning to draw by studying the masters, one of the best ways to learn about web site design is to look at existing successful designs. I’ll list some sites below that are large indexes of sites that someone thinks are well-designed. This, of course, is always a matter of opinion, but you will certainly find a higher percentage of well-designed sites here than on the web in general.

CSS Mania
CSS Beauty
CSS Tux
Stylegala
Netdiver
Styleboost
Wow Web Designs
Media Inspiration (categories for Illustrators, Painters, Sculptors, etc.)

And a big list (Under Creativity, CSS Showcases and CSS Galleries) of many more design inspiration sites on Web Developer’s Handbook, along with a ton of links to other web design and building resources.

Here are a couple of design resources for “stuckness” from The Crafted Webmaster.

Other Resources
In addition to the above links, I’ll send you back to the same resources listed in the articles on Planning your site and Building your site which have information relevant to design issues as well.

Next: Preparing images for the web

 
Facebooktwittergoogle_plusredditpinterestlinkedinFacebooktwittergoogle_plusredditpinterestlinkedin

Planning your web site

Planning your web site

How to Display Your Art on the Web: Part 4

[This is part of a series of articles for which the introduction and list of articles is here. If you haven’t read the introduction yet, it would be helpful to read it first.]

Hey! What’s with this “planning” stuff? I want to just start making my beautiful site design and get going!

Well, design is what I’m talking about, and planning is part of that, perhaps the most important part. If you were laying out a magazine ad, or a painting, you would rough out some preliminaries, do some sketches, or engage in some kind of brainstroming or planning in order to have some idea of what you were doing. Same, and even more so, with web site.

Perhaps you’re the type to start a cross-country trip with half a tank of gas and $1.45 in your pocket. If so, go right ahead and start your design; just don’t be surprised if you wind up in Tierra del Fuego instead of San Diego.

“Design”, for the benefit of the uninitiated, doesn’t just mean making something look good, though that’s certainly part of it. Good design, in print or on the web, is about making a something work, making it communicate something. It doesn’t matter how “pretty” or “cutting edge” a design is (or how many awards it’s won); if it doesn’t work, it’s bad design.

This factor is even more critical on the web than it is in print. A web site isn’t something you just look at or read, it’s something you use; which is why a web site is often referred to as an interface (not in yer face, though that happens too), meaning a layer of control that allows a human to interact with a machine or program. The palettes, windows and tools in Photoshop, for example, are an interface designed to allow users of the application to create and edit images (or paint superhero costumes on pictures of fashion models).

The purpose of a web site interface can vary, based on the overall purpose of the site, which is the first key decision you must make as a designer.

What is the purpose of your site?
Sounds like a rhetorical question, but think about it. Are you exposing your work to potential painting buyers? Gallery owners? Art directors? Publishers? Web comic readers? Are you selling originals or prints directly over the web? Are you chronicling your artistic progress in a blog as part of your learning process? Are you selling books? Impressing someone who sits next to you in your art history class? What exactly do you want your shiny new web site to do?

The answer may be less than simple, and composed of several of the above elements or others, but it’s important that you understand it, and if the intention is multi-fold, determine the order of importance.

The site map (outline version)
Once you understand what you are trying to accomplish with your site, you need to decide what content you’re going to include. Your bio? Links to all your friends’ sites? How-to demonstrations? Listings of gallery shows? Older work? Preliminary or alternate versions? Art outside your specialty?

The way to answer this question is to focus on the one above. What is the purpose of your site and what will contribute to that purpose? Also, consider what will detract from it. If you want to include extra stuff, that’s not specifically on target, but you feel may enhance the site and make it more interesting, that’s fine as long as it doesn’t detract from or hinder the site’s actual purpose. In deciding what to include, and how to name, prioritize and arrange the pages that will contain that material, you should make a simple site map.

On the web, a “site map” can be a page on a web site with links to every other page in the site, often arranged as a hierarchical outline, and is usually only needed for large, potentially confusing sites. However, it also refers to a preliminary plan of a site, used for building it, something necessary even for the smallest sites.

Even if you choose to make a fancy flow chart style diagram with something like OmniGraffle or Concept Draw, you still start with a simple text outline. Write a list of the pages in your site. It may be a simple, flat list, but if you break a section like the portfolio down into sub-sections, arrange them under the heading for Portfolio as sub-categories. They will become links referred to as sub-navigation (and no, I’m not talking about piloting Jules Verne’s Nautilus). You’re planning both your pages, and the navigation part of your interface.

A simple site map might look like this:

Home
About the Artist
Portfolio
      Recent work
      Selected Pieces
      Older Work
Contact
Links

The first rank is the main navigation, visible on every page; the subsections, or sub-navigation, for the Portfolio section might only be visible when you are in that section.

Obviously, the naming of sub-sections in the Portfolio (or “Gallery”) section would vary depending on the type of art you’re presenting. Illustrations or gallery paintings might be arranged by genre, webcomics pages by date or story line, concept art by project, etc.; but the overall naming of web site sections should follow one important rule:

Don’t make me guess.
Or, to quote the title of a book on web site usability by Steve Krug that I will recommend heartily, Don’t make me think.

If you want me to look at your work, regardless of whether I’m an art director, gallery owner, potential buyer, webcomics reader, art blog writer or your aunt’s second cousin, don’t discourage me! Don’t do anything to make me pause, slow down, hesitate, get confused, discouraged or annoyed or put any kind of potential barrier between me and your work. If you do, I will go away.

It only takes one click, the work of milliseconds, for me to leave your site for one of the ten billion other sites out there.

If it takes me one click to go away and five to drill down to your portfolio, I will go away. If you make me wait through your 30 second, animated Flash intro before I can get to your navigation, I will go away. If you make me look for a little “Enter Site” button hidden somewhere on a splash page before I can get to the navigation, I will go away. If you befuddle me with an enigmatic design, or confuse me with clever conceptual names for your links, I will curse you and your unborn children for making me feel like a fool, and then I will go away.

When it comes to navigation design, there are three important principles: clarity, consistency and ease of use. Did I mention clarity?

If you think an artsy, “clever”, or “cutting edge” concept for your web space is going to make potential visitors so intrigued they’ll spend time guessing about where your portfolio is, or what “Super Whizzyness” means as a link name, you’re sadly mistaken. Your friends and fans will tell you how awesome it is; art directors and gallery owners won’t, because they will be long gone.

I’m not saying you can’t be creative or clever with your design, far from it; but if you’re really creative and clever, you’ll design a site that is clear and easy to use, as well as attractive and interesting.

The home page
Hoo-boy! Home pages are the most problematic in any web site. Since everyone perceives them as the most important page in the site, and rightly so, they are most often the worst page in the site, as “important” item after “important” item is crammed onto their fragile little camel’s back, until they look like a K-Mart aisle as seen through kaleidoscopic glasses.

Here’s the rule: The more things you put on your home page, the less important each of them becomes; and the less effective the home page is as a whole.

If you walk into a big social gathering and 20 people in your immediate vicinity are talking, the chances that you will be able to focus on what any one person is saying are slim. If, on the other hand, only three people are talking, you can pretty easily pick which one to focus on, and if only one person is talking, there is no doubt.

A home page should speak clearly, and should immediately and unequivocally answer three questions for a visitor who has, by any of several avenues, come to it:

What kind of web site is this?
Is there anything here of interest to me?
If so, how do I get to it?

You want your target audience to say “Yes” to the second question, and not have to slow down and guess about either of the other two.

Focus your home page on introducing yourself to new visitors. Returning visitors are more likely to go to the trouble of clicking in to other content. It’s amazing how many artists’ sites have these priorities reversed.

If you feel the need to put news on the home page, stick in a column to one side. If you urgently need to list your current gallery opening or new images, put them to the side or “below the fold”, after the first screen depth worth of content. If a visitor doesn’t get those three questions answered, they won’t stick around to figure out who you are and why they should care where your next gallery opening is.

Put at least one of your best images on the home page; make it integral to the design. The images are what’s it’s about, put them to good use in the service of answering those three questions. Your images should be part of answer to both of the first two questions. If you’re tempted to put lots of them on the home page, remember the social gathering image. One or two (or maybe a short, subtle, rotating slide show, if you can do one well) should be enough.

Where to guide them
Good web site designs don’t just offer navigation to where the user wants to go, they offer a gentle but firm nudge in the direction you, as the site owner, want them to go. Just where that is comes back to that first question about the purpose of your site. Presumably you want them to see your work (and I’ll talk specifically about Portfolio or Gallery page design in a future post), but once they have seen your work do you want them to contact you? By email or other means? Are you selling something directly? Do you want them to join a mailing list? Do you want them to come back often? Are you directing them elsewhere (eBay, PayPal, Amazon or the site of a brick and mortar gallery)? All of the above?

When you understand your focus, make this process as simple and easy as possible.

All about you
For most of the purposes I can think of for an artist’s site, information about the artist, history, accomplishments, accolades, reviews, materials and process, is not only relevant but essential. Do I want buy a painting from someone I know nothing about? Do I want to give an illustration assignment to someone whose background, and potential reliability, is a mystery? Do I want to spend my time reading a webcomic that is going to go nowhere? Am I interested enough to contact this artist about their work?

Give me, the art director, editor, gallery owner, potential buyer, webcomics reader, or other visitor, enough background to feel comfortable with my potential interaction with you and your work. Think Goldilocks — not too much, not too little, just enough.

Contact
Even if direct contact is not the point of the site, you should offer some means of contact. It may be indirect, through a publisher, rep or other intermediary, or something that doesn’t involve an email address, like Contact Form. The latter can be handled well or poorly, but it’s better than no avenue of contact at all. (Even if it’s just a way for someone to tell you part of your site is displaying wonky, which you may not be aware of.)

If you post your email address, do it in a way that protects you from spammers’ email harvesting robots. i.e. a JavaScript encoding of the email link, or using a phrase like “cparker (at) zark.com”, or an image of the address, rather than a live link that the harvester bots will recognize.

If you really want to encourage contact, put your (protected) email address on the footer of every page, in addition to having a dedicated Contact page.

Links
While not necessary, a page of links to other sites can add a bit of interest and serves the additional purpose of encouraging others to link to your site, in the hope of a link back. (Make them relevant and well-chosen, I’m not suggesting you engage in random “link exchanges”.) Incoming links from other sites, particularly relevant and highly ranked ones, are a factor in search engine optimization (which I will also address in a future post).

Putting it together
Armed with your site map, knowledge of navigation issues, and clear sense of the purpose of your site, you can more confidently design the site’s look and feel. Form follows function.

Resources:

Diagraming and visualization software list from Vitaly Friedman

Don’t Make Me Think: A Common Sense Approach to Web Usability by Steve Krug

Web Site Design from w3schools
Basics of Website Design from Penn State University
Site Planning Basics from eFuse
Web Design Basics from SteveDawson.com
How to Make a Website of Your Own from Mardiros Internet Marketing
Web Design Basics from About.com

Next: Designing your site – ooooooh, pretty!

 
Facebooktwittergoogle_plusredditpinterestlinkedinFacebooktwittergoogle_plusredditpinterestlinkedin

Building your web site

Building your web site

How to Display Your Art on the Web: Part 3

[This is part of a series of articles for which the introduction and list of articles is here. If you haven’t read the introduction yet, it would be helpful to read it first.]

Once you’ve found a web site hosting provider and acquired a domain name, you have to actually construct your web site, put together the HTML pages and attendant images that show up in the browser as a web site.

OK, let’s stop for a moment and think about what we’re doing here.

If you were going to build a new studio, that chances that you would go out to Home Depot, pick up a load of building materials and build it yourself are remote. You would hire a professional contractor to build it, someone who has spent years learning the skills necessary to build a structure, install windows, doors, plumbing and electricity, and not have it leak, lean to one side or fall down in a week.

For some reason, millions of people, who would otherwise not consider trying to build a bird house, think they should immediately be able to build a web site; which is also the province of professionals who have spent years learning their craft. Not only that, the do-it-yourselfers balk at the idea that they actually have to spend time and effort acquiring some knowledge and skills to build their own site. Hey, where’s the “Build a web site” button on my computer?” (It’s just above the pop-out cup-holder tray.)

I’m not saying you have to hire a professional, though that can be a good option if you can afford it, just that if you want a web site that doesn’t leak, lean to one side or fall down in a week, you need to be prepared to roll up your selves and learn to use a hammer and saw, or, in this case, learn a little bit about HTML and CSS — not a lot, just enough.

The alternatives

Hiring a professional
The analogy to building contractors is an apt one. People expect to ask web site designers how much a web site will cost and get a simple answer, but if you ask a contractor how much it will cost to build a house, they’ll look at you cross-eyed. A “house” can be a two-room bungalow or a 20 room McMansion. A professionally done web site can range from less than a thousand (if you’re lucky) to several thousand dollars, depending on what you want and who is doing the work. Also, like a building contractor, you have to put some effort into choosing a good one (that you can afford). The main thing to do is look at their current work, their own web site and the examples of other sites they’ve done. Are they attractive, easy to use and navigate, or do they get in their own way by being too clever? (See my article on How Not to Display your Artwork on the Web.)

Some web site designers are much more reasonable than others. In general an independent individual designer can be less expensive than a design firm with lots of employees and overhead (though not always). You can get a feeling for the size of client they usually deal with from their portfolio (if they designed a site for ATT or IBM, you can’t afford them). Word of mouth is good, particularly if someone you know has had a good experience. If you see a site on the web that you particularly admire, look for a byline for the designer somewhere on the home page. As part of a future post, I’ll list some places where you can cruise for good designs, both for your own inspiration and potentially to find good designers.

Don’t be reluctant to talk to them on the phone and get a feeling for what it would be like to deal with them. Ask questions about their process and procedure for estimates, fees, etc. As I said, just like a building contractor. If you give them a detailed picture of what you want, they should be able to give you a reasonably firm esitmate before you commit to anything.

Web site designers generally will not want to take your brilliant design and implement it for you (though some may). They want to create the design, and this is understandable; it’s their art that they can hang in their own gallery (portfolio). However, you can, should and must tell them exactly what you want. You’ll need to do the planning for what you want to include and how it should be arranged whether you build the site yourself or not; though a good professional will help you plan out your site and guide you through the process. Your designer may also be able to arrange your site so that you can edit it yourself using something like Adobe Contribute, though that can cost a little more to set up initially.

In the next few posts in this series, I’ll try to discuss some of the design issues you need to apply to your site, whether you have it designed for you by a pro or tackle it yourself.

Blogs as web sites
As I mentioned in my article on choosing a web hosting company, a blog, when used with “pages” instead of “posts” can make an acceptable substitute for a regular web site. This path has its limitations, but may be a good option for getting up and running with a web presence quickly. If you’re not limiting yourself to the free online blog accounts, that leave you with domain names like cheapbastard.blogspot.com, a real web hosting account usually comes with an option to host a blog as well as a site. Web hosting companies offer blogging software like Movable Type and WordPress.

You should be able to arrange with the hosting provider to install the blog in such a way that your own domain name points to the main page of the blog. This is how lines and colors is set up. In this case the main page is set up as a blog but the pages for About, Suggest a Site, Link, and Colophon are set up as static pages rather than posts, and have no dates or comments. There are many free templates, or “themes”, for the major blogging platforms that will allow you to at least have a semi-custom design.

Image hosting services
If you’re just putting your work up so your mom can be “so proud of you” and your friends can say “awesome”, a Flickr account, MySpace page or other image hosting or group web space is fine. If you want to present a professional web presence, that ain’t it.

Site builders
Unlike templates (see below), which are just pre-made web pages that you customize in a text editor or dedicated web page editor, site builders are online interfaces (with a variety of dumb names) that some web hosting companies provide in an attempt to convince you that you are just two steps away from web site nirvana, the ability to build your own house, er.., web site, without seeing a single piece of horrid HTML code, if only you will sign up for their hosting plans.

What that promise belies is that these things, while they may fulfill their intention to shield you from exposure to any scary, itch-producing HTML code, are often so clunky, awkward, restrictive, and hard to deal with, that the time spent on learning your way through their horrible interfaces to try to build something that doesn’t look like a doghouse for clowns could be much better put to use learning a little bit about actually building a web site, something you can use anywhere, not just on one proprietary “site builder” that may or may not exist next year. There may be some good ones out there, I certainly haven’t seen all of them, but my impression so far is not good.

CMS – Content Management Systems
These are much more sophisticated and elegant than site builders, and some good ones are available for free, but I think some of the same limitations apply – you have to spend time learning to use a particular proprietary system, instead of basic site building knowledge that you can apply anywhere.

Templates
Just like you can buy a prefab house, you can get either commercially available (for around $60) or free web site templates, ready-made pages that you can customize and use for your site design. However, just like a modular home, you still have to prepare a foundation and pick up hammer and saw to customize; and, just like a modular home, chances are that it will look exactly like your neighbor’s modular home. It can be a good place to start, though, and I’ll give you some template resources later. With a little knowledge of HTML/CSS you can turn a template into a semi-custom site with your own unique stamp.

Some of the free template sites are just that, free web page templates provided by generous individuals or developers who want some traffic. Others, however, are shills for paid templates or other services. When choosing free templates, like all free stuff, let the non-buyer beware — quality varies wildly.

HTML and CSS

Oh no! Code!!! Akkk! The dreaded specter of high school math rears it’s ugly parenthetical head and starts breathing asterisks down your neck at the very thought of learning code.

The good news
HTML is not rocket surgery, though it is a little bit of brain science. At it’s most basic, it’s pretty simple. HTML stands for “HyperText Markup Language”. Hypertext is text that can have links in it to other documents, and is the basis of the web. A markup language is a set of symbols (“tags”) that “mark up”, or set off, bits of text to be handled differently.

For instance, if you surround a word with tags like this: <em>word</em>; you have marked it up for emphasis, and that word will be rendered in italics by a web browser. The <em> marks the beginning of the passage you want italicized, the same tag with a forward slash in it, </em>, means the end of that passage. The browser will hide the actual tags from view in the final rendering of the page.

There is an excellent book called HTML for the World Wide Web, with XHTML and CSS, A Visual QuickStart Guide that I recommend highly. “XHTML” is a newer and slightly more formal version of HTML that is no more difficult to learn. It’s what I use.

CSS – The Web Gods’ Gift to Designers
So what’s the “CSS” part of HTML/CSS? HTML simply wasn’t made to do what it’s doing. It was supposed to be a simple markup language for plain text documents with a few images in them, for use by bespectacled geeks in universities and brown-shoed file clerks in the government, (the original purpose of the Internet was to link those sets of institutions together in a network). When some geeks found out how cool HTML was for other stuff, and the idea caught on, the demand to make HTML pages look like something other than a TPS Report grew, and HTML got pressed into service as a makeshift “page description language”; a task for which it was ill-suited. (An example of an actual page description language would be Postscript, the code underneath Illustrator, InDesign, and PDF documents, that allows them to display a page exactly as designed.)

After years of horrible kludges with nested tables, spacer GIFs and pages littered with garbage like <FONT> tags, Cascading Style Sheets (CSS) were given to geekkind by the World Wide Web Gods to free us from bondage and lift our pages from the stone age. Cascading Style Sheets let you apply styles to HTML tags, so you could, for example, tell any <em>word</em> in italics that it should also be set in 9point, bold type, a font family of Georgia, with a specific color, spacing, background, border and so on, so that word can be this word. CSS goes a long way toward making HTML behave like a real page description language and, even though it seems like one more thing to learn, it actually simplifies the code in the long run.

If you want an amazing example of how powerful CSS is, take a stroll through the CSS Zen Garden. Every design in the column of links is the exact same HTML page; each of the astonishingly different layouts is generated only by a different style sheet and group of background images applied to that page.

The Bad News
While not necessarily complicated, HTML can be picky and quirky; a misplaced quote mark can send an entire page into a tailspin; and a page that looks fine in Firefox, Opera, Omniweb, Safari and even one version of Internet Explorer can look completely wonky in another version of Internet Explorer; largely because the people who write this software often don’t agree on how the standards should be implemented, or just ignore them altogether. (Those of us who do web site design professionally spend a lot of time cleaning up after sloppy and arrogant browser programming, often on the part of The Giant Software Company That Shall Not Be Named.)

Also HTML can get complicated if you get too ambitious, which is why I suggest you put a temporary hold on your plans to build a 20 story glass and steel studio building with curved walls, 12 story atrium, underground parking and revolving roof-top restaurant, and start with something a little more like a vacation cabin.

The good news
The web is all about HTML and CSS, and there are hundreds of free resources out there for you; and if you keep it simple you can avoid most of the cross-browser wonkiness.

Tools

More good news: you don’t need to spend $$ to make a web site. You can edit HTML in the simple text editor that comes with your operating system, like TextEdit for the Mac (choose “Plain Text” from the Format menu), or NotePad (not WordPad) for Windows. However, it’s much nicer to have a dedicated tool that color-codes your text, provides built in tools for creating HTML tags, checks the code for mistakes and provides other features to make your life a little easier. If you’re working on a Mac, BareBones, the creator of BBEdit, the amazing super-powered text editor that many professionals use to edit their HTML code, offers a free junior version called TextWrangler. On the Windows side, try Notepad++.

You can get serious professional-level HTML editors like Dreamweaver or GoLive (though the latter is unfortunately on its way out now that Adobe owns both). These can be used in WYSIWYG (What You See Is What You Get) mode, meaning you can view the page more or less the way it looks in a browser as you create or edit it. This is a good feature, but you still need to know how to deal with HTML code to really do much. These editors, though, may be expensive overkill for someone who is just building and maintaining one web site and not embarking on a career of dealing with other people’s sites, and they have their own learning curve. (If you are planning on eventually bulilding a large, complex site, they include some powerful site management features, and Dreamweaver comes with some good built-in templates.)

You can also get a piece of horrible trash masquerading as a web page editor, known as Microsoft Front Page (don’t get me started). You can even export HTML from things like Microsoft Word, if you don’t mind taking a chance (as with Front Page) that your pages may look like a train wreck in non-Microsoft browsers. There is supposed a new, “real” web page editor in Microsoft’s new graphics and web suite. I’ll try to reserve judgement, but the company’s track record with HTML is not good.

The secret free WYSIWYG web page editor.
It’s only a “secret” because it’s not well publicized and not easy to find, but the Mozilla open source suite of web tools called SeaMonkey (don’t ask me why it’s called SeaMonkey, I don’t even want to know) comes with an excellent little WYSIWYG HTML editor called Composer, that used be part of previous incarnations of Netscape. (It’s accessed from one of the menus in the SeaMonkey browser.)

View Source
Like Salvador Dali peeking under the skin of the sea, you can peek under the skin of the web at any time by choosing “View: View Source” (or “Page Source”) in your web browser. This will pop up a new window showing the HTML code underlying that page. If you choose complex pages, what you see may be intimidating and confusing, as I said, HTML can be as complicated as you want it to be; but if you choose that option on some simple pages, you can see how they are put together. You can also save that page to your computer and open it in your HTML editor for a better look. The CSS styles are often applied from a separate style sheet document, with a file name like whatever.css, attached to the HTML document with a link tag in the upper part of the HTML page.

There is a terrific little plug-in for Firefox called Web Developer’s Toolbar, that is great for seeing style sheets, outlining blocks of code, and otherwise dissecting web pages like the mad rocket scientist you know you long to be.

Learning not to hit your thumb with a hammer
You still have to make a lot of design desicions before you actually build your real site, but in the meantime, try downloading an HTML editor, whether text-based, WYSIWYG, or both, and play (operative word: play, not stress out) with making a bird house or two before you tackle building your dream home.

You could try using or customizing a simple free template, or build some simple pages from scratch. You may even find that your Lego/Tinkertoy/Erector Set wielding inner child is having fun putting something together and making it work!

Resources

Blogs as web sites
List of Blogging software (available on real hosting accounts)
Blog software comparison chart
Themes for WordPress blogs
Themes for Movable Type blogs

Templates and Layouts
CSS Layouts – Web Developer’s Handbook – list of lists
Free site templates on Open Web Design
Free CSS templates
More free templates
CSS Layouts (basic layouts with columns that you customize)
CSS layouts from Blue Robot

Books
HTML for the World Wide Web, with XHTML and CSS, A Visual QuickStart Guide

HTML tutorials
Web Design from Scratch
HTML Dogbeginner
w3schools.com
Getting started with HTML
About.com
Webmonkey (dated but still good)
WDVL Intro to HTML
Web Site Primer
How to Create a Website
Do You Need to Learn HTML? from Crafted Webmaster

CSS Tutorials
Webmonkey Stylesheets Guide
House of Style
HTML Dog

HTML Reference
Web Developer’s Virtual Library
Webmonkey HTML Cheatsheet
HTML Help from Web Design Group
HTML Dog

CSS resources
Holy CSS Zeldman!
MezzoBlue
University of Minnesota

HTML editors
Lists:
HTML Editors list on About.com
Pure Mac list of HTML editors for Mac
Text based:
TextWrangler free text based HTML editor for Mac – excellent
Notepad++, free text-based HTML editor for Windows
WYSIWYG:
SeaMonkey – includes Composer, free WYSIWYG editor for all platforms
N/vu – free, open-source WYSIWYG editor for Mac, Windows and LINUX
Mac only:
Rapidweaver – Easy, template based WYSIWYG editor (approx $50)
Freeway Express Mac WYSIWYG editor (approx $100)
iWeb – WYSIWYG editor – part of iLife ’08 – ships with new Macs
Professional:
Adobe Dreamweaver (professional level WYSIWYG editor – about $400)

Web Developer’s Toolbar – plug-in for FireFox for looking at HTML CSS in pages

Next: Planning your web site

 
Facebooktwittergoogle_plusredditpinterestlinkedinFacebooktwittergoogle_plusredditpinterestlinkedin

Registering a domain name

How to Display Your Art on the Web: Part 2 - Registering a domain name

How to Display Your Art on the Web: Part 2

[This is part of a series of articles for which the introduction and list of articles is here. If you haven’t read the introduction yet, it would be helpful to read it first.]

If you want a professional web presence, suitable for putting on a business card or giving out to art directors or gallery owners, you need something better than a MySpace page, a Flickr account or a page with an address like tripod.com/~joeartist/web/portfolio.html; you need a domain name.

In theory registering a domain name is simple; look up the name on a domain name lookup page; if it’s available, pay a fee, and then point the domain name at the web server where your site’s HTML pages reside. In practice, however, it can be a little more complicated than that.

When to register a domain name

Now. Yesterday. Three years ago. Get the picture? Even if you’re not ready to put your web site together yet, if you can find a domain name you like, get it now. It doesn’t cost that much to keep them registered ($5-$15 a year in most cases) and they disappear quickly. If you are looking around to “see what’s available”, and you find one that you really like, be prepared to buy in now. If you come back tomorrow, it may be gone. There is also the questionable practice of “domain tasting”, or “domain kiting” in which domains can be used by spammers for free for five days at a time (details here and here). If the domain you want isn’t available, it may be worth checking back in five days (but not before).

What’s in a name?

When you type in a URL like www.linesandcolors.com into a browser, or click on a link in a web page, your browser sends out a request for an HTML document (a web page) that is supposed to exist at that address. The web server at that address is supposed to receive your request and send back the web page, along with any embedded content, like images or Flash files, that are included in the code of the page.

A web server is a computer somewhere; it could be in a temperature controlled room in a vast hosting facility with backup power generators and 24 hour security; it could be in some geek’s closet. More specifically, a web server is a piece of software running on such a computer that handles requests for web pages. When you sign up for a hosting account, you’re paying to have your site hosted on a web server.

An address like www.linesandcolors.com or the first part of a longer address like www.linesandcolors.com/how-to-display-your-artwork-on-the-web/, is the domain name, the key part of the location of the requested web page. The domain name is like the address of a building, the other page locations are like offices or apartments in that building.

The domain name isn’t really the location of the web page (or web site), though. The actual location is a number, like 208.112.74.241. The domain name is just a short cut, a way to make it easier for humans to remember and use internet addresses. The domain name points to a web server at the address number. Your request for the page at www.linesandcolors.com actually goes first to a special computer called a domain name server, that translates the domain name into the number, and sends the request to the web server at that numbered address.

When you register a domain name, you point it to the number for a particular set of domain name servers (“DNS”) associated with your hosting company. If you change hosting companies, you can take your domain name with you and use the control panel, or domain name admin login that comes with your domain name registration account, to point the domain name at a new set of domain name servers associated with your new hosting account.

Registering a domain name

Registering a domain name and hosting a web site are two different and separate things, though they are often handled through the same company.

Domain name registrars are companies approved by ICANN, the officiating agency, to register and maintain records of domain names. Some are better than others and, as with my post on web hosting providers, I’m not going to stick my neck out and recommend which ones to use, so you don’t come back and complain to me if you don’t like them.

Unless you’re registering a domain name well in advance of creating a site, I’ll recommend that you take the easy path of registering your domain through your chosen hosting provider. Most domain name registrars, in fact, also offer hosting, and many web hosting companies offer a “free” domain name registration as one of the features in their web hosting accounts.

If you register your domain name through the same company you open your web hosting account with, they will automatically point the domain to their DNS servers for you. You can always take the domain name with you if you decide to change hosts. It belongs to you as long as you keep it registered.

If you can’t decide yet, you can simply choose a known domain name registar. Registering a domain name can cost anywhere from $5 to $15 a year. You can easily pay more, but I don’t think you have to. Cheapest is not necessarily best. You want one that is reliable an doesn’t make it difficult to administer the domain or move it to another registrar if you want to.

Domain name parking You can “park” a domain name, meaning to have it registered without pointing it to a web site, inexpensively. Some registrars offer a minimal home page with your name on it as part of the parking, others will just point it to their own site until you’re ready to use it.

Domain name look-ups All hosting providers and domain name registrars have a lookup field where you can type in a potential domain name and see if it’s taken. If it’s available, they will allow you to start the process of registering it. If it’s not available, they’ll try to sell you six dozen variations and twenty different suffixes (.net, .biz, .tv, .whatever…). You want a .com if at all possible.

Dot what?

There are a lot of other “top level domains” now, but “.com” is still preferable; “.net” or “.org” are a long second (in theory, “.org” is supposed to be for non-profits). This may change, but right now you can ignore the registrar’s attempts to sell you domains ending in .tv, .biz .name, etc.

The reason I say this is the same principle that applies to corporate domain names, people expect a domain to be companyname.com. The closer you can get to that as an individual or studio, the better. You will hear that shorter domain names are always better; this is not true. You want a domain name that people will remember and associate with you and what you do.

Types of contacts

Part of the registration process is listing four types of contacts, these may be different within a company, for example, or all the same for an individual. “Registrant” is the owner of the domain name and is the most important. “Administrative” is the one responsible for maintaining the information in the listing and is usually the same as Registrant. “Billing” is the one responsible for payment to renew the registration. “Technical” might be the IT department at a company, or a trusted web site developer for an individual, responsible for pointing the domain to the correct domain name servers, etc. You can assign all of these to youself.

More on registering a domain name here.

Choosing a domain name

The bad news: all of the really good ones are taken. You can tell I’ve been on the web for a long time because my web comic (which was the first of its kind) has a four-letter domain name (zark.com). Not only have people been snatching up domain names for the last 14 years, there are companies and individuals who make money off of domain name “squatting”, i.e. the bulk registration of hundreds, thousands or tens of thousands of domain names, on the basis of being able to hold them for ransom from those who actually want to use them.

The good news: If you’re lucky, clever, or work at it hard enough, you can come up with a perfectly acceptable one.

The best domain name is yourname.com. If you you have a name with an unusual spelling, you may actually be able to do this. It was only a few years ago that I registered charleyparker.com.

The next best is something that has to do with your name and what you do, the name of your studio, your name and your specialty, etc. For example yournameillustration.com.

I’ll say it again: shorter is not necessarily better. The important thing about your domain name is that people can remember it and associate it with you! janedoeillustration.com is better than jdcoolpen.com.

Adopting a professional studio name, for which you can find a good domain name and under which you intend to do business, is another solution, just like having a company name. Not easy, but certainly possible. Be prepared for that studio name to become your professional identity.

If your domain name is easily misspelled, consider buying the common misspelling (if it’s available) and “pointing” it to your domain. (Try typing misspellings for Britannica.com into your browser.)

Other considerations

Automatic renewal. The default registration is for one year, though most registrars will try to get you to register for two or more. This is actually a good idea if you are certain you want the name for that long. Most registrars also offer “automatic renewal”. This is also a good idea, in that once a domain name is registered, don’t let it lapse, unless you are intentionally dropping it. There are thousands of hungry web bottom feeders out there waiting for dropped domain names to appear so they can grab them up and fill them with spam links. If you don’t want this to happen, keep your registration current. If you choose the automatic renewal option, registrars and hosting companies that offer it will send you an email in advance of your renewal date, and then automatically charge your credit card (keep that current, too) to renew your domain name unless you tell them not to.

Domain name locking (transfer protection). ICANN recently changed the rules so that one registrar can initiate the transfer of a domain from another registrar without the current registrar’s approval. This may seem odd, but it was initiated so that unscrupulous registrars couldn’t hold a domain against the wishes of the actual registrant. Of course, this solves one problem and causes another, because it allows those same unscrupulous registrars, or hackers working through them, to force a domain over to a shady registrar without the registrant’s knowledge or permission and actually steal it from them through additional machinations. This is why registrars now offer “domain locking” which means that you voluntarily “lock” your domain from being moved to another registrar until you unlock it. If you trust your registrar (and you’d better), this is a good idea, and it is not the default. You have to choose it somewhere in the registration process or later in the page where you administer your domain. (More details here.)

Master of your domain

When you register a domain name, you should be provided with some way to administer it, i.e. to re-register it, change where your DNS servers point, lock it or unlock it, and so on. This is usually a web address accessed by a log-in and password that the registrar or hosting company will provide you in an email. (Print out that info and keep it on record!) If you purchase your domain through your web hosting provider, domain name administration may be through the same “control panel” that allows administration of your web site and email.

Multiple domains If you have multiple domains regsistered through the same company, you can usually administer them through the same admin panel. You can also “point” one domain to another. If you have a domain name for you and one for your studio, for example, you can have one point to the other instead of maintaining two sites.

Dealing with the bottom feeders

Other people have multiple domain names for a different reason. They’ve registered zillions of them in the hope that they now have the one you want and can force you to cough up many times the cost of registration to ransom it from them. If you look up your absolutely perfect, no-substitutes, must-have domain name and find that it is being squatted, usually indicated by the fact the the domain points to a page full of links, or a page that tries to look like a search engine, you may decide you want to ransom it from the squatters.

While I don’t necessarily condone this, the one thing I will suggest is that you enter the transaction warily and use a service like escrow.com to cover yourself. (It adds expense, but getting a domain from squatters can be expensive to begin with.) The squatters who want to sell the names usually have a notice on the page saying that the domain is for sale and offering contact info. Some squatters don’t want to sell the domain name because it is successful in bringing in “pay-per-click” revenue on the page full of ads that the domain links to. It may be hard to wrestle these away, even with a gerneous offer.

WhoIs You can also look up the owner of a domain name and their contact information by using a WhoIs lookup, like the one on arin.net or Network Solutions. There are also a number of other WhoIs outfits out there. Be aware that its been suggested that some of the less reputable WhoIs search services engage in domain name tasting (see “When to register”, above).

Putting your name out there

When you register a domain name your contact information, including your email address, becomes public record through the same WhoIs process described above. This is unavoidable unless you want to use “anonymous registration” offered by some registrars, but I’m wary of that because legally it means the registrar (or web hosting provider) becomes the actual owner of the domain name. You must use a real email address when registering a domain as it is one of the primary ways the domain is administered, and the only way you will usually be notified if there are any important changes (or if your domain is up for renewal).

Promoting your domain name and making your site known will be the topic of a future post, but it’s worth noting that keywords in domain names can sometimes help with search engine rankings (there are other factors that are much more important, however).

Next: Building your web site

 
Facebooktwittergoogle_plusredditpinterestlinkedinFacebooktwittergoogle_plusredditpinterestlinkedin

Finding a web hosting provider

How to Display Your Art on the Web: Part 1 - Find a web hosting provider

How to Display Your Art on the Web: Part 1

[This is part of a series of articles for which the introduction and list of articles is here. If you haven’t read the introduction yet, it would be helpful to read it first.]

In a way the subject of the next article (registering a domain name) is more immediate, in that you want to do that as soon as possible, even if you’re not ready to put up a site. Domain names tend to get snapped up when you’re not looking.

However, even though web site hosting and domain name registration are two different things, they are often handled through the same companies, and it can be slightly easier to take adgvantage of that (not necessary, just a little easier).

Finding a web site hosting company takes a little work. I will not go out on a limb and directly recommend web hosting companies to you, because they all have their plusses and minuses, and some of you will inevitably come back crying to me that I recommended so-and-so to you and now you’re unhappy and it’s all my fault.

Look on sites like c/net for reviews of hosting providers. Be a little wary of sites devoted entirely to reviewing and listing the “best” web hosts. Many of them are legit, but some are shills for particular companies. At the very least, compare the opinions of several review sites. Ask friends, business associates and well-dressed strangers in the street about their experiences with their web hosting provider (assuming they even know who it is). You may at least find some to avoid.

There are hosting services who bill themselves as particularly Mac-friendly (though most UNIX-based hosting is OS agnostic) and there are even some hosts who aim their services specifically at illustrators and other creatives, like GiMUR.net (run by the founder of LCSV4), DogBark.com, Laughing Squid and Huevia, though I don’t have direct experience with any of them.

There are also portal sites for gallery artists that offer site hosting as a benefit of membership; and illustration directories that offer a gallery space as part of your listing with the directory, though these are likely to be more limited than regular web site hosting, and can cost as much or more, in exchange for the service of inclusion in their directory.

“Free hosting” – Avoid any so-called “free” hosting that forces your site to display ads, banners, pop-ups or other forms of onerous limitations in exchange for the “free” service. It’s unseemly, unprofessional and will do your reputation as an artist more harm than good.

Blogs as free web sites – If you are absolutely so poor that you can’t afford $8 a month, consider that many national level blogging sites offer blog accounts for free, without forcing advertising (at least for now). If the blogging account allows the use of “pages” instead of “posts” (as WordPress.com does, for example), you can create a functional web site for free. It’s more restrictive than regular web hosting, and the URL is likely to be something like yourname.blogger.com instead of yourname.com, but it may do. Also, the blogging services offer default or third-party custom templates that make for a variety of free designs, even if you share them with other sites.

Cost – National level web site hosting providers offer basic “shared” web hosting (which simply means you share a web server with other sites, the normal arrangement) for $10-$15 a month or less, if paid for by the year, sometimes with a modest ($15 or so) “setup fee”. You can also arrange to pay for most plans by the month or quarterly, at a slightly higher cost; which may be worthwhile if you are unsure about the host. You can always opt for yearly payments later.

Basic “shared hosting” if fine. You don’t need anything fancy, and you probably don’t need a business account to start. Given a choice between “Windows Hosting” and “Linux or Unix Hosting” (meaning the type of operating system on the server where your site site hosted) I choose Linux or Unix, as it is often cheaper, I believe it to be more reliable and flexible (a personal bias) and the only advantage I see to Windows Hosting is that it enables the use of Microsoft Front Page, which I will strongly advise you against.

Extras – See if the options from the basic plan from one company appeal to you more than another. Do you want a blog as well as a web site? Do you want a discussion board? Do they offer the ability to host additional domains without charge (in case you want to have yourname.com and yournameillustration.com point to the same site)? Take a look at the sample stats page, that shows your site’s statistics for number of visitors, etc., when comparing different hosting companies. What is the storage and bandwidth allotment? Most national level hosting plans offer more than enough, but if you plan to feature tons of huge image files, more may be better.

Control Panels – Most hosting plans include some kind of “Control Panel” that allows you to add and administer e-mail accounts, set up FTP access, password-protect directories, add features like blogs and discussion boards and so on. This is one area where hosting providers vary widely, so take a look at their Control Panel samples when comparing hosting providers.

Add-onsYou only need basic hosting. Many hosting providers (most, in fact) will confuse the issue by trying to get you to sign up for all kinds of bells and whistles at extra cost throughout the sign-up process. You don’t need them! Check for the services included in the basic package when comparing different providers, but don’t order fancy add-ons. You can always add them later if you really want to. Even eCommerce and shopping carts aren’t necessary at this stage. It’s actually easier to sell through PayPal initially. You can add a shopping cart later if you really need one. (However, you may want to compare eCommerce offerings when comparing providers.)

Templates and “site builders” – These have the appeal of promising to allow you to build a site with no web design or HTML knowledge. I don’t want to turn your off to them out of hand; perhaps there are good ones out there, but my experience with these things is that they are limited and inflexible, and enough of a pain to learn to deal with that the same learning curve would give you a basic working knowledge of HTML, something you can apply anywhere, not just to one proprietary template system.

Dynamic template systems offered by hosting providers are different than static HTML templates, which are just pre-made page designs. I’ll talk about those in a future section on design.

Your hosting info – When you arrange for your web hosting, they will normally send you an email with the detais of how you set up FTP access to your site, use the “Control Panel” and set up email accounts. Immediately print out a copy of this email and file it. Send a copy of it to yourself and keep both coipes in your email records. Send a copy of it to your fastidious Aunt Mille and ask her to keep it on file fo you.

I can’t tell you how many times I’ve asked new clients about FTP access to their site pages and had them say “Oh, I know I got that, but I don’t know what I did with it. Do I need it?” You can always call up the provider and ask them to send you the info again. I just want to impress on you that the info in it, notably logins and passwords, is stuff you (or your web site designer, if you go that route) will need.

Registering your domain at the same time – As I mentioned at the beginning of this article, it can be slightly easier to register your domain name through your hosting provider, than to register it separately, and the sign-up process will ask you if you want to register a domain at that point, or if you already have a domain registered elsewhere which you want to assign to the new hosting account. I’ll go into domain names in more detail in the next post in this series.

Next: Registering a Domain Name

 
Facebooktwittergoogle_plusredditpinterestlinkedinFacebooktwittergoogle_plusredditpinterestlinkedin