Fighting Tigers:
Codex <> Tactics <> Gallery <> Allies and Enemies <> Tales of the Tigers

Other Pages:
Main <> What's New <> Site Index <> The Tiger Roars <> Themed Army Ideas
Events and Battle Reports <> Campaigns <> Terrain <> FAQ <> Beyond the Jungle

The Tiger Roars
Building Your Own 40K Site
Introduction <> Content  <> Set-up <> Maintenance

Building Your Own 40K Site: Set-up
So now that you’ve grasped the concept of reader-centered writing and decided what content to put on your site, it’s time to get started cranking out web pages. 

Choosing an Editor
I suppose you could make your web pages by hand, inserting all the HTML tags yourself. But by the same token, you could build your own house, make your own clothes, and grow your own food. Easier by far to get your hands on some software—an HTML editor—that will build web pages for you. 

There are quite a number of editors out there, but I’ll limit my discussion to the three I’m familiar with: Netscape Composer, Microsoft FrontPage, and Macromedia Dreamweaver.

Since Day One of the Jungle, I’ve used Netscape Composer. Why? It’s as easy to use as a word processing program, it makes pretty nice web pages, and you can download it for free from Netscape as part of their browser package (as of this writing, the latest version is 7.02). I use an older version (Communicator 4.7) because I prefer its features to those included in the latest releases. 

While Composer is easy to use, it doesn’t have many bells and whistles. If you’ve seen those way-cool web sites with the animations and rollover effects and such, don’t think you’re going to get those by using Composer alone. You’ll need other software for that: Composer is just a meat-and-potatoes HTML editor. Composer does have spell checker, a wide range of font styles, templates, basic background colors, and a feature to publish your pages. All in all, a capable software program, but nothing fancy. 

If you know how to use Microsoft Word in any of its incarnations, you pretty much know how to use Microsoft FrontPage. You create text just as you would with Microsoft Word and you use drawing tools (just like those in Microsoft PowerPoint) to create simple images. 

FrontPage has a number of snazzy features: one of the most useful is “shared borders.” FrontPage allows you to designate “borders” (such as navigation areas) and then replicate that “border” on several other pages. If you want to change the information in the “border” area, you make the change once and FrontPage replicates those changes on all the pages that have that “border,” a feature Composer does not have. FrontPage 2002 (the latest version at the time of this writing) will run you about $170.

I didn’t use FrontPage when I first built the Jungle (back in late 1999) only because I already had Composer and didn’t see the need (and didn’t want to pay) for anything else. By the time I was able to purchase a copy of FrontPage for a substantial discount, I had already started the renovations on this site. Though FrontPage offers more features and is, I believe, a superior product, I didn’t want to start over. But the next time I build a website, I’ll use FrontPage. 

Finally, there’s Macromedia’s Dreamweaver, the Mariah Carey of HTML editors. It sings, it dances, it looks DAMN sexy, and once you get it home, you realize that it’s probably more trouble than it’s worth. 

You know those way-cool websites with the funky animation and interactive features and such that I mentioned earlier? Well, you can create them with Dreamweaver, but it will cost you about $400 for Dreamweaver MX (the latest version) and another $300 for Fireworks MX, the accompanying web graphics program. Or you can spend $900 and get Macromedia Studio MX Plus, which has Dreamweaver, Fireworks, and a bunch of other software thrown in, too. 

And once you shell out the cash for all that, good luck learning how to use it, because Dreamweaver is very difficult to master. When I started renovating the Jungle last year, I looked into using Dreamweaver, but the learning curve was too steep and the time investment too great. 

If you’re a professional web designer and you already have Dreamweaver, go ahead and use it for your 40K site. If you’re an amateur on a budget and you have time constraints, stick to something easier. Dreamweaver, like Mariah Carey, is just too high-maintenance. 

Organizing Your Site
If you were to simply start buying and painting 40K figures without stopping to think about how they would fit together into an army, you would most likely wind up with a bunch of miniatures you couldn’t use and a lot of re-work on your hands. Same thing with building a website. No, you don’t have to plan out its structure first: you can just crank out a bunch of pages and then organize them later. But that’s doing it the hard way. By investing a little time and thought at the beginning, you can save yourself a lot of hassle later on. 

Recall that back in the second installment of this series, I said, “The first thing to decide [about your website] is what kind of and how much content you want to have, because these decisions will drive further decisions.” Once you know what you want to include, you can begin sub-dividing your site into sections to contain this material. 

As an example, the Jungle is separated into two sections: Fighting Tigers (my main army) and “everything else.” The Fighting Tigers section is further broken down into:

  • Codex
  • Tactics
  • Gallery
  • Allies and Enemies
  • Tales of the Tigers (fiction)
Almost everything a visitor might want to know about Fighting Tigers can be found in one of those self-explanatory categories.

Realizing that there’s only so much material I can get out of the Fighting Tigers, I included the “everything else” section to discuss other 40K topics. The “everything else” part is broken down into:

  • Main page
  • What’s New
  • Site Index
  • Links
  • Frequently Asked Questions (FAQ)
  • The Tiger Roars (commentary)
  • Themed Army Ideas 
  • Events and Battle Reports
  • Campaigns
  • Terrain
The first five categories I mentioned (“Main page” to “FAQ”) are the “administrative” portions of the site. These pages introduce people to the site, tell them about the latest updates, answer questions, and help people find information. All the other categories are 40K-related pages on topics not directly related to the Fighting Tigers. Sure, I might feature the Stripeypants in these pages (especially in the “Events and Battle Reports” and “Campaigns” sections), but these pages are not dedicated exclusively to them.

See what I mean about organizing your site? You can go about it however you like; again, I suggest you let your choice of content guide you. However you organize your site, just make sure it’s obvious to your visitors and keep it consistent. For example, don’t put articles about Orks in your Eldar section, and don’t discuss painting under “Tactics.” Otherwise you’ll confuse your visitors, and confused visitors tend to leave, never to return. 

When you divide your site into sections, create an introductory page for each section. From there, provide links to all the articles in that section. Introductory pages will help your visitors navigate each part of your site. For an example, take a look at the intro pages for The Tiger Roars and the Themed Army Ideas sections.

I also strongly recommend that you include some kind of site map or index. You don’t have to go into exhaustive detail, like I do with mine, but at the very least you should have a list of all the articles on your site. A visitor should be able to go down your site map and arrive at the first page (at least) of every article you have. “Hidden tracks” are great on music CDs, but they suck on websites. Make sure your visitors can find all your stuff. 

Designing a Layout
So now that you’ve selected an HTML editor and decided how to organize your site, it’s time to design a format or layout for each of your web pages. As mentioned in the earlier piece on reader-centered writing, you’ll want to make sure that each page is easy to read, easy to navigate, and is consistent with all the others. 

I’m assuming for the sake of discussion that you’ll be designing your own layout. I suppose you could swipe someone’s scheme (even steal the code they used to make it), but doing so will reflect poorly on you if a visitor recognizes what you’ve done. And if you are stupid enough to lift the layout scheme that Games Workshop has used on their site, not only will you look like an ass, you’ll be sued, too. Take the higher road and come up with something original, even if it’s not as pretty as some of the other sites out there. 

A web page is made up of a bunch of different elements. Let’s look at them. 

Text. That is, the words that appear on your page. Text font size (how big the letters are) should be no less than 10 and probably no larger than 14. Text in paragraphs should have serifs (those squiggly little “curls” on the ends of each letter) for better reading comprehension: serifs help the reader’s eyes “flow” from one word to the next. Text must contrast with the background (see below) for legibility. 

You’ll also want to use fonts that are commonly used on most personal computers. I suggest: 

  • Arial
  • Courier
  • Times New Roman
  • Verdana
Avoid esoteric fonts or use them sparingly: I used the Samarkan font to create the Jungle’s old logo (see below), but for everything else, it’s Arial for headings and Times New Roman for text. Esoteric fonts may look cool but can be hard to read (especially if you use them for basic text). Not to mention that your visitor may not have the font on their machine; you should never ask your visitors to download a certain font just to read your site. Given the choice of downloading your font or going to another site, most visitors will vote with their feet.

old Jungle logo
Above: The Jungle's logo, using the Samarkan font

Here at the Jungle, I use Times New Roman size 12 (in black) for text. For emphasis, I’ll put words in bold or italics; for codex and movie titles I use both (Codex: Tyranids; Star Wars). 

Headings. The words above your text that separate your page into sections. Heading sizes should be larger than those for text, and using a different font—preferably one sans serif (or without the little curls on the ends of each letter)—is a good idea. On this site, I use Arial size 12 for most headings. 

Links. For hyperlinks within a body of text, I recommend that you use the same font and size as your regular text but differentiate the links by color, underlining, or both. It’s also a good idea to establish link colors that are complementary to your background and text. Here at the Jungle, links are in bold and appear green; once the link has been followed, it changes to tan. I’ve never been a big fan of underlined links, so I tweaked the HTML to create links without underlines. Nevertheless, lots of websurfers expect them, so you may want to leave them like that. It’s up to you. See “Navigation,” below.

Background. The background sits “behind” your text and provides contrast so that your visitor can read your page. If you’re going to use dark text, you’ll want a light background, and vice versa. The key thing to remember is that your background must be unobtrusive: avoid wild designs or mute them somehow. On this site, I use a background image of jungle trees (made by Michael Lietzke). It would be pretty hard to read any text posted on this background, so on each page, I have a large space (set at 85% of the screen) colored pale green, which lays over the background images, restricting them to a sort of border around the text. 

Identification. On each page, you need to identify what the name of your site is, what the name of the page is, and who wrote it, so that if people stumble onto a page from somewhere else, they’ll have some idea of where they are. At the Jungle, I have the name of the site right at the top of every page, followed by a listing of the site sections (which also doubles as a navigation aid). Below that, I have the name of the article found on the page, and section that it belongs to. At the bottom of the page, I have a copyright notice indicating to whom the page belongs.

Navigation. Your visitors will need some way of getting around your site. In addition to the links found in the body of your text, you’ll also want hyperlinks set aside from the main text. These links can be words or images.

On this site, I have links to each section at the top and bottom of each page. If an article has more than one page, I have links to every page of the article at the beginning and end of each page. Often I’ll include links to the previous and subsequent pages, along with arrows (see below). And I’ll include links under a heading called “Related Pages” to take the visitor to similar material. Perhaps all that is overkill, but in its earlier days, the Jungle was frequently criticized for not being easy to navigate. I hope no one can say that now….

ArrowArrow

Images. Web pages are more interesting with pictures, and if you’re going to post battle reports, army descriptions, or anything having to do with terrain, you’ll need visuals. Digital cameras will provide you with photos, but consider carefully how much money you want to spend on equipment and processing software. Programs like Photoshop will allow you to make your own images, but the better ones aren’t cheap or easy to learn. 

Two things to bear in mind are that images eat a lot of storage space on your computer and increase downloading times for your visitors. You’ll probably be using JPEGs for photographic images (like those pictures of your army) and GIFs for logos, buttons, and such. JPEGs show more detail but take more memory (and thus take longer to download). GIFs lack detail but require less memory (and download faster).

On this site, the “jungle trees” background image is a GIF repeated across the page, as is the pale green that the text appears over. The Fighting Tiger image and the logo at the top of each page are also GIFs. Most of my photos are JPEGs (some are GIFs—don’t ask me why) and I try to limit their size to allow them to download quickly. If I can’t or don’t want to shrink a photo down, I’ll try to place it near the bottom of a page, so that by the time a visitor reads all the way down, the photo has (hopefully) finished downloading.

Each image is usually in the center of a page by itself, but sometimes, if the image is small enough, I’ll align it to one side of a paragraph and “wrap” text around it. Images usually have 5 pixels of space all around them (front, bottom, left and right) and a 2 pixel-wide border of black to set them off. Captions are in Arial 10 font to distinguish them from regular text. 

He doesn't like to be called Puddytat....
Above: Example of an image and a caption

I also include “alt” tags on my images: “alt” tags create little boxes of text that appear when a visitor runs their mouse over an image. I use “alt” tags just out of habit—supposedly, they’re for the benefit of people who turn off their graphic display feature when websurfing or for people who are visually impaired. I use “alt” tags to describe the photo or post little funny sayings. Go ahead and move your mouse over the tiger photo above for an example. 

Now that I’ve discussed elements, let me mention two other things.

Consistency. When creating pages, make sure that they are all alike: same fonts, sizes, and colors for text, headings, and links; same background; same navigation, same image placement, etc. Pages formatted any old way, without any thought to consistency, make your site look second rate and make you look like a bozo. Every HTML editor that I know of (even Composer) offers you the option of creating templates of pages and re-using them to maintain a consistent “look and feel” throughout your site. Use them. They’ll make your work easier, you’ll finish your pages faster, and visitors will appreciate it. 

This is not to say that you must be a slave to consistency. Minor variations are okay. In the Codex: Fighting Tigers of Veda section, I included this neat GIF (made by Jason Foley) at the top of every page to distinguish the Codex from the rest of the site. 

Codex: Fighting Tigers GIF

Perhaps on your site, you’ll want all your Space Wolf pages to have a gray-blue background and all your Eldar pages to have a light purple background. And that’s okay. But leave everything else—text, links, navigation, images, etc.—the same. If you’re going to vary your layout, keep variations to a minimum.

Remember the gorilla. Microsoft’s Internet Explorer is the 800-pound gorilla of web browsers; I read somewhere that about 90% of websurfers use IE. If you’re among the 10%, remember to test your pages so that they look good in IE, something I have been guilty of not doing (I only recently stopped using Netscape, and only because more and more sites these days don’t work with it). 

Right About Now...
...here in the middle of the article, might be a good time to mention something about the value of persistence. In business, there's a saying: "Everything looks like failure from the middle." That is, while you may start a project with enthusiasm and high hopes, your spirit may start to wane when you get down the road a bit and find that whatever you're working on is taking longer than you thought or is running into problems you didn't foresee. At this middle point, when you've made some progress but are still far from the end, you may become discouraged with your efforts thus far and be tempted to give up. 

Yielding to this temptation is almost always a mistake. If it was worth it to you before to start building a website, surely it is worth seeing it through to completion. If you're trying to accomplish more than you can do, or if your personal life has suddenly changed drastically, or if you've lost interest, then you should quit. But if nothing like that has happened to you, and if you've developed good ideas for your site, stick to your plan, cope with the difficulties, and build your site. 

No one starts a site saying, "I can't do this. This will suck." But you may well think that later on. Do not lose confidence in yourself: you thought you could do it when you started your site. Either you were wrong then (unlikely) or you are wrong now (most likely). Be patient and persistent. You don't have to be brilliant to build a good site, just dedicated. 

I've found, by the way, that the expression "Everything looks like failure from the middle" applies to site renovations (discussed in the next article) and miniature painting, too.

Let's get back to setting up your site, namely...

Creating your Main Page
You can refer to the first page your visitors will see when they arrive at your site as a “Main Page,” a “Home Page,” an “Index Page,” whatever. You might think that you should build your site’s main page first, before you build some web pages, but I argue that it’s easier to do the opposite. If you think of all the pages of your site as being part of a book, then the main page is like a title page. 

In any event, you’ll want your main page to be good. This is your first chance to make an impression on your visitors, so don’t blow it. Put some thought into what you want your main page to do.

Your main page needs to tell visitors what your site is about (Warhammer 40K), and what content they can expect to find. It has to have links to the appropriate material, and should have some additional information (at the very least, it needs to have a disclaimer telling everyone that your site is NOT affiliated with Games Workshop). It needs to look like a high-quality site that will entice visitors to explore it. Oh, and it needs to load quickly, because most websurfers have little patience. 

How do you do all that? It isn’t easy, and I don’t have it down perfectly. I’m constantly tinkering with the Jungle’s main page, and I predict you will spend a lot of time with yours, too. Part title page, part table of contents, part billboard (“Websurfers: Stop Here!”), a main page has to do a lot of things all at once. 

Also bear in mind that when you create a main page, it need not be identical in format to the rest of your pages, but it should be similar. My main page is structured very differently from all the other pages, but it has lots of common elements (the jungle tree image, the green text field, etc.) to connect it with the rest of the site.

Speaking of elements, let’s look at each element of a main page.

Site name. Duh. Your site needs a name, and it needs to be fairly obvious. I admit that I did not do such a hot job naming this site: “the Jungle” is okay, but it does not cause one to immediately think “Warhammer 40K.” There are also a handful of sites out there who refer to this one as “Fighting Tigers of Veda” instead of its actual name—not that I mind (hey, I’ll take all the links I can get), but it’s indicative of a problem. 

In any event, once your site gets known, it’s too late to change the name without causing confusion or hassle, so you might as well think of a good one ahead of time and stick with it. 

You might be tempted to choose a name like “Warhammer 40K” or “Space Marines” or something else using one of Games Workshop’s trademarks. Doing so is asking for trouble from GW’s Intellectual Property Department, who will eventually notice and probably ask you to re-name your site. They will have the law on their side, so do yourself a favor and avoid that headache. 

Update information. You are going to update your site aren’t you? Of course you are (see the next article in this series about that). When you do, you’ll want to let people know. I’ve found the best way to do that is to provide dates saying when the next updates will be posted; then, of course, you must stick to those dates. I also used to provide direct links from the main page to the new articles, but I’ve dropped that as redundant. 

Content links. You’ll need to list all your sections on the main page and provide links to them. At a glance, your visitor knows what’s on your site and how to get there. For content titles, simpler is better: if you have a section devoted to painting, call it “Painting” so as not to confuse people. If, like me, you prefer fancier titles (“The Tiger Roars”), you might want to provide little blurbs under each title to explain what it means. 

Disclaimer and copyright notice. By law, you must not try to pass your site off as being an official Games Workshop site. You can’t design your site to look like theirs and you must have a disclaimer on your site saying that you are not trying to infringe on GW’s rights. For tips on what to say, check out Games Workshop’s Intellectual Property page on their site.

You’ll want to copyright whatever original material you post on the web. How do you do that? Put a little notice on your page saying so. Boom, you’re done. Wasn’t that easy? A copyright puts the law on your side if anyone tries to pass off your material as their own. 

The intricacies of copyright and trademark law are beyond the scope of this article, so my best advice for you would be to adhere to GW’s guidelines and give credit where credit is due. To avoid copyright questions, avoid re-working GW material: you might think that your re-write of Marneus Calgar is more interesting than GW’s, but they could view it as a possible infringement. Play it smart and play it safe.

Images. Just like with regular pages, you’ll want some snazzy images to dress up your main page. Just make sure that they don’t take too long to download. All the images I use on my main page are GIFs, which download fairly quickly. 

E-mail address. You don’t have to have your e-mail address on the main page (or any other page), but visitors like interacting with webmasters, and if you want people to submit material to your site, they’ll need a way to get in touch with you. I get several e-mails every week and I re-post the more interesting ones as sort of a “Letters to the Editor” feature on the What’s New page.

Viewing instructions. You should have some kind of guidance on how visitors can optimize their view of your site. I created all my pages using Netscape Composer, on a certain size screen, so I tell people, “Best resolution: 1024 x 768. Best viewed with Netscape Communicator.” However, I also check to see that my pages look okay with Microsoft’s Internet Explorer, used by most visitors. 

A quick look at my main page will illustrate that you can put all kinds of other stuff there, but try not to overdo it (something I’ve been guilty of). I’ve found it useful to create a section called “Visitors’ Favorites,” with links to the articles people ask about most. And I also have a hit counter to track how many visitors I get. 

My last piece of advice on main pages would be to avoid those trendy animated introductions you see on a lot of sites. Yeah, they’re cool; yeah, they mark you as a kick-ass webmaster; yeah, they make your website more “theatrical.” But they’re only cool the first time a visitor watches them. Every time the visitor comes back, they’ll be clicking the “Skip Intro” button you’ve (hopefully) provided. 

If you really have your heart set on using such an intro, at least make it useful: post blurbs about the latest update or something. Otherwise, your animation piece conveys nothing of substance to the repeat visitor.

Getting Your Site Online
Once you’re ready to get your site online, you have all kinds of options on hosting—too many options for me to discuss here. Find a reliable host, preferably one that will offer you lots of space and host your site for free, with an easy-to-use interface for uploading your pages. Since Day One of the Jungle, I’ve used The Warp, and have nothing but good things to say about them. 

One last thing…
…about creating web pages: Spellchecker is your friend. Use it. Otherwise you will have to get a friend to be your spell checker. ;-)
 
 
Next page: Maintenance
Previous page: Content
Previous pageNext page

Building Your Own 40K Site
Introduction <> Content  <> Set-up <> Maintenance


© Copyright Kenton Kilgore, March 2003. 
 

Top

Fighting Tigers:
Codex <> Tactics <> Gallery <> Allies and Enemies <> Tales of the Tigers

Other Pages:
Main <> What's New <> Site Index <> The Tiger Roars <> Themed Army Ideas
Events and Battle Reports <> Campaigns <> Terrain <> FAQ <> Beyond the Jungle