Better website design! Some handy tips. [Archive] - Racerplanet Network Forums

View Full Version : Better website design! Some handy tips.


04-07-2002, 10:11 PM
Well, I thought that I moght provide some tips for better website design, seeing as I have a bit of time. It may come in use to some people:

1. Plan your site first, on paper! Makes it much easier to do everything on the computer when you have a plan of everything in front of you. Draw storyboards (mock-up pictures of each page on the site, or, of a base template you will use.) Also draw flowcharts to demonstrate the linking between pages and or information flow between database and website.

2. Is the site for someone else? If so, always ask as many questions as possible, so you can have the best idea of what they expect from the site. Ask questions like, who are the target audience? What level of technical/computer expertise do they have? Are they visually impaired? (If so, don't use CSS to specify the text size since it will force the text to be that size, regardless of the user's selection. What type of internet access are they likely to have? Will Flash or Shockwave be of any benefit? Things like that.

3. BANDWIDTH: Just because you may have a 2mbps broadband internet connection doesn't mean to say that others have such a fast connection. Test your site on multiple computers, on different internet connections. If the site runs slow, check that all graphics are compressed properly, and, go through the HTML code and check for duplicate tags, and or unneccesary font tags, or tags which aren't always needed such as </img> (a closing img tag) or instance. You can get away with just using <img src="filename_goes_here"> for inserting images. The <BR> tag (break tag) also doesn't require a closing tag.

4. Need to do a special menu system, or similar? Don't use a pre-built one, do your own, this will fit your needs much better than a prebuilt one. http://msdn.microsoft.com/library/default.asp features many useful tips on specialist website development/application development. They even describe how the MSDN menu system was built!

5. Can't work out how to use a function in Photoshop? Baffled by Server Behaviours/Recordsets in Dreamweaver Ultradev? Ask someone at a message board! Some people are very knowledgeable.

6. Avoid over-crowding information on a website! Overcrowding just makes everything harder to read.

7. Does your site really need the Flash intro movie? Bear in mind that these can take a long time to load for users on slow net connections. These users may get tired of waiting and move on to another site.

8. Avoid complex navigation structures between pages. These can make it hard for the user to find what they are looking for.

That should be enough for now, but, I may provide more advice later on, for tasks in Photoshop 6.0, or Dreamweaver Ultradev 4, or Macromedia Director 8.5..

Cheyenne
04-07-2002, 10:29 PM
Oh, Chris/CPD, excellent advice.

I'm just doing a personal page now and, well, I guess I get overambitious and don't do enough planning and get sort of frustrated &( when I lose sight of what I'm trying to accomplish. Plan on paper (or organizational/flowcharting software will do too!), excellent advice.

Please, by all means, continue with the lessons. Acca just posted in one of the forums about obtuse website design making downloading "Racer" something of a hassle. I think we could all benefit from your obvious expertise. :help:

Thank you, thank you, thank you!

04-07-2002, 10:44 PM
Well, perhaps I'll start off with Dreamweaver. (Just the standard one, not the Ultradev version, since I don't think too many people use it).

I'll write some tutorials in word, or HTML perhaps.

My 1st 2 tips for those new to Dreamweaver is on tables:

- When using tables, always use what is called a spacer.gif when you must have the table columns maintain their alignment! The spacer.gif is a transparent gif image, using 1x1 pixel in size, which is then stretch to the required width. It usually goes in a top row, above everything else. It will prevent all cells in a column from being squashed by other content in other cells nearby.

- When you want to resize part of a table, say the height of a row, or the width of a column, DO NOT be tempted to just grab the edge of it a drag it with the mouse! If you do this, the table will end up in a huge mess later on. Always use the width and height boxes in properties Inspector (CTRL+F3) to specify numerically in pixels the height or width of a part or whole of a table.

I've seen people just grab the edge of a table row or cell and drag it to resize it, the the alignment of the cells stuffs up later on, then they have to go back and undo everything to fix it up again!

Further to what was mentioned on project planning, Visio is an excellent program to use for creating flowcharts. It's simple and quick to use, and quite powerful.

AccadaccA
04-08-2002, 01:42 AM
Doh, I suppose this means you've been to V8 SHAKES then, hey Chris? :rolleyes:

I know you make sites for a living and all so I will make this thread a sticky for now so many of us can give it a read over time whenever the need arises (again).

Thanks for the great advice, mate. -^ -^

04-08-2002, 02:29 AM
More Dreamweaver tips:

- If for example, you have nested tables (one or more tables inside the cell of another table, you can easily the Parent table (the one that contains the nested table) by clicking its <TD> tag in the tag browser at the bottom left of the Dreamweaver Page editing window. This can also be useful if you need to select a <FORM> tag to edit the actions of a form.

- Sometimes, when you insert a Form (just the form tags <FORM></FORM> to start with), you won't see in the Dreamweaver window the bottom red line indicating the area of the field. This is caused by video rendering errors. If you want to be certain that the information you are entering is inside the form, click the Code view button (left most of the three buttons at the top left corner of the page editing window) and make sure the insertion point is between the form tags as indicated by the X below:

<FORM>X</FORM>

Acca: I could only check the frameset code on your site, and that looked quite fine to me. For some reason the right click refused to work on the pages inside the frameset (though I could check them too if I really tried by linking to them in a new window)

Markos
04-08-2002, 07:51 AM
Hey Chris! Very nice. I have a personal website. I started a few years ago with a simple site and i made everytime a better and better idee. I just learned things from myself. Now i bought a half year ago a book about html. Now i know alot about it and it's much easier to build and change my sites. The pages are jsut simple, but they are good. I used alot of tips for webdesigning i read somewhere. You give me also good tips. some i already knew but you gave me some great new tips too. i am not day in day out bussy with my site but from time to time i do change it and try to improve it. I try to make nice graphics with photoshop and imageready. but it's quite hard to amke the special effects you want.

thanks for the tips -^ -^ -^

Mark

04-08-2002, 10:21 PM
Mark: Skills with Photoshop are not easily aquired on your own. You usually have to undertake a course which deals with Photoshop. As for Imageready, I never use it.

Most of the good sites don't really try to do anything fancy with graphics, but use tried and proven layouts (like the inverted L website). Indeed, the trend towards the most unbelievable graphics seems to have died down these days, with more of a emphasis on simplicity and ease of use. Two websites I recommend people visit are:

www.maserati.com : The Maserati site captures the essence of Maserati as a company. The Maserati site has a elegant, slightly extravagant look, which is exactly the same as it's products.


www.mercedes-benz.com : This is a really excellent site. It has a slightly conservative look, but is designed with elegance and practicality in mind, the same of which could be said of Mercedes-Benz's products.

Both these sites demonstrate how you can achieve a lot with very little.

Your site also happens to be one of the better ones I've visited. Simple, and visually appealing.

TraffikD
04-09-2002, 01:10 PM
9. Use valid XHTML in your code to comply with the latest internet standards.

Examples:

bad!...
<br>
<img src="">

good! :D ...
<br/>
<img src=""/>

Basically if it's an html tag and there is no closing tag, before the end > put a /.

Read more at:
http://www.w3schools.com/xhtml/default.asp

04-09-2002, 05:40 PM
DPK: Yes, that's correct.

I wasn't actually thinking of XHTML in my examples (It slipped my mind).. But I remember it next time though.

Markos
04-10-2002, 01:13 AM
I searched for this but really couldn't find a clear answer on it, "what is the difference between XHTML and XML?

04-10-2002, 06:25 AM
I think XHTML is basically a standardised form of XML (Extensible Markup Language).. Microsoft seems to be the only real major supporter of XML these days..

boxsters
04-10-2002, 08:48 PM
get some ideas from this forum, http://forums.whirlpool.net.au

chris
09-04-2004, 02:14 PM
This is an old post, but I have to comment on the excellence of that forum you mention. That forum is a nice example of the way all internet forums could be.

Visually very attractive. :)

boxsters
09-04-2004, 06:44 PM
Thanks

Ive been going to whirlpool quite regularly over the past few years, excellent forum and pleanty of helpful people :)

Cheers :beer:

[XR]Neo_
09-04-2004, 07:38 PM
Cool advice m8!

- Neo_