Six web design tips to help you improve your website

improve your website

1. Navigation: Your websites navigation should be concise, quick, clean and easy for your users to understand. Make your navigation structure uniform throughout your site and always let your users know which part of your site they are in and how to move on to other parts of your site. The key element to any navigation structure is simplicity - keep it simple.
2. Layout: In the design of websites, layout is often overlooked. Layout is very important and is another means of navigation. Layout should also be kept the same throughout your site. Don't make different sections of your site look like totally different sites altogether. This will only confuse your visitors and make your navigation pretty useless. Never cram your page with to much information, always make good use of space in and around the page. Try and keep scrolling to a minimum, no one likes to scroll along way to get to certain information. If you have lots of information, break it up and place it on a separate page, but make sure that the user can alternate between pages with the traditional use of next and back links.
3. Color: There is no rules as to which colors you can use for your website and nor should there be. However make the color of your site reflect the theme of your site. If you have a fun/humour type of site use fun colors such as Yellow, Green, Orange, Purple etc. If your site is of a corporate nature use light and airy colors such as Blue, Grey, White etc. Again there is no rule to color usage, but always remember to use colors that reflect your site. If possible try to use in between 3-5 colors on one page, dont go color overkill, this can distract the user from the important aspects of your site such as content and navigation. Also contrasting colors like dark Blue and bright Yellow can often make a site look tacky so be careful when selecting colors, make sure that the colors compliment each other.
4. Load time: Load time is very very important. The longer it takes for your site to load the quicker the visitor will leave so therefore try to keep load times as low as possible. Try and design your site with a user of a 56k modem in mind because though broadband is on the increase, the majority of people surfing the web still use a 56K modem. The recommended file size for a web page is 40-60K, try and keep it below this. To reduce your sites load time keep your graphics as small as possible without effecting the quality to much and remember to save all photos as .jpg and all normal graphics like buttons as .gif
5. Browser/screen resolution compatibility: Try to make your site friendly to all browsers and all screen resolutions. Remember that some people use different browsers/different screen resolutions and different platforms to other people so never assume that they will never visit your site, always assume that they will because one size does not fit all.
6. Site design. Anyone can build a website but not every one can design a website. The most important aspect of this article is that I can not learn you how to build great websites however by heeding these basic web design requirements I can point you in the right direction when it comes to good design practices. Web design is not just about creating great looking graphics infact its far from it. No, web design is about many aspects. By sticking with the above design requirements you can start to learn how to utilise these and turn your designs into good quality websites your self. I learned the importance of good web design by using the above as the basic requirement's that need implemented for a website to be of good quality and good design so you can too.
Remember dont just consider these six principles when designing your site, I find the best way to further my own design skills is by visiting as many different web sites as possible, bad sites and good sites, look at all different styles (try coolhomepages for inspiration). Make as many different mistakes as you can and learn from them. Experiment because the best way to learn is by experimenting. Read as many different tutorials/articles/Internet magazines/tips as you can. Finally use webmaster forums and dont be shy to ask about certain things or certain issue's that you aren't to clear with because forums are often the best place to gather knowledge.
Keep learning.

To use Frames or not to use Frames

That is the question...

I've kept away from using frames in any of my work where possible. As much as I like some of the features that frames offer, such as a static header area and side menu bar, there is still a number of negative aspects to their use.

The idea of changing a menu system on my sites by altering one page is a very attractive prospect, especially now that I'm am carrying out a behind-the-scenes revamp of Taming the Beast.net . The weeks I have spent changing the coding on a couple of hundred pages could have been carried out in a couple of days, if I had used frames. But there are other ways to achieve rapid site updates without using frames (a subject of a future article) and those methods will be implemented in Taming the Beast.net Version II, due for release in December 2001.

So what are these frames (framed sites) anyway?

A frames page itself contains no visible content, it contains instructions on which pages to show simultaneously and how they will be displayed within the browser window . Think of it as a clear overlay, much like a paneled window frame - except this window frame allows you to look into different rooms of the house. A frames page can contain references to many other pages, but usually they consist of references to pages to be used as the header, the content, a left hand menu bar and a perhaps a footer bar. When a hyperlink is clicked in one frame, say the left hand navigation window, it will open a page in the content window, or the target frame.

This makes site-wide changes easy to implement (especially when used in conjunction with Cascading Style Sheets) as you can change the items such as the menu bar and logo for your site in one page, and that will update the entire site.

Using a frame for the header (top) area or navigation bar of your pages will also make it static (fixed) so visitors can easily access menus etc... no more scrolling back up the page.

All this sounds great, but there are a number of points you need to consider before implementing a framed site, especially when using WYSIWYG (What You See Is What You Get) web page editors .

1) Many search engines cannot index framed sites. Because the home page is merely a frame, with very little content or hyperlinks to follow, search engine spiders may stop dead on the page and have 'nothing to report'. A way around this is the proper implementation of Meta tags and use of the "noframes" tag. (See further resources at the end of this article)

2) If a search engine does manage to spider your site, visitors from search engines may land on the content pages, rather than the full-framed version, i.e. they may arrive on your site and all they will see is the menu bar! For a work-around for this issue, see further resources at the end of this article)

3) Non-frames capable browsers. Fortunately, only 1% of visitors browsers fall into this category. Once again the use of the 'noframes' tag will assist, but to be used effectively you basically need to create two sites, one framed, one not - the "time saving" is suddenly gone.

4) Bookmarking. A visitor cannot bookmark a specific page in your site without requiring additional customised scripting for each page. Even then there is a risk of visitors landing on the content frame, with no navigation frames to view.

5) Visitor opinion. Many find frames annoying.

6) Copyright issues. You'll need to ensure that all links within your site that point to external sources open in a new window to avoid copyright wrangles. There have been legal precedents in relation to this issue. Many site owners object to their content appearing in someone else's frame, to the point that special "frame busting" code is used.

7) Internal linking. Special attention will need to be paid to your internal links to ensure that any page pointing to, for example, the home page opens as a "whole page", otherwise the framed home page will appear in the target window, causing confusion to visitors.

8) Printing issues. Visitors need to take further steps within their print settings to ensure the information they want is printed correctly. In most cases, a full page cannot be printed as displayed on the screen, only in sections corresponding to the frame.

9) Scroll bars, divider bars. If your framed site uses a number of frames, scroll bars can prove to be unsightly. These can be removed, but check compatibility with other popular browsers. (See further resources at the end of this article)

10) External linkages to your site. If other sites wish to link to specific pages in your site, it is more difficult for them to do so.

11) Refresh/Reload problems. Again, special care needs to be taken with coding otherwise when a visitor tries to refresh a particular page, they may be taken back to the original frameset. A common problem.

It's a lot to consider; weigh up the pros and cons carefully. Instead of frames you could utilise a few lines of javascript code for quick global updates; learn more here:

Free Javascript to Dynamically update your website!

http://www.devwebpro.com/2001/0928.html

If you are a FrontPage user publishing to a FrontPage enable web server, the "Include Page" function is very handy and easy to implement. For others Server Side Includes (SSI) may also be an option. Neither of these options give you a static feature, such as frames do - but it can save many hours in global site updates. You can learn more about Server Side Includes here:

Free Server Side Include Tutorial:

http://www.bignosebird.com/ssi.shtml

If you decide to use frames, and have already implemented them, you may find the following links to frame tutorials useful in planning or editing your site:

Free Framed Site Tutorials:

An excellent, in depth examination of Frame coding issues:

http://www.searchengineguide.com/spider-food/2001/frames.html

Get the low-down on frames from a search engine authority:

http://searchenginewatch.com/webmasters/frames.html
Michael Bloch
michael@tamingthebeast.net
http://www.tamingthebeast.net/
Tutorials, web content and tools, software and community.
Web Marketing, eCommerce & Development solutions.