Coding And Design Tips

Coding and Design Tips
by Angel Negra

Browsers.

One of the main requirements of being a Guild zone is that your site has to be viewable in both Netscape Navigator and Internet Explorer. Unfortunately, this is usually harder than it sounds. A good way to help ensure that your design works before you put it up is to test it yourself.

Not everyone has both Netscape and Explorer on their computers, but you can download them here: http://browsers.evolt.org/ . Netscape can be found under the 'Navigator' section, while Explorer is under 'Internet Explorer'.

It's best to get an older version of Netscape, 4.5 especially. Versions like 4.7 let things slide by that screw up in 4.5, and version 6.0 and higher are closer to Explorer in terms of what they'll allow for tags.

For Explorer, version 5.0 is usually best. IBM, and their clones, rarely have any version lower than that now. Higher versions have the same problems as with Netscape 6.0; they allow things that older versions won't.

While you're downloading browsers, you might want to check out some of the other browsers found there. Opera and Mozilla are two good browsers. Have fun and explore.

CSS Incompatibilities

CSS is rapidly becoming a popular means of coding, with good reason. However, certain CSS commands can cause problems with various browsers.

CSS positioning is one of the most annoying; just about every version of Netscape and Explorer has a different idea of how the positioning should be rendered, if they're even new enough to recognize it. Until everyone's using browsers that can agree on this problem, it's best to stick to standard HTML tags for arranging placement, be it tables or paragraph and center tags.

Another problem is the fancier tricks of CSS. Like a link's background changing colors when you roll the mouse over it. Most browsers allow this but most of 4. versions of Netscape don't allow this. The best way to fix these problems is to first run through your site using Netscape 4.5 or lower. Take note of all the little problems that pop up, all the tricks that won't work right or at all.

Now, open up your CSS file and take out all the codes that were causing problems. Copy them into a separate CSS file.

Open up your .html file and insert the following code in your < head> tag:

The older versions of Netscape won't recognize the @import command, and will ignore it. Other browsers like Explorer and the newer versions of Netscape will understand this command. Now visitors with older versions of Netscape can still see the site, while visitors with other browsers get to see all those shiny tricks.

The blur filter. This is a new problem that I've recently come across. Depending on your browser, this filter either does nothing (Netscape), works (Explorer 4+ - IBM), or screws up the links so bad you can't access any links (Explorer 5+ - Macs, for sure, this might be a problem for other browsers as well).

Some Standard Netscape/Explorer Incompatibilities.

Iframes. The bane of a Netscape user's visit. Iframes, while they look pretty, are designed to work specifically with Explorer, and even then they don't always work with all versions of Explorer. There is no real way to fix them. You either have to switch to conventional frames or tables.

Font size. Did you know that Netscape and Explorer render font sizes defined in points differently? A point size of 20 may be huge in Explorer, but in Netscape it would be so small it's almost unreadable. The same with defining font sizes by saying 'x-small' or 'larger'. Each browser, and each version of said browser, defines these sizes differently. There are two ways to fix this. Either don't define font size or, if you really need the text to be a certain size, define the size by pixels.

The standard default background color for Explorer is white. The standard background color for Netscape is grey. Keep that in mind. If you choose a light font color, but don't specify a background color, make sure it can be seen in both browsers comfortably.

One of the best ways to ensure your site works in all browsers is to check its code. W3.org are the people who create the HTML and CSS standards. You can use their validation service to check for errors in your code. Just remember that just because the site says you have 200+ errors, doesn't mean there literally are 200+ errors, fix the first one listed and re-check, the number will go down considerably. The URL for the validation service is: http://validator.w3.org

Using graphics wisely.

There are three types of graphics: Gifs, Jpgs, and Pngs.

Gifs are the usually the fastest loading of graphics, but they're the lowest quality when it comes to hues in complicated pictures. All browsers can see them easily and load them quickly. They're usually best used for banners and buttons, but can work for general website graphics as well.

Jpgs are a little slower in loading, but they're of a higher quality graphic. Again, one all browsers can see easily and load relatively fast, depending on the size. They're great for screen caps, large graphics and general site graphics.

Pngs are the slowest loading graphic out there, extremely high quality. But, not all browsers can view them. Some versions of Netscape 4.7 will actually treat them like broken images, which will really kill the site if all your nav links are png graphics. They're not recommended for website use, especially because users with slower connections will get fed up with waiting so long to see your site.

When designing graphics for content pages, it's a good idea to keep the top or side graphic as small as possible. They eat up screen that could be better put to use with content. If, for example, a top graphic is so large that it fills the browser with nothing but a pretty picture, and the user has to constantly scroll down to get to nav links and content, the user will get annoyed fast.

Another good idea is to list the width and height of the graphic (in pixels) in the img tag. Otherwise Explorer moves the page around while loading graphics. If it's already got the right height and width, the content stays in one place, giving visitors something static to read while waiting.

Image and fanart gallerys can be fun and provide some great inspiration for writers. A handy way to organize image galleries is to use thumbnails. Thumbnails are a smaller version of the graphic linked to a larger, more detailed version. There are two ways to create thumbnails.

The first is to put the larger image in the img tag and set the height and width options to something small, like 80x60. While this way is certainly easier when it comes to time and effort, it actually takes longer to load an image page set up like this. Not only is the browser having to load lots of large images, it has to take the time to cram them into small sizes.

The second way to create thumbnails is to crop or shrink an image to the size you wish for your thumbnails. They can be saved as either gifs or jpgs; gifs will be smaller in size and load faster, but it's really your preference. The smaller image is put into the img tag and is linked to its larger twin. While this method can take more time, it will mean the gallery loads considerably faster.

If you want a good idea of how fast a page is going to load, first add up all the sizes of graphics used and the actual page itself. For example, I've got a page that's about 1K and has two graphics of 30K each, so 61K altogether.

The slowest modem still in regular use is usually the 56K.

So, the following equation:

56 000 bits/ 1 sec = 61 000 bits/ x sec

Means my page takes 1.1 seconds to load.

Fanfic archives.

There are two ways to set up a fic archive, in terms of housing fic. Fics can either be linked to from either the author's site or another site, or you can have your own copy housed on site.

Fic linking can have it's drawbacks. You have absolutely no control over how the various fics look, they won't have a uniform look, or blend with your site design. In some instances, it may clash with your current design scheme. There's also the danger of broken links. The site owner may have re-designed and move the fic to a new location; the site may have moved, or shut down. Now in some instances, the author insists that you link to the fic, this happens and it is up to the author where that fic goes.

Generally, it's best to house fic on site. You can control the look, you can guarantee that it'll never disappear without you knowing.

Housing fic on site can eat up a lot of space, especially for a popular zone. If you're limited in space, but archiving on site, it might be a good idea to archive the fics as txt files. The only thing you need to remember in this case is that txt format has no textwrap. You have to go through each line and hit return at each 'wrap' your text or html editor give you.

If you're keeping the fics in html or htm format, make sure the colors contrast. And are easily read. Black backgrounds are ok, but depending on the font color, they can cause headaches. Same with fonts and font sizes. Try this, set up several fics in the color scheme you plan to use for fics, read through them yourself and get several fellow fans (at least one using Netscape if you aren't) to do the same. How easy were these fics to read? Was the font too weird? Too small? Did the text blend into the background? Could you read off the background graphic?

In general, fics are best read on a white or light grey background with black text. Also, leave the font and its size up to the reader. Why leave the fonts up to the reader? Depending on their country, certain fonts are easier to read, and a reader will usually have a default font that is the most comfortable to them. The same with size, some people need a huge font, other prefer smaller. Also there's the pixel/point problem talked about earlier.

But what it all comes down to is, its your site. Use your judgment, use these tips if you want, and enjoy your zone.