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 Dog – beginner
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