Welcome to WebmasterWorld Guest from

Forum Moderators: keyplyr & mack

Message Too Old, No Replies

The ultimate beginner's guide to time-saving web design

12:49 pm on Dec 10, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 23, 2002
votes: 0

I am not new to web design but completely new to CSS and SSI, so my first questions should be the fundamental ones:

Why CSS?

Why SSI?

Should CSS and SSI be combined?

For the time being I use three differnet designs for different purposes. I have considered the situation and come to the conclusion that I will now use one single design for all kinds of pages:

Dark blue background at top: Logo to the left, page title in white letters in the middle, search field and link (in white letters) to site map to the right.

Light background (something like cornsilk) for the main text (black).

I'm in deep doubts about the navigation. Some of my websites have a rather complicated structure with categories and sub categories and more sub categories to the umpteenth degreee. It is urgent that visitors can easily see where they are in the structure. It is also important that they have easy access to pages that are "in family with" the present one. At the same time the navigation should not take too much room on a page although the text should have an easily readable size.

Are CSS and/or SSI answers to my problems?


1:01 pm on Dec 10, 2002 (gmt 0)

Senior Member

joined:July 3, 2002
votes: 0

Are frontpage include pages, SSI?

If so, I can help on that score, otherwise.. :(

Not got much of a clue about CSS.


1:26 pm on Dec 10, 2002 (gmt 0)

Senior Member

joined:July 3, 2002
votes: 0

k then...out on a limb

This is an article that i wrote for a site im building (dont worry its not up and running yet, so no danger of URL dropping!:)).

Troels, for your question, try to put this into the context of promoting sections and categories, rather than single pages.


ps i wrote it for marketing folk, so theres some basic seo stuff covered...


Internally promoting your pages

Your best point to promote your site is within it.

Chances are that when you have covered the bases with your Internet Marketing techniques, you will have several thousand visitors a month on your site (naturally this differs from industry to industry, but the main point is that you will have substantial amount of visitors on your site, who are interested in what you offer).

The success or failure of your website is dependent on your ability to convert those visits into sales.

This article will look at some of the ways you can internally promote your product or service.

Graphical Ads

Small, catchy graphical ads on your pages that link to other pages can be a useful way of driving your traffic from one part of your site to another (and eventually to your sales page).

From your website logs and stats you will be able to see which of your pages are most popular (most visitors, and most common entry points). This will be largely your homepage, but can also be pages which are top of the search engine results for their keyword.

A graphical advert, generally should contain a minimal amount of text (describing what the page that it links to offers, and also the words “click here” or some variation thereof).

Any pictures or colouring in the ad should be in the same style as the rest of the site. If it looks too different, then your users may think that it is an external advert, ad therefore be put off about clicking on it. Having your brand name or logo on it would help to ensure users that they will remain in the site and also reinforces your brand.

All images should be optimised for the web (low file size), be unobtrusive and be static. This means, stay away from animations if you can (although in some industries they may be appropriate, but in general a static ad is the best route to go down).

The number of graphical ads in one page should be minimal. Any more than one or two gives the user too many options and can on the whole make the page confusing. Keep in mind, when you design a page, you know it back to front. Try to imagine how it will appear to someone to arriving at the page for the first time. Avoid clutter.

Also, try to keep the number of colours in the graphical ad to a minimum. This helps keep the file size low if it is in GIF format. For pictures and graphics that have many colours, JPEG format can be used to keep the file size low.

Text Ads

Using text ads hold many benefits over using graphical ads.

Firstly, there is the file size consideration. Text ads will load quicker than graphical ads, and therefore appear on the page sooner.

Next, you have the search engines to think of.

Generally, your ads will contain keywords relevant to your site. If they are text ads, the search engines can index them, if they are graphical they cannot.

From a marketing point of view, text ads hold an additional benefit.

You can use server side includes (SSI) to display the same ad in different pages within your site. This means that you can change one file and the change in the ads are reflected throughout your site, which is a great way of updating your site on a regular basis (saves so much time). You can include graphics in SSI’s as well.

A text add can easily be formatted to fit in with the style of your site and can usually contain a bit more information than graphical ads.

Text ads can be used in many formats. These have a low file size, are descriptive, have more than one link, can be indexed by search engines and help increase the traffic to these pages.

Links within the text

Having links within your text can be very effective if you use it well.

You will notice that there are very few links in the text of the articles of this site, but there are a limited number in the other pages.

This is because, when you write content, it is for the purpose of informing or selling your users, so you do not want them to leave somewhere else in the middle of it. It’s the web equivalent of someone hanging up the phone on you when you call them.

But in the pages that are for navigation purposes only (your homepage, category pages, sitemap, link pages, etc), well placed links can effectively drive visitors to the pages you want to them to see. Any links within the text should be descriptive of the page it is linking to.

Tips for linking within text:

>The text used for links should be the same as the title and filename of the page it links to. For example, a page called “blue widgets”, with the filename, “blue_widgets.htm”, should be linked to with the text “blue widgets”.

>Don’t have too many on any one page – it just serves to offer too many options to your users.

>Don’t instantly link to your sales page. You must woo your visitors first. Send them to a page describing the benefits of your product or service (ie sell them!) and then link to the order page.

>Links should be in standard format, ie underlined. Visitors must realise that the text is a link. If you format your links the same way that you format your text, then they will not be as effective.

Linking at the end of text

In a site such as this (article based), having a “related links” section at the end of each page will serve to keep users on your site for longer. This helps reinforcing your brand and increase the chances of repeat visitors and eventual sales.

In a site which is selling a product or service, a link at the bottom of the page, after your “pitch” to the order page will help your users travel through your site to it’s natural progression (ie a sale!).

It is always beneficial to offer an alternative to your sales page. Keep in mind your users will not necessarily be sold by your pitch, so by offering a link to more information (which in turn links to your sales page) you will increase your chances of converting a percentage of your “unconvinced” visitors.

Main point to remember

The hard sell does not work on the web, as it too easy for your visitors to leave.

You must subtly woo your visitors and lead up to the sales page. They must feel that it is ultimately their decision to buy our product or service.

You can achieve this by offering the best possible content in your industry and keeping you visitors well informed. Sites that offer great informational content are much more effective than pure sales sites.


1:51 pm on Dec 10, 2002 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member brotherhood_of_lan is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Jan 30, 2002
votes: 16

Time Saving Design :)

Since all the pages are going to have the same design, just have one stylesheet and use that on every page

For SSI, you can time save by including repeated content, like a "header" or "footer"

You could use SSI at its most basic like this

<title>Your Unique Title</title>
<meta name="description" content="Your Unique Description">
unique content

Would be any headers,doctype or extra head tags you want, and your <html> and <head> tags and the link to your generic stylesheet.

Anything that is on every page that you want consistently displayed across pages

Site map, could be a generic static site map, or if you are using middleware, you might want to customise what navigation is shown on each different page.

You can use the SSI to save file space and to save yourself work when re-vamping the site. Using SSI and CSS makes no difference to each other as the CSS is read by the browser, and SSI is done on the server before the CSS is read by the browser.

If you check out Nick_W's recent post about SEO/CSS you might want to move your unique content to below the <body> tag using absolute positioning in your stylesheet since your revamping the site.

I was going to write more but I'm slow, gotta read above first :)

1:53 pm on Dec 10, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 25, 2002
votes: 0

Why CSS? Why SSI?

CSS is a method of appying a wide selection of styling attributes to existing markup. It enables you to standardise your site design and layout quickly and simply plus it also gives you a far greater control over the individual attributes associated with each element.

Finally as CSS allows you to remove styling from individual elements and create common styles (either on a page or across your site) this means that a page may actually end up being a smaller after you move to CSS which is good for your users since smaller pages = fast loading.

Obviously this will depend on how much you use font, colour and layout attributes at the moment.

SSI (Server-Side-Includes) is a method whereby you can build up what the client percieves as a "complete" page out of a variety of common files which get included into pages, also they may allow the use of a programming language to dynamically build a page.

This allows you to build aspects of your site dynamically before they are passed to the client - this means that you can create a wonderfully modular site structure with re-use of common elements while the client sees complete pages which gets you the best of both worlds.

Let me give you an example;

My site was CSS+ASP (think SSI with a programming language) based from the start, a few months ago I dropped it out of frames and had a little redesign (went from a dark green theme to a brighter blue theme).

I started by modifying the common stylesheet to use a new set of colours in place of the old, the real work here was not changing it but deciding if it looked good or not!

Similarly as all the common page elements were based around scripting with the headers and footers being built up by code (which allows them to have a common look & feel while having differing titles, descriptions etc) as so a number of elements needed to be added (or expanded) to make pages work better as pure standalone pages.

Thanks to using SSI & CSS some otherwise complex changes were accomplished in a few hours over a weekend. Changes to a few files replicated themselves across every page on the site - by editing a handful of key files I avoided the need to edit approximately 200 pages with a complex set of changes.

Should CSS and SSI be combined?

As technologies they both attempt to make it easier for you to maintain your website so using them together often makes sense since CSS is of the most use when your site features common aspects which need common styling.

If these aspects are indeed common then it makes sense to have one copy used everywhere rather than have a unique version on every page hence SSI may be a good idea.

Are CSS and/or SSI answers to my problems?

Could you do what you want with a little markup + CSS? Yes, definetely! At its most basic CSS allows you to define background colours, text colours, heights, widths, margins, borders, padding etc.

If I read it right you are really just looking for a simple 3 component banner with no really complex markup which CSS could handle easily - you could use a DIV based design with internal left and right floating DIVs or just apply some styling to a 3 column table.

Whether or not you want to use SSI (or even server-side script) really just comes down to how you want to run your site.

I'm not really all that sure I can help with your navigation question though!

- Tony

2:14 pm on Dec 10, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 23, 2002
votes: 0

Right now: Thanks to all of you.

I'll be back with more questions!