Get Design Right

CREATE AN EYE-CATCHING design and your visitors will thank you for it. It's always tempting to go crazy with colours, but if no-one can see what you've written, your site is pointless. Planning is essential, but take some time out now and you'll be rewarded with a great site. If you would like to buy som cheap and great looking Web Template then check out the link.

23. Map out your site
A good site is easy to navigate. Work out what you want to put on the web, then split it into sections that can be easily accessed from the front page. You can draw a flow chart if it helps you to map out the structure of your site. See Calvin Klein for an example of this.

24. Make sure your pages fit
It doesn't matter if your site looks great on your 19-inch monitor, if the rest of us can only see the top corner. Most commercial sites are built to look good on a 800X600 pixel screen: change your display resolution or resize your browser to check that yours does, too. The best is to use % so your site fits any screen size - simply make it in % NOT pixel. See Rejseforsikring for an example of this

25. What you see isn't what you get
Most WYSIWYG editors, in reality, aren't, and most browsers have the habit of breaking their own display rules. Get in the habit of checking your pages whenever you make a change to the HTML. What you see at Internet Explorer might not be the same you see in Opera Browser and I have to admit I love the Opera Browser and I have had some surprises when I have check soem sites in Opera but a good thing is if it look good in Opera it looks good in all Browser so I usually just check my sites in Opera.

26. Cut down on scrolling
Some people say that you should never have to scroll down when looking at a web page. We disagree, but that doesn't mean you should stick everything together. If a page feels as if it's bursting at the seams, split it up. See Søgemaskine Optimering for an example of this.

27. Choose colours carefully
Just because you can have lime green text on a pink background, it doesn't mean you should. Go back and pick a combination that's easy on the eye, and a link colour that's sufficiently different to be noticed. An good news is that the trend for 2004 is Black and White combined with Greyscale - might sounds boring but its easy for the eye and think of a plain normale book (white paper with black fonts) :-) - see e-Bay for an example of this

28. The Frame game
Use frames sparingly: if you've got a navigation bar, putting it in a frame will keep it on-screen while the rest of the page scrolls. Don't use frames just because they're cool. An if you would like you site to be optimized for the Search engines NEVER use frames. See Search Engine Expert for more on this topic.

29. Support different browsers
If you do use frames, make sure to provide something in <NOFRAMES> tags for those with incompatible browsers: even if it's just a polite request for them to upgrade.

30. Count me in
A Web counter isn't just an ego boost: it's a way of measuring the popularity of different elements of your site. It doesn't have to be flashy, either: pick up a smart and subtle Alexa Toolbar from Alexa to track your own and you competitors traffic and it is FREE

31. Explain your links
In newer browsers, the <A TITLE> taglets you provide a brief description to accompany a link, visible in the status bar at the bottom of the browser. Use it. Also remember to use ALT Tags on images for those that have switch of image load in their browser of have slow connectivity. See SøgemaskineOptimering for an example of this

32. Font-tastic sites
Downloaded a cool-looking font and want to use it on your site? Remember that visitors to your site need to have the exact font loaded. It's best to stick to Web-friendly fonts like Ariel, Verdana and Georgia. And Verdana is in my opinion the most read-friendly for online reading. Check out Freebies Fonts for lots of quality link to free fonts.

33. Textual healing
Using fancy fonts to create title and label images is fine; having the main body text as a single GIF ('gif-text') is a no-no. It won't be indexed in search engines, and will take ages to load on a slow link. And if you do it then remember to use the ALT-Tags with the exact same text as in the ALT tag. See an example of this at Tupac

34. Mock it up
Before uploading your site, test it out on your own PC. A good editor such as HomeSite lets your create a 'project' to preview your finished site, but it's just as easy to put it in a folder, fire up IE, and click between pages.

35. Tweak, tweak
Once your site's online, put it through its paces. Are pages loading quickly enough? Is everything laid out properly when you change font size or maximize the browser window? Be your own critic.

36. Get the Blink off
Don't use <BLINK> Ever.

37. Brush up your tools
Microsoft provides a few basic programs for wannabe artists, but if you want to produce your own graphics, it's time for you to upgrade. Install Photoshop: it offers the best combination of features and value for enthusiastic amateurs.

38. Sort out your formats
Web graphics are generally created in two file formats, each with different strengths. For icons, logos and other images containing lots of flat colour, use GIF. With photographs, and other more 'natural' images, use JPEG. See the section from Freebies Graphics for lots of links to Free Graphics

39. Make your problems disappear
One advantage with GIFs is that you can make one colour 'transparent'. Create icons with a background colour that isn't used in the main image, set that colour to transparent, and your graphics will blend seamlessly into your pages.

40. Avoid colour clash
Your monitor may display millions of colours, but only 216 of them show up accurately in all versions of all browsers. To stop your icons from dithering, use the browser-safe palette at lynda.com

41. Optimise, optimise!
Tweak your images to reduce their file size and speed up download times. Increase the file compression of JPEGs, and optimise GIFs by stripping out information for colours that aren't actually used in the image.

42. Anti-alias
When creating buttons and graphics, reduce the jagged edges of curves by 'anti-aliasing', which blends them more smoothly into the background. You can also anti-alias text labels if you like. A good product for this is Photoshop but its not the cheapest package around ( approx. $ 600) but for sure the best but you will get a long way with Paintshop Pro and the price is fair ($ 85). I can highly recommend Another product from Adobe called Photoshop Elements is the little brother of Photoshop ( the price is only $ 84) and have most of the features you are looking for when doing webdesign.

43. Roll over, Beethoven
It's a good idea to create two versions of your navigation graphics - 'on' and 'off' settings - to produce a professional rollover effect. If you're not familiar with JavaScript, the MouseOver Creator will do most of the work for you.

44. High and Wide
You should make sure you specify HEIGHT and WIDTH values for every image to speed up the rate at which browsers display your site. If you want to save time, think about using an HTML editor such as HomeSite or Frontpage that can add these tags automatically.

45. Alt-ered images
If you're using images in your site, especially if they're for page navigation, make sure they have ALT tags, a label or a brief description of the images itself. This helps the visually impaired, and those browsing with images turn off or on a slow connection. See Danish Celebs for an example of this.

46. Thumbnailed to the ground
Including large images with long download times will clutter up your pages and annoy any visitors to your site. Instead, create thumbnails, using your image editor or SoftDD's Thumbnailer, that provide a link to the full-sized image on a separate page.

47. Make a resolution
Final Web graphics should be 72dpi (pixels per inch) to match your monitor resolution. Setting it higher won't produce higher quality screen images, and will just increase the loading time.

48. Keep images apart
Create a separate subdirectory to store your site's graphical elements, so you won't be looking for them later. It makes it easier to construct IMG tags, and allows your browser to cache frequently-used images, such as navigation buttons and spacer GIFs.

Get the Design Right