Differences

This shows you the differences between two versions of the page.

@@ Line 1: / Line 1: @@
+====== Site ======
+===== Editorials =====
+==== Designing a Website ====
+Firstly, this is not going to be an HTML guide. You can get those from sites like HTML Goodies
+What this is is my attempt to instill some good site design into the GTA community. As I've said before, anyone can make a website, but it takes skill to design one.
+=== Who to design for ===
+Ok so I'd be the first to admit that you can't design a site for everyone. It's impossible without reverting to HTML2, which no one wants to do. So design for the majority, not for yourself. Just because you run your computer using 1280 x 1024 doesn't mean everyone else does. Just because you use Web TV doesn mean everyone (anyone?) else does.
+At the moment the most popular set up is 800x600 using Internet Explorer 4. I always design for this, then try to ensure comapatibility with Netscape and some reverse engineering back to the 3rd gen browsers. Below that it's often not worth the effort I'm afraid.
+You can keep track on what's the most popular by viewing tracking results. Obviously the bigger the site, the better the results, but for the purpose of the GTA community I think my results should suffice. You can see them by clicking on the little image at the bottom of the right hand menu on my news page.
+=== So how do you design for IE4? ===
+This is easy, IE4 accepts pretty much every tag ever written (except BLINK) so you can do what you like. I suggest a remote stylesheet to allow the easiest updating around. You can also use pretty much any software around, but you should always make allowances for those who don't have the Shockwave plugin or whatever. Don't assume anything, always check first with Jave script or whatever.
+=== Designing for NN4 ===
+This is the hard thing. I often get asked how I make my site look reasonable in NN4 (it doesn't look perfect, but it's almost the same as in IE4). How do I do it? Well here's how.
+Firstly don't panic if you open your newly designed IE4-compatible page in NN4. It will no doubt look horrendous. So you've got to try and decide what's the worst thing and fix that first. Usually it's a couple of CSS errors. NN4 doesn't support all the CSS tags, but it usually has an alternative. Check you HTML reference for alternative tags that do the same or similar things. If there isn't an alternative then turn to HTML 3.2.
+For example. In table NN4 doesn't support many of the attributes you can normally put into a stylesheet (width, height, etc). So you have to append them to the table tag. You usually end up with something like:
+''<table class="newtable" cellspacing="0" cellpadding="0" width="100%">''
+This lets you define any common CSS elements in the class "newtable" but still helps keep NN4 in check with the other tags.
+Next thing to check is table elements. An empty TD will not be drawn in NN4, so if you want a blank TD you need to insert a non breaking space ( &nbsp; ). Of course sometimes this is no good, because the non breaking space is too big (an example of this is the black lines either side of my nav bar). Here you need to make use of images. I use small spacing image (literally 1pixel by 1pixel) to make sure NN4 draws the TD but it's still the correct width.
+Another thing you'll notice is that NN4 doesn't interpret pixel widths correctly. If at all possible use % values, or as an alternative use a spacing image (again there's one at the bottom of my nav bars, bet you didn't spot it!). Not ideal but that's NN for you.
+The one things that I really don't like about these solutions is that your code will no longer validate. It's not HTML3.2 because it has style sheets, but it's not HTML4 because tags like "align" and "cellspacing" are now obsolete. Might not bother everyone, but there are times when you absolutely need validatable code. It's then that you say b*llocks to Netscape. If they can't support CSS properly then they lose out.
+=== Navigation ===
+The first thing you need to understand when designing a navigation system is that not everyone is computer literate, but you can't descriminate against them because of this. Therefore your navigation should be intuitive, i.e. the new user can immediately understand this.
+What does this mean in real terms? Well if you have ordinary links the link title should explain what the target page is. You should not have links like "Stuff" and "Go Here", and try to avoid stylised links like "Info feed" instead of news or "Escape" for links. They all lead to confusion.
+Also design your navigation system well. Don't do it as a half hearted effort. This is the one part of your page EVERY user will interact with, therefore it should not break every click. Again, check all the links thoroughly.
+If you have a frames site do NOT, I repeat DO NOT open someone else's site in your target frame, leaving your navigation bar visible. This is poor practice as it not only ruins the viewing of the target site, but it also means the user cannot bookmark the other site. If you insist on having your page stay up then open the new link in a new window, but I prefer to have the links open in the same window. If I want it in a new window, I'll right click and specify this.
+Try to be consistent throughout your site. Moving the navigation bar/frame/whatever around the screen is not a good idea. Again it leads to confusion for the uninitiated user and also ruins the feel of your site, making it a collection of random pages rather than a solid site with a theme.
+Also make sure you have links from each page, or if you only want on index then have links back to the main site. Do not leave it to the user to press BACK to return to the index. This is just lazy and confuses.
+=== Graphics ===
+Huge graphics are not the users friend. In some countries (ie UK) it costs money to be online. Why should I have to pay anything to see your 500k picture of whatever. It's bad netiquette. If you have to have this large image, either use a thumbnail, so I can choose to view it if I want to, or make use of the Netscape lowsrc tag.
+Always make sure your graphics are linked correctly. There is nothing tackier on a page than seeing hundreds of little red crosses. It gives the impression that you don't even check your pages, and if you don't view your pages why should I?
+You don't always have to use graphics. Since the mainstream introduction of CSS most simple effects can be reproduced easily. Another example is background colours. Too many times have I seen sites using 100x100 images of one colour as a background. Why not just use the "background-color:" or "BGCOLOR" tags?
+If you do have an image as a background for your site, firstly ensure it doesn't interefere with the text. There's nothing more annoying than trying to read white text on a buzy background. If I find a site like this I usually leave, even if I did want to read the content. Why should I give myself a headache for your website?
+Secondly you should check your background colour. This is another pet peev of mine. People who have black background images, then use white text, but still set the background colour of the page to white. It means I have to wait for your image to download until I can read your page. Crap! Time is money people, and I ain't wasting mine for you.
+=== Frames vs Tables ===
+It's what's becoming a classic debate. Frames or tables. Both have their place, and everyone has their favourites. Personally I think tables are a lot classier.. here's why.
+Frames - good points - you can use scroll="no" to stop pages messing up in smaller screen sizes. Ease of update, you don't need to change every page when you want to edit the navigation bar.
+Frames - bad points - they make for bad UI. I can't bookmark a specific page on your site. I can't use the back button properly. What happens if you design your site for 1024x768 and I view in 640x400? I can't see half your site, that's what happens.
+Tables - good points - give a classier look to a site. They allow for proper browsing and bookmarking. Not many people mess up navigation on a tables site.. frames sites are very often knackered.
+Tables - bad points - layout isn't their original function so strict peeps don't like them. Can be replaced with CSS positional tags. Hard to maintain, but SSI and my new program help with that ;-)
+=== Java Applets ===
+I know Java is all the rage at the moment, but personally I hate them. Don't get me wrong, I love the Java language, nothing I'd rather program in.. but they have their place and slowing down my connection isn't one of them.
+Check what your applet is doing, it's more than likely you can find something else that can do it faster. I've seen so many sites using applets for mouseover image changes. Why bother when Javascript does it just as well and twice as fast?
+Also they look horrible while loading. I much prefer Flash. It can do most things you can do in Java (most things one personal pages anyway, obviously they can't hack the programming side) and you can have nice loading feedback rather than the status message "applet loading".
+=== Colours ===
+Choosing colours for your website is not something I claim to be an expert at. I confess I've never once intentionally used a "browser safe" colour, simply because I design for IE4/5 and they support pretty much anything. However if you are looking for backward compatibility you should use them. Check out Victor S. Engel's site for a solution : http://the-light.com/netcol.html
+Aside from picking "safe" colours you should worry about making a coherent site with a good theme. I usually pick two or three main colours, then use them to make the site a cohesive object. As you can see on this site I've used two blues and a red on a white background. The result is bolder than my usual designs but I think the effect is pleasing.
+Whatever you do, don't pick clashing colours. If you can't tell, ask someone who knows (I seem to recall mothers are usually good at this). Once you pick your colours try not to use too many others. Every different colour you add detracts from your website until eventually you have a horrible mish mash of colours.
+=== Final Thoughts ===
+I think one of the best pieces of advice I can offer you is go read a professionally produced magazine. Designing a website is a lot like DTP and you can get some great inspiration. Also other websites are good sources of ideas, but this is a bit more risky as no matter how you look at a page it's still going to influence your design and you can breach copyright unintentionally.
+But what it all comes down to is have fun. Even if you're making websites for money it should still be fun to do. If it's not then you're in the wrong line of work.